Angular 17中BrowserModule与Angular Material依赖冲突问题求助

错误信息 #

core.mjs:6531 ERROR Error: NG05100: Providers from the `BrowserModule` have already been loaded. If you need access to common directives such as NgIf and NgFor, import the `CommonModule` instead.

问题背景 #

开发Angular 17独立组件应用时，使用Angular Material的mat-accordion组件，因Material相关模块默认导入BrowserModule，而bootstrapApplication已自动引入该模块，导致重复加载冲突。

具体解决步骤 #

• 精准导入Material组件模块：在独立组件的imports数组中，只导入所需的Material细分模块（如MatAccordionModule、MatExpansionModule），避免导入包含BrowserModule的全局Material包。
• 替换全局模块引用：确保所有导入的模块中，用CommonModule替代BrowserModule——Angular 17独立组件场景下，CommonModule已包含NgIf、NgFor等常用指令，无需再引入BrowserModule。
• 简化main.ts配置：bootstrapApplication默认已集成BrowserModule核心能力，只需添加Material必需的动画支持即可，不要额外手动导入BrowserModule。
• 清理构建缓存：执行ng clean和ng build清除旧构建缓存，避免残留的模块引用导致冲突。

正确代码示例 #

独立组件导入配置

import { Component } from '@angular/core';
import { MatAccordionModule } from '@angular/material/accordion';
import { MatExpansionModule } from '@angular/material/expansion';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-accordion',
  standalone: true,
  imports: [
    CommonModule,
    MatAccordionModule,
    MatExpansionModule
  ],
  templateUrl: './accordion.component.html',
  styleUrls: ['./accordion.component.css']
})
export class AccordionComponent {}

main.ts配置

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { provideAnimations } from '@angular/platform-browser/animations';

bootstrapApplication(AppComponent, {
  providers: [
    provideAnimations()
  ]
});

内容的提问来源于stack exchange，提问作者SRIRAM RAMACHANDRAN