質問

Angular 6が登場したので、angular 5のクライアントアプリケーションをangular 6にアップグレードまたは移行したいのですが、チュートリアルや何か案内してくれるものはないでしょうか？

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

どのように解決するのですか？

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

バージョン 7 がリリースされました。 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 がリリースされました。 Angularの公式ブログリンク . 以下に一般的なアップグレードの手順を記載しますが、アップデートの前後には、v6で動作するようにコードを変更する必要があります。詳細については、公式ウェブサイトを参照してください。 https://update.angular.io .

アップグレードの手順 (主に 公式 Angular アップデートガイド で、Angular Materialを使用した基本的な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-compatientを削除してください。 を削除してください。 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ファイルの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. 次に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

注意：- 以下のエラーが発生した場合 "The Angular Compiler requires TypeScript >=2.7.2 and <2.8.0 but found 2.8.3 was instead" 以下のコマンドを実行してください。

npm install [email protected]