Angular-cli: in 1.0.0-beta.24 getting ERROR in Error encountered resolving symbol values statically

[born2net]

OS?

Windows 10 64

Versions.

latest ng 2.4.1 and cli 1.0.0-beta.24

Repro steps.

Angular 2 Kitchen sink: http://ng2.javascriptninja.io
and source@ https://github.com/born2net/Angular-kitchen-sink

ERROR in Error encountered resolving symbol values statically. Calling function 'MsLibModule', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AppModule in C:/msweb/Angular-kitchen-sink/src/app/app.module.ts, resolving symbol AppModule in C:/msweb/Angular-kitchen-sink/src/app/app.module.ts
webpack: bundle is now VALID.

I am loading a module with forRoot as in:

    imports: [
      ...
        MsLibModule.forRoot(),
      ...
    ],

which doens't do much,

export class MsLibModule {
    static forRoot(): ModuleWithProviders {
        return {
            ngModule: MsLibModule,
            providers: []
        };
    }
}

as you can see no lambada needed...
and still getting the error of:

ERROR in Error encountered resolving symbol values statically. Calling function 'MsLibModule', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AppModule in C:/msweb/Angular-kitchen-sink/src/app/app.module.ts, resolving symbol AppModule in C:/msweb/Angular-kitchen-sink/src/app/app.module.ts

regards

Sean

[Oleg1969]

I have same error as well. cli beta 24. angular 2.3.1

[hansl]

@born2net Could you try the following in your command line and share the output here?

First, change your tsconfig.json to include "files": ["main"]. This key should be at the root object (NOT inside compilerOptions).

Then run node_modules/.bin/ngc -p ./src/tsconfig.json and share the output of that command. Cheers!

[born2net]

sure, added to tsconfig and ran command, results:

root@DESKTOP-VEUHFOL /cygdrive/c/msweb/studioDashboard
$ node_modules/.bin/ngc -p ./src/tsconfig.json
Error: 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 7:12 in the original .ts file), resolving symbol Ng2BootstrapConfig.theme in C:/msweb/studioDashboard/node_modules/ng2-bootstrap/components/ng2-bootstrap-config.d.ts, resolving symbol TypeaheadContainerComponent in C:/msweb/studioDashboard/node_modules/ng2-bootstrap/components/typeahead/typeahead-container.component.d.ts, resolving symbol TypeaheadContainerComponent in C:/msweb/studioDashboard/node_modules/ng2-bootstrap/components/typeahead/typeahead-container.component.d.ts
    at positionalError (C:\msweb\studioDashboard\node_modules\@angular\compiler\bundles\compiler.umd.js:25874:37)
    at simplifyInContext (C:\msweb\studioDashboard\node_modules\@angular\compiler\bundles\compiler.umd.js:25711:29)
    at StaticReflector.simplify (C:\msweb\studioDashboard\node_modules\@angular\compiler\bundles\compiler.umd.js:25725:15)
    at StaticReflector.annotations (C:\msweb\studioDashboard\node_modules\@angular\compiler\bundles\compiler.umd.js:25223:62)
    at NgModuleResolver.resolve (C:\msweb\studioDashboard\node_modules\@angular\compiler\bundles\compiler.umd.js:17583:84)
    at CompileMetadataResolver.getNgModuleMetadata (C:\msweb\studioDashboard\node_modules\@angular\compiler\bundles\compiler.umd.js:18091:62)
    at addNgModule (C:\msweb\studioDashboard\node_modules\@angular\compiler\bundles\compiler.umd.js:24985:60)
    at C:\msweb\studioDashboard\node_modules\@angular\compiler\bundles\compiler.umd.js:24996:16
    at Array.forEach (native)
    at _createNgModules (C:\msweb\studioDashboard\node_modules\@angular\compiler\bundles\compiler.umd.js:24995:28)
Compilation failed

root@DESKTOP-VEUHFOL /cygdrive/c/msweb/studioDashboard

[hansl]

According to this: https://github.com/valor-software/ng2-bootstrap/issues/1383 you need the latest version of ng2-bootstrap which should work. What version do you have?

[born2net]

I was on 1.1.16 and now updated to 1.1.16-9
results now:

root@DESKTOP-VEUHFOL /cygdrive/c/msweb/studioDashboard
$ node_modules/.bin/ngc -p ./src/tsconfig.json
Error: 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 7:12 in the original .ts file), resolving symbol Ng2BootstrapConfig.theme in C:/msweb/studioDashboard/node_modules/ng2-bootstrap/components/ng2-bootstrap-config.d.ts, resolving symbol TypeaheadContainerComponent in C:/msweb/studioDashboard/node_modules/ng2-bootstrap/components/typeahead/typeahead-container.component.d.ts, resolving symbol TypeaheadContainerComponent in C:/msweb/studioDashboard/node_modules/ng2-bootstrap/components/typeahead/typeahead-container.component.d.ts
    at positionalError (C:\msweb\studioDashboard\node_modules\@angular\compiler\bundles\compiler.umd.js:25874:37)
    at simplifyInContext (C:\msweb\studioDashboard\node_modules\@angular\compiler\bundles\compiler.umd.js:25711:29)
    at StaticReflector.simplify (C:\msweb\studioDashboard\node_modules\@angular\compiler\bundles\compiler.umd.js:25725:15)
    at StaticReflector.annotations (C:\msweb\studioDashboard\node_modules\@angular\compiler\bundles\compiler.umd.js:25223:62)
    at NgModuleResolver.resolve (C:\msweb\studioDashboard\node_modules\@angular\compiler\bundles\compiler.umd.js:17583:84)
    at CompileMetadataResolver.getNgModuleMetadata (C:\msweb\studioDashboard\node_modules\@angular\compiler\bundles\compiler.umd.js:18091:62)
    at addNgModule (C:\msweb\studioDashboard\node_modules\@angular\compiler\bundles\compiler.umd.js:24985:60)
    at C:\msweb\studioDashboard\node_modules\@angular\compiler\bundles\compiler.umd.js:24996:16
    at Array.forEach (native)
    at _createNgModules (C:\msweb\studioDashboard\node_modules\@angular\compiler\bundles\compiler.umd.js:24995:28)
Compilation failed

root@DESKTOP-VEUHFOL /cygdrive/c/msweb/studioDashboard

the thing is, is that even if I remove the Toast module, it will just complain on the next module.withRoot one that is used...

and running normally with ng serve --port 4203 --aot false

$ ng serve --port 4203 --aot false
** NG Live Development Server is running on http://localhost:4203. **
Hash: de9d12efd23d53026138
Time: 33637ms
chunk    {0} main.bundle.js, main.bundle.map (main) 899 kB {3} [initial] [rendered]
chunk    {1} styles.bundle.css, styles.bundle.map, styles.bundle.map (styles) 324 kB {4} [initial] [rendered]
chunk    {2} scripts.bundle.js, scripts.bundle.map (scripts) 232 kB {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.map (vendor) 6 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.map (inline) 0 bytes [entry] [rendered]

ERROR in Error encountered resolving symbol values statically. Calling function 'ToastOptions', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AppModule in C:/msweb/studioDashboard/src/app/app.module.ts, resolving symbol AppModule in C:/msweb/studioDashboard/src/app/app.module.ts, resolving symbol AppModule in C:/msweb/studioDashboard/src/app/app.module.ts

ERROR in ./src/app/app.component.ts
Module build failed: Error: C:/msweb/studioDashboard/src/app/app.component.ts (13,30): Cannot find module '../../package.json'.)
C:/msweb/studioDashboard/src/app/app.component.ts (69,17): Cannot find name 'platform'.)
C:/msweb/studioDashboard/src/app/app.component.ts (71,26): Cannot find name 'platform'.)
    at _checkDiagnostics (C:\msweb\studioDashboard\node_modules\@ngtools\webpack\src\loader.js:116:15)
    at C:\msweb\studioDashboard\node_modules\@ngtools\webpack\src\loader.js:141:17
 @ ./src/app/app.module.ts 16:0-47
 @ ./src/main.ts
 @ multi main

ERROR in ./src/appdb/AppdbAction.ts
Module build failed: Error: C:/msweb/studioDashboard/src/appdb/AppdbAction.ts (15,25): Cannot find module 'xml2js'.)
    at _checkDiagnostics (C:\msweb\studioDashboard\node_modules\@ngtools\webpack\src\loader.js:116:15)
    at C:\msweb\studioDashboard\node_modules\@ngtools\webpack\src\loader.js:141:17
 @ ./src/app/app.module.ts 121:0-51
 @ ./src/main.ts
 @ multi main

[born2net]

and if I remove the tsconifg [main] results are:

$ ng serve --port 4203 --aot false
** NG Live Development Server is running on http://localhost:4203. **
Hash: e06f8e139ad20e2967b6
Time: 38072ms
chunk    {0} main.bundle.js, main.bundle.map (main) 1.16 MB {3} [initial] [rendered]
chunk    {1} styles.bundle.css, styles.bundle.map, styles.bundle.map (styles) 324 kB {4} [initial] [rendered]
chunk    {2} scripts.bundle.js, scripts.bundle.map (scripts) 232 kB {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.map (vendor) 6.34 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.map (inline) 0 bytes [entry] [rendered]

ERROR in Error encountered resolving symbol values statically. Calling function 'ToastOptions', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AppModule in C:/msweb/studioDashboard/src/app/app.module.ts, resolving symbol AppModule in C:/msweb/studioDashboard/src/app/app.module.ts, resolving symbol AppModule in C:/msweb/studioDashboard/src/app/app.module.ts

[born2net]

I changed my toast to this which now works

 ToastModule.forRoot({
            animate: 'flyRight',
            positionClass: 'toast-bottom-right',
            toastLife: 5000,
            showCloseButton: true,
            maxShown: 5,
            newestOnTop: true,
            enableHTML: true,
            dismiss: 'auto',
            messageClass: "",
            titleClass: ""
        }),

but of course now its complaining about the next one forRoot:

root@DESKTOP-VEUHFOL /cygdrive/c/msweb/studioDashboard
$ ng serve --port 4203 --aot false
** NG Live Development Server is running on http://localhost:4203. **
Hash: 90b478a81f05fd0c7a65
Time: 38885ms
chunk    {0} main.bundle.js, main.bundle.map (main) 1.16 MB {3} [initial] [rendered]
chunk    {1} styles.bundle.css, styles.bundle.map, styles.bundle.map (styles) 324 kB {4} [initial] [rendered]
chunk    {2} scripts.bundle.js, scripts.bundle.map (scripts) 232 kB {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.map (vendor) 6.34 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.map (inline) 0 bytes [entry] [rendered]

ERROR in Error encountered resolving symbol values statically. Calling function 'MsLibModule', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AppModule in C:/msweb/studioDashboard/src/app/app.module.ts, resolving symbol AppModule in C:/msweb/studioDashboard/src/app/app.module.ts
webpack: bundle is now VALID.

and MsLibModule is super simple:

import {
    NgModule,
    ModuleWithProviders
} from "@angular/core";
import {
} from "@angular/forms";
import {MyNgComp} from "./myng-component";
import {StringJSPipe} from "./pipes/stringjs.pipe";

export const MSLIB_DIRECTIVES: Array<any> = [MyNgComp, StringJSPipe];

@NgModule({
    imports: [],
    declarations: MSLIB_DIRECTIVES,
    exports: MSLIB_DIRECTIVES
})

export class MsLibModule {
    static forRoot(): ModuleWithProviders {
        return {
            ngModule: MsLibModule,
            providers: []
        };
    }
}

standing by...

[hansl]

do you have a SHA on your repo that I can just clone and ng build?

[born2net]

this is the repo:
git clone https://github.com/born2net/studioDashboard.git

[born2net]

I just updated its package.json to latest as well

[ivaylopivanov]

Same here.

angular-cli: 1.0.0-beta.24
node: 7.2.0
os: darwin x64

Steps to reproduce:

1. ng new test-app
2. Create foo.service.ts in src/app with content:

import { Injectable } from '@angular/core';
import { EventEmitter } from 'events';

@Injectable()
export class FooService extends EventEmitter  {

}

1. Add the service to providers in app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';

import { FooService } from './foo.service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [
    FooService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

1. Build the app: ng build --prod --aot. The output is:

ERROR in Error encountered resolving symbol values statically. Could not resolve events relative to /Users/user/path/test-app/src/app/foo.service.ts., resolving symbol FooService in /Users/user/path/test-app/src/app/foo.service.ts

ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in '/Users/user/path/test-app/src'
 @ ./src/main.ts 4:0-74
 @ multi main

ERROR in ./~/@angular/core/src/linker/system_js_ng_module_factory_loader.js
Module not found: Error: Can't resolve '/Users/user/path/test-app/src/$$_gendir' in '/Users/user/path/test-app/node_modules/@angular/core/src/linker'
 @ ./~/@angular/core/src/linker/system_js_ng_module_factory_loader.js 69:15-36 85:15-102
 @ ./~/@angular/core/src/linker.js
 @ ./~/@angular/core/src/core.js
 @ ./~/@angular/core/index.js
 @ ./src/main.ts
 @ multi main

For some reason the EventEmitter breaks the build. The following code compiles with angular 2.2.3, angular-cli 1.0.0-beta.22-1 and add the @ngtools/[email protected] as dependency in package.json.

[dessalines]

Related ticket: https://github.com/angular/angular-cli/issues/3674

[photostu]

+1 following progress, have to turn --aot off for now :(

[born2net]

I get this error even with aot off

[photostu]

just to add my error into the mix:

ERROR in Error encountered resolving symbol values statically. Could not resolve events relative to /Users/.../node_modules/@types/mongodb/index.d.ts., resolving symbol Db in Users/.../node_modules/@types/mongodb/index.d.ts

Why is it going into mongodb when nothing in my client side code refs that module?

[wadenweh]

Cannot build since update to 1.0.0-beta.24.
When running ng build, I am getting this Error:
```
ERROR in Error encountered resolving symbol values statically. Could not resolve linqts relative to ...src/app/app.module.ts., resolving symbol AppModule in .../src/app/app.module.ts, resolving symbol AppModule in ...src/app/app.module.ts

ERROR in ./src/app/index.ts
Module build failed: Error: .../src/app/index.ts (3,15): Cannot find module 'linqts'.)
at _checkDiagnostics (...node_modules\@ngtools\webpack\src\loader.js:116:15)
at ...node_modules\@ngtools\webpack\src\loader.js:141:17
@ ./src/main.ts 5:0-35
@ multi main
```
linqts is the only 3rd party library I included so far, it worked fine, till the update to 1.0.0-beta.24. Is there any way to fix this, without undoing the angular-cli update?

[photostu]

Hoping this does not get swept under the covers, devs, please let us know if you need more info. Thanks!

[born2net]

Everyone is waiting for the next build I think it's just taking longer because of the holidays ...

[on3al]

Also running into this issue after upgrading from beta.18 to beta.24

[alvachien]

+1 had same errors.

Workaround for my project: downgrade angular-cli to 1.0.0-beta.19-3 and it works.

[alexeyvasilyev]

Have the same problem.

[zackthoutt]

Reverting to 1.0.0-beta.19-3 like @alvachien mentioned fixes the issue for me. I also experimented with working backwards through versions and the first version that did not break ng build for me is 1.0.0-beta.21.

[photostu]

I'm putting this back out there:
"just to add my error into the mix:

ERROR in Error encountered resolving symbol values statically. Could not resolve events relative to /Users/.../node_modules/@types/mongodb/index.d.ts., resolving symbol Db in Users/.../node_modules/@types/mongodb/index.d.ts

Why is it going into mongodb when nothing in my client side code refs that module?"

Devs, any help here?

[hansl]

@photostu without any project or code to look at there's nothing we can do.

[hansl]

Actually I have an idea, try to add "files": ["main.ts"] to your tsconfig.json, tell us if that works.

[ivaylopivanov]

@hansl you can see mine example from above. Just extend the EventEmitter.

[photostu]

I will work on a sample to reproduce

[photostu]

I think I'm sorted now... I had @types/mongodb in my package.json dependencies. Moving that to devDeps seems to have solved it!

[paruvellyvishwanath]

in my package.json there is no @types/mongodb. what should i do

[photostu]

well, my backend project needs that @types/mongodb package in dependencies, so I may have to consider splitting out the project :(

[photostu]

Ha, I just added a build task to rename the offending mongo index.d.ts during the client build step then revert it for server build!

[photostu]

@paruvellyvishwanath what is your error? You may have another offender package

[paruvellyvishwanath]

when i run npm run build:prod i am getting below error

Error encountered resolving symbol values statically. Could not reso
lve events relative to C:/Users/evontex/Desktop/01 Seed_1/node_modules/@typ
es/mongodb/index.d.ts., resolving symbol Db in C:/Users/evontex/Desktop/01
Seed_1/node_modules/@types/mongodb/index.d.ts

[dustintheweb]

@photostu can you post your hack?

[photostu]

It's really simple, just add 2 build steps to rename the offending file before the client build, then fix it back before your server build. Total hack job.

[dustintheweb]

came back to confirm. hackasarus rex will have to do until the actual bug gets fixed

[vdjurdjevic]

@photostu Rename to what? If i rename file, i get 'cannot find type definition file for mongodb'.

[photostu]

@vladimirdjurdjevic you have to perform 2 renames in this process.
First rename it with a diff extension so the client build doesn't recognize it as a .ts
Then, after your client build is finished and you need to perform your server build, you rename it back to its original filename. Hope this makes sense.

[metamaker]

@angular/cli 1.0.0-rc.0 still has same problem. 3 months passed and still we can't use newest AOT to compile our projects that use forRoot static method to provide providers for root module. :(

[naiteluo]

any progress about this issue, we have the same problem.

[filipesilva]

Thanks for reporting this issue. This issue is now obsolete due to changes in the recent releases. Please update to the most recent Angular CLI version.

If the problem persists after upgrading, please open a new issue, provide a simple repository reproducing the problem, and describe the difference between the expected and current behavior.

[jaibatrik]

Getting the same error with @angular-cli 1.2.1; is there an open issue for this? The app works fine when using ng serve, but breaks when I do ng build.

[FR0NK3NST33N]

Hey @jaibatrik, just ran into this issue the other day as well. My issue was that I was trying to use the ui-router module and I was defining my state resolves with arrow functions. After some research I found out that the current version of ui-router that I'm using is not AOT compatible[1]. This was causing the Error encountered resolving symbol values statically to be thrown.

So I guess my advice is to check the filenames being listed in the error, and see if they all have something to do with a module you are using. This is probably the only way I figured my solution; my only other file that was throwing errors besides app.module.ts, was states.ts where I define my router states.

1: https://github.com/ui-router/angular/issues/29

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