为何MatLoadingScreenModule在部分模块可用，其他模块报BrowserModule重复加载错误？

1. BrowserAnimationsModule内部依赖并导出了BrowserModule，而BrowserModule包含全局单例服务（如DomSanitizer），Angular严格禁止在非根模块中重复导入这类模块，否则会触发提供者冲突。
2. CoreModule是仅由根模块（AppModule）导入的核心模块，其内部导入的BrowserAnimationsModule会在根模块初始化阶段完成加载，属于单次导入，因此不会触发错误。
3. RecordModule是特性模块，当它导入MatLoadingScreenModule时，会尝试再次加载BrowserAnimationsModule，导致BrowserModule的提供者被重复注册，从而抛出运行时错误。

1. 重构自定义库MatLoadingScreenModule #

移除库内部对BrowserAnimationsModule的导入，改为要求使用者在根模块中自行导入：

// mat-loading-screen.module.ts
import { NgModule, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatLoadingScreenComponent } from './mat-loading-screen.component';

@NgModule({
  imports: [
    CommonModule,
    // 保留其他必要的Material组件模块，移除BrowserAnimationsModule
  ],
  declarations: [MatLoadingScreenComponent],
  exports: [MatLoadingScreenComponent]
})
export class MatLoadingScreenModule {
  // 若库包含全局服务，用forRoot()确保仅初始化一次
  static forRoot(): ModuleWithProviders<MatLoadingScreenModule> {
    return {
      ngModule: MatLoadingScreenModule,
      providers: [/* 库的全局服务（如果有） */]
    };
  }
}

2. 在根模块（AppModule）中唯一导入BrowserAnimationsModule #

确保BrowserAnimationsModule仅在AppModule中导入一次：

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppRoutingModule } from './app-routing.module';
import { CoreModule } from './core/core.module';
import { RecordModule } from './record/record.module';
import { MatLoadingScreenModule } from 'your-custom-library-path';
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule, // 唯一导入位置
    AppRoutingModule,
    CoreModule,
    RecordModule,
    MatLoadingScreenModule.forRoot() // 用forRoot()导入库（若有全局服务）
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 在特性模块中导入MatLoadingScreenModule（不带forRoot） #

特性模块仅导入库本身，无需重复导入动画模块：

// record.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RecordRoutingModule } from './record-routing.module';
import { MatLoadingScreenModule } from 'your-custom-library-path';
// 导入Record模块的组件

@NgModule({
  imports: [
    RecordRoutingModule,
    CommonModule, // 特性模块用CommonModule替代BrowserModule
    MatLoadingScreenModule // 仅导入库本身
  ],
  declarations: [/* Record模块的组件 */]
})
export class RecordModule { }

额外规范 #

CoreModule作为根模块专属模块，不应被其他特性模块导入，避免意外的模块重复加载。若存在多模块共用的组件/指令，应单独提取到SharedModule中，供特性模块按需导入。

内容的提问来源于stack exchange，提问作者Otto Abnormalverbraucher