10

I am encountering an AOT build issue using Angular@5.1.0.

The error is:

ERROR in Error during template compile of 'AppModule'
  Function calls are not supported in decorators but 'FeatureModule' was called.

feature.module.ts

@NgModule({
    imports: [
        BrowserModule,
        RouterModule.forRoot([])
    ],
    declarations: [
        ...    
    ],
    exports: [
        ...      
    ]
})
export class FeatureModule{
    static forRoot(items:any[]): ModuleWithProviders {
        const routes:Routes = items.map(t=> {
            return { path: t.name, component: t.component };
        });

        return {
            ngModule: FeatureModule, 
            providers: [
                provideRoutes(routes)
            ]
        }
    }
}

This compiles successfully in non-aot builds. This seems to only be a problem for AOT builds.

Why is this error happening?

Michael Kang
  • 52,003
  • 16
  • 103
  • 135
  • 1
    This will not solve your problem, but might maybe bring you closer to solve it. Angular 5.1 was released today along with the CLI 1.6. One of the fixed issues is `Improved decorator error messages`. Maybe try to upgrade to the latest version and see if you can find a way to solve this. Sorry for not being to help more. https://blog.angular.io/angular-5-1-more-now-available-27d372f5eb4e – Sonu Kapoor Dec 07 '17 at 04:07
  • thank-you, I appreciate the advice. I'll try running CLI 1.6 to see if the errors are more informative. – Michael Kang Dec 07 '17 at 04:09
  • The error still exists in the latest @angular/cli. – Michael Kang Dec 07 '17 at 04:48
  • 1
    Have you tried to remove `var routes - data` and use `providers: [provideRoutes(data)]`? – yurzui Dec 07 '17 at 05:37
  • In `Feature` module you wrote `imports: [ RouterModule.forRoot() ],` shouldn't it be `forRoot([])`? Can you setup reproduction? – yurzui Dec 07 '17 at 09:47
  • Yes, you're right, sorry another typo – Michael Kang Dec 07 '17 at 09:49
  • You need to provide a reproduction of this issue. Using what you said above, I tried and can't reproduce the issue. Here's what I did (you can download this as a CLI project, run `npm install && ng build --prod` and everything works fine. https://stackblitz.com/edit/angular-k4deww – Jason Aden Dec 07 '17 at 18:53

1 Answers1

6

Ok, it took me a while to figure this out. TLDR: the forRoot method must dead simple, otherwise the AOT compiler complains.

To make it simple, I had to:

  1. Remove branching logic and function calls from the forRoot method.

  2. Implement the logic to map the items to routes into a factory provider, rather than inlining it inside the forRoot method.

  3. Use Router.resetConfig to add the routes dynamically within the factory impelmentation.

  4. Add an ANALYZE_FOR_ENTRY_COMPONENTS provider so that any components passed in would be added to entryComponents automatically as part of the module.

  5. Import RouterModule.forChild([]) into FeatureModule because I use the components from @angular/router.

  6. Import RouterModule.forRoot([]) into AppModule because it provides the application-wide Router service.

Final Solution

export const Items = new InjectionToken<any[]>('items');
export function InitMyService(router:Router, items:any[]) {
     var routes:Routes =  items.map(t=> { return { path: t.name, component: t.component, outlet: 'modal' }});
     var r = router.config.concat(routes);
     router.resetConfig(r);        
     return new MyService(router);
}


@NgModule({
    imports: [
        CommonModule,
        RouterModule.forChild([])
    ],
    declarations: [
        MyComponent
    ],
    exports: [
        MyComponent
    ],
    providers: [

    ]
})
export class FeatureModule {
    static forRoot(items:any[]): ModuleWithProviders {
        return {
            ngModule: FeatureModule, 
            providers: [
                { provide: Items, useValue: items},
                { provide: ANALYZE_FOR_ENTRY_COMPONENTS, multi: true, useValue: items},
                { provide: MyService, useFactory: InitMyService, deps:[Router, Items] }
            ]
        }
    }
}

app.module.ts

@NgModule({
  imports:      [ 
      BrowserModule,
      RouterModule.forRoot([]),
      FeatureModule.forRoot([{name: 'test', component: TestComponent}])
    ],
  declarations: [ AppComponent, TestComponent ],
  bootstrap:    [ AppComponent ],
  providers: [
  ],
  exports: [AppComponent]
})
export class AppModule {
}

The key to solving this was the realization that RouterModule.forChild() does not register any router services. This is intentional so that any module can import the RouterModule and take advantage of its components, without actually registering any services. At the AppModule level, I still needed to register the Router service as a singleton by importing RouterModule.forRoot() into AppModule.

Michael Kang
  • 52,003
  • 16
  • 103
  • 135