Angular 4 build error: Error encountered resolving symbol values statically

Question

I'm upgrading Angular CLI (v1.0.0), Angular (v4.0.2), and related packages in a previously working ng2 app in order to bring in a newer version of Angular Material. After fighting with several other errors due to breaking changes, I'm left with this on build:

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

resolving symbol ROUTES in /path/node_modules/@angular/router/src/router_config_loader.d.ts,

resolving symbol makeRootProviders in /path/node_modules/ui-router-ng2/lib/uiRouterNgModule.d.ts,

resolving symbol UIRouterModule.forRoot in /path/node_modules/ui-router-ng2/lib/uiRouterNgModule.d.ts,

resolving symbol AppModule in /path/src/app/app.module.ts,

resolving symbol AppModule in /path/src/app/app.module.ts

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

I believe that the error involves my UIRouter config (in app.module.ts), but I'm really not sure:

imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    MaterialModule.forRoot(),
    FlexLayoutModule,
    UIRouterModule.forRoot({
        states: [
            homeState,
            buttonsState,
            colorState,
            fontsState,
            iconsState,
            logosState,
            messagingState,
            typographyState
        ],
        useHash: false
    })
],

I suspect that the second error will go away when the first is resolved. I've attempted to create a function that returns the UIRouterModule config, but that didn't help. Assistance appreciated.

John John · Accepted Answer · 2017-11-29T11:22:30

I think the problem is with an import statement. It looks like your trying to import ROUTES into one of your .ts files like:

import { ROUTES } from '@angular/router/src/router_config_loader';

Any imports should be from @angular/router not '@angular/router/src/router_config_loader'. What probably happened is your IDE auto imported the constant for you, and it used the wrong path.

I had a similar problem that was solved by this SO answer.

Angular 4 build error: Error encountered resolving symbol values statically

1 Answers