Corredor

ウェブ、プログラミングの勉強メモ。

Angular 4.4.5 だったアプリを ng update で 6.0.3 にバージョンアップした

Angular 6 からの新機能で、バージョンアップ時のマイグレーション作業を自動化してくれる ng update コマンドがある。今回はコレを使って、拙作の Angular Utilities を Angular 6 にバージョンアップしてみた。

コマンドに合わせて、公式サイトに Update Guide なるページが登場している。コレは便利。

以下のように設定した。

  • Angular Version : 4.4 to 6.0
  • App Complexity : Basic
  • ngUpgrade : I use ngUpgrade
  • Package Manager : npm

npm の環境は以下のとおり。

$ node -v
v8.11.2

$ npm -v
5.6.0

Update Guide に従って叩いたコマンドは以下のとおり。

# Angular CLI をアップデート (本記事執筆時点の最新版である v6.0.7 にした)
$ npm i -g @angular/cli@6.0.7
$ npm i -D @angular/cli@6.0.7 
$ ng update @angular/cli

# @angular/core のアップデートをしようとしたらバージョン不適合というエラーが出たので、
# それぞれ指摘されたパッケージをバージョンアップしたり新たに入れたりした
$ npm i -S @swimlane/ngx-dnd@4.0.2
$ npm i -D codelyzer@4.3.0
$ npm i -D @angular-devkit/schematics
$ ng update @angular/core

# tsconfig.json の日本語コメントが全部数値参照か何かに変換されて狂っていたのでコレだけ元に戻した
# allowJS: false かつ checkJS: true なのがダメと言われたので、checkJs を false にした

# 使ってなかったので不要だった・変化なし
$ ng update @angular/material

# 問題なかったので変化なし
$ npm install -g rxjs-tslint
$ rxjs-5-to-6-migrate -p src/tsconfig.app.json

# 問題なかったので変化なし
$ ng update

これらの操作で、以下のファイルに変更が入った。

  • package.json (当たり前)
  • tsconfig.json (何か文字化けしたので元に戻し、checkJs の指定のみ手修正)
  • karma.conf.js
  • .angular-cli.jsonangular.json にリネーム・更新
  • src/tsconfig.spec.json (filespolyfills.ts が追加された)

実装コード側は大したことやってなかったので変更なし。正常に動作するようになったっぽい。楽勝〜!

Angularデベロッパーズガイド  高速かつ堅牢に動作するフロントエンドフレームワーク

Angularデベロッパーズガイド 高速かつ堅牢に動作するフロントエンドフレームワーク

  • 作者: 宇野陽太,奥野賢太郎,金井健一,林優一,吉田徹生,稲富駿,丸山弘詩
  • 出版社/メーカー: インプレス
  • 発売日: 2017/12/15
  • メディア: 単行本(ソフトカバー)
  • この商品を含むブログを見る

AngularによるモダンWeb開発 実践編~実際の開発で必要な知識を凝縮~

AngularによるモダンWeb開発 実践編~実際の開発で必要な知識を凝縮~

React、Angular、Vue.js、React Nativeを使って学ぶ はじめてのフロントエンド開発

React、Angular、Vue.js、React Nativeを使って学ぶ はじめてのフロントエンド開発

  • 作者: 原一浩,taisa,小松大輔,永井孝,池内孝啓,新井正貴,橋本安司,日野洋一郎
  • 出版社/メーカー: 技術評論社
  • 発売日: 2018/05/09
  • メディア: 単行本(ソフトカバー)
  • この商品を含むブログを見る