如何从AngularJS库迁移/升级到Angular CLI并实现双启动？

一、能否像AngularJS那样直接下载Angular2+库？ #

可以。Angular提供了UMD格式的预编译库文件，你可以通过两种方式获取：

• 从@angular/*系列npm包中提取：每个Angular核心模块（如core、common、upgrade等）的npm包内都包含bundles目录，里面的.umd.js文件就是可直接通过<script>标签引入的版本。
• 使用公共CDN：直接引入CDN上的UMD格式文件，无需本地下载。

这种方式完全复刻了AngularJS通过脚本标签引入的使用模式，无需依赖Angular CLI。

二、非CLI场景下的迁移/双启动（Hybrid）方案 #

针对未使用Angular CLI构建的AngularJS应用，可通过以下步骤实现双启动（同时运行AngularJS和Angular2+），逐步迁移代码而非从头重写：

1. 基础依赖引入 #

在现有HTML文件中按顺序添加必要的脚本标签：

<!-- 必须先引入Zone.js，Angular依赖它处理变更检测 -->
<script src="path/to/zone.js"></script>
<!-- RxJS，Angular异步操作的核心依赖 -->
<script src="path/to/rxjs.umd.js"></script>
<!-- Angular核心模块 -->
<script src="path/to/core.umd.js"></script>
<script src="path/to/common.umd.js"></script>
<script src="path/to/compiler.umd.js"></script>
<script src="path/to/platform-browser.umd.js"></script>
<script src="path/to/platform-browser-dynamic.umd.js"></script>
<!-- 升级适配器，用于连接AngularJS与Angular2+ -->
<script src="path/to/upgrade.umd.js"></script>

2. 双启动核心配置 #

修改现有AngularJS应用的启动逻辑，集成Angular的UpgradeModule，实现双应用共存：

// 保留原有AngularJS模块定义
const angularJSApp = angular.module('myAngularJSApp', []);

// 定义Angular2+模块，引入UpgradeModule
const angularApp = ng.core
  .NgModule({
    imports: [
      ng.platformBrowser.BrowserModule,
      ng.upgrade.UpgradeModule // 引入升级适配器
    ],
    declarations: [], // 后续可添加新的Angular组件
    providers: [] // 可注册共享服务
  })
  .class({
    constructor: [ng.upgrade.UpgradeModule, function(upgradeModule) {
      this.upgradeModule = upgradeModule;
    }],
    // 自定义引导逻辑，启动AngularJS应用
    ngDoBootstrap: function() {
      this.upgradeModule.bootstrap(document.body, ['myAngularJSApp']);
    }
  });

// 启动Angular应用，同时触发AngularJS的引导
ng.platformBrowserDynamic.platformBrowserDynamic().bootstrapModule(angularApp);

3. 逐步迁移代码 #

双启动模式下，你可以分模块迁移，无需一次性重写：

• AngularJS组件嵌入Angular：使用UpgradeComponent把AngularJS组件包装成Angular组件在新代码中使用。
• Angular组件嵌入AngularJS：使用downgradeComponent把Angular组件降级为AngularJS指令，在原有模板中调用。
• 共享服务：通过downgradeInjectable把Angular服务降级为AngularJS服务，或通过upgradeInjectable把AngularJS服务升级为Angular服务，实现跨框架服务复用。

4. 关键注意事项 #

• 版本兼容性：建议使用AngularJS 1.7.x版本搭配Angular 8.x及以上版本（升级适配器在高版本Angular中仍保持对AngularJS的支持）。
• 构建流程：无需切换到Angular CLI，可继续使用原有的构建工具（如Gulp、Grunt）或纯静态文件部署方式。
• 避免CLI专属配置：无需创建angular.json等CLI配置文件，所有依赖通过<script>标签管理。

内容的提问来源于stack exchange，提问作者Mr. H