如何解决带延迟加载模块的角材料
我已经发现它看起来很相似但对我没有帮助。 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,....
]
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。