angular: AoT Error encountered resolving symbol values statically (when using third party decorators)

I’m submitting a … (check one with “x”)

[X ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

When using MobX with Angular via ng2-mobx (https://github.com/500tech/ng2-mobx), AoT fails to compile components that use any of MobX’s decorators saying:

ERROR in Error encountered resolving symbol values statically. Only initialized variables and constants can be referenced because the value of this variable is needed by the template compiler (position 174:13 in the original .ts file), resolving symbol observable in .../app/node_modules/mobx/lib/mobx.d.ts

Expected behavior

Angular should either disregard variables declared in third party libraries or provide some sort of configuration option to do so. In MobX’s case, Angular should still be able to normally AoT compile the templates, oblivious to the fact that MobX will actually replace the property accesses with getters and setters and wrap the @action annotated methods in transactions. Or would be impossible to do given the transformations that the Angular compiler does?

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

Ubuntu 16.10, VSCode, yarn package manager

  • Angular version: 2.0.X

Angular 2.4.6

  • Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

Compilation problem, so not tested in-browser.

  • Language: [all | TypeScript X.X | ES6/7 | ES5]

Typescript 2.0.10

  • Node (for AoT issues): node --version =

Node 7.3.0 compiled from source

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Reactions: 20
  • Comments: 24 (3 by maintainers)

Most upvoted comments

Updated Angular and dependencies in the reproduction repository to the latest versions and the error is still there:

ERROR in Error encountered resolving symbol values statically. Only initialized variables and constants can be referenced because the value of this variable is needed by the template compiler (position 54:22 in the original .ts file), resolving symbol observable in /Volumes/Work/ng-mobx-aot-bug/node_modules/mobx/lib/api/observable.d.ts, resolving symbol observable in /Volumes/Work/ng-mobx-aot-bug/node_modules/mobx/lib/mobx.d.ts, resolving symbol AppComponent in /Volumes/Work/ng-mobx-aot-bug/src/app/app.component.ts

ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in '/Volumes/Work/ng-mobx-aot-bug/src'
 @ ./src/main.ts 3:0-74
 @ multi ./src/main.ts

@tbosch If you have more prioritized issues maybe you could just explain the root of the problem so I can try to fix it myself?

Hey I found solution you should import action computed and the other functions from mobx-angular and the ng build --prod works like. import {action} from ‘mobx-angular’

@tbosch Here is the reproduction repository: https://github.com/th0r/ng-mobx-aot-bug Just run ng build -aot and you’ll see an error we’re talking about:

ERROR in Error encountered resolving symbol values statically. Only initialized variables and constants can be referenced because the value of this variable is needed by the template compiler (position 175:13 in the original .ts file), resolving symbol observable in /Volumes/Work/ng-mobx-aot-bug/node_modules/mobx/lib/mobx.d.ts, resolving symbol AppComponent in /Volumes/Work/ng-mobx-aot-bug/src/app/app.component.ts

I can confirm that the problem is solved in Angular 9! 🎉🎉🎉

The problem still exists in Angular 8

I’m using the NPM package ts-mixer to apply mixings, but on aot compilations it tails

export const aotHelp: any = 'foo';
@mix(aotHelp)
@Injectable()
export class ImageStoreService extends WithReadCrudMixin<ImageStore, number> {

}
ERROR: ts-mixer/dist/mixins.ts(29,15): Error during template compile of 'mix'
  Only initialized variables and constants can be referenced in decorators because the value of this variable is needed by the template compiler.

Updated Angular and dependencies in the reproduction repository to the latest versions (Angular v5.2.7, Angular CLI v1.7.2) and the error is still there:

ERROR in app/app.component.ts(11,4): Error during template compile of 'AppComponent'
  Only initialized variables and constants can be referenced in decorators because the value of this variable is needed by the template compiler in 'observable'
    'observable' references 'observable'
      'observable' is not initialized at ../mobx/lib/api/observable.ts(54,22)

@chuckjaz @tbosch guys, are there any updates on this issue? Can we expect AoT compiler to support custom decorators in the near future?

This is not restricted to just mobx

I am receiving this now with latest angular 6+

https://github.com/szokodiakos/typegoose/issues/174

any help is greatly appreciated cannot build prod

ng build --aot --prod

Angular CLI: 6.1.1 Node: 8.11.2 OS: win32 x64 Angular: 6.1.0 … animations, common, compiler, compiler-cli, core, forms … http, language-service, platform-browser … platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.7.1 @angular-devkit/build-angular 0.7.1 @angular-devkit/build-optimizer 0.7.1 @angular-devkit/build-webpack 0.7.1 @angular-devkit/core 0.7.1 @angular-devkit/schematics 0.7.1 @angular/cdk 6.4.1 @angular/cli 6.1.1 @angular/flex-layout 6.0.0-beta.16 @angular/material 6.4.1 @ngtools/webpack 6.1.1 @schematics/angular 0.7.1 @schematics/update 0.7.1 rxjs 6.2.2 typescript 2.9.2 webpack 4.9.2

Updated Angular and dependencies in the reproduction repository to the latest versions:

Angular CLI: 6.0.8
Node: 10.4.1
OS: darwin x64
Angular: 6.0.6
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.8
@angular-devkit/build-angular     0.6.8
@angular-devkit/build-optimizer   0.6.8
@angular-devkit/core              0.6.8
@angular-devkit/schematics        0.6.8
@angular/cli                      6.0.8
@ngtools/webpack                  6.0.8
@schematics/angular               0.6.8
@schematics/update                0.6.8
rxjs                              6.2.1
typescript                        2.7.2
webpack                           4.8.3

Error is still there:

$ ng build --aot

ERROR in app/app.component.ts(11,4): Error during template compile of 'AppComponent'
  Only initialized variables and constants can be referenced in decorators because the value of this variable is needed by the template compiler in 'observable'
    'observable' references 'observable'
      'observable' references 'observable'
        'observable' is not initialized at ../mobx/lib/api/observable.ts(39,22)