我已经发现它看起来很相似但对我没有帮助。 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”不是已知元素:
将 sidenav 代码移动到 app.component.html 一切正常。
我的家庭模块就像
@NgModule({
declarations: [NavigationComponent],
imports: [
CommonModule,
HomeRoutingModule,
LayoutModule,
MatToolbarModule,
MatButtonModule,
MatSidenavModule,
MatIconModule,
MatListModule
]
})
export class HomeModule { }
没有胶水我做错了什么?
谢谢
答案 0 :(得分:0)
要导入延迟加载模块,您需要导入包含组件声明的主模块以及这些组件所需的模块:
在你的 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,
....
]