4. Angular9開発環境の構築¶

4-1. 概要¶

Angular9のアプリ開発環境の構築手順を解説します。本書はAngular7の開発環境でしたので、最新バージョン対応のためのアップデート情報となります。

4-2. 準備作業¶

Windows10 64bit版の環境を用意します。
システム全体が復元可能なバックアップを行います。
動作確認のため、本書「観光情報検索アプリ」をダウンロードします。
観光情報検索アプリ
 マルチタイマーアプリ
下記リンクを参考にしてGoogle Chromeをインストールします。既にインストール済の時は、この手順をスキップします。
Google Chrome をダウンロードしてインストールする
Google ChromeをWindows10の既定のWebブラウザとして設定します。Windows10の設定から、アプリ > 既定のアプリ > Webブラウザを選択して設定します。既に設定済の時は、この手順をスキップします。

Info

オプション設定
プロキシー経由でインターネットに接続している場合は、npmとgitのコマンドが利用できないことがあります。プロキシーを通過するための設定が必要です。下記リンクを参照の上、ご利用ネットワークの管理者へお問い合わせください。
[参考情報]
npm の proxy と registry 設定方法
 Git for WindowsでのProxy設定方法

4-3. インストールするソフトウェアと手順¶

下記手順の1から3はアプリの実行環境です。従って、3番目の作業が完了した時点でサンプルアプリの動作確認が出来ます。それ以降は、アプリの開発に必要な環境構築のためのインストール作業です。

4-3-1. node.js(JavaScript実行環境)¶

node.js v10.19.0インストーラー

1) インストール

上記リンクをWebブラウザで開き、インストーラー・ファイルをダウンロード後、インストーラーを実行してウィザードに従ってインストールします。

2) 動作確認

新たにコマンドプロンプトを開き、下記バージョン確認のコマンドを入力して、出力結果を確認します。

node -v

4-3-2. 独自認証局をWebブラウザに登録¶

1) 証明書の取得

下記リンクをクリックして、独自認証局の証明書(ファイル名はminica.pem)をダウンロードします。

独自認証局の証明書をダウンロード

2) インストール

管理者権限でコマンドプロンプトを開き、カレントディレクトリを独自認証局の証明書を保存したフォルダへ移動します。コマンドプロンプトから下記のコマンドを入力します。

certutil -addstore ROOT minica.pem

3) 登録確認

Windowsの検索ボックスに「証明書」と入力し、Windowsのユーザー証明書管理ツールを呼び出します。

「信頼されたルート証明機関」のリストにminicaが含まれていることを確認します。

Info

Webブラウザはセキュリティチェックが厳しくなり、発行元なしで独自に発行した証明書（いわゆるオレオレ証明書）では警告ページが表示されます。解決策として、独自に作成した認証局(miniCA)をブラウザに登録します。こうすれば、独自に作成した認証局から発行された証明書は、ブラウザに正しい証明書であると認識されます。

4-3-3. 7zip(圧縮・展開ツール)¶

7zip日本語サイト

1) インストール上記リンクをWebブラウザで開き、インストーラー・ファイルをダウンロード後、インストーラーを実行してウィザードに従ってインストールします。

2)動作確認準備でダウンロード済の「kanko.7z」ファイルを、マウスで右クリックしてコンテクストメニューを表示、[7-zip]>["kanko\"に展開]を選択します。

Info

Angularの開発プロジェクトフォルダ全体を1つのファイルに圧縮する場合、Windows付属のzipツールではパスの長さ制限で失敗することがありますので、代替として7zipを利用します。

4-3-4. git for windows(バージョン管理)¶

git for windows公式サイト 1) インストール上記リンクをWebブラウザで開き、インストーラー・ファイルをダウンロード後、インストーラーを実行してウィザードに従ってインストールします。

2)動作確認新たにコマンドプロンプトを開き、下記のバージョン確認のコマンドを入力して、出力結果を確認します。

git --version

4-3-5. Angular CLI(Angularコマンドラインツール)¶

1) プロジェクトフォルダ作成

・プロジェクトのルートフォルダとして任意のフォルダを新規作成します。　・コマンドプロンプトのカレントディレクトリを、プロジェクトのルートフォルダへ移動します。

・コマンドプロンプトに以下のコマンドを入力し、プロジェクトフォルダの初期化を行います。

npm init -y

2) インストールコマンドプロンプトに下記のコマンド入力し、インストールします。

npm install @angular/cli@9.0.5 --save-dev

2)動作確認コマンドプロンプトから下記のバージョン確認のコマンドを入力して、出力結果を確認します。

npx ng version

4-3-6. http-server(テスト用Webサーバー)¶

http-serverの使い方

1) インストールコマンドプロンプトで、下記のコマンド入力を行いインストールします。

npm install -g http-server

2) 動作確認コマンドプロンプトから下記のコマンドを入力して、http-serverを起動します。

Info

AngularでPWA(Service Workerの利用）の作成時は、ng serveコマンドでAngular CLI 内蔵の開発用Webサーバーを利用できません。本書では代替として、簡単なコードのテストにhttp-server、サンプルアプリにnode.jis上のexpressサーバーを利用しています。
[引用元]
Angular公式サイトーServing with http-server

4-3-7. npm バイナリービルドツール¶

[参考情報] Windows向けnpmバイナリービルドツールインストール手順

1) Pythonのインストール Windows用アプリストアの検索ボックスに「Python」と入力し、Python3.8をインストールします。

2) windows-build-toolsのインストール Powershell コマンド入力画面を管理者権限で開き、下記のコマンドを入力します。

npm install -g windows-build-tools

下記のように、コマンドプロンプトが表示されれば、インストール完了です。

Tips

windows-build-toolsは、インストールに時間がかかります。しかし、30分間程度なにも出力されないままの時は、インストールを停止して再インストールしてください。再インストールに失敗する時は、npm uninstall -g windows-build-toolsコマンドでアンインストールやWindowの再起動、npm cache verifyコマンドを試してください。

Info

その他にコード編集ツール(任意のテキストエディタ、IDE等)が必要です。