Angular StackBlitz报错：BrowserModule已加载，请求解决方案

报错原因 #

使用bootstrapApplication启动独立组件（standalone: true）时，Angular会自动注入BrowserModule的核心提供者，此时手动在组件的imports数组中导入BrowserModule，会导致提供者重复注册，触发报错。

修复步骤 #

1. 移除App组件imports数组中的BrowserModule
2. 若组件需要使用NgIf、NgFor这类通用指令，直接在对应组件的imports中导入CommonModule即可（独立组件不会自动继承模块的导入）

修改后的代码示例 #

import { bootstrapApplication } from '@angular/platform-browser';
import { ParentComponent } from './components/parent/parent.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@Component({
  selector: 'my-app',
  standalone: true,
  imports: [ParentComponent, BrowserAnimationsModule], // 移除BrowserModule
  template: `
    <app-parent></app-parent>
  `,
})
export class App {
  name = 'Angular';
}

bootstrapApplication(App);

补充说明 #

如果ParentComponent是独立组件且内部用到了通用指令，需要在ParentComponent的imports数组中添加CommonModule；如果ParentComponent属于某个NgModule，则确保该Module已导入CommonModule。

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