本稿では、Angularアプリ開発を巡って、プロジェクトの稼働環境や必要になる技術ポイントなどを解説してみたいと思います。
前提
最近、Node.jsを利用しハイブリッドようなプロジェクトを動かしているユースケースが多くなってそうです。今回、AngularアプリにもNode.jsから稼働したいと思っておりますので、まず、プロジェクトを作る前に、Node.jsのインストールを行いましょう。
Node.jsインストール
Node.jsのインストールの順番として、Node.jsのバージョン管理ツールとしているnpmをインストールすることが必要です。やり方は以下の通り。
# nodebrewをインストル
$ brew install nodebrew
# Node.jsとnpmのインストール
$ nodebrew install-binary latest
$ mkdir -p ~/.nodebrew/src
$ nodebrew install-binary latest
# 以下が表示
Fetching: https://nodejs.org/dist/v11.12.0/node-v11.12.0-darwin-x64.tar.gz
######################################################################## 100.0%
Installed successfully
上記のコマンドで最新版がインストールされます。
Node.jsを有効にします。
# バージョンの一覧を確認
$ nodebrew list
# バージョンの一覧が表示
v11.12.0
current: none
# current: noneとなっているため、必要なバージョンを有効化する。
nodebrew use v11.12.0
# バージョンの一覧を再確認
$ nodebrew list
# 以下が表示
v11.12.0
current: v11.12.0
nodebrewが使いやすいように環境パスを通します。
インストルした結果を確認します。
$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile
$ source ~/.bash_profile
# node.jsがインストル済かどうかを確認
node -v
# 以下が表示
v11.12.0
# npmがインストル済かどうかを確認
$ npm -v
# 以下が表示
6.7.0
上記ような各バージョーンが表示されたらNode.jsのインストールが終わりします。
AngularCLIインストール
以下コマンドでAngulerCLIをインストールします。
$ npm install -g @angular/cli
# 以下の内容が表示されたら、インストールがOK
+ @angular/cli@7.3.8
added 363 packages from 197 contributors in 22.591s
VSCodeに連携
VSCodeに、Anguler拡張機能をインストールします。
🌾Angular Essentials
Angular Essentials拡張機能は、Angularの開発がしやすくなります。
インストール方法
VSCodeの拡張機能→Angular Essentials→インストール
Angular Essentialsに含まれる拡張機能
- Angular v4 Snippets
- Angular Language Service
- Editor Config
- tslint
- Chrome Debugger
- Bracket Pair Colorizer
- Path Intellisense
- Angular Inline
- Angular Material Theme
🌾Auto Import
Auto Import拡張機能は、TypescriptとTSXで動作する拡張機能で、WebStormのように、インポート文を自動で追加され、より高速に開発ができます。
インストール方法
VSCodeの拡張機能→Auto Import→インストール
Angulerアプリ作成
VSCodeのターミナルからAngulerアプリを作ります。
$ ng new coolesson
サーバを起動します。
$ cd coolesson
$ ng serve
# 以下が表示されます
** Angular Live Development Server is listening on localhost:4200, open your browser on
http://localhost:4200/ **
Date: 2019-04-24T13:12:14.814Z
Hash: a27f36c54306bf454f91
Time: 9382ms
chunk {es2015-polyfills} es2015-polyfills.js, es2015-polyfills.js.map (es2015-polyfills) 284 kB [initial]
[rendered]
chunk {main} main.js, main.js.map (main) 11.5 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 236 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 16.3 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.77 MB [initial] [rendered]