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/

我还建议您提交当前项目，在dev存储库中创建一个新分支，然后继续在该分支中进行迁移。

我遇到的问题：
将从错误的路径导入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

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

更新前

确保您不使用扩展OnInit，或对任何生命周期事件使用扩展。而是使用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的{{1}} 您的应用@angular/platform-browser/animations。
将NgModule替换为RootRenderer。
将RendererFactory2替换为Renderer。

更新后

将您的Renderer2代码重命名为template。
将ng-template替换为OpaqueTokens。
如果您致电InjectionTokens，请移除DifferFactory.create(...) 参数。
将ChangeDetectorRef替换为ngOutletContext。
将ngTemplateOutletContext替换为CollectionChangeRecord

source

Answer 2

Angular团队宣布，让我们不要调用角度2或角度4让我们称之为Angular，并且每6个月会有一次重大更新。我在角度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 V4.0.0降低了包装重量，并提高了性能。

Answer 3

这是一段精彩的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中那样有效。

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

3 个答案: