Angular7のインストールおよびアップデート


ビデオ解説(日本語）
https://youtu.be/58jAi142OZI

ビデオ解説(英語）
https://youtu.be/QbaQmvkY3Cs


--------------------

Angular7へのアップグレードには、

1. プロジェクト単位のアップグレード
2. システム全体でのアップグレード(`-g`オプションを指定）

の２通りがあります。


## プロジェクト単位のアップグレード

まず、現在の環境を把握しておく必要があります。

コマンド・ラインから`ng -v`と入力します。

Angular CLIのバージョンがわかります。

  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng7/ng7_install_01.png" width= "640" >


--------------------

次にこのバージョンに基づき、Angularのバージョンアップを行います。

その際、プロジェクトのルート・ディレクトリに入っている必要がありますので、注意してください。

まず、Googleの検索などで、"Version 7 of Angular — CLI Prompts, Virtual Scroll, Drag and Drop and more"というタイトルのページを検索し、そのページを開きます。

  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng7/ng7_install_02.png" width= "640" >


ここでAngular7のアップグレードの内容を確認してください。


次にこのページの中の_How to update to v7_を表示し、_update.angular.io_リンクをクリックします。

  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng7/ng7_install_03.png" width= "640" >



すると_Angular Update Guide_が開きますので、まず現在のAngularのバージョンを選択します。

次に、アプリケーションの複雑さ、依存している環境そして使用しているパッケージ・マネージャを選択し、最後に_Show me how to update_ボタンをクリックします。

  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng7/ng7_install_04.png" width= "640" >


すると下段にアップデート方法が表示されますので、この説明にしたがって、アップデートしてください。

アップデートの基本コマンドは、

`ng update @angular/cli @angular/core`

です。


## システム全体でのインストールおよびアップグレード(`-g`オプションを指定）

次に_システム全体でのアップグレード_ですが、まずNode.jsとnpmのバージョンを確認します。

  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng7/ng7_install_05.png" width= "640" >


`node --version`と入力します。

`npm --version`と入力します。

Angular7のインストールには、Node.jsのバージョンの８以降が必要となります。

次にAngular7のインストールを行います。

なお、他のバージョンからのアップグレードも同様の操作となります。

  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng7/ng7_install_07.png" width= "640" >

`npm i -g @angular/cli`と入力します。

インストールが終わりましたら、`ng --version`と入力して、バージョンを確認します。

  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng7/ng7_install_06.png" width= "640" >

次に適当なプロジェクトを作成して稼働をチェックしてみます。

  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng7/ng7_install_08.png" width= "640" >

`ng new ng7test01`と入力します。

ng7test01はプロジェクト名であり、この名前は任意です。

最初に、ルーティング機能を追加するか否かと問い合わせがありますが、ここでは`No`としておきます。

次に、スタイルシートの形式の問い合わせがありますが、デフォルトの`CSS`を選択します。

  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng7/ng7_install_09.png" width= "640" >

するとプロジェクトの生成が始まります。

このプロセスには若干時間を要します。

プロジェクトが生成されましたら、そのプロジェクト・ディレクトリに入ります。

  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng7/ng7_install_10.png" width= "640" >


そして、`code .`と入力して、Visual Studio Codeを起動します。

次に、`Control+@`キーを押し、ターミナル・ウィンドウをひらきます。

  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng7/ng7_install_11.png" width= "640" >


VS Codeが開きましたら、`Package.json`ファイルを開き、バージョンを確認してみます。

バージョン７が表示されます。

  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng7/ng7_install_12.png" width= "640" >

ターミナル・ウィンドウで、`ng s -o`と入力して、ローカルサーバを起動し、ブラウザを開きます。

  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng7/ng7_install_13.png" width= "640" >

Angularのデフォルトのページが表示されました。


VS Codeに戻り、`Control+c`と`y + Return`でローカル・サーバを停止させます。

Angular7の稼働を確認できました。


--------------------

　  

## Reference


- "Angular Update Guide", 
<https://update.angular.io/>

- "Version 7 of Angular — CLI Prompts, Virtual Scroll, Drag and Drop and more", 
<https://blog.angular.io/version-7-of-angular-cli-prompts-virtual-scroll-drag-and-drop-and-more-c594e22e7b8c>


- "Angular5, Angular6, Angular7 Custom Library: Step-by-step guide", 
<https://www.udemy.com/angular5-custom-library-the-definitive-step-by-step-guide/>

- "Angular5, Angular6, Angular7用 カスタムライブラリの作成: 完全ステップ・バイ・ステップ・ガイド", 
<https://www.udemy.com/angular5-l/>