Angular独立组件报错：多BrowserModule注入问题求助

错误原因 #

当使用bootstrapApplication启动独立组件时，Angular框架会自动为应用注入BrowserModule，完成浏览器环境的初始化配置。如果你在根独立组件（AppComponent）的imports数组中手动引入了BrowserModule，就会造成重复注入，触发该错误。

解决方案 #

• 直接从AppComponent的imports中移除BrowserModule
• 若需要使用*ngIf、*ngFor这类模板指令，只需引入CommonModule即可（BrowserModule内部已包含CommonModule，且bootstrapApplication会自动处理浏览器环境初始化）

修正后代码示例 #

AppComponent代码

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule], // 移除BrowserModule
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-standalone-demo';
}

main.ts代码

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

bootstrapApplication(AppComponent)
  .catch(err => console.error(err));

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