带有延迟加载模块的角材质答案

【问题标题】：Angular Material with Lazy Loading Module带有延迟加载模块的角材质
【发布时间】：2023-04-11 01:05:02
【问题描述】：

我已经找到了看起来相似但对我没有帮助的东西。 Lazy loading Angular modules with latest Angular material design gives error

我的问题是，我有延迟加载模块。 app-routing.module.ts

const routes: Routes = [
  {path: '', redirectTo: '/home', pathMatch: 'full'},
  {path: 'home', loadChildren: () => import('./home/home-routing.module').then(m => m.HomeRoutingModule)},
  {path: '**', loadChildren: () => import('./error/error-routing.module').then(m => m.ErrorRoutingModule)}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

家庭路由模块看起来像：

@NgModule({
  imports: [RouterModule.forChild(
    [
      {path: '', component: NavigationComponent},
    ]
  )]
})
export class HomeRoutingModule {
}

导航组件只是为 sidenav 生成的材料模式。 https://material.angular.io/guide/schematics#navigation-schematic

但结果我得到：

错误：src/app/home/navigation/navigation.component.html:1:1 - 错误 NG8001：“mat-sidenav-container”不是已知元素：

如果“mat-sidenav-container”是一个 Angular 组件，则验证它是该模块的一部分。

如果“mat-sidenav-container”是一个 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”中禁止显示此消息。

将 sidenav 代码移动到 app.component.html 一切正常。

我的家庭模块是这样的

@NgModule({
  declarations: [NavigationComponent],
  imports: [
    CommonModule,
    HomeRoutingModule,
    LayoutModule,
    MatToolbarModule,
    MatButtonModule,
    MatSidenavModule,
    MatIconModule,
    MatListModule
  ]
})
export class HomeModule { }

我做错了什么没有胶水？

谢谢

【问题讨论】：

标签： angular angular-material angular-routing angular-lazyloading

【解决方案1】：

要导入延迟加载模块，您需要导入包含组件声明的主模块，以及这些组件所需的模块：

在你的 app-routing.module 中

//home.module and HomeModule, instead of HomeRoutingModule
{path: 'home', loadChildren: () => import('./home/home.module').then(m => 
m.HomeModule)}

在你的homeRoutingModule中，你需要导出RouterModule：

 @NgModule({
 imports: [RouterModule.forChild(
   [
     {path: '', component: NavigationComponent},
   ]
 )],
 exports: [RouterModule]
 })

最后，在 HomeModule 中，导入 HomeRoutingModule：

imports: [
 ...
 HomeRoutingModule,
 ....

]

【讨论】：