Angular懒加载组件无法使用Angular Material的原因咨询

这个问题的核心在于Angular模块的封装性——懒加载模块是完全独立的NgModule，AppModule中导入的模块不会自动传递给它们。哪怕你在AppModule里导入了自定义的MaterialAppModule，懒加载模块也看不到里面的Material组件/指令，因为模块默认只会对外暴露明确导出的成员。

下面是具体的解决步骤：

1. 把MaterialAppModule改成共享模块 #

首先确保你的MaterialAppModule不仅导入了需要的Material模块，还导出了它们。因为模块内部的组件、指令默认是私有的，只有导出后，其他模块导入这个共享模块才能使用这些成员。

示例代码：

import { NgModule, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';
// 导入你需要的Material模块
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatDialogModule } from '@angular/material/dialog';

@NgModule({
  imports: [
    CommonModule,
    // 导入Material模块
    MatButtonModule,
    MatCardModule,
    MatDialogModule
  ],
  // 关键：导出这些Material模块，让其他模块能访问
  exports: [
    MatButtonModule,
    MatCardModule,
    MatDialogModule
  ]
})
export class MaterialAppModule {
  // 处理服务单例问题（如果你的模块包含服务的话）
  static forRoot(): ModuleWithProviders<MaterialAppModule> {
    return {
      ngModule: MaterialAppModule,
      providers: [
        // 在这里放置需要单例的Material相关服务（如果有的话）
      ]
    };
  }
}

2. 在懒加载模块中显式导入MaterialAppModule #

懒加载模块（比如LazyFeatureModule）需要自己导入MaterialAppModule，才能使用里面的Material组件。注意不要在这里使用forRoot()，避免重复提供服务（forRoot()应该只在AppModule里调用一次）。

示例代码：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LazyFeatureRoutingModule } from './lazy-feature-routing.module';
import { LazyFeatureComponent } from './lazy-feature.component';
import { MaterialAppModule } from '../material-app.module';

@NgModule({
  declarations: [LazyFeatureComponent],
  imports: [
    CommonModule,
    LazyFeatureRoutingModule,
    // 显式导入共享模块
    MaterialAppModule
  ]
})
export class LazyFeatureModule { }

3. 确认AppModule的导入方式 #

在AppModule里，用forRoot()初始化MaterialAppModule（如果你的模块包含服务），确保服务是单例的：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MaterialAppModule } from './material-app.module';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    // 用forRoot()初始化服务
    MaterialAppModule.forRoot(),
    AppRoutingModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

为什么这样能解决问题？ #

Angular的懒加载模块会创建独立的模块上下文，和AppModule的上下文是分离的。只有当你在懒加载模块中显式导入包含所需Material组件的共享模块，并且该共享模块导出了这些组件时，懒加载组件才能访问和使用Material的功能。

内容的提问来源于stack exchange，提问作者Nico Schuck