从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. 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-和改进

• 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在他的答案中提供的链接是一个非常不错的工具，可以在迁移过程中有一个不错的指导原则.

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://angular-update-guide.firebaseapp.com /

1. Read new features and update yourself with Angular 4. This was specially useful: https://angularjs.blogspot.it/2017/03/angular-400-now-available.html
2. Follow Angular's guideline and modify your project: 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和最新的打字稿.
• 如果您使用的是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
• 如果在应用程序中使用动画，则应导入 来自@angular/platform-browser/animations中的BrowserAnimationsModule 您的应用程序NgModule.
• 用RendererFactory2替换RootRenderer.
• 用Renderer2替换Renderer.

• 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.
• 用InjectionTokens替换OpaqueTokens.
• 如果致电DifferFactory.create(...)，请删除ChangeDetectorRef 争论.
• 用ngTemplateOutletContext替换ngOutletContext.
• 将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屋！