AngularJS升级Angular遇AppModule引导错误：未声明bootstrap组件或ngDoBootstrap方法

看起来你在通过NgUpgrade构建AngularJS到Angular的混合应用时，遇到了Angular模块引导的核心问题。这个错误的本质是：Angular的AppModule既没有声明bootstrap数组（指定要自动启动的组件），也没有提供ngDoBootstrap方法（手动控制引导逻辑），而混合应用场景下我们恰恰不需要自动引导Angular组件——而是要通过UpgradeModule来衔接AngularJS应用。

下面结合你的RequireJS+AMD配置，一步步解决问题：

1. 给AppModule添加ngDoBootstrap方法 #

修改你的AppModule代码，添加一个空的ngDoBootstrap方法，告诉Angular不要尝试自动引导组件，把控制权交给我们的混合逻辑：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { UpgradeModule } from '@angular/upgrade/static';

@NgModule({
  imports: [
    BrowserModule,
    UpgradeModule // 必须引入UpgradeModule来衔接AngularJS
  ]
})
export class AppModule {
  // 添加这个空方法即可解决引导错误
  ngDoBootstrap() {}
}

2. 正确初始化UpgradeModule并引导AngularJS应用 #

因为你用的是RequireJS（AMD模块），需要确保在加载完所有依赖后，先初始化Angular的模块，再通过UpgradeModule引导你的AngularJS应用。修改你的启动逻辑（比如main.js中的代码）：

// 先确保zone.js和reflect-metadata加载完成
require(['zone.js', 'reflect-metadata'], function() {
  // 再加载Angular和AngularJS核心依赖
  require(['angular', '@angular/core', '@angular/platform-browser-dynamic', '@angular/upgrade/static'], 
    function(angular, core, platformBrowserDynamic, upgradeStatic) {
      // 初始化Angular的AppModule
      platformBrowserDynamic.platformBrowserDynamic().bootstrapModule(core.AppModule)
        .then(platformRef => {
          // 获取UpgradeModule实例
          const upgrade = platformRef.injector.get(upgradeStatic.UpgradeModule);
          // 引导你的AngularJS应用（替换成你的AngularJS模块名）
          upgrade.bootstrap(document.body, ['yourAngularJSAppModule']);
        })
        .catch(err => console.error(err));
    });
});

3. 检查RequireJS配置的加载顺序 #

确保zone.js和reflect-metadata在Angular框架代码之前加载，这两个是Angular依赖的核心库。调整你的RequireJS paths配置：

require.config({
  waitSeconds: 0,
  baseUrl: './s/lib',
  paths: {
    'zone.js': 'path/to/zone.js', // 替换成实际的zone.js文件路径
    'reflect-metadata': 'path/to/reflect-metadata', // 替换成实际路径
    'angular': 'angular',
    'angular-aria': 'angular-aria.min',
    'jquery': 'jquery.min',
    "wa-angular": "wa-angular.min",
    'ui.router.components': 'routeToComponents'
    // 其他依赖路径...
  },
  shim: {
    // 给AngularJS相关模块添加依赖声明，确保加载顺序正确
    'angular': { exports: 'angular' },
    'angular-aria': { deps: ['angular'] }
  }
});

4. 确认tsconfig.json的配置正确性 #

你的tsconfig已经设置了module: "amd"和必要的装饰器配置，这符合RequireJS的需求，只需要确认include路径包含了你的AppModule文件（当前配置./src/s/**/*如果覆盖到了就没问题）。

为什么会出现这个错误？ #

在纯Angular应用中，我们会通过@NgModule.bootstrap数组指定启动组件，Angular会自动引导它。但在混合应用场景下，我们的页面已经由AngularJS控制，不需要Angular自动引导组件，所以必须提供ngDoBootstrap方法来跳过自动引导逻辑——哪怕这个方法是空的，它只是告诉Angular：“我来处理引导，不用你管”。

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