构建混合Angular应用到生产环境时AOT编译器导致降级组件失效问题

• 问题根因：AOT编译的摇树优化会自动移除未被Angular代码显式引用的执行逻辑，你写在组件文件/独立脚本中的降级注册代码没有被Angular模块依赖，所以会被当成无用代码删除，开发环境默认关闭摇树所以不会触发问题。

步骤1：迁移降级注册逻辑到根模块构造函数 #

将所有组件降级注册的代码从原位置移到Angular根模块的构造函数内，确保模块初始化时必然执行该逻辑，避免被摇树移除，示例代码如下：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { downgradeComponent } from '@angular/upgrade/static';
import { EquipamentosCadastroComponent } from './你的组件路径/equipamentos-cadastro.component';

declare var angular: any;

@NgModule({
  imports: [
    BrowserModule,
    // 你的其他业务模块依赖
  ],
  declarations: [
    EquipamentosCadastroComponent,
    // 其他声明的组件
  ],
  // 降级组件必须加入entryComponents，AOT需要提前编译这类未被模板直接引用的组件
  entryComponents: [EquipamentosCadastroComponent]
})
export class AppModule {
  constructor() {
    // 在此处执行降级注册
    angular.module('aprove')
    .directive(
        'equipamentosCadastro',
        downgradeComponent({ component: EquipamentosCadastroComponent })
    );
    // 其他组件的降级注册也可以放在此处
  }

  // 混合应用不需要Angular单独启动根组件，添加空的ngDoBootstrap方法即可
  ngDoBootstrap() {}
}

步骤2：确认全局AngularJS变量可访问 #

生产构建如果配置了变量作用域隔离，需要确保angular全局变量能被正常读取，你可以在polyfills.ts中添加一行配置显式暴露：

import * as angular from 'angular';
(window as any).angular = angular;

如果你是通过angular.json的scripts数组引入AngularJS脚本，无需额外配置，脚本会自动挂载全局angular变量。

步骤3：不需要关闭AOT #

无需调整AOT编译配置，按上述修改后生产构建即可正常识别降级组件，关闭AOT后需要额外引入JIT编译器依赖、修改启动逻辑，不仅包体积会增大30%以上，运行性能也会下降，不推荐使用。

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