はじめに
前回「Angularってどんなもの」ついての投稿よりAngularについては理解を深めてください。
今回は、Angularを導入についてご紹介したいと思います。
Angularのインストール
実際に進めてみましょう。
[Step1] Node.js をインストール
各コマンドを実行して、Node.js をインストールします。
Node.js のバージョンは14系を使用しました。
① サイトから Node.js をダウンロードする
curlコマンドにてURL（ https://rpm.nodesource.com/setup_14.x ）から対象をダウンロードしてきます。
▽コマンド
curl --silent --location https://rpm.nodesource.com/setup_14.x | sudo bash -
▽実行結果例
[root@localhost html]# curl --silent --location https://rpm.nodesource.com/setup_14.x | sudo bash -
## Installing the NodeSource Node.js 14.x repo...
## Inspecting system...
・・・・・処理内容が流れます・・・・・・
## Run `sudo yum install -y nodejs` to install Node.js 14.x and npm.
## You may run dnf if yum is not available:
sudo dnf install -y nodejs
## You may also need development tools to build native addons:
sudo yum install gcc-c++ make
## To install the Yarn package manager, run:
curl -sL https://dl.yarnpkg.com/rpm/yarn.repo | sudo tee /etc/yum.repos.d/yarn.repo
sudo yum install yarn
② Node.js をインストールする
①でダウンロードしてきた Node.js をインストールしてきます。
今回の環境はyumが実行できる環境だったのでyumでインストールしています。
▽コマンド
sudo yum install nodejs
▽実行結果例
[root@localhost html]# sudo yum install nodejs
読み込んだプラグイン:fastestmirror
Loading mirror speeds from cached hostfile
・・・・・処理内容が流れます・・・・・・
==================================================================================================================================================================================
Package アーキテクチャー バージョン リポジトリー 容量
==================================================================================================================================================================================
インストール中:
nodejs x86_64 2:14.19.2-1nodesource nodesource 33 M
トランザクションの要約
==================================================================================================================================================================================
インストール 1 パッケージ
総ダウンロード容量: 33 M
インストール容量: 93 M
Is this ok [y/d/N]:
途中、確認が入ります。
問題ないので「y」と入力して[Enter]キーを実行します。
下記の通り処理がされ「完了しました!」と表示されれば完了です。
・・・・・処理内容が流れます・・・・・・
インストール:
nodejs.x86_64 2:14.19.2-1nodesource
完了しました!
③ Node.jsのインストール確認をする
[root@localhost html]# node -v
v14.19.2
[Step2] Angular-Cli をインストール
Angular を利用していくためにインストールします。
▽コマンド
npm install -g @angular/cli
▽実行結果例
[root@localhost html]# npm install -g @angular/cli
/usr/bin/ng -> /usr/lib/node_modules/@angular/cli/bin/ng.js
> @angular/cli@13.3.5 postinstall /usr/lib/node_modules/@angular/cli
> node ./bin/postinstall/script.js
? Would you like to share anonymous usage data with the Angular Team at Google under
Google’s Privacy Policy at https://policies.google.com/privacy? For more details and
how to change this setting, see https://angular.io/analytics. Yes
+ @angular/cli@13.3.5
updated 1 package in 16.847s
[Step3] Angularプロジェクトを作成
この処理は実行後、完了するまでに時間がかかります。
▽コマンド
ng new {プロジェクト名}
今回はプロジェクト名を「project」で作成しています。
上記コマンドの「{プロジェクト名}」で指定した情報でディレクトリが作成されるので、プロジェクト名は半角文字にて指定するのがよいと思います。
▽実行結果例
[root@localhost html]# ng new project
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
・・・・・処理内容が流れます・・・・・・
? Packages installed successfully.
Successfully initialized git.
Successfully となり完了したら、Angularプロジェクトが作成されていることを確認しましょう。
[root@localhost html]# cd project/
[root@localhost project]# ls -al
合計 836
drwxr-xr-x. 6 root root 4096 5月 16 13:11 .
drwxr-xr-x. 4 root root 53 5月 16 13:09 ..
-rw-r--r--. 1 root root 600 5月 16 13:09 .browserslistrc
-rw-r--r--. 1 root root 274 5月 16 13:09 .editorconfig
drwxr-xr-x. 8 root root 166 5月 16 13:11 .git
-rw-r--r--. 1 root root 548 5月 16 13:09 .gitignore
drwxr-xr-x. 2 root root 66 5月 16 13:09 .vscode
-rw-r--r--. 1 root root 1061 5月 16 13:09 README.md
-rw-r--r--. 1 root root 3045 5月 16 13:09 angular.json
-rw-r--r--. 1 root root 1424 5月 16 13:09 karma.conf.js
drwxr-xr-x. 596 root root 20480 5月 16 13:11 node_modules
-rw-r--r--. 1 root root 773846 5月 16 13:11 package-lock.json
-rw-r--r--. 1 root root 1070 5月 16 13:09 package.json
drwxr-xr-x. 5 root root 156 5月 16 13:09 src
-rw-r--r--. 1 root root 287 5月 16 13:09 tsconfig.app.json
-rw-r--r--. 1 root root 863 5月 16 13:09 tsconfig.json
-rw-r--r--. 1 root root 333 5月 16 13:09 tsconfig.spec.json
[Step4] Angularアプリケーションを起動
Angularプロジェクトが作成できたら実際に起動してブラウザで表示してみます。
▽コマンド
ng serve --open
▽実行結果例
[root@localhost project]# ng serve --open
? Browser application bundle generation complete.
Initial Chunk Files | Names | Raw Size
vendor.js | vendor | 1.98 MB |
polyfills.js | polyfills | 294.79 kB |
styles.css, styles.js | styles | 173.22 kB |
main.js | main | 49.78 kB |
runtime.js | runtime | 6.51 kB |
| Initial Total | 2.49 MB
Build at: 2022-05-16T04:27:41.805Z - Hash: 23933d2ee278e7a8 - Time: 5228ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
? Compiled successfully.
初回起動時やソースを触った際はたくさんのメッセージが表示される場合もありますが
「Compiled successfully.」が出れば起動成功です。
ブラウザで「 http://localhost:4200/ 」 にアクセスすればAngularプロジェクトの初期画面が表示されます。
但し、初期設定のままの起動ですとlocalhostで指定することになります。
環境（host名、サーバ名などの）設定によってはlocalhostでは見れないこともあります。
※今回は仮想環境（VM）で作成をしています。
VM内でapacheのServerNameを「localhost」に設定してPC側でhostsを切ってもうまく確認できませんでした。
そんな時はアプリケーション起動コマンドにオプションでhostやportを指定して起動してみましょう。
設定したオプションは下記のとおりです。
+----------------------------------------------------------------------+
・NODE_OPTIONS=--max_old_space_size=8192
メモリエラー回避
・--host=192.168.56.109
ホストの指定（VM内で固定したIPを指定する）
・--port=4200
ポート指定（4200以外に変えたいときに指定する）
+----------------------------------------------------------------------+
▽実際に指定して起動
[root@localhost project]# NODE_OPTIONS=--max_old_space_size=8192 ng serve --open --host=192.168.56.109 --port=4200
Warning: This is a simple server for use in testing or debugging Angular applications
locally. It hasn't been reviewed for security issues.
Binding this server to an open connection can result in compromising your application or
computer. Using a different host than the one passed to the "--host" flag might result in
websocket connection issues. You might need to use "--disable-host-check" if that's the
case.
? Browser application bundle generation complete.
Initial Chunk Files | Names | Raw Size
vendor.js | vendor | 1.98 MB |
polyfills.js | polyfills | 294.79 kB |
styles.css, styles.js | styles | 173.22 kB |
main.js | main | 49.78 kB |
runtime.js | runtime | 6.51 kB |
| Initial Total | 2.49 MB
Build at: 2022-05-16T04:18:20.060Z - Hash: 23933d2ee278e7a8 - Time: 9953ms
** Angular Live Development Server is listening on 192.168.56.109:4200, open your browser on http://192.168.56.109:4200/ **
? Compiled successfully.
? Browser application bundle generation complete.
5 unchanged chunks
Build at: 2022-05-16T04:18:20.597Z - Hash: 23933d2ee278e7a8 - Time: 378ms
? Compiled successfully.
画面表示も確認することができます。
おわりに
Angularの導入については以上です。
実際に開発を進めていくうえではPHPなどのバックエンドとの連携も必要になります。
次回は、PHPフレームワークLaravelとの連携をします。