使用最新的 Angular 材料设计延迟加载 Angular 模块会出错

Question

我正在使用最新版本的 Angular 和 Angular Material。我已经实现了延迟加载功能模块，无需材料设计即可正常工作。

我需要在我的视图中使用以下三个材料组件/模块 -

MatSidenav 模块， MatIcon模块， MatListModule

只有在实现延迟加载时，我才会收到 模板解析错误。请在附件中找到错误的屏幕截图。

我创建了如下的材料共享模块并导入功能模块。 素材共享模块代码。

import { NgModule, ModuleWithProviders } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
// material designs
import {
    MatSidenavModule,
    MatIconModule,
    MatListModule,
    MatIconRegistry
  } from '@angular/material';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        MatSidenavModule,
      MatIconModule,
      MatListModule
    ],
  exports: [
    BrowserModule,
    BrowserAnimationsModule,
      MatSidenavModule,
      MatIconModule,
      MatListModule
    ]
})
export class MaterialSharedModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: MaterialSharedModule,
      providers: [MatIconRegistry]
    };
  }
}

我正在导入我的功能模块“LandingPage.module.ts”，如下所示 -

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

/* // material designs
import {
  MatSidenavModule,
  MatIconModule,
  MatListModule
} from '@angular/material'; */

import { AppSharedModule } from '../shared.module';


import { SharedModule } from '../shared/shared.module';
import { LandingRoutingModule } from './landing-routings.module';
import { **MaterialSharedModule** } from '../material.shared.module';
@NgModule({
  imports: [
    CommonModule,
    **MaterialSharedModule**,
    SharedModule,
    LandingRoutingModule
  ],
  declarations: [
  ]
})
export class LandingPageModule { }

下面是 LandingFeature 模块路由 -

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
    { path: '', pathMatch: 'prefix', redirectTo: 'dashboard' },
    { path: 'dashboard', component: HomeComponent, data: { title: 'Dashboard', path : 'dashboard' } },
    /* {
      path: 'tenantManagement',
      loadChildren: 'app/tenant/tenant-routings.module#TenantRoutingModule'
    },
    {
        path: 'application',
        loadChildren: 'app/application-registraion/application-routings.module#ApplicationRoutingModule',
       data : {title: 'application', path: 'application'}
    } */
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
  declarations: [
    HomeComponent
  ]
})
export class LandingRoutingModule { }

Answer 1

LandingPageModule 会导入 MaterialSharedModule，但不会导入您的 HomeComponent。 MaterialSharedModule 和 HomeComponent 应该在同一个模块中导入。

简而言之，如果您的组件使用另一个模块，那么它所属的模块应该导入这些模块。

“LandingRoutingModule”在其声明中包含“HomeComponent”。这使得“HomeComponent”属于“LandingRoutingModule”，但“LandingRoutingModule”不导入“MaterialSharedModule”。所以“HomeComponent”不知道“MaterialSharedModule”这会导致你得到的错误。

按照惯例，路由模块只包含路由，并且在其声明中没有组件。

我建议您从“LandingRoutingModule”中删除“HomeComponent”声明并将其添加到“LandingPageModule”中。 “LandingPageModule”已经导入“MaterialSharedModule”。所以这应该有效。