如何使用 SystemJS 将 Angular 4 加载到 AngularJS 应用程序中？答案

【问题标题】：How do I load Angular 4 into an AngularJS app using SystemJS?如何使用 SystemJS 将 Angular 4 加载到 AngularJS 应用程序中？
【发布时间】：2018-05-18 13:56:42
【问题描述】：

我想将 AngularJS 应用程序转换为 Angular 4。我正在阅读有关从 AngularJS 升级的官方 Angular 文档https://angular.io/guide/upgrade。它指出：

要开始将您的 AngularJS 应用程序转换为混合应用程序，您需要加载 Angular 框架。你可以看到如何做到这一点 SystemJS 按照Setup 中的说明，选择性地复制来自 QuickStart github 存储库的代码。

然而，“设置”链接指向一个没有提及 SystemJS 的页面。如何使用 SystemJS 将 Angular 4 框架加载/构建到现有的 AngularJS 应用程序中？

【问题讨论】：

标签： angularjs angular systemjs

【解决方案1】：

您指定的链接指向使用 systemjs 的 Angular 快速入门项目。 https://github.com/angular/quickstart

尽管该项目被标记为已弃用，但它目前在如何使用 systemjs 设置 Angular 方面仍然有效。

然后，您可以使用快速入门作为移植代码的基础，并使您能够按照该设置步骤中的其他说明进行操作。

【讨论】：

谢谢，我进一步阅读了升级指南（特别是“PhoneCat 升级教程”），其中包含有关如何有选择地使用设置快速启动项目的一些输出的说明，包括它生成的 SystemJS 配置（以便 SystemJS 可以加载 Angular 4 应用程序的模块）。

【解决方案2】：

我从 Angular 文档中给出的那句话非常令人困惑。升级时你真正需要做的是在你的项目中以某种方式为 Angular 4 应用程序设置脚手架，然后使用 SystemJS 作为模块加载器，在运行时加载 Angular 4 模块（因为那里目前对 EcmaScript 模块系统的原生浏览器支持不完整）。

通过进一步阅读升级指南（特别是“PhoneCat 升级教程 - https://angular.io/guide/upgrade#phonecat-upgrade-tutorial”），我发现您需要做的是在独立位置设置 QuickStart 项目，以某种方式将大部分内容移到您现有的 AngularJS 项目为 Angular 4 项目提供脚手架，然后通过有选择地使用“已构建”快速启动项目中的一些 SystemJS 配置将 SystemJS 连接为模块加载器。

【讨论】：