web-dev-qa-db-ja.com

からプロジェクトをアップグレードしたい Angular v5〜 Angular v6

Angular 6がここにあるので、私のAngular 5クライアントアプリケーションをAngular 6にアップグレードまたは移動したいのですが、チュートリアルやその他の情報が得られません。

私によれば、私は新しいAngular CLIを実行してから、古いソースを新しいプロジェクトに移動する必要があります。 Angular 6は、Ivyという新しいレンダラーを使用しています。 Ivyに従ってプロジェクトを変更する必要がありますか？

angularmigrationupgradeivy
110
Abhishek Chokra

Angular v6からAngular v7にアップグレード

バージョン7 of Angularがリリースされました 公式Angularブログリンク 。詳細については、公式の角度更新ガイド https://update.angular.io をご覧ください。これらの手順は、Angular Materialを使用した基本的なAngular 6アプリケーションに有効です。

ng update @angular/cli 
ng update @angular/core
ng update @angular/material

Angular v5からAngular v6にアップグレード

バージョン6 of Angularがリリースされました 公式Angularブログリンク 。以下で一般的なアップグレードの手順を説明しましたが、アップデートの前後にv6で機能するようにコードを変更する必要があります。詳細については、公式Webサイト https://update.angular.io を参照してください。

アップグレード手順（主に 公式Angular更新ガイド /を使用してAngular素材を使用した基本的なAngularアプリ）：

  1. 更新しない場合は、NodeJSのバージョンが8.9以降であることを確認してください。

  2. グローバルにローカルにAngularcliを更新し、次のコマンドを実行して古い設定 .angular-cli.json を新しい angular.json の形式に移行します。

    npm install -g @angular/cli  
npm install @angular/cli  
ng update @angular/cli

  3. 次のコマンドを実行して、Angularフレームワークパッケージをすべてv6に、正しいバージョンのRxJSとTypeScriptを更新します。

    ng update @angular/core

  4. 次のコマンドを実行して、Angular Materialを最新バージョンに更新します。

    ng update @angular/material

  5. RxJS v6はv5から大きく変更されています。v6は後方互換性パッケージrxjs-compatを持っています。これはあなたのアプリケーションを動かし続けるでしょうが、TypeScriptコードをrxjs-compatに依存しないようにリファクタリングすべきです。 TypeScriptコードをリファクタリングするには、次のコマンドを実行します。

    npm install -g rxjs-tslint   
rxjs-5-to-6-migrate -p src/tsconfig.app.json

    注：すべての依存関係がRxJS 6に更新されたら、バンドルサイズが大きくなるため、rxjs-compatを削除してください。詳しくは RxJSアップグレードガイド をご覧ください。

    npm uninstall rxjs-compat

  6. 確認するにはng serveを実行してください。
    ビルドでエラーが発生した場合の詳細は https://update.angular.io を参照してください。

Angular v5からAngular 6.0.0-rc.5へのアップグレード

  1. Rxjsを6.0.0-beta.0にアップグレードしてください。詳しくは RxJSアップグレードガイド をご覧ください。 RxJS v6には大きな変更があるため、最初に最新のRxJSバージョンと互換性のあるコードにしてください。

  2. NodeJSのバージョンを8.9以降に更新します（これはangle cli 6バージョンに必要です）。

  3. Angularcliグローバルパッケージを次のバージョンに更新します。

    npm uninstall -g @angular/cli
npm cache verify

    npmバージョンが5未満の場合はnpm cache cleanを使用

    npm install -g @angular/cli@next

  4. Package.jsonファイルのAngularパッケージのバージョンを^6.0.0-rc.5に変更

    "dependencies": {
  "@angular/animations": "^6.0.0-rc.5",
  "@angular/cdk": "^6.0.0-rc.12",
  "@angular/common": "^6.0.0-rc.5",
  "@angular/compiler": "^6.0.0-rc.5",
  "@angular/core": "^6.0.0-rc.5",
  "@angular/forms": "^6.0.0-rc.5",
  "@angular/http": "^6.0.0-rc.5",
  "@angular/material": "^6.0.0-rc.12",
  "@angular/platform-browser": "^6.0.0-rc.5",
  "@angular/platform-browser-dynamic": "^6.0.0-rc.5",
  "@angular/router": "^6.0.0-rc.5",
  "core-js": "^2.5.5",
  "karma-jasmine": "^1.1.1",
  "rxjs": "^6.0.0-uncanny-rc.7",
  "rxjs-compat": "^6.0.0-uncanny-rc.7",
  "zone.js": "^0.8.26"
},
"devDependencies": {
  "@angular-devkit/build-angular": "~0.5.0",
  "@angular/cli": "^6.0.0-rc.5",
  "@angular/compiler-cli": "^6.0.0-rc.5",
  "@types/jasmine": "2.5.38",
  "@types/node": "~8.9.4",
  "codelyzer": "~4.1.0",
  "jasmine-core": "~2.5.2",
  "jasmine-spec-reporter": "~3.2.0",
  "karma": "~1.4.1",
  "karma-chrome-launcher": "~2.0.0",
  "karma-cli": "~1.0.1",
  "karma-coverage-istanbul-reporter": "^0.2.0",
  "karma-jasmine": "~1.1.0",
  "karma-jasmine-html-reporter": "^0.2.2",
  "postcss-loader": "^2.1.4",
  "protractor": "~5.1.0",
  "ts-node": "~5.0.0",
  "tslint": "~5.9.1",
  "TypeScript": "^2.7.2"
}

  5. 次にAngularcliローカルパッケージを次のバージョンに更新し、上記のパッケージをインストールします。

    rm -rf node_modules dist # use rmdir /S/Q node_modules dist in Windows 
Command Prompt; use rm -r -fo node_modules,dist in Windows PowerShell
npm install --save-dev @angular/cli@next
npm install

  6. Angular CLI設定フォーマットは、Angular Cli 6.0.0-rc.2バージョンから変更されています。既存の設定は、次のコマンドを実行することで自動的に更新できます。これは古い設定ファイル .angular-cli.json を削除し、新しい angular.json fileと書きます。

    ng update @angular/cli --migrate-only --from=1.7.4

注： - 「AngularコンパイラにはTypeScript> = 2.7.2および<2.8.0が必要ですが、2.8.3が代わりに見つかりました」というエラーが発生した場合。次のコマンドを実行してください。

npm install [email protected]
265
Ashish Jain

Angular 6がリリースされました。

https://blog.angular.io/version-6-of-angular-now-available-cc56b0efa7a4

これが私の小さなプロジェクトの1つでうまくいったことです

  1. npm install -g @ angular/cli
  2. npm install @ angular/cli
  3. ng update @ angular/cli - 移行のみ--from = 1.7.0
  4. ng @コアの更新
  5. npm install rxjs-compat
  6. サーブ

Package.jsonで実行スクリプトを更新する必要があるかもしれません。あなたが "app"や "environment"のようなフラグを使っているならば、これらはそれぞれ "project"と "configuration"に更新されました。

より詳しいガイドは https://update.angular.io/ を参照してください。

18
Arjun Shankar

あなた自身の特定のニーズのためにあなたが何をする必要があるかをあなたに教える公式のアップグレードガイドを使うだけです：

Upgrade angular

https://update.angular.io/ /

15
Valentin Despa

Angular 5からAngular 6への段階的なアップグレードの詳細を確認します。これらは、アップグレード中に発生する問題とその解決方法についての詳細を提供します。

  • ノードのバージョンを8以上に更新し、Angularcliをグローバルにnpm i -g @ angular/cli @ latestで最新の状態にインストールします。
  • Angular 6は、設定ファイルとして.anguar-cli.jsonの代わりにangular.jsonを使用します。 tslintも変更されました。最新の設定の詳細については https://github.com/angular/angular-cli/wiki/angular-workspace を確認してください。既存の設定を新しい設定ファイルに移動する必要があります。
  • これを行うには、新しい「自分のプロジェクト」を使用し、前にプロジェクトで使用したプレフィックス、スタイルなどのデフォルトを使用して、最新のクリップを使用して別のダミープロジェクトを作成します。 cli https://github.com/angular/angular-cli/wiki/new で新しいプロジェクトを作成します。
  • 現在のバージョンのAngular→Angular 6.から変更された内容を確認するには、 https://update.angular.io/ を使用します。6.変更方法の使い方を説明します。 /修正してください。
  • 上記の手順に従って、手順2で作成したangular.jsonファイルをコピー/更新します。プロジェクト内でnpm iを実行してすべての依存関係を取得し、npm updateを実行します。
  • 今大部分が来る。 RxJSのアップグレードと競合の解消RxJSは、このリリースで、オペレータとObservableの作成者のインポートを標準化しました。 npm i -g rxjs-tslintを実行し、tslint.jsonに以下のlint構成を追加します。
{
  "rulesDirectory": [
    "node_modules/rxjs-tslint"
  ],
  "rules": {
    "rxjs-collapse-imports": true,
    "rxjs-pipeable-operators-only": true,
    "rxjs-no-static-observable-methods": true,
    "rxjs-proper-imports": true
  }
}
  • 今ng lint --fixを実行してください。これでいくつかの項目は修正されますが、残りの問題の大部分は強調表示されるので手動で修正する必要があります。

オペレータ名の変更： 

do -> tap, 
catch -> catchError, 
switch -> switchAll, 
finally -> finalize

すべての演算子がrxjs /に移動しました/演算子 

import { map, filter, reduce } from 'rxjs/operators';

観測可能な作成方法はrxjsに移動されました 

   import { Observable, Subject, of, from } from 'rxjs';

すべて設定できました。ようこそAngular 6 :)アップグレード方法については、こちらのブログ投稿を確認してください

7
UdayVunnam

Angular-cli.jsonをangular.jsonに変更するには、 ng update @ angular/cli を再実行する必要がありました。

4
Kris Bonev

Angular 5からAngular 6に更新するには、以下のコメントを実行してください

  1. ng @ update/ngiのアップデート
  2. ng @コアの更新
  3. npm install rxjs-compat（古いバージョンのrxjs 5.6をサポートするため）
  4. npm install -g rxjs-tslint（コード内でrxjs 5からrxjs 6の形式に変更します。グローバルにインストールした場合のみ機能します）
  5. rxjs-5-to-6-migrate -p src/tsconfig.app.json（インストール後、ソースコードでrxjs6形式に変更する必要があります）
  6. npm uninstall rxjs-compat（最後に削除してください）
2
user2716958

完全ガイド

-----------------角度付きクリップ付き--------------------------

1. CLIをグローバルにもローカルにも更新する

  1. NPMを使用する（ノードバージョン8以降があることを確認してください）

    npm uninstall -g @angular/cli npm cache clean npm install -g @angular/cli@latest npm i @angular/cli --save

  2. 糸を使う

    yarn remove @angular/cli yarn global add @angular/cli yarn add @angular/cli

2.依存関係を更新する

ng update @angular/cli
ng update @angular/core
ng update @angular/material
ng update rxjs

Angular 6はTypeScript 2.7とRxJS 6に依存するようになりました

通常、RxJSのインポートや演算子が使用されるたびにコードを更新する必要がありますが、ありがたいことに、重い作業の大部分を処理するパッケージがあります。

npm i -g rxjs-tslint 

//or using yarn

yarn global add rxjs-tslint

その後、rxjs-5-to-6-migrateを実行します。

rxjs-5-to-6-migrate -p src/tsconfig.app.json

最後にrxjs-compatを削除します。

npm uninstall rxjs-compat

// or using Yarn

yarn remove rxjs-compat

このリンクを参照してください https://alligator.io/angular/angular-6/

------------------- angular-cliなし-------------------------

だからあなたは手動であなたのpackage.jsonファイルを更新しなければならない。

package.json screenshoot of upgrade packages

それから走りなさい

 npm update
 npm install --save rxjs-compat
 npm i -g rxjs-tslint
 rxjs-5-to-6-migrate -p src/tsconfig.app.json
1
bereket gebredingle

Vinay Kumarが指摘したように、グローバルにインストールされたAngular CLIは更新されません。グローバルに更新するには、以下のコマンドを使用してください。

npm uninstall -g @angular/cli
npm cache clean
npm install -g @angular/cli@latest

既存のプロジェクトを更新したい場合は、既存のプロジェクトを変更する必要があります。プロジェクト内の package.json を変更する必要があります。

Angular自体に重大な変更はありませんが、それらはRxJSにあります。そのため、レガシーコードを扱うためにrxjs-compatライブラリを使用することを忘れないでください。

   npm install --save rxjs-compat  

インストール/アップデートAngular CLI /についての良い記事を書きました http://bmnteam.com/angular-cli-installation/

1
Maksim B.

次のコマンドを実行してください。

ng update

注：これはグローバルには更新されません。

0
Vinay Kumar

これが私がそれを機能させる方法です。

私の環境

Angular CLIグローバル：6.0.0、ローカル：1.7.4、Angular：5.2、TypeScript 2.5.3

注：ng Updateを有効にするには、Angular CLI 6.0を最初にインストールする必要がありますnpm install -g @angular/cli or npm install @angular/cli

  1. ng update //update Angular Package core/common/complier... to 6.0.0

  2. ng update @angular/cli //change angular-cli.json to angular.json

角度材料5.4.2、ngx-translate 9.1.1、ng-bootstrap/ng-bootstrap 1.1.1がある場合はオプションです。

  1. ng update @angular/material //upgrade to 6.0.1

  2. npm install @ngx-translate/[email protected] --save //upgrade ngX translate to 10.0.1 for Angular 6

5 npm install --save @ng-bootstrap/[email protected] //for ng-bootstrap

Observableを使用していてエラーが発生した場合：

ERROR in node_modules/rxjs/Observable.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Observable'. node_modules/rxjs/observable/of.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/observable/of'.

変更します。import { Observable } from "rxjs/Observable"; import { of } from 'rxjs/observable/of';

に

import { Observable, of } from "rxjs";

Angular CLIの問題： https://github.com/angular/angular-cli/issues/10621

0
Ryan Huang

2/4/5をAngular 6にアップグレードする手順はいくつかあります。

npm uninstall --save-dev angular-cli
npm install --save-dev @angular/cli@latest
npm install

"angular.json"に関連する問題を修正するには - 

ng update @angular/cli --migrate-only --from=1.7.4

店舗の移行
https://github.com/ngrx/platform/blob/master/MIGRATION.md#ngrxstore

RXJSの移行
https://www.academind.com/learn/javascript/rxjs-6-what-c​​hanged/

これがあなたを助けることを願っています:)

0
aditya kumar