Angular 4.x 中的延迟加载模块出错

Question

我在 Angular 4.x 应用程序中实现了延迟加载模块。

app.route.ts

const routes: Routes = [
  {
    path: '',redirectTo:'home',pathMatch:'full'
  },
  {
    path:'home',
    children:[
      {path:'',redirectTo:'index',pathMatch:'full'},
      {path:'index',component:HomeComponent},
      {path:'dashboard',component:DashBoardComponent}
    ]
  },
  {path:'pages',
   loadChildren:'./form/form.module#FormModule'
},
   {path:'buttons',component:ButtonsComponent},

   {path:'card',component:CardComponent},
   {path:'**',component:NotFoundComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

form.routing.ts

const routes: Routes = [
  {
      path:'',component:FormComponent,children:[
          {path:'',redirectTo:'login',pathMatch:'full'},
        {
            path:'signup',component:RegisterComponent
        },
  {
      path:'login',component:LoginComponent},
  ]
  },

];
export const FormRouting: ModuleWithProviders = RouterModule.forChild(routes);

Form.module.ts

@NgModule({
    imports:[
        CommonModule,
        FormRouting,
        ],
    declarations:[
        FormComponent,
        LoginComponent,
        RegisterComponent
    ]

})
export class FormModule{}

应用程序在没有延迟加载的情况下工作，但在延迟加载后它会生成模板解析错误：

我在 app.module.ts 中导入了MaterialModule。我该如何解决这个问题？提前致谢。

Answer 1

如果FormModule 中声明的组件使用MaterialModule，您还需要将MaterialModule 导入到延迟加载的FormModule：

@NgModule({
    imports: [
        CommonModule,
        FormRouting,
        MaterialModule
        ],
    declarations: [
        FormComponent,
        LoginComponent,
        RegisterComponent
    ]

})
export class FormModule{}