带延迟加载模块的角材料

问题描述

我已经发现它看起来很相似但对我没有帮助。 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”不是已知元素:

  1. 如果“mat-sidenav-container”是一个 Angular 组件,则验证它是否是该模块的一部分。
  2. 如果 '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,....

]

相关问答

Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其...
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。...
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbc...