带有延迟加载的Angular 6路由答案

【问题标题】：Angular 6 routing with lazy loading带有延迟加载的Angular 6路由
【发布时间】：2019-01-13 13:07:37
【问题描述】：

我有一个 github 项目可以解释这个问题

const routes: Routes = [
  {
    path: 'admin',
    loadChildren: './admin/admin.module#AdminModule'
  },
  {
    path: '',
    component: HomeComponent
  }
];

这是来自管理模块路由

const routes: Routes = [{
  path: '',
  component: OverviewComponent
},
  {
    path: 'users',
    component: UserComponent
  }];

这个项目有 home 组件，在 url 中没有路径

http://localhost:4200 但它正在加载空路径 (OverviewComponent) 在延迟加载的管理模块中定义。

据我了解，所有延迟加载的 url 路径都应该是
http://localhost:4200/admin（应加载概览组件）。 http://localhost:4200/admin/users（应该加载用户组件）

即使没有模块前缀，我也看到 url 路径正常工作。

http://localhost:4200（这是加载概览而不是主页组件）
http://localhost:4200/users（这是加载用户组件而不是抛出错误。）

提前致谢。

【问题讨论】：

如果您将 AdminModule 包含在 AppModule 中，就会发生这种情况。确保您的 AdminModule 未在任何地方导入。

标签： angular angular-routing

【解决方案1】：

这是因为您在应用模块本身中导入并声明了管理组件。如果你想延迟加载改变 app.module.ts 文件如下

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent

  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

和admin.module.ts如下

@NgModule({
  imports: [
    CommonModule,
    AdminRoutingModule
  ],
  declarations: [OverviewComponent, UserComponent]
})
export class AdminModule { }

【讨论】：

这是我的错，我认为路由将在应用加载时合并。 Angular 可以给出直观的信息。非常感谢。

【解决方案2】：

在 AdminModule 中，您应该在 admin.component.html 中也有一个。

您还需要为此创建 AdminComponent。

供参考：https://www.tektutorialshub.com/angular-child-routes-nested-routes/

【讨论】：