angular-cli: ERROR in Error encountered resolving symbol values statically. Calling function 'PerfectScrollbarModule', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function

please provide a link to your clear guidelines about publishing compatible library, I’m trying to make one and I’d like it to be compatible.

what’s exactly happening here?

We are working in the future to show a warning for those. I also think it shouldn’t be an error, but there are cases where an error can happen because of these libraries (routing for example) and these libraries are not AOT-compatible (at all!).

We have clear guidelines for libraries that include generating those files and what to publish to NPM. If libraries don’t follow those guidelines we can’t guarantee that they’ll be compatible.

And yes, we have report of these a lot, and when I tell the relation team they are actually efficient in dealing with those. So there’s hope.

I’m using @angular/cli beta30, and I have the same issue with ngx-translate. Similar error appears at the first time running ng serve, but compilation is successful after I just press Ctrl + S to a file again without changing anything, even so the translation works fine. Could be a bug of @angular/cli?

@christianacca I’ve tried your app and I found something curious. Once you execute ng serve compilation it will fail, but if you do ctrol+s in any of your files, recompilation will trigger again and, boom, it will work. Why is this happening?? Honestly, I don’t have any clue yet. We’ll have to dig into it.

This issue should not be closed as the error continues

I solved it by replace the anonymous (lambda) method to explicitly method: providers: [ TranslateService, { provide: TranslateLoader, useFactory: translateLoader, deps: [Http] } ] and following method: export function translateLoader(http: Http) { return new TranslateStaticLoader(http, 'assets/i18n', '.json');

instead of: TranslateModule.forRoot({ provide: TranslateLoader, useFactory: (http: Http) => new TranslateStaticLoader(http, '/assets/i18n', '.json'), deps: [Http] })

This error is super strange. I have error upon ng serve in app.module.ts and after I make minor change (e.g. add whitespace or new line) compiler compiles the code successfully. Even if I revert the change the error is still gone…

version: 1.0.0-rc.1

Same issue trying to use angular2-jwt (Json web tokens)

import { AUTH_PROVIDERS } from ‘angular2-jwt’;

Simply resolved by creating a factory like below one (my use case is to have custom HTTP provider hence adjust below code to your needs)

http.factory.ts

import { XHRBackend, RequestOptions } from '@angular/http';
import { CookieService } from 'ng2-cookies';

import { HttpService } from './http.service';

export function HttpFactory(backend: XHRBackend, options: RequestOptions) {
  return new HttpService(backend, options);
}

app.module.ts

(...)
providers:
 [
    {
      provide: HttpService,
      useFactory: HttpFactory,
      deps: [ XHRBackend, RequestOptions ]
    }
 ]
(...)

package.json

(...)
"dependencies": {
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.1.0",
    "zone.js": "^0.8.4"
 },
(...)

Hope it will help someone!

Same here too! A problem with angular2-jwt

angular2-perfect-scrollbar is just one example , the are plenty modules like that. What you saying all of them will not be compatible with Angular CLI? What that means to us? We can not upgrade because of 3rd party modules simply will stop working. That is kind of odd path. Where would I find information about “publishing metadata” in context with CLI compatibility?

I was getting this error when trying to consume a component library that I’m developing locally in an Angular app that I’m also developing locally.

I was using npm link to create a symlink from the app to the component library. I had successfully compiled the library for AOT and was testing it out in the app. I got an error running ng build in the app with a stacktrace that started with:

ERROR in Error encountered resolving symbol values statically. Calling 
function 'ɵmakeDecorator', function calls are not supported. Consider 
replacing the function or lambda with a reference to an exported function, 
resolving symbol NgModule in /my-angular-app/node_modules/my-
component/node_modules/@angular/core/core.d.ts ...

It turns out that the problem wasn’t with my code. The issue is that the symlinked library contained its own node_modules directory. angular-cli was getting confused between the node_modules in the library (which theoretically shouldn’t be present in an AOT-compiled library) and the node_modules in the host app.

I changed the name of node_modules in the library to NOT_node_modules and the app compiled perfectly.

I have the same problem, and when it re-compiles it goes away. How could this issue be closes ?

@NgModule({
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: test2,
      deps: [MainConfigService],
      multi: true
    },
  ],...

export function test2(mainConfigService: MainConfigService) {
  return function test() {
    return mainConfigService.loadConf()
  }
}

+1

Error: Error encountered resolving symbol values statically. Calling function 'makeDecorator', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol Injectable in /Users/pathetic-dev/Sites/my-app/public-html/jspm_packages/npm/@angular/core@2.4.3/src/di/metadata.d.ts, resolving symbol OpaqueToken in /Users/pathetic-dev/Sites/my-app/public-html/jspm_packages/npm/@angular/core@2.4.3/src/di/opaque_token.d.ts, resolving symbol OpaqueToken in /Users/pathetic-dev/Sites/my-app/public-html/jspm_packages/npm/@angular/core@2.4.3/src/di/opaque_token.d.ts
    at simplifyInContext (/Users/pathetic-dev/Sites/my-app/node_modules/@angular/compiler/bundles/compiler.umd.js:25569:27)
    at StaticReflector.simplify (/Users/pathetic-dev/Sites/my-app/node_modules/@angular/compiler/bundles/compiler.umd.js:25581:17)
    at StaticReflector.annotations (/Users/pathetic-dev/Sites/my-app/node_modules/@angular/compiler/bundles/compiler.umd.js:25077:64)
    at NgModuleResolver.resolve (/Users/pathetic-dev/Sites/my-app/node_modules/@angular/compiler/bundles/compiler.umd.js:17557:86)
    at CompileMetadataResolver.getNgModuleMetadata (/Users/pathetic-dev/Sites/my-app/node_modules/@angular/compiler/bundles/compiler.umd.js:18058:64)
    at addNgModule (/Users/pathetic-dev/Sites/my-app/node_modules/@angular/compiler/bundles/compiler.umd.js:24839:62)
    at /Users/pathetic-dev/Sites/my-app/node_modules/@angular/compiler/bundles/compiler.umd.js:24850:18
    at Array.forEach (native)
    at _createNgModules (/Users/pathetic-dev/Sites/my-app/node_modules/@angular/compiler/bundles/compiler.umd.js:24849:30)
    at analyzeNgModules (/Users/pathetic-dev/Sites/my-app/node_modules/@angular/compiler/bundles/compiler.umd.js:24724:18)
Compilation failed

I start using ng2-cli but why official Angular 2 core library will trigger this error? Very frustrated for switching to AoT after over 1 day of trying…

I am getting the same error, i tried to fix it by converting into an export function: Problem: {provide: APP_INITIALIZER, useFactory: (config: AppConfig) => () => config.load(), deps: [AppConfig], multi: true }, Step1: export function textFunction(config: AppConfig): any { () => { config.load() } }

{provide: APP_INITIALIZER, useFactory: textFunction, deps: [AppConfig], multi: true },

Error: AppInits[i] is not a function

Step2: export function textFunction(config: AppConfig) { return config.load(); } {provide: APP_INITIALIZER, useFactory: textFunction, deps: [AppConfig], multi: true },

Error: AppInits[i] is not a function

When i convert into an export function compiler error gets disappeared but the app breaks with appInits[i] is not a function. Can you please guide me how to convert appIntializer useFactory to an export method.

I have same issue. in beta.22 all work fine. but when I upgrade to beta.24 I got the following error: ERROR in Error encountered resolving symbol values statically. Calling function 'SharedModule', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AppModule in ../src/app/app.module.ts, resolving symbol AppModule in ../src/app/app.module.ts

I’m was also getting this error when trying to create ngrx reducers using a function call:

export const reducer = createReducer();

Since reducers are just functions that pass in state/action, you can still export a function that wraps this constant:

const reducerFn = createReducer();
export function reducer(state, action) {
  return reducerFn(state, action);
}

Adds some verbosity, but at least it works with AoT.

Fixed by deleting @angular folder at internal node_modules directory of a problematic module (ng2-color-picker in my case).

I had the same issue @tom10271. I think your problem is different than op’s. Please check if you have a node_modules folder in ./src folder and if so remove it.

This article also goes into some detail on the sometimes frustrating interactions between ngrx/store. ngrx/effects, and AOT:

http://orizens.com/wp/topics/guidelines-for-developing-with-angular-ngrxstore-ngrxeffects-aot/

Check out this article as it helps clear up some of the confusion with regard to getting your code ready for AOT. Unfortunately it’s a necessary evil so the AOT compiler can do it’s job and as many are facing, libraries will need to be updated for full support.

Making your Angular 2 library statically analyzable for AoT

Additionally, AOT is on by default, so you can always set the flag --aot false when running ng build if you don’t care about it and/or will refactor for AOT support at a later time.

Fun fact, you’ll also get errors if you include a component/pipe/directive that isn’t part of a module. github issue. Not exactly an assumed behavior but I’m told an expected one.

Good Luck!

please provide a link to your clear guidelines about publishing compatible library, I’m trying to make one and I’d like it to be compatible.

@loicsalou I just came across your comment. You can refer to this guide https://medium.com/@cyrilletuzi/how-to-build-and-publish-an-angular-module-7ad19c0b4464#.9y88ipdk7 on how to make a working module.

I have the same issue with:

angular-cli: 1.0.0-beta.24
node: 7.0.0
os: linux x64
@angular/common: 2.4.2
@angular/compiler: 2.4.2
@angular/core: 2.4.2
@angular/forms: 2.4.2
@angular/http: 2.4.2
@angular/platform-browser: 2.4.2
@angular/platform-browser-dynamic: 2.4.2
@angular/router: 3.4.2
@angular/compiler-cli: 2.4.2

Error:

client?93b6:80Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function (position 12:42 in the original .ts file), resolving symbol compose in /data/2017/search-project/node_modules/@ngrx/core/compose.d.ts, resolving symbol appStore in /data/2017/search-project/src/app/main/app.store.ts, resolving symbol appStore in /data/2017/search-project/src/app/main/app.store.ts, resolving symbol appStore in /data/2017/search-project/src/app/main/app.store.ts, resolving symbol AppModule in /data/2017/search-project/src/app/main/app.module.ts, resolving symbol AppModule in /data/2017/search-project/src/app/main/app.module.ts, resolving symbol AppModule in /data/2017/search-project/src/app/main/app.module.ts

Also getting this error, upgrading typescript seems to resolve it (although it might create other errors 😕)

This issue reappeared in version rc0. In a completely new project.

ERROR in Error encountered resolving symbol values statically. Calling function 'makeDecorator', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol NgModule in E:/DocCenter/va_WorkStation_Benben/vaSites/upgrade-project/node_modules/@angular/platform-browser/node_modules/@angular/core/src/metadata/ng_module.d.ts, resolving symbol NgModule in E:/DocCenter/va_WorkStation_Benben/vaSites/upgrade-project/node_modules/@angular/platform-brows er/node_modules/@angular/core/src/metadata.d.ts, resolving symbol NgModule in E:/DocCenter/va_WorkStation_Benben/vaSites/upgrade-project/node_modules/@angular/platform-browse r/node_modules/@angular/core/src/core.d.ts, resolving symbol NgModule in E:/DocCenter/va_WorkStation_Benben/vaSites/upgrade-project/node_modules/@angular/platform-browser/node_modules/@angular/core/index.d.ts, resolving symbol BrowserModule in E:/DocCenter/va_W orkStation_Benben/vaSites/upgrade-project/node_modules/@angular/platform-browser/src/browser.d.ts, resolving symbol BrowserModule in E:/DocCenter/va_WorkStation_Benben/vaSites/upgrade-project/node_modules/@angular/platform-browser/src/browser.d.ts

Removing the .forRoot() on FlexLayoutModule fixed the problem

Had an issue with declaring a variable inside of a custom forRoot function I’ve created

Turned that variable into an exported const, and it solved the issue… for some reason, it doesn’t like variable declared inside of the forRoot functions.

It also happens with console.log and other non exported function calls according to #17663

Sorry I ment Angular CLI instead of AOT. But actually all of this problems are related to AOT somehow, since AOT compatible code resolves the issue…

@metodribic Why do I have this problem when using ng serve if it’s a problem with AoT?

@Aides359 It’s better to use this approach for dynamic loading modules with AOT: Lazy loading module

// [...]

export const routes: any = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
    {
       [
          {
             path: 'dashboard',
             loadChildren: 'YOUR_PATH/dashboard.module#DashboardModule',
          },
// [...]

Having the same problem the first time I make a ng serve, then I save a component and all is OK, ¿why?

ERROR in Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the functi
on or lambda with a reference to an exported function (position 109:9 in the original .ts file), resolving symbol AppModule in
 C:/Users/ivan/src/app/app.module.ts
webpack: Failed to compile.

And my app.module.ts pos 109 is: (backend: XHRBackend, defaultOptions: RequestOptions, router:Router) => { of the providers:

     {
      provide: Http,
      useFactory:
        (backend: XHRBackend, defaultOptions: RequestOptions, router:Router) => {
        return new AuthenticationBackendService(backend, defaultOptions, router);
      },
      deps: [XHRBackend, RequestOptions, Router]
    }

Specifying paths to @angular inside AngularCLI’s tsconfig.json solved for me.

“paths”: { “@angular/*“: [“../node_modules/@angular/*“] }

I tried but it not working! How about I can set properly formatted for ahead of time compilation? I did read https://medium.com/@isaacplmann/getting-your-angular-2-library-ready-for-aot-90d1347bcad but I understant, what is metadata.json, ngFactory.ts? I see only I use forRoot() it have issue

I have the same issue when creating translation files using ng-xi18n

Error: Error encountered resolving symbol values statically. Calling function ‘NoOpAnimationDriver’, function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AnimationDriver.NOOP in,…

I get the same error with angular2-cool-storage Linux x64 npm@3.5.2 typescript@2.1.5 angular-cli@1.0.0-beta.26 angular2-cool-storage@1.2.2 Unfortunately, I see no lambda in imports statement:

import { CoolStorageModule } from 'angular2-cool-storage'; @NgModule({ imports: [CoolStorageModule], }) export class CoreModule {} results in: ERROR in Error encountered resolving symbol values statically. Calling function 'makeDecorator', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function,...

What I did to fix this issue was not using lambda in the function I was passing as parameter for useFactory. I used function(){ return new Config() } instead of () => new Config() and it worked.

I had this error (also disappearing after triggering recompile) with

// [...]
export const routes: any = [
   { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
   {
      [
         {
            path: 'dashboard',
            loadChildren: () => DashboardModule,
         },
// [...]

and was able to resolve it by changing it to

// [...]
export function getDashboardModule() { return DashboardModule };
export const routes: any = [
   { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
   {
      [
         {
            path: 'dashboard',
            loadChildren: getDashboardModule,
         },
// [...]

However this seems to be more of a workaround than a proper solution.

I get this error when attempting to npm link to a local module control library

@PriNcee11 try to remove the arrow function with export function. Read the AOT guidelines in this article.

@tomaszczechowski Thanks! your solution worked for me!!

Same error in @angular/cli: 1.0.1

+1

for angular2-auth

on imports: [ … AuthModule.forRoot(), … ],

@davefedele my project is quite big, got a few people working on it. Is there a way to check this automatically or semi-automatically?

@jmcmichael I dealt with basically the same thing yesterday and was able to resolve it, see my comment here: https://github.com/ngrx/store/issues/348#issuecomment-285496328

In short, I created a service that adds the reducers to the store after the module compiles.

I’m getting this error with ngrx’s combineReducers function. An initial compile throws ‘Error encountered resolving symbol values statically. Calling function ‘combineReducers’, function calls are not supported.’

Prompting a recompile by updating a watched .ts file fires off a build that then succeeds w/o error.

Changing function reducer as the message suggests works for me, though it’s a weird error:

It was not working: export const SearchResultReducer = (state: SearchResultState = INITIAL_SEARCH_RESULT_STATE, action: Action): SearchResultState => { ...};

This is working: export function SearchResultReducer(state = INITIAL_SEARCH_RESULT_STATE, action: Action): SearchResultState { ... }

I have the same problem with the FlexLayoutModule. Can’t live with it and can’t live without it.