Question

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

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

MatSidenavModule， MatIconModule， MatListModule

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

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

＆＃13;

type l_recs is table of some_table%rowtype;

＆＃13;

我正在我的功能模块中导入＆＃34; LandingPage.module.ts＆＃34;如下 -

＆＃13;

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]
    };
  }
}

＆＃13;

以下是LandingFeature模块路由 -

＆＃13;

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

＆＃13;

Answer 1

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

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

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

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

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

延迟加载具有最新Angular材料设计的Angular模块会产生错误

1 个答案: