angular - 从 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

更改应用程序范围

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

我的意思是，主要功能是否以我必须审查其中许多的方式进行了重新设计？

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

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

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

更新

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

我会推荐：

阅读新功能并使用 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';

score 25 · Accepted Answer

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

更新前

确保您不使用 extends OnInit，或将 extends 与任何生命周期事件一起使用。而是使用implements <lifecycle event>.
停止使用DefaultIterableDiffer, KeyValueDiffers#factories, 或IterableDiffers#factories
停止使用深度导入，这些符号现在被标记为ɵ并且不是我们公共 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/animationsApp 中导入NgModule。
替换RootRenderer为RendererFactory2。
替换Renderer为Renderer2。

更新后

将您的template标签重命名为ng-template.
替换OpaqueTokens为InjectionTokens。
如果您调用DifferFactory.create(...)删除ChangeDetectorRef 参数。
替换ngOutletContext为ngTemplateOutletContext。
替换CollectionChangeRecord为IterableChangeRecord

来源

score 2 · Accepted Answer

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 减轻了包的重量并提高了性能。

score 2 · Accepted Answer

这是一个 12 分钟的精彩视频，演示了如何从 angular 2 迁移到 angular 4。说和做有3个基本步骤要遵循：-

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

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

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

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

angular - 从 Angular 2 迁移到 Angular 4 是否值得？

3 回答 3

Related

Reference