Stephen Fluin：这是汤森路透前端策略领导者 David Owen 的客座文章

在汤森路透的税务与会计部门，我们为企业、政府、会计师事务所、金融机构等构建软件产品。我们对 AngularJS 和 Angular 进行了大量投资，并相信迁移到最新版本是交付下一代这些产品的关键。

Angularjs升级到Angular

在考虑将现有项目升级到 Angular 的选项时，混合模式（通过 ngUpgrade）和分阶段全面重写的方法都得到了同等的重视。团队需要了解每种方法的含义，以便为他们的产品选择最佳选项。

为了帮助团队理解这些模式，我们构建了一系列名为ng-rosetta的参考项目。项目地址：https://github.com/thomsonreuters/FEF/tree/master/ng-rosetta

本系列文章是作为 Angular 迁移模式的实例在内部发布的，并随着新版本和模式的发展而定期更新。本系列文章在升级策略讨论中定期展示和引用，并已纳入我们前端框架社区可用的培训材料中。

ng-rosetta包含的项目

总而言之，我们有一个起始项目（Fruit1X，适用于 Angular 1.x），它使用旧的模式（ControllerAs、Grunt 等）。其余示例项目演示了该应用程序在转换为目标模式后的外观。 Fruit15（适用于 Angular 1.5）展示了 Fruit 应用程序转换为 AngularJS 组件模式并实现了更新的工具（Webpack 和 npm 交付）。 Fruit20–15（适用于 Angular/AngularJS 1.5）展示了混合模式，应用程序通过 ngUpgrade 托管在 Angular shell 中，同时各种构建和测试工具升级为现代等效工具。最后，Fruit20 展示了该项目的完整 Angular 重写。

以下是每个项目的细分、目标模式以及使用的各种工具和模式。

项目名称： Fruit1X

Angular 模式– AngularJS ControllerAs 模式

著名的工具和模式– Grunt、TypeScript1 w/Typings、TSLint、ui-grid 和 ui-router、bootstrap、ui-bootstrap。 i18n 通过角度翻译。通过 Bower 交付的第 3 方依赖项。

项目名称：水果15

Angular 模式 – AngularJS 组件模式

著名的工具和模式 – Webpack2、TypeScript2、ui-grid 和 ui-router、bootstrap 和 ui-bootstrap。 i18n 通过角度翻译。 Karma 单元测试用 TypeScript 编写并通过 Webpack 运行。通过 npm 交付的第 3 方依赖项。

项目名称： Fruit20–15

Angular 模式 – Angular/AngularJS 混合模式（ngUpgrade + AngularJS 组件模式应用程序托管在 Angular 应用程序内）

值得注意的工具和模式 – Fruit15 模式加上 ng-upgrade.downgradeComonent 示例和 Angular 模块和组件的 Angular 提前 (AOT) 编译。

项目名称： Fruit20

角度模式 –完全角度重写

值得注意的工具和模式 – WebPack 2、TypeScript 2、TSLint + Codelyzer、ngRouter（带有延迟加载模块示例）和 Angular 提前（AOT）编译。Karma 单元测试用 TypeScript 编写并通过 Webpack 运行。

我们如何构建 ng-rosetta

一些编写的模式是使用 Angular 产品文档（特别是从 AngularJS和Webpack 升级：简介）结合ng-book2来识别的。许多其他模式是从数十个不同的 StackOverflow 帖子、GitHub 和其他博客上的开源示例中使用的。 （对于所有提供了正确的金块或者在某些情况下提供了大量信息的开源开发人员、博主和 StackOverflow 社区成员，我们要表达我们的感谢和感激之情。）还有其他模式只需要进行试验用 和 按摩解锁。

Rosetta的开源

作为回馈开源社区的一种方式，并希望为下一轮需要探索这些场景的开发者提供参考资料，我在这里发布了整个 ng-rosetta 系列： https://github。 com/thomsonreuters/FEF/tree/master/ng-rosetta 。我们希望通过共享这组模式，我们可以与开源社区合作，以纳入不断发展的最佳实践和新的开发。

非常感谢 Angular 社区提供了学习尖端工具和技术的好方法，也感谢 Angular 团队为我们所有人提供了一个真正出色的编码框架。

我们拥有并维护着大约 80 种产品，其中许多产品是在现代前端模式和工具出现之前构建的。其中许多产品也是由地理位置分散的团队使用各种技术构建的。可以想象，将标准化应用于这个生态系统会带来许多挑战。在这里描述的场景中，我们的挑战是为我们的产品提供统一的外观和感觉以及向现代 Web 迁移的路径。

2013 年，我们正式决定在 AngularJS 上标准化我们的产品，并创建了一个名为前端框架的内部小组来管理该过程。如今，近 500 名开发人员参与了前端框架社区，该社区致力于选择和传播前端架构、工具和模式。

除了社区之外，前端框架小组还提供有关各种前端工具（例如 AngularJS、TypeScript、Webpack 等）的指导、策略和培训，以及对我们内部开发的共享工具和库的管理。这些共享工具的一个例子是 AngularJS 种子项目，它演示了推荐的模式，例如 AngularJS 组件模式、通过 ui-router 使用分层路由以及用于前端测试和构建的模式。另一个例子是我们内部开发的 UI 工具包，它旨在标准化我们应用程序的外观和感觉。

原文链接：https://blog.angular.dev/an-upgrade-path-to-angular-at-thomson-reuters-9fc69b67c4b6