AngularJS 迁移到使用导入/导出答案

【问题标题】：AngularJS migration to using imports/exportsAngularJS 迁移到使用导入/导出
【发布时间】：2019-06-06 08:02:16
【问题描述】：

我们的项目目前仍在 AngularJS (v1.6) + TypeScript 上运行，但我们希望通过实现组件来让应用程序准备好升级到最新的 Angular，类似于它们在 Angular 中的编写方式。目前我们没有使用导入或导出，但想逐步引入。 IE。我们想开始使用：

import * as angular from "angular";
import { MyComponentComponent } from './MyComponent.component';

export default angular
  .module('myModule', [])
  .component('myComponent', MyComponent);

而不是

angular
  .module('myModule', [])
  .component('myComponent', MyComponent);

但是，目前这样做会由于范围而导致问题。我们的应用程序现在拥有 global 变量 angular，所有东西都附加到该变量上，而 import/export 会创建注入 angular 的单独实例的闭包，因此两者无法通信。

有没有办法把这两种方法结合起来，让我们可以逐步升级现有的系统？

【问题讨论】：

你是通过vsavkin.com/…吗？
@IftekharDani 假设我们已经在使用具有导入和导出功能的组件，但我们不是......
首先，您没有一个名为 angular 的“全局”变量。您只需有一个可以导入的变量 - 有区别。所以我不太明白，所以你导出角度变量，然后在不同的类中导入它并附加其他模块？
@NicolasGehlert 目前我们不导入/导出任何东西，而是使用带有 Typescript 的更简单的 AngularJS 版本，一切都用angular.module('myModule').component('myComponent', MyComponent); 等初始化。但我们想开始使用导入来让我们的代码为升级做好准备。
嗯，我认为您的方法没有任何问题。您可以尝试在 stackblitz 中创建一个基本示例吗？

标签： angularjs angular typescript angularjs-components

【解决方案1】：

尝试使用 NgUpgrade，它会将您的应用升级到最新版本。

看看https://angular.io/guide/upgrade

【讨论】：

【解决方案2】：

使用 ngUpgrade 升级 Angular 是一个非常好的建议。借助此功能，您可以以更有效的方式升级现有的 angularjs 项目，例如通过同时运行 angularjs 和 angular 代码来并行转换代码。为了成功执行迁移，您需要遵循某些步骤：

为 Angular 和 ngUpgrade 安装依赖项。
为您的项目设置 ngUpgrade。

我们目前也在将 angularjs 项目迁移到 angular。我们遵循以下参考资料进行迁移。它将为您提供该过程的详细概述，并希望对您有所帮助：

【讨论】：

谢谢！不过，我被困在第 1 步，我们有一个使用grunt 的构建（以及通过bower 的AngularJS）。我不清楚我是如何运行 Angular 的。我是否从构建中删除旧的 AngularJS 并用新的替换？
@Richard 的第一步是放弃 bower，改用 npm 或 yarn。
下一步将开始逐步将您的代码从 AngularJS 转换为组件，因为以后组件更容易转换为 Angular。
同时按照上述参考资料之一的说明同时使用 angular 和 angularJS。
谢谢，我们已经开始将控制器和指令转换为组件，但现在我想开始使用Angular。不过，我们有一个相当大的项目，无论如何，这一切都很棘手。

【解决方案3】：

有两种方式（2 和 3 类似但作用不同）：

重写应用程序（最好的方法，但对于大型应用程序来说很难）
进入混合状态（例如，通过使用具有 AngularJS 和 Angular 5 的过渡混合应用程序）。见AngularJS to Angular5 — Upgrading a large application
明智地迁移每个模块。见Migrating Angular 1 Applications to Latest Angular in 5 Simple Steps

【讨论】：