ビデオ解説(日本語）
https://youtu.be/58jAi142OZI
ビデオ解説(英語）
https://youtu.be/QbaQmvkY3Cs
Angular7へのアップグレードには、
- プロジェクト単位のアップグレード
- システム全体でのアップグレード(
-gオプションを指定）
の２通りがあります。
プロジェクト単位のアップグレード
まず、現在の環境を把握しておく必要があります。
コマンド・ラインからng -vと入力します。
Angular CLIのバージョンがわかります。
次にこのバージョンに基づき、Angularのバージョンアップを行います。
その際、プロジェクトのルート・ディレクトリに入っている必要がありますので、注意してください。
まず、Googleの検索などで、"Version 7 of Angular — CLI Prompts, Virtual Scroll, Drag and Drop and more"というタイトルのページを検索し、そのページを開きます。
ここでAngular7のアップグレードの内容を確認してください。
次にこのページの中のHow to update to v7を表示し、update.angular.ioリンクをクリックします。
するとAngular Update Guideが開きますので、まず現在のAngularのバージョンを選択します。
次に、アプリケーションの複雑さ、依存している環境そして使用しているパッケージ・マネージャを選択し、最後にShow me how to updateボタンをクリックします。
すると下段にアップデート方法が表示されますので、この説明にしたがって、アップデートしてください。
アップデートの基本コマンドは、
ng update @angular/cli @angular/core
です。
システム全体でのインストールおよびアップグレード(-gオプションを指定）
次にシステム全体でのアップグレードですが、まずNode.jsとnpmのバージョンを確認します。
node --versionと入力します。
npm --versionと入力します。
Angular7のインストールには、Node.jsのバージョンの８以降が必要となります。
次にAngular7のインストールを行います。
なお、他のバージョンからのアップグレードも同様の操作となります。
npm i -g @angular/cliと入力します。
インストールが終わりましたら、ng --versionと入力して、バージョンを確認します。
次に適当なプロジェクトを作成して稼働をチェックしてみます。
ng new ng7test01と入力します。
ng7test01はプロジェクト名であり、この名前は任意です。
最初に、ルーティング機能を追加するか否かと問い合わせがありますが、ここではNoとしておきます。
次に、スタイルシートの形式の問い合わせがありますが、デフォルトのCSSを選択します。
するとプロジェクトの生成が始まります。
このプロセスには若干時間を要します。
プロジェクトが生成されましたら、そのプロジェクト・ディレクトリに入ります。
そして、code .と入力して、Visual Studio Codeを起動します。
次に、Control+@キーを押し、ターミナル・ウィンドウをひらきます。
VS Codeが開きましたら、Package.jsonファイルを開き、バージョンを確認してみます。
バージョン７が表示されます。
ターミナル・ウィンドウで、ng s -oと入力して、ローカルサーバを起動し、ブラウザを開きます。
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/