web-dev-qa-db-ja.com

Angular 4からAngular 5+に更新/アップグレードする方法

プロジェクトをAngular 4からAngular 5+に更新する必要があります。

以下のすべての依存関係をAngular 5+に変更する必要があります。

また、Angular CLIを1.5.0に更新しました。

新しいプロジェクトを作成しようとしましたが、Angular 4プロジェクトのみを作成しているようです。

ng new NG5_Project

"dependencies": {
  "@angular/animations": "^4.2.4",
  "@angular/common": "^4.2.4",
  "@angular/compiler": "^4.2.4",
  "@angular/core": "^4.2.4",
  "@angular/forms": "^4.2.4",
  "@angular/http": "^4.2.4",
  "@angular/platform-browser": "^4.2.4",
  "@angular/platform-browser-dynamic": "^4.2.4",
  "@angular/router": "^4.2.4",
  "core-js": "^2.4.1",
  "rxjs": "^5.4.2",
  "zone.js": "^0.8.14"
}

私は何を間違えていますか。

CLI構成：

CLI Config

angularupdatesangular5
37
Sangwin Gawande

Nodeバージョン更新で修正された問題。

Nodeバージョンを更新する必要がありましたが、

Sudo apt-get install nodejs

npm uninstall -g @angular/cli

npm cache clean

npm install -g @angular/cli@latest

ng new ProjectName

node --version ==> 8.9.0

ng --version ==> 1.5.0

"dependencies": {
    "@angular/animations": "^5.0.0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "rxjs": "^5.5.2",
    "zone.js": "^0.8.14"
}
15
Sangwin Gawande

正解は次のとおりです。非常に簡単です。

公式のAngularアップグレードガイドに従ってください。

Angularのバージョンとアップグレードするバージョンを選択する短いフォームに記入します。次に、アップグレードを実行するために必要な手順のリストが表示されます。すべてのアップグレードについて、このガイドに従う必要があります。 （離れて移動する前に賛成してください）:)

https://update.angular.io/

enter image description here

7
Francisco d'Anconia

Angularブログをチェック

https://blog.angular.io/version-5-0-0-of-angular-now-available-37e414935ced

この記事には、更新ガイドが記載されています。

ここで見つけることができます： https://angular-update-guide.firebaseapp.com/

また、angular-CLIを1.5.0に更新して、angular v5プロジェクトを作成できます。違いを自分のものと比較できます。

7
Bunyamin Coskuner

Angular4プロジェクトをangular 5に単純にアップグレードする場合は、次の手順を実行します。

  1. プロジェクトディレクトリに移動します。
  2. コマンドプロンプトを開き、次のコマンドを実行します
  3. npm install -g npm-check-updates
  4. ncu -u

これは私のために働いた。

http://www.talkingdotnet.com/upgrade-angular-4-app-angular-5-visual-studio-2017/

7
Jerin Kurian

もう少し詳しく説明します、これはPROJECT LOCALアップグレードとしてグローバルを両方とも助けてくれました。

正確なガイドラインは（もちろん） https://update.angular.io/ にあります。

グローバル：

$ npm uninstall -g angular-cli (to be sure)
$ npm uninstall -g @angular/cli
$ npm cache clean
$ npm install -g @angular-cli@1
$ ng -v ... this will show you the current CLI version.

プロジェクトローカル：

$ cd to/your/project/folder
$ remove the folder node_modules
$ npm install --save-dev @angular/cli@1
$ npm install

次に：

npm install @angular/animations@^5.0.0 @angular/common@^5.0.0 @angular/compiler@^5.0.0 @angular/compiler-cli@^5.0.0 @angular/core@^5.0.0 @angular/forms@^5.0.0 @angular/http@^5.0.0 @angular/platform-browser@^5.0.0 @angular/platform-browser-dynamic@^5.0.0 @angular/platform-server@^5.0.0 @angular/router@^5.0.0 [email protected] rxjs@^5.5.2

これが必要になる可能性があります（けがをしません）：$ npm監査修正

$ npm install [email protected] --save-exact

出典：

https://update.angular.io/ は最適なルートを表示します。

主な違いは、「http」モジュールを引き続き使用する場合です。 httpからhttpclientモジュールに移行できます（または必要です）。ほとんどの場合、これは非常に簡単です。

0
tjm1706

Angular 4をAngular 5にアップグレードするには

webpack.config.jsを開きます

ContextReplacementPlugin内に以下のコードを追加します

 /angular(\\|\/)core(\\|\/)(@angular|esm5)/
0
user1349544