Angular 9.1升级至18.1遇NG0907错误：非独立组件问题求助

问题原因 #

错误NG0907的核心是服务端引导文件main.server.ts使用了bootstrapApplication方法，该方法要求被引导的组件必须是独立组件（标记standalone: true），但你的AppComponent属于AppModule管理的非独立组件，和服务端引导方式不匹配；而浏览器端main.ts仍用传统的bootstrapModule引导模块，两者不一致导致编译报错。

解决方案（二选一） #

方案一：将AppComponent改为独立组件 #

修改app.component.ts，添加standalone: true标记，并导入所有依赖的模块、服务：

import { Component, OnInit, AfterViewInit } from '@angular/core';
// 根据实际依赖导入所需模块、服务
import { MatDatepickerModule } from '@angular/material/datepicker';
import { SharedService } from './path-to-shared-service';
import { MAT_DATE_FORMATS } from '@angular/material/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  standalone: true, // 添加独立组件标记
  imports: [
    // 导入模板中用到的所有组件、模块
    MatDatepickerModule,
    // 补充其他依赖模块
  ],
  providers: [
    SharedService, // 若服务未全局提供，需在此声明
    {
      provide: MAT_DATE_FORMATS,
      useFactory: (sharedService: SharedService) => sharedService.getDateFormat(),
      deps: [SharedService],
    }
  ]
})
export class AppComponent implements OnInit, AfterViewInit { }

同时调整app.module.ts，移除AppComponent的声明（独立组件无需在模块中声明）：

@NgModule({
  declarations: [
    // 删除AppComponent条目
  ],
  imports: [
    // 保留其他必要模块
  ],
  providers: [
    AppConfigService,
    {
      provide: APP_INITIALIZER,
      useFactory: initConfig,
      deps: [AppConfigService],
      multi: true
    },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: InterceptorService,
      multi: true
    },
    CanDeactivateGaurdService
  ],
  bootstrap: [AppComponent], // 可保留，后续可逐步过渡到全独立组件引导
})
export class AppModule { }

方案二：修改服务端引导为模块方式 #

保持AppComponent非独立状态，修改main.server.ts，用模块引导替代bootstrapApplication：

import { enableProdMode } from '@angular/core';
import { platformServer } from '@angular/platform-server';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

const bootstrap = () => platformServer().bootstrapModule(AppModule);

export default bootstrap;

此方案让服务端与浏览器端引导方式保持一致，无需修改组件结构，快速解决编译错误。

选择建议 #

• 若计划逐步迁移到Angular独立组件架构（Angular 14+推荐方案），选方案一，后续可逐步将其他组件改为独立组件，最终移除AppModule。
• 若暂时不想大规模调整架构，选方案二，快速适配现有模块体系。

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