Angular-cli: Error encountered resolving symbol values statically

[shouvikme]

Please provide us with the following information:

OS?

Mac OSX (El Capitan)

Versions.

@angular/cli: 1.0.0-beta.30
node: 7.0.0
os: darwin x64
@angular/common: 2.4.6
@angular/compiler: 2.4.6
@angular/core: 2.4.6
@angular/forms: 2.4.6
@angular/http: 2.4.6
@angular/platform-browser: 2.4.6
@angular/platform-browser-dynamic: 2.4.6
@angular/router: 3.4.6
@angular/cli: 1.0.0-beta.30
@angular/compiler-cli: 2.4.6

Repro steps.

Added a simple Opaque Token and NG-BUILD failed as the PROVIDER

import { OpaqueToken } from '@angular/core';

export const SUMMARRY = new OpaqueToken('summary');
const dictionary = { };

// providers
export const SUMMARY_PROVIDER = 
[
    { provide: SUMMARY, useValue: dictionary },
];

The log given by the failure.

ERROR in Error encountered resolving symbol values statically. Reference to a local (non-exported) symbol 'dictionary'. Consider exporting the symbol (position 14:7 in the original .ts file), resolving symbol SUMMARY_PROVIDERS

Any other information

To workaround this:

1. I put the dictionary inside a single quotes
2. Ran ng-buildand then ng-serve
3. The code failed as it is now a string
4. Went back to code and removed the single quotes
5. Webpack did not complain and the code works fine

[deebloo]

Export dictionary and the error should go away

[shouvikme]

I did try that before posting. It gives another error

Error encountered resolving symbol values statically. Expression form not supported

[deebloo]

@shouvikme can you post the log from that error?

[TheDocX]

@deebloo Hello. We encountered basically the same issue and the only error we get is:

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 16:22 in the original .ts file), resolving symbol WINDOW_PROVIDERS in …

Referenced line 16 is the one w/ exporting abstract class WindowRef in the code below:

import {OpaqueToken} from "@angular/core";

function _window ():any {
    return window;
}

export const WINDOW:OpaqueToken = new OpaqueToken('WindowToken');

export abstract class WindowRef {
    get nativeWindow ():any {
        return {};
    }
}

export class BrowserWindowRef extends WindowRef {
    constructor () {
        super();
    }

    get nativeWindow ():any {
        return _window();
    }
}

export const WINDOW_PROVIDERS = [
    {provide: WindowRef, useClass: BrowserWindowRef},
    {provide: WINDOW, useFactory: _window, deps: []},
];

Hope this helps; thank you in advance for your time.

[deebloo]

@TheDocX can you try exporting _window and see what happens?

export  function _window(): any {
    return window;
}

[TheDocX]

Same error, reference line moved from 16:22 to 17:22

[deebloo]

Hmmm can you create a small repo to reproduce the error?

[TheDocX]

I’ll try.

Edit: So far I found out the error doesn’t show up when the code above is a part of the app. The problem is that the code is actually in another package (the app’s dependency).

Both the app and the package have set:

{
    "module": "es6",
    "moduleResolution": "node",
    "target": "es5"
}

in tsconfig.

Work on the repo is still in progress.

Edit2: Repo is ready to produce errors: https://github.com/TheDocX/angular-cli-opaque

[TheDocX]

@deebloo Is there anything else I can provide to help?

[deebloo]

@TheDocX nope sorry just getting around to looking at issues again. taking a look at the repo now

[deebloo]

Like you said it is working with the local code but failing with the repote repo. still digging a bit

[TheDocX]

@deebloo Okay, thank you so far and please let me know if I can help any further

[filipesilva]

Any error regarding Error encountered resolving symbol values statically. is due to problems in static analysis.

The CLI requires code to be statically analyzable even when not doing AOT builds. We didn't in older versions of the CLI but this has been the case for a while now. My best tip to upgrade is to have a look at https://github.com/rangle/angular-2-aot-sandbox#aot-dos-and-donts.

[TheDocX]

Yeah, it was an issue w/ tsconfig.json

[HamzaJridi]

@TheDocX I'm getting the same issue as yours, can you please tell me how did you resolve it.thanks

[TheDocX]

@HamzaJridi Well, I can’t really tell exactly, but here is our current tsconfig.json:

{
  "compilerOptions": {
    "baseUrl": "",
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "es2016",
      "dom"
    ],
    "mapRoot": "./",
    "module": "es2015",
    "moduleResolution": "node",
    "outDir": "../dist/out-tsc",
    "sourceMap": true,
    "target": "es5",
    "typeRoots": [
      "../node_modules/@types",
      "./typings"
    ]
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

So try to fiddle around with it, hope it helps

[HamzaJridi]

@TheDocX thanks, it seems to be the same as mine but I found the solution in here:
http://stackoverflow.com/questions/41932998/angular-2-error-encountered-resolving-symbol-values-statically

[TheDocX]

I’m glad you solved it

[msterba]

I got the same Error encountered resolving symbol values statically.

MyService {
  constructor(@Inject(ConfigToken) config: {[key: string]: string}) {}
}

// Which was provided as static value in the same module:
{ provide: ConfigToken, useValue: { 'a': 'b' } }

The error disappeared when I removed the type information:

MyService {
  constructor(@Inject(ConfigToken) config: any) {}
}

[omarsourour]

I have the same issue:

Package A has an InjectionToken T defined in it.
Package B depends on Package A. It uses token T in the providers as follows:
{ provide: TokenT, useValue: SampleValue }

I bundle Package A using WebPack. The error is thrown that TokenT is not statically analyzable, and I must use initialized variables or constants. If I define TokenT in PackageB (not from an external package) then the error is resolved. Is there a way to either disable static analyzing or allow InjectionTokens to be used across multiple packages? Any ideas how to solve that issue?

[dmayerdesign]

The solution my team found was to translate our const into a class.

We had an app consuming a package (built by us, installed by the consumer app via a private npm package). The package exported an object like this:

export const constants = {
    SOME_CONST: "foo",
    SOME_OTHER_CONST: "bar"
}

Our app imported that like import { constants } from '@ourcompany/common-package'
Running ng serve produced the error
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, resolving symbol constants

The solution was to instead export the following:

export class Constants {
    public static SOME_CONST = "foo";
    public static SOME_OTHER_CONST = "bar";
}

For some reason, the compiler can't statically analyze an exported const, but has no problem with an exported class.

Hope this helps!

[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._}