Angularお勉強 アプリのアップデートと今後について
Angular7.0へのアップデート!
チュートリアルをやっているうちにAngularのバージョンが6.1から7.0に上がってしまった!!(驚愕)
Version 7 of Angular — CLI Prompts, Virtual Scroll, Drag and Drop and more
いや僕が更新おせーよってだけなんですが・・ていうかいつまでチュートリアルやってんの?っていう・・・
チュートリアル自体は先行してほぼ全てやったのだけど、記事に出来ていなかった
というかAngularは日本語の翻訳サイトもあるし公式のドキュメントも充実してるしで、
最初のプロジェクト構成とかはともかくチュートリアルの内容を記事にする意味とは?みたいな疑問と戦ってました。。
Angular7.0について
詳しくはリンク先にいってみてもらえばいいのだけど、気になった変更は下記
Angular Material Design
Material Designは興味ある方多いのでは?と思いますが、Angularで利用した場合に細かい表示の仕方等を吸収したようです。
仮想スクロールとドラッグ&ドロップ
これもリンク先見てもらえば一発ですが凄いですね!(わかってない)
仮想スクロールはスクロール状態に合わせてDOMが動的に変更されているので、軽い!とかそういうこと?
ただこういうDOM制御はテスト難しくなるのでは・・・?と一抹の不安が。。
僕は仕事ではSlickGridのような動的グリッドを触ってますが、
こういうのってユーザ体験は良いと思うものの、ちょくちょく開発に縛りとして影響すると思ったり。。
ドラッグ&ドロップはパッと見もかっこいいしいいと思う!
プロジェクトのアップデート
といってもチュートリアルプログラムをアップデートするだけなので、普通に開発している方の参考には1ミリもならないと思いますが。。
まずバージョンを確認する
次にng updateで更新を確認する
僕の場合6.1.2がすでに入っているので、特に考えることはなさそう。
(C:\とか見えてるのは良いのか悪いのか・・)
というわけでng update --allをを実行するとプロジェクトのアップデートが始まる
アップデートは10分くらいかかってコアライブラリのバージョンとかが更新されている
更新後ng serveでアプリが動くことが確認できた
またコマンドプロンプトからng versionでCLIのバージョンを確認すると、ちゃんと7.0.2に上がっていることが確認できる
補足
プロジェクトのバージョンを上げた一方で、npm list -gでグローバルにインストールされているAngularCLIのバージョンを確認すると6.1.2のままだったりする
つまりng new とかで新しく作った場合は6.1.2ができるってこと?と思って試してみたところ案の定(というか当たり前か)古いバージョンでプログラムができたので、新規に作る場合は注意が必要
npmの方でグローバルにインストールしたパッケージのバージョンを上げる
この辺のコマンドを使って既存のパッケージの確認
>npm list -g --depth=0
>npm outdated -gPackage Current Wanted Latest
@angular/cli 6.1.2 6.2.6 7.0.3
Latestは7.0.3だが、Wantedが6.2.6なのでnpm updateだと6.2.6までしか上がってくれない
今回は7.0.3を使いたいので、npm install -g @angular/cli@latestを実行してバージョンを上げる
実行後エラーがなければちゃんとバージョンが上がっているハズ
✖ npm update -g @angular/cli@latest
○ npm install -g @angular/cli@latest