web-dev-qa-db-ja.com

Angular 2からAngular 4？

SOコミュニティとアングラリアンの皆さん、こんにちは！

それで、Angular 2で巨大なプラットフォームを開発している途中です。そして、Angular 2の多くの外部ライブラリと依存関係が新しいAngularに移行していることに気付きました。明らかに。

これらのライブラリをフォークして、フォークされたバージョンを使用し、メインのライブラリ開発にサブスクライブするか、プロジェクトをAngular 4にアップグレードすることができます。

移行する価値があるかどうかを判断するために答えられる質問：

  • Angular 2.4との互換性

次のように、レガシーとの互換性を確保するためのいくつかの適応を見つけました： https://github.com/angular/angular/commit/e99d721

  • アプリ全体の変更

アプリ全体を調べて、修正を開始する必要がありますか？

つまり、主な機能を再加工して、それらの多くを確認する必要がありますか？

または、開発ではなくコンパイルエラー/警告を修正するのに何日も費やし続けるビルド/コアの非互換性がたくさんありますか？

私に誰かに研究を依頼するのではなく、すでにこのプロセスを経験したか、両方のバージョンを順番によく知っている人に尋ねています経験のヒント、説明などを教えてください。

現在、私はここで研究を行っています：

[〜＃〜] update [〜＃〜]

Angular 4に移行しました。 @PierreDucが答えたリンクは、移行プロセスで適切なガイドラインを作成するための非常に素晴らしいツールです。

私がお勧めします：

  1. 新機能を読み、Angular 4で更新します。これは特に便利でした： https://angularjs.blogspot.it/2017/03/angular-400-now-available.html
  2. 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';
angularmigrationangular4
27
SrAxi

変更ログを確認する場合、留意する必要があることがいくつかあります。

更新前

  • Extends OnInitを使用しないか、またはライフサイクルイベントでextendsを使用してください。代わりに_implements <lifecycle event>_を使用してください。
  • DefaultIterableDiffer、_KeyValueDiffers#factories_、または_IterableDiffers#factories_の使用を停止します
  • ディープインポートの使用を停止すると、これらのシンボルは_ɵ_でマークされ、パブリックAPIの一部ではなくなりました。
  • このメソッドは削除されたため、_Renderer.invokeElementMethod_の使用を停止してください。現在、代替品はありません。

更新中

  • すべての依存関係をバージョン4および最新のTypeScriptに更新します。
  • 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に置き換えます

ソース

25
PierreDuc

migrate from angular 2 to angular 4 の方法を示すニース12分のビデオがあります。従うべき基本手順：-

1）古いnode_modulesフォルダーを削除して、2.Xへの参照を回避します

2）package.jsonですべての@angularを4.0.0に変更し、NPMインストールを実行します。可能であれば、キャッシュをクリアしてください。

3）NPMのインストールを行うと、ピアバージョンが一致しない可能性が高くなります。修正してください。上記のビデオでは、ピアの不一致を修正する方法について説明しています。

上記の回答で述べたように、イベントなどのインターフェイスを実装する必要があります。何らかの理由で、問題が発生せず、イベントは以前のAngular 2。

enter image description here

2
Shivprasad Koirala

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 V4.0.0はパッケージの重量を減らし、パフォーマンスを向上させました。

2
Vignesh