Search code examples
angularangular-routing

Error during template compile of AppRoutingModule Function calls are not supported in decorators but RouterdataUrl was called


I am building a production version of my project of angular 7 and facing this error here is my code of APP-Routing.Module.ts Code, It contains common Routes Values

Here is Error Message: -ERROR in src\app\app-routing.module.ts(19,30): Error during template compile of 'AppRoutingModule' Function calls are not supported in decorators but 'RouterdataUrl' was called.

    var con: RouterdataUrl = new RouterdataUrl();
    const routes: Routes = con.routerdata();

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

    export const routingComponents = [LeftmenuComponent, DasboardComponent, HeardermenuComponent, UserdiplayComponent,
      AdsServiceComponent, UsertaskdisplayComponent, WithdrwalComponent, AllplanComponent, DaywisereportComponent]


    function routerdata() {
      const Routes = [
        { path: 'leftmenu', component: LeftmenuComponent },
        { path: 'dasboard', component: DasboardComponent },
        { path: 'heardermenu', component: HeardermenuComponent }
      ];
      return Routes;
    }

 And here is  APP MODULE CODE 

    //IMPORT....
    @NgModule({
      declarations: [
        AppComponent,
        routingComponents,
        WithdrwalComponent,
        UsertaskdisplayComponent,
        AllplanComponent,
        UsersqueryComponent,
        DaywisereportComponent
      ],
      imports: [
        BrowserModule,
        FormsModule,
        HttpClientModule, 
        BrowserAnimationsModule,
        ToastrModule.forRoot(),
        NgxLoadingModule.forRoot({}),
        AppRoutingModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

Solution

  • When building an Angular app in production, the default is that it will be built with AOT compilation. In this phase the angular compiler takes component metadata and pre-compiles the component factory. The angular compiler is only able to handle a subset of javascript, see more information here.

    In short: the problem is you can't use new. I'd suggest using a factory method (or macro as the angular guide calls it). If this is not possible, then you have to rethink your code, or consider JIT compilation.