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

Question

你好 SO 社区和 Angular 人！

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

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

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

与 Angular 2.4

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

在整个应用程序范围内更改

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

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

或者，是否有许多 build/core 不兼容问题会让我整天忙于修复编译 errors/warnings 而不是开发？

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

此刻，我正在这里做我的研究：

更新

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

我会推荐：

阅读新功能并使用 Angular 更新自己 4. 这特别有用：https://angularjs.blogspot.it/2017/03/angular-400-now-available.html
遵循 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

Angular团队公布了，我们不叫angular2或者angular4就叫Angular，每6个[=21]会有一个大更新=] 在 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。 AngularV4.0.0 降低了包的重量并提高了性能。

Answer 2

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

更新前

确保您不使用 extends OnInit，或将 extends 用于任何生命周期事件。而是使用 implements <lifecycle event>.
停止使用 DefaultIterableDiffer、KeyValueDiffers#factories 或 IterableDiffers#factories
停止使用深度导入，这些符号现在用 ɵ 标记并且是不属于我们 public API.
停止使用 Renderer.invokeElementMethod，因为此方法已被删除。目前没有替代品。

更新中

将所有依赖项更新到版本 4 和最新的打字稿。
如果您使用的是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

这是一个 12 分钟的精彩视频，演示了如何 migrate from angular 2 to angular 4 。总而言之，有 3 个基本步骤需要遵循：-

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

的任何引用

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

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

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

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

Is it worth to migrate from Angular 2 to Angular 4?

migration

angular4

angular