Angular 6がここにあるので、私のAngular 5クライアントアプリケーションをAngular 6にアップグレードまたは移動したいのですが、チュートリアルや、私をガイドできるものは何もありません。

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

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

Angularのバージョン7が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にアップグレードする

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

アップグレード手順（主に、Angular Materialを使用した基本的なAngularアプリの公式Angularアップデートガイドから取得）：

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

2. 次のコマンドを実行して、Angular cliをグローバルおよびローカルに更新し、古い構成.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+に更新します（これはAngular CLI 6バージョンで必要です）

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

   npm uninstall -g @angular/cli
   npm cache verify
   

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

   npm install -g @angular/cli@next
   

4. package.jsonファイルの角度付きパッケージのバージョンを ^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. 次に、Angular cliローカルパッケージを次のバージョンに更新し、上記のパッケージをインストールします。

   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ファイルを書き込みます。

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

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

npm install typescript@2.7.2

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 --migrate-only --from = 1.7.0
4. ng update @ angular / core
5. npmインストールrxjs-compat
6. サーブ

たとえば、package.jsonで実行スクリプトを更新する必要がある場合があります。「アプリ」や「環境」などのフラグを使用する場合、これらはそれぞれ「プロジェクト」および「構成」に更新されました。

詳細については、https：//update.angular.io/を参照してください。

あなた自身の特定のニーズのためにあなたがする必要があることを教えてくれる公式のアップグレードガイドを使ってください：

https://update.angular.io/

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

• ノードのバージョンを8以上に更新し、Angular cliをnpm i -g @ angular / cli @ latestによってグローバルに最新にインストールします。
• Angular 6は、設定ファイルとして.anguar-cli.jsonの代わりにangular.jsonを使用します。また、tslintも変更されました。最新の構成の詳細については、https：//github.com/angular/angular-cli/wiki/angular-workspaceを確認してください。既存の構成を新しい構成ファイルに移動する必要があります。
• これを行うには、ng new 'your-project'を使用して最新のcliで別のダミープロジェクトを作成し、プロジェクトで以前に使用したプレフィックス、スタイルなどの同じデフォルトを使用します。CLIで新しいプロジェクトを作成する https://github.com/angular/angular-cli/wiki/new
• 現在のバージョンのAngular→Angular 6から何が変更されたかを確認するには、https：//update.angular.io/を使用し ます。これにより、変更/修正方法の使用方法が提供されます。
• 上記の手順に従い、手順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 / operatorsに移動しました

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

監視可能な作成メソッドがrxjsに移動されました

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

準備万端です。Angular 6へようこそ:) アップグレード方法については、こちらのブログ投稿を確認してください

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

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

1. ng update @ angular / cli
2. ng update @ angular / core
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アンインストールrxjs-compat（これを最後に削除）

完全ガイド

----------------- angular-cliを使用した場合--------------------------

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ファイルを更新する必要があります。

次に実行します

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

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/

次のコマンドを実行するだけです。

ng update

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

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

私の環境：

Angular CLI Global：6.0.0、Local：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

angular-material 5.4.2、ngx-translate 9.1.1、ng-bootstrap / ng-bootstrap 1.1.1がある場合はオプション：

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

4. npm install @ngx-translate/core@10.0.1 --save //upgrade ngX translate to 10.0.1 for Angular 6

5 npm install --save @ng-bootstrap/ng-bootstrap@2.0.0 //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

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

Store MIGRATION
https://github.com/ngrx/platform/blob/master/MIGRATION.md#ngrxstore

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

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