Angular 7：已导入AppModule的CustomMaterialModule为何在懒加载特性模块失效？

这是Angular模块系统里很典型的特性问题，我给你拆解清楚：

• 懒加载模块是完全独立的运行上下文：Angular的懒加载模块（比如你的FeatureLazyModule）会被打包成独立的代码块，运行时和主AppModule是完全分开的模块实例。主模块里导入的任何模块（包括你的CustomMaterialModule）都不会自动被懒加载模块继承——它们属于完全隔离的模块作用域，懒加载模块只能访问自己显式导入的模块内容。

• Material控件依赖模块级的声明与导出：Angular Material的每个组件、指令（比如mat-button、mat-input）都是由对应的Material模块（比如MatButtonModule）提供的。这些模块必须被当前模块直接导入，才能让模块内的组件识别并使用这些控件。主AppModule导入了CustomMaterialModule，只对AppModule本身和它直接声明的组件生效，懒加载模块根本“看不到”这些导入的内容。

• 最佳实践：用共享模块减少重复代码：为了避免在每个模块里重复写一堆Material模块导入，你可以把CustomMaterialModule改成一个共享模块——确保在模块里导出所有你用到的Material模块，这样不管是主模块还是懒加载模块，只要导入CustomMaterialModule就能使用所有Material控件。

举个CustomMaterialModule的示例写法：

import { NgModule } from '@angular/core';
// 导入你需要的Material模块
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatInputModule } from '@angular/material/input';

@NgModule({
  imports: [
    MatButtonModule,
    MatCardModule,
    MatInputModule
  ],
  exports: [
    MatButtonModule,
    MatCardModule,
    MatInputModule
  ]
})
export class CustomMaterialModule { }

之后在AppModule和FeatureLazyModule里都导入这个CustomMaterialModule，就能正常使用所有Material控件了。

内容的提问来源于stack exchange，提问作者Shahzad Ismail