从 Angular 2 迁移到 Angular 4 是否值得? [英] Is it worth to migrate from Angular 2 to Angular 4?

问题描述

您好 SO 社区和 Angularians！

Hello SO community and Angularians!

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

So, I am midway developing a huge platform in Angular 2. And I realized that many external libraries and dependencies for Angular 2 are migrating to the new Angular 4. Giving me many errors, obviously.

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

I could fork these libraries and use the forked versions and subscribe to main library development or, I could just upgrade to Angular 4 my project.

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

Questions to be answered in order to determinate if it's worth for me to migrate:

• 与 Angular 2.4 的兼容性

我发现了一些调整以确保与旧版兼容，例如:https://github.com/angular/angular/commit/e99d721

I have found some adaptations to ensure compatibility with legacy, like this: https://github.com/angular/angular/commit/e99d721

• 更改应用范围

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

Do I have to go through my whole app and start fixing things?

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

I mean, are main functionalities reworked in such way that I will have to review many of them?

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

Or, are there many build/core incompatibilities that will keep me days occupied fixing compile errors/warnings instead of developing?

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

I am not asking for someone to do the research for me, I am asking people that maybe already went through this process or simply know well both versions in order to give me some experience tips, clarifications, etc.

目前，我正在这里进行研究:

At the moment, I am doing my research here:

• 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-和改进

更新

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

I just migrated to Angular 4. The link that @PierreDuc put in his answer is a very nice tool to have a decent guideline in the migration process.

我会推荐:

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

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

I would also recommend to commit your current project, create a new branch in your dev repository and proceed with migration in that branch.

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

An issue that I encountered:
Input, Output and ContentChild will be imported from a wrong path.

我的情况:

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';

推荐答案

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

If you check the changelog there are a couple things you need to keep in mind:

更新前

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

• Ensure you don't use extends OnInit, or use extends with any lifecycle event. Instead use implements <lifecycle event>.
• Stop using DefaultIterableDiffer, KeyValueDiffers#factories, or IterableDiffers#factories
• Stop using deep imports, these symbols are now marked with ɵ and are not part of our public API.
• Stop using Renderer.invokeElementMethod as this method has been removed. There is not currently a replacement.

更新期间

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

• Update all of your dependencies to version 4 and the latest typescript.
• If you are using Linux/Mac, you can use: 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
• If you use animations in your application, you should import BrowserAnimationsModule from @angular/platform-browser/animations in your App NgModule.
• Replace RootRenderer with RendererFactory2.
• Replace Renderer with Renderer2.

更新后

• 将你的 template 标签重命名为 ng-template.
• 将 OpaqueTokens 替换为 InjectionTokens.
• 如果你调用 DifferFactory.create(...) 删除 ChangeDetectorRef论据.
• 将 ngOutletContext 替换为 ngTemplateOutletContext.
• 将 CollectionChangeRecord 替换为 IterableChangeRecord

• Rename your template tags to ng-template.
• Replace OpaqueTokens with InjectionTokens.
• If you call DifferFactory.create(...) remove the ChangeDetectorRef argument.
• Replace ngOutletContext with ngTemplateOutletContext.
• Replace CollectionChangeRecord with IterableChangeRecord

来源

这篇关于从 Angular 2 迁移到 Angular 4 是否值得?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！