使用最新的 Angular 材料设计延迟加载 Angular 模块会出错 [英] Lazy loading Angular modules with latest Angular material design gives error

问题描述

我使用的是最新版本的 Angular 和 Angular Material.我已经实现了延迟加载功能模块，它在没有材料设计的情况下也能正常工作.

I am using latest versions of Angular and Angular Material. I have implemented lazy loading feature modules which is working fine without material design.

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

I need the below three material components/modules to be used in my view -

MatSidenavModule，MatIcon模块，MatListModule

只有在实现延迟加载时，才会出现模板解析错误.请附上屏幕截图以查找错误.

only when implementing lazy load I get the template parse error. Please fin d attached the screen shot for errors.

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

I have created material shared module as below and importing in feature modules. Code for material shared module.

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"，如下所示 -

I am importing in my feature module "LandingPage.module.ts" like below -

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 模块路由 -

Below is LandingFeature module routings -

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 { }

推荐答案

LandingPageModule 导入 MaterialSharedModule 但它不导入您的 HomeComponent.MaterialSharedModule 和 HomeComponent 应该在同一个模块中导入.

LandingPageModule imports MaterialSharedModule but it doesn't import your HomeComponent. MaterialSharedModule and HomeComponent should be imported in the same module.

简而言之，如果您的组件使用另一个模块，则它所属的模块应该导入模块.

In short if your component uses another module the module which it is belong to should import the modules.

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

"LandingRoutingModule" has "HomeComponent" in its declarations. This makes "HomeComponent" belong to "LandingRoutingModule" but "LandingRoutingModule" doesn't import "MaterialSharedModule". So "HomeComponent" doesn't know about "MaterialSharedModule" This causes the error which you got.

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

By convention routing modules just contains routes and doesn't have components in its declarations.

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

I suggest you to remove "HomeComponent" declaration from "LandingRoutingModule" and add it to" LandingPageModule". "LandingPageModule" already imports "MaterialSharedModule". So this should work.

这篇关于使用最新的 Angular 材料设计延迟加载 Angular 模块会出错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！