问题描述
我已经发现它看起来很相似但对我没有帮助。 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 { }
没有胶水我做错了什么?
谢谢
解决方法
要导入延迟加载模块,您需要导入包含组件声明的主模块以及这些组件所需的模块:
在你的 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,....
]