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

[Oleg1969]

Please provide us with the following information:

OS?

Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?) Mac OSX

Versions.

Please run ng --version. If there's nothing outputted, please run in a Terminal: node --version and paste the result here: cli beta 24

Repro steps.

Was this an app that wasn't created using the CLI? What change did you do on your code? etc.

1. generate new project with cli beta 24
2. npm install angular2-perfect-scrollbar --save
3. import PerfectScrollbarModule.forRoot({suppressScrollX: true})

The log given by the failure.

Normally this include a stack trace and some more information.

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, resolving symbol AppModule in /.../app.module.ts, resolving symbol AppModule in /..../src/app/app.module.ts

Mention any other details that might be useful.

angular version 2.3.1

---

Thanks! We'll be in touch soon.

[eronalves]

Same error using angular-cli 1.0.0-rc.1.

ERROR in Error encountered resolving symbol values statically. Reference to a local (non-exported) symbol 'appRoutes'. Consider exporting the symbol (position 9:7 in the original .ts file), resolving symbol AppRoutingModule in [...]

Is there another issue about this problem? It happens the same error and compiles correctly when I save any file to force the living reload.

[davefedele]

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!

[eronalves]

I will compare my code with the article and change the necessary.

Thanks a lot @davefedele !

[0x1ad2]

@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]

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/

[isaacplmann]

I had the error @tom10271 described with makeDecorator when developing my own library and resolved it thanks to @joidegn's suggestion by moving angular from dependencies to peerDependencies.

[Shavindra]

I get same error as @christianacca when I try to create the build itself. watching is fine. this is due to

// index.ts
export const COMPONENTS_LIST = {
  some_component: mySomeComponent
}

 Object.keys(COMPONENTS_LIST).map((component) => { console.log(component); return COMPONENTS_LIST[component] });

[haisaco]

I just update for Angular4 but it not cancel issue ERROR in Error encountered resolving symbol values statically. Reference to a local (non-exported) symbol 'tenantRoutes'. Consider exporting the symbol (position 16:7 in the original .ts file), resolving symbol routing in I create Lazy loader like this

 path: 't', loadChildren: () => new Promise(resolve => {
            (require as any).ensure([], function (require: any) {
                resolve(require('./tenant/CKW/module')['CKWModule']); 
            })
        })

it can RouterModule.forRoot(tenantRoutes); but use forRoot have issue

[efreethy-revprep]

Building off of @wcxaaa's response, There IS a way to compile successfully on the first run.

It has everything to with how you are transpiling your typescript.

My solution works for the case where you need to publish angular/typescript package to npm.

You should be using ngc (angular typescript compiler) instead of tsc. It functions as a stand in for tsc with all the same options except a specific few. It references a tsconfig-aot.json instead of tsconfig.json Here are the docs for ngc: https://github.com/angular/angular/blob/0e38bf9de0836c8747851e0998aaca827c8d3c77/aio/content/guide/aot-compiler.md

My build script looks like this $ ./node_modules/.bin/ngc --project src/core/tsconfig-aot.json"

Here is my tsconfig-aot.json

{
  "compilerOptions": {
    "module": "es2015",
    "target": "ES5",
    "moduleResolution": "Node",
    "declaration": true,
    "noImplicitAny": true,
    "stripInternal": true,
    "skipLibCheck": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "es2016",
      "dom"
    ],
    "sourceMap": true,
    "outDir": "../../dist",
    "typeRoots": [
      "node_modules/@types"
    ],
    "types" : ["node"]
  },
  "exclude": [
    "**/*.spec.ts"
  ],
  "angularCompilerOptions": {
    "strictMetadataEmit": true,
    "genDir": "../../dist"
  }
}

The important confgurations here are:

• "module": "es2015" (NOT commonJS)
• "genDir": "../../dist" (will write factories and summaries to directory housing the tsconfig-aot if you don't specify otherwise

Now when I npm publish, pull in the module, then ng serve there are no errors!

[haisaco]

I can't build! When I run/node_modules/.bin/ngc --project src/core/tsconfig-aot.json It have issue Error: Error encountered resolving symbol values statically. Reference to a local (non-exported) symbol 'tenantRoutes'. Consider exporting the symbol (position 16:7 in the original .ts file), resolving symbol routing Compilation failed

[efreethy-revprep]

@haisaco If your code isn't properly formatted for ahead of time compilation - you will see errors like this. please see https://medium.com/@isaacplmann/getting-your-angular-2-library-ready-for-aot-90d1347bcad blog post to prepare you logic for aot.

looks like you need to export the variable tenantRoutes on its declaration

it may need to look something like thisexport_ const tenantRoutes: Routes = [ ... ]

[haisaco]

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

[GHakopian]

+1

for angular2-auth

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

[ankeknicker]

I got the same issue at angular-router (app-routing.module) using

@angular/cli: local (v1.0.0) node: 7.4.0 os: darwin x64 @angular/animations: 4.0.3 @angular/common: 4.0.3 @angular/compiler: 4.0.3 @angular/core: 4.0.3 @angular/forms: 4.0.3 @angular/http: 4.0.3 @angular/material: 2.0.0-beta.1 @angular/platform-browser: 4.0.3 @angular/platform-browser-dynamic: 4.0.3 @angular/router: 4.0.3 @angular/cli: 1.0.0 @angular/compiler-cli: 4.0.3

error: ERROR in Error encountered resolving symbol values statically. Reference to a local (non-exported) symbol 'routes'.

this error occurs, when I use variables from routing-params.ts inside my app-routing module:

  { component: CatListComponent, path: ''},
  { component: CatListComponent, path: 'cats' },
  { component: CatListComponent, path: `cats/:${ids.cats}` },
  { component: CatDetailComponent, path: `cats/:${ids.cats}/categ1/:${ids.categ1}` },
];```

if I change to the parameters directly which are available under `ids`, the error is gone:

```const routes: Routes = [
  { component: CatListComponent, path: ''},
  { component: CatListComponent, path: 'cats' },
  { component: CatListComponent, path: `cats/:catsUid` },
  { component: CatDetailComponent, path: `cats/:catsUid/categ1/:categ1Uid` },
];`

[ajcrites]

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.

[jeradg]

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.

[annaimaha]

Please update to latest version of angular2-perfect-scrollbar #2.0.6

I had the same issue after upgrade to 2.0.6 , Its working for me

https://www.npmjs.com/package/angular2-perfect-scrollbar

[tomaszczechowski]

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!

[anchorHanme]

I'm was getting this error on ubuntu14 but it's ok on ubuntu16 i'think my enviroment is broken. so i full install it....

[achieverprince]

Same error in @angular/cli: 1.0.1

[borislemke]

Error still happens in cli version 1.1.0. As others have said, when serving, the first time it will throw an error, but changing a file will make it work for consequent builds. This obviously breaks building your project with aot or prod flag on.

[metodribic]

Since this issue was opened and closed several times in the past I think this error is not a bug in the CLI, but for sake of simplicity and debugging it could provide some more information so you would have at least some information where exactly the error occurs (and potentially how to resolve it).

[YasirSherzad]

I am building Ionic3 app, I am having this error as in @jeradg error when I try to build/run the app.. I think it because I imported the angular SDK and used some of it's services that are built for the web application (using loopBack)...the folder for the mobile app is also added in the web app. I tried naming the outer node_module for the web app but still didn't work...Im not sure where is the problem.. any suggestion would be helpful ! thanx

[karthiks3000]

@tomaszczechowski Thanks! your solution worked for me!!

[giorgiofellipe]

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

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

[PriNcee11]

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]
    }

[metodribic]

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

[tejasrivastav]

still facing the same issue Error encountered resolving symbol values statically. Calling function 'getStates', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AppModule

./router.ts
export function getStates(){
    let states = [];
    let loginState: Ng2StateDeclaration = {
        name: States.Login,
        url: '/login?redirectTo',
        component: LoginComponent,
        data: {
            title: "Login"
        }
    }
    states.push(loginState);
    return states;
}

import { getStates } from './router';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule,
    UIRouterModule.forRoot({ states: getStates() , useHash: false })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

[sgentile]

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

[ScallyGames]

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.

[eronalves]

@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',
          },
// [...]

[rozzs74]

I get this error because I building the ready to AOT the problem is that AOT doesn't support arrow functions. For more info please check it here https://github.com/rangle/angular-2-aot-sandbox#current-status

[emanuelvircaimprezzio]

Had the same problem and @eronalves answer solved it.

[di3orlive]

have same problem

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 Injectable in D:/PROJECTS/O4P/node_modules/ng2-socket-
io/node_modules/@angular/core/src/di/metadata.d.ts, resolving symbol OpaqueToken in 
D:/PROJECTS/O4P/node_modules/ng2-socket-io/node_modules/@angular/core/src/di/opaque_token.d.ts, 
resolving symbol OpaqueToken in D:/PROJECTS/O4P/node_modules/ng2-socket-
io/node_modules/@angular/core/src/di/opaque_token.d.ts

ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in 'D:\PROJECTS\O4P\src'
@ ./src/main.ts 5:0-74
@ multi ./src/main.ts

[maxruby]

Related AOT build issue here:

ERROR in Error encountered resolving symbol values statically. Calling function 'NoOpAnim
ationDriver', function calls are not supported. Consider replacing the function or lambda
with a reference to an exported function, resolving symbol AnimationDriver.NOOP in /User
s/maximilianosuster/Development/angular-agentsection/node_modules/@angular/platform-brows
er/src/dom/animation_driver.d.ts, resolving symbol BrowserTestingModule in /Users/maximil
ianosuster/Development/angular-agentsection/node_modules/@angular/platform-browser/testin
g/browser.d.ts, resolving symbol BrowserTestingModule in /Users/maximilianosuster/Develop
ment/angular-agentsection/node_modules/@angular/platform-browser/testing/browser.d.ts

ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in '/Users/
maximilianosuster/Development/angular-agentsection/src'
 @ ./src/main.ts 4:0-74
 @ multi ./src/main.ts
➜  angular-agentsection git:(109-renable-unit-tests) ✗

I have seen reports on issues with AOT and NoOpAnimationDriver but previously proposed solutions do not work for me. Anyone has any idea where this error originates?

[x1unix]

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

[AABRHALEY]

ERROR in Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function (position 69:19 in the original .ts file), resolving symbol AppModule in app.module.ts

[AABRHALEY]

Can any one help me to fix this problem in my code??? this is the error message;

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

[metodribic]

@Abrhaley1 you should provide at least some of the corresponding code so we can suggest you modifications. Also I'm sure if you check some of the previous suggestions and solutions in this thread you will find some guidelines and solutions that might solve your problem.

[SarraMrbt]

it woooooooooorks ^^ just I add "paths": { "@angular/": ["../node_modules/@angular/"] } in tsconfig and bilth with ng build --prod --aot=false hhh I'm happy <3

[umagon]

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.

[metodribic]

This issue should be locked for any further discussion because we figure it out, that the issue is current limitations of AOT and that we should follow the guidelines in order to make code AOT compatible. There is bunch of good articles/solutions mentioned in this thread so listing the known solutions on and on is not productive and does not help anyone.

cc: @Oleg1969

[umagon]

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

[metodribic]

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...

[mattsse]

Got the same issue by using 'angular2-notifications' issue. Strangely Webstorm auto imported this package as from 'angular2-notifications/dist' I got it solved by setting it it manually to from 'angular2-notifications'

[shairez]

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

[kimamula]

I tried to define routes like the following and came across this error.

export const routes: Routes = ['open', 'closed', 'processing', 'done']
  .map(status => ({ path: `${status}/list`, component: ListComponent, data: { status } }));

The following code also raised the same error.

export const routes: Routes = ['open', 'closed', 'processing', 'done']
  .map(function(status: string) {
    return { path: `${status}/list`, component: ListComponent, data: { status } };
  });

I also tried the following code, which results in a different error: ERROR in Cannot read property 'loadChildren' of null.

export function createRoute(status: string) {
  return { path: `${status}/list`, component: ListComponent, data: { status } };
}
export const routes: Routes = ['open', 'closed', 'processing', 'done'].map(createRoute);

I ended up using the following code, which works but is disappointing...

export const routes: Routes = [
  { path: 'open/list', component: ListComponent, data: { status: 'open' } },
  { path: 'closed/list', component: ListComponent, data: { status: 'closed' } },
  { path: 'processing/list', component: ListComponent, data: { status: 'processing' } },
  { path: 'done/list', component: ListComponent, data: { status: 'done' }},
];

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}