How to use RouterModule.forRoot() in Angular2 compiler/cli ngc command

Question

Let's say i have the following appRoutingModule:

export const routes: Route[] = [
  {
    path: '',
    component: ApplicationlistComponent
  }
];

@NgModule( {
  imports: [ ApplicationsModule, RouterModule.forRoot( routes ) ],
  exports: [ RouterModule ],
  declarations: [ApplicationlistComponent]
} )
export class AppRoutingModule {
}

When compiling this with the ngc cli command it will give the following error:

Error: Error encountered resolving symbol values statically. Calling function 'RouterModule', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AppRoutingModule in C:/git/mxt-frontend/landing-page-client/src/client/app/app-routing.module.ts, resolving symbol AppRoutingModule in C:/git/mxt-frontend/landing-page-client/src/client/app/app-routing.module.ts

I tried putting it inside an exported const:

export const routerModule =  RouterModule.forRoot( routes );

But that will give this error:

Error: Error encountered resolving symbol values statically

What is the workaround/fix to get this working? How do i define my routes if i can't pass it to the RouterModule?

I'm using versions:

"@angular/compiler": "~2.4.0",
"@angular/compiler-cli": "~2.4.0",
"@angular/platform-server": "~2.4.0",
"@angular/router": "~3.4.0"

etc.

@PierreDuc If i remove that export it still gives the error. If i remove `RouterModule.forRoot(routes)`, it's no longer giving the error. — Piet K, Jan 04 '17 at 12:39
@AmitKumarGhosh i have the import in my module:`import { RouterModule } from "@angular/router";` (not added in the example). Or do you mean something like this: `imports: [ RouterModule, RouterModule.forRoot( routes ) ],` — Piet K, Jan 04 '17 at 12:41
Something must be wrong :) im using almost the exact some configuration you have, but my project compiles fine with `aot`. What is the reason for making a separate `AppRoutingModule`? And not just define the routing inside the `AppModule`? — Poul Kruijt, Jan 04 '17 at 12:44
@AmitKumarGhosh I have that (didn't include it in my code example). But it's not the issue. The issue seems to be that static method calls are not allowed in AoT compiling. And RouterModule.forRoot seems to be a static method. — Piet K, Jan 04 '17 at 12:44
@PierreDuc Which version of angular2 (compiler, compiler-cli, router)are you using? When i move it to the app.module.ts it's giving the same error — Piet K, Jan 04 '17 at 12:47
The latest, but I must say that the aot compiler gives me headaches when i update. Execute these commands, and try again: `npm cache clean`, `npm install -g angular-cli@latest` and `npm install --save-dev angular-cli@latest`. This usually fixes my issues with aot — Poul Kruijt, Jan 04 '17 at 12:48
@PierreDuc Hmm well i'm trying to use @angular/compiler-cli. As i need the `ng-xi18n` command. I'm not sure if angular-cli is the same thing — Piet K, Jan 04 '17 at 12:55
Then why are you using the `angular-cli` tag :) anyways, same applies, but differently. `npm cache clean`, remove `node_modules` folder, and run `npm install` — Poul Kruijt, Jan 04 '17 at 12:56
@PierreDuc Ah yes you are right. I removed the angular-cli tag from the question. Will give cache clean and install a shot. — Piet K, Jan 04 '17 at 12:59

Piet K · Accepted Answer · 2017-01-05T08:38:50.460

2

I resolved this by reverting angular back to version 2.3.1. Looks like it's broken in the 2.4.0 release..

edited Jan 05 '17 at 08:38

answered Jan 05 '17 at 08:18

Piet K

113
1
8

Good spot. I'm having the same problem and have raised a bug report on Angular: https://github.com/angular/angular/issues/13844 – gallivantor Jan 09 '17 at 09:11

Yakov Fain · Answer 2 · 2017-01-04T14:46:24.990

1

Why your code doesn't import neither BrowserModule nor CommonModule? Have you tried this?

@NgModule( { imports: [BrowserModule, ApplicationsModule, RouterModule.forRoot( [ { path: '', component: ApplicationlistComponent }]) ], declarations: [ApplicationlistComponent], bootstrap: [ApplicationlistComponent] } ) export class AppRoutingModule { } The other thing to try is having the router's code in a separate file, e.g. app.routing.ts:

const routes: Routes = path: '',
    component: ApplicationlistComponent

export const routing = RouterModule.forRoot(routes);

and in @NgModule:

@NgModule( {
  imports: [BrowserModule, ApplicationsModule, 
           routing
],
  declarations: [ApplicationlistComponent],

edited Jan 04 '17 at 14:46

answered Jan 04 '17 at 12:56

Yakov Fain

11,972
5
33
38

CommonModule is imported in the appModule. But i just tried importing it in the AppRoutingModule aswell, but still the same error. – Piet K Jan 04 '17 at 13:02
The next thing I'd try is to keep the route config in a separate file. – Yakov Fain Jan 04 '17 at 13:06
You mean `export const routes: Route[] ` in a seperate file? – Piet K Jan 04 '17 at 13:22
Tried it. It gives the following error now: `Error: Error encountered resolving symbol values statically. Calling function 'RouterModule', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol routing in C:/git/mxt-frontend/landing-page-client/src/client/app/app.routing.ts` – Piet K Jan 04 '17 at 15:13
Someone suggested to upgrade TypeScript: https://github.com/angular/angular-cli/issues/3707 – Yakov Fain Jan 04 '17 at 16:32

How to use RouterModule.forRoot() in Angular2 compiler/cli ngc command

2 Answers2

Linked