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

Question

您好 SO 社区和 Angularians！

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

我可以分叉这些库并使用分叉版本并订阅主库开发，或者我可以将我的项目升级到 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

这是一个 12 分钟的精彩视频，演示如何 migrate from angular 2 to angular 4 。 说了和做了三个基本步骤：-

1) 删除旧的 node_modules 文件夹以避免对 2.X 的任何引用

2) 将 package.json 中的所有 @angular 更改为 4.0.0 并进行 NPM 安装。如果可能，请清除缓存。

3) 在进行 NPM 安装时，您很可能会遇到对等版本不匹配的情况。纠正它。上面的视频解释了如何解决对等不匹配问题。

如上所述，您需要为事件等实现接口。由于某种原因，我没有遇到任何问题，并且事件像以前在 Angular 2 中一样工作。

Answer 2

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

更新前

• 确保不使用扩展OnInit，或将扩展用于任何生命周期事件。请改用implements <lifecycle event>。
• 停止使用DefaultIterableDiffer、KeyValueDiffers#factories 或IterableDiffers#factories
• 停止使用深度导入，这些符号现在标有 ɵ 并且是 不属于我们的公共 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

Answer 3

Angular 团队已经宣布，我们不要叫 Angular 2 或 Angular 4，而是叫它 Angular，每 6 个月会有一次重大更新。我在 angular v4.0.0 中遇到过这个问题，所以在 webpack 中更改配置

  new webpack.ContextReplacementPlugin(
                // The (\\|\/) piece accounts for path separators in *nix and Windows
                /angular(\\|\/)core(\\|\/)@angular/,
                helpers.root('./src'), // location of your src
                {} // a map of your routes
            ),

并安装 @angular/animations 包并导入 app.module.ts 文件中

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
    imports: [
        BrowserAnimationsModule
    ]
})

我更愿意更新到最新版本的 Angular。 Angular V4.0.0 减轻了包的重量并提高了性能。