Angular 8 - How to override BrowserModule for multi-apps lazy loading?

Question

Having tested successfully a sub-app routing, I called then the same sub-app from its parent app, but this time the routing doesn't work and the following console error is shown:

Error: BrowserModule has already been loaded. If you need access to common directives such as NgIf and NgFor from a lazy loaded module, import CommonModule instead.

With the following code I am trying to override the sub-app BrowserModule with CommonModule that should be exported to the parent app, because BrowserModule should be used only once, and in fact, it is already used by the parent app.module.ts. So my sub-app app.module.ts is as follows:

    const routes: Routes = [
      {
        path: 'module1',
        loadChildren: () => import('../../../sub-app1/src/app/module1/module1.module').then( module => module.Module1Module )
      },
      {
        path: 'module2',
        loadChildren: () => import('../../../sub-app1/src/app/module2/module2.module').then( module => module.Module2Module )
      }
    ];

    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
        RouterModule.forRoot(routes)
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

    @NgModule({
      imports: [
        AppModule,
        CommonModule,
        RouterModule.forChild(routes),
      ]
    })
    export class SubApp1Module {}

So what can be done to get the routing working from the parent app?

vidalsasoon vidalsasoon · Accepted Answer · 2019-09-04T17:43:59

You shouldn't be importing AppModule from SubApp1Module.

Remove that "AppModule" import and you should be OK.
If there is something in AppModule that you would like to to share with other modules, create a "SharedModule" and import that one instead.

Angular 8 - How to override BrowserModule for multi-apps lazy loading?

1 Answers