migration - 从 Angular 2 迁移到 Angular 4 值得吗？

Question

你好 SO 社区和 Angularians!

所以，我正在使用 Angular 2 开发一个巨大的平台。我意识到 Angular 2 的许多外部库和依赖项正在迁移到新的 Angular 4。显然给我带来了很多错误。

我可以 fork 这些库并使用 fork 版本并订阅主库开发，或者我可以将我的项目升级到 Angular 4。

为了确定我是否值得迁移而需要回答的问题:

• 与 Angular 2.4 的兼容性

我发现了一些改编以确保与旧版的兼容性，如下所示:https://github.com/angular/angular/commit/e99d721

• 在应用范围内进行更改

我是否必须检查整个应用并开始修复问题？

我的意思是，是否对主要功能进行了重新设计，以至于我将不得不审查其中的许多功能？

或者，是否有许多构建/核心不兼容问题会让我整天忙于修复编译错误/警告而不是开发？

我不是要找人为我做研究，我是在问那些可能已经经历过这个过程或者只是很了解这两个版本的人，以便给我一些经验提示，澄清等

目前，我正在这里做我的研究:

• https://github.com/angular/angular/blob/master/CHANGELOG.md
• http://angularjs.blogspot.it/2017/03/angular-400-now-available.html
• https://learninglaravel.net/angular-4-new-features-and-improvements

更新

我刚刚迁移到 Angular 4。 @PierreDuc 在他的回答中提供的链接是一个非常好的工具，可以在迁移过程中提供一个体面的指南。

我会推荐:

1. 阅读新功能并使用 Angular 4 更新自己。这特别有用:https://angularjs.blogspot.it/2017/03/angular-400-now-available.html
2. 遵循 Angular 的指南并修改您的项目:https://angular-update-guide.firebaseapp.com/

我还建议提交您当前的项目，在您的开发存储库中创建一个新分支，然后在该分支中继续迁移。

我遇到的一个问题:
Input、Output 和 ContentChild 将从错误的路径导入。

我的情况:

import { Component, OnInit, OnDestro } from '@angular/core';
import { Input, ContentChild } from "@angular/core/src/metadata/directives";

解决方案:

import { Component, OnInit, OnDestroy, Input, ContentChild } from '@angular/core';

Answer 1

如果您查看变更日志，您需要记住以下几点:

更新前

• 确保你不使用 extends OnInit ，或将 extends 与任何生命周期事件一起使用。而是使用 implements <lifecycle event> .
• 停止使用 DefaultIterableDiffer , KeyValueDiffers#factories , 或 IterableDiffers#factories
• 停止使用深度导入，这些符号现在标记为 ɵ并且是不是我们公共(public) API 的一部分。
• 停止使用 Renderer.invokeElementMethod因为这个方法已经删除。目前没有替代品。

更新中

• 将所有依赖项更新到版本 4 和最新的 typescript 。
• 如果您使用的是 Linux/Mac，您可以使用:npm install
@angular/{animations,common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router}@4.0.0
typescript@latest --save
• 如果您在应用程序中使用动画，您应该导入 BrowserAnimationsModule来自 @angular/platform-browser/animations在你的应用 NgModule .
• 替换RootRenderer与 RendererFactory2 .
• 替换Renderer与 Renderer2 .

更新后

• 重命名您的 template标记为 ng-template .
• 替换OpaqueTokens与 InjectionTokens .
• 如果您调用 DifferFactory.create(...)删除 ChangeDetectorRef争论。
• 替换ngOutletContext与 ngTemplateOutletContext .
• 替换CollectionChangeRecord与 IterableChangeRecord

source