Angular 8 - 如何覆盖 BrowserModule 以实现多应用延迟加载？

Question

在成功测试了子应用路由后，我从其父应用调用了同一个子应用，但这次路由不起作用并显示以下控制台错误：

错误：BrowserModule 已加载。如果您需要访问 来自延迟加载模块的常见指令，例如 NgIf 和 NgFor， 改为导入 CommonModule。

使用下面的代码，我试图用应该导出到父应用程序的 CommonModule 覆盖子应用程序 BrowserModule，因为 BrowserModule 应该只使用一次，实际上，它已经被父应用程序使用 app.module.ts .所以我的子appapp.module.ts如下：

    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 {}

那么可以做些什么来让父应用程序的路由工作？

Answer 1

您不应该从 SubApp1Module 导入 AppModule。

• 删除“AppModule”导入，您应该就可以了。
• 如果您想与其他模块共享 AppModule 中的某些内容，请创建一个“SharedModule”并导入该模块。