Angular2：AppComponent模块引导时独立组件冲突问题求助

你遇到的问题本质是Angular两种引导模式的冲突：独立组件引导和NgModule引导不能混用。下面给两种可行的解决方式，选一种适配你的需求即可：

方式一：用独立组件直接引导（无需app.module.ts） #

如果想保留AppComponent的standalone: true，直接在main.ts里用bootstrapApplication引导，不再依赖AppModule：

1. 修改main.ts：

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { provideRouter } from '@angular/router';
// 导入你的路由配置
import { routes } from './app/app.routes';

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes) // 提供路由服务
  ]
}).catch(err => console.error(err));

2. 保留AppComponent的standalone: true，仅导入路由相关的基础组件：

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'your-app';
}

方式二：保留NgModule引导（组件设为非独立） #

如果必须用app.module.ts引导，就把AppComponent的standalone: true去掉，将RouterModule移到AppModule的imports数组里：

1. 修改AppComponent，移除standalone和组件内的imports：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'your-app';
}

2. 在app.module.ts里配置路由：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { routes } from './app.routes';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

报错原因说明 #

• NG6009：Angular禁止在NgModule的bootstrap数组中使用独立组件，因为独立组件自身已具备依赖声明能力，无需NgModule管理。
• NG2010：非独立组件不能拥有自己的imports数组，所有依赖必须通过所属NgModule的imports导入。

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