Angular Material 使用延迟加载模块
Angular Material with Lazy Loading Module
我已经找到了看起来相似但对我没有帮助的东西。
我的问题是,我有延迟加载模块。应用-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 生成的 material 架构。
https://material.angular.io/guide/schematics#navigation-schematic
但结果我得到:
Error: src/app/home/navigation/navigation.component.html:1:1 - error
NG8001: 'mat-sidenav-container' is not a known element:
- If 'mat-sidenav-container' is an Angular component, then verify that it is part of this module.
- If 'mat-sidenav-container' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component
to suppress this message.
将 sidenav 代码移动到 app.component.html 一切正常。
我家模块是这样的
@NgModule({
declarations: [NavigationComponent],
imports: [
CommonModule,
HomeRoutingModule,
LayoutModule,
MatToolbarModule,
MatButtonModule,
MatSidenavModule,
MatIconModule,
MatListModule
]
})
export class HomeModule { }
不知道我哪里做错了吗?
谢谢
要导入延迟加载模块,您需要导入包含组件声明的主模块,以及这些组件所需的模块:
在您的应用中-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,
....
]
我已经找到了看起来相似但对我没有帮助的东西。
我的问题是,我有延迟加载模块。应用-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 生成的 material 架构。 https://material.angular.io/guide/schematics#navigation-schematic
但结果我得到:
Error: src/app/home/navigation/navigation.component.html:1:1 - error NG8001: 'mat-sidenav-container' is not a known element:
- If 'mat-sidenav-container' is an Angular component, then verify that it is part of this module.
- If 'mat-sidenav-container' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
将 sidenav 代码移动到 app.component.html 一切正常。
我家模块是这样的
@NgModule({
declarations: [NavigationComponent],
imports: [
CommonModule,
HomeRoutingModule,
LayoutModule,
MatToolbarModule,
MatButtonModule,
MatSidenavModule,
MatIconModule,
MatListModule
]
})
export class HomeModule { }
不知道我哪里做错了吗?
谢谢
要导入延迟加载模块,您需要导入包含组件声明的主模块,以及这些组件所需的模块:
在您的应用中-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,
....
]