Angular 8-如何重写BrowserModule以进行多应用程序延迟加载？

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?

Answer 1

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.