Error encountered resolving symbol values statically

[abansal77]

Please provide us with the following information:

OS?

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

Versions.

Please run ng --version. If there's nothing outputted, please run in a Terminal: node --version and paste the result here:
@angular/cli: 1.0.0-beta.32.3 [1.0.0-beta.24]
node: 6.10.0
os: linux x64
@angular/common: 2.4.8
@angular/compiler: 2.4.8
@angular/core: 2.4.8
@angular/flex-layout: 2.0.0-beta.5
@angular/forms: 2.4.8
@angular/http: 2.4.8
@angular/material: 2.0.0-beta.2
@angular/platform-browser: 2.4.8
@angular/platform-browser-dynamic: 2.4.8
@angular/router: 3.4.8
@angular/compiler-cli: 2.4.8
@angular/cli: 1.0.0-beta.32.3

Repro steps.

Was this an app that wasn't created using the CLI? What change did you do on your code? etc.
We did development on Windows/Mac. For production, we chose ubuntu. Fresh machine. Everything installed fresh. When we compile, we get following error

package.json file

{
  "name": "glam",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^2.3.1",
    "@angular/compiler": "^2.3.1",
    "@angular/core": "^2.3.1",
    "@angular/flex-layout": "^2.0.0-beta.1",
    "@angular/forms": "^2.3.1",
    "@angular/http": "^2.3.1",
    "@angular/material": "^2.0.0-beta.2",
    "@angular/platform-browser": "^2.3.1",
    "@angular/platform-browser-dynamic": "^2.3.1",
    "@angular/router": "^3.3.1",
    "@angular2-material/core": "^2.0.0-alpha.8-2",
    "angular-2-local-storage": "^1.0.0",
    "angular2-onsenui": "^1.0.0-rc.4",
    "core-js": "^2.4.1",
    "hammerjs": "^2.0.8",
    "ng2-material": "^0.8.1",
    "ng2-page-scroll": "^4.0.0-beta.2",
    "onsenui": "^2.0.5",
    "primeng": "^1.1.2",
    "rxjs": "^5.0.1",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.7.2"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^2.3.1",
    "@types/jasmine": "2.5.38",
    "@types/node": "^6.0.42",
    "@angular/cli": "1.0.0-beta.32.3",
    "codelyzer": "~2.0.0-beta.1",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "~4.0.13",
    "ts-node": "1.2.1",
    "tslint": "^4.0.2",
    "typescript": "~2.0.3"
  }
}

The log given by the failure.

Normally this include a stack trace and some more information.

ng build
10% building modules 3/3 modules 0 active(node:24869) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see webpack/loader-utils#56
parseQuery() will be replaced with getOptions() in the next major version of loader-utils.
Hash: aadb17976632b415a446
Time: 23846ms
chunk {0} main.bundle.js, main.bundle.js.map (main) 180 kB {2} [initial] [rendered]
chunk {1} styles.bundle.js, styles.bundle.js.map (styles) 194 kB {3} [initial] [rendered]
chunk {2} vendor.bundle.js, vendor.bundle.js.map (vendor) 5.22 MB [initial] [rendered]
chunk {3} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]

ERROR in Error encountered resolving symbol values statically. Calling function 'FlexLayoutModule', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AppModule in /home/glamstudios/mobilesite/src/app/app.module.ts, resolving symbol AppModule in /home/glamstudios/mobilesite/src/app/app.module.ts

Mention any other details that might be useful.

---

Thanks! We'll be in touch soon.

[Meligy]

This is an Angular compiler problem really not CLI problem.

convert any lambda () => something or function function something() {} to use export like:

export function getFlexLayoutModule() {
  return FlexLayoutModule;
}

[krishollenbeck]

@Meligy There seems to be a lot of confusion in regards to the AOT compiler, myself included. I am also running into some of these errors. Is there a guide anywhere on how to use the AOT compiler with angular cli? I see in the Angular guide https://angular.io/docs/ts/latest/cookbook/aot-compiler.html they recommend creating a separate tsconfig, tsconfig-aot.json. If so shouldn't this be a part of @angular/cli when a new project is created?

I have also read in the change log a while back that AOT is default when using --prod flag (which is fine). But I don't think most people will realize this right away, I know I didn't. With that said, is there a way to build --prod with the JIT compiler? This also doesn't appear to be documented anywhere. Or I am just not looking in the right places. Any enlightenment/guidance on this subject would be much appreciated. Thanks,

[krishollenbeck]

Other relevant AOT compiler issues with similar errors:

• Getting 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 #4647
• ng build -prod Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' #4551
• Beta 32 AoT fails on Protractor typings #4865
• Uncaught Error: Cannot find module "./$$_gendir/app/app.module.ngfactory" #4294
• ng build --prod not ignoring .spec.ts in subdirectories  #4673
• --aot build error: ERROR in ./src/main.ts Module not found #4239
• AOT with multiple root module #4624
• ng build --aot fails #4043
• 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 #3707

[deebloo]

you can turn AOT off by saying ng build --prod --aot=false.
I however would not recommend this as the performance gains of AOT are to substantial to ignore.

The goal of AOT in the CLI is to abstract it away so that you don't have to think about it. If you want a better understanding of what the AOT compiler is/does that article you posted should do a good job walking you through the steps. There is no tsconfig.aot.json because the cli is handling all of this for you in memory, behind the scenes.

The docs for the cli are getting a lot of focus so things should improve in that regard.

[krishollenbeck]

@deebloo, Thanks for the response. That at least clears up my confusion about tsconfig-aot.json. I will be looking forward to those updated docs.

[filipesilva]

Heya, errors like Error encountered resolving symbol values statically mean that there has been some problem in statically analyzing your app.

The CLI always runs statical analysis on code to ensure it will run when compiled with AOT. This may cause a lot of static analysis errors to surface when importing your project into the CLI, or upgrading for older versions where we didn't run this kind of analysis.

A good resource on how to to debug these errors is https://github.com/rangle/angular-2-aot-sandbox#aot-dos-and-donts.

Also, the examples shown in https://angular.io/docs/ts/latest/cookbook/aot-compiler.html are not using the CLI so they are very different.

[darincardin]

This is like the 6th different error i have gotten while trying to configure AOT. The angular team should not put out code until it has been properly tested.
My code works absolutely fine with JIT. As soon as AOT comes into the picture, i get a tidal wave of errors.

[Karasuni]

I've been getting stuck on this issue with the error

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 9:15 in the original .ts file)

I don't understand what's going on. Originally my file included

export const testIndexedDBCache = new InjectionToken('testIndexedDBCache');

export let testIndexedDBCacheProvider : Provider = {
  provide: testIndexedDBCache,
  useFactory: () => new IndexedDBCache('test')
  //          ^--- position of error
};

But even when I change the arrow function it still gets stuck on the same position!

export const testIndexedDBCache = new InjectionToken('testIndexedDBCache');

export let testIndexedDBCacheProvider : Provider = {
  provide: testIndexedDBCache,
  useFactory: function() { return new IndexedDBCache('test'); }
  //          ^--- position of error
};

[darincardin]

Karasuni, Angular 2 AOT is broken right now. I wasted over a week trying to update my project to work with AOT. Now I am extremely far behind, and AOT still doesn't work. My advice is to just use the Uglify plugin.

[Yugloocamai]

I have a project that has been ejected to Webpack that seems to build AoT ok, but when I use NGC manually I run into this error. What's the difference?

[craftpip]

I get this error, when i first run build watch, but later when i change a file, it builds fine, :/ strange

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 36:31 in the original .ts file), resolving symbol routes in E:/www/htdoc
s/website/admin-src/src/app/app.routing.ts, resolving symbol AppRoutingModule in E:/www/htdocs/website/admin-src/src/app/app.routing.ts, resolving symbol AppRoutingModule in E:/www/htdocs/website/admin-src/src/app/app.routing.ts, resolving s
ymbol AppRoutingModule in E:/www/htdocs/website/admin-src/src/app/app.routing.ts