Angular の環境構築方法入門

Angular5 の環境構築

• Angular – クイックスタート

Angular5 の開発環境を構築します。手順は上記公式サイトの手順に倣います。

Node.js と npm

• Download | Node.js

Angular を使うには、Node.js と npm がインストールされている必要があります。

上記URLからNode.jsのLTS版をインストールしてください。npm は Node.js に付属するパッケージ管理ツールですので、Node.jsがインストールされると使えるようになります。

バージョンについて

バージョンについては次のように書いてあります。

node 6.9.X 以上とnpm 3.x.x 以上がインストールされていることを確認してください。
ターミナルまたはコンソールで node -v と npm -v コマンドを使うことで確認できます。
古いバージョンをお使いの場合はエラーの原因となりますが、新しいぶんには問題ありません。

コマンドで確認しておきます。

$ node --version
v8.2.1

$ npm --version
5.3.0

node 6.9.x 以上、npm 3.x.x 以上であることを確認し、問題なければ次へ進みます。

Angular CLI のインストール

npm を使ってグローバル環境に Angular Cli をインストールします。次のコマンドを実行します。

$ npm install -g @angular/cli

WindowsでPowerShellを使っている場合、次のようなエラーになります。

ソース テキストのトークンを認識できません。
発生場所 行:1 文字:16
+ npm install -g  <<<< @angular/cli
    + CategoryInfo          : ParserError: (:) []、ParentContainsErrorRecordException
    + FullyQualifiedErrorId : UnrecognizedToken

どうも @ がダメっぽいので、こんな感じ(npm install -g "@angular/cli")で二重引用符で囲んでやります。するとうまく動きました。

インストールができたらかバージョンと環境を確認しておきます。次のように表示されればインストール完了です。

ng version

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/

Angular CLI: 1.6.8
Node: 8.2.1
OS: win32 x64
Angular:
...

Angular CLI とは

Angular CLI はプロジェクトの作成、ファイルの追加に加え、開発で行うテスト、ビルド、デプロイのタスクを行うための コマンドライン・インターフェース・ツール です。

新規プロジェクトの作成

Angular CLI を使って新しくプロジェクトを作成します。プロジェクト名は my-app とします。

$ ng new my-app
.
.
.
added 1464 packages in 315.613s

プロジェクトに必要なツール類も同時にnpmでインストールされるので、少し時間がかかります。

完了すると、すでに動かせる状態のプロジェクトが準備されています。

SASS(SCSS)を使う

ng new で作成されるプロジェクトはデフォルトだと CSS が使われます。SASS(SCSS)を使いたいという時には、style オプションで指定できます。

SASS, SCSS を使う場合はそれぞれ次のようにしています。

$ ng new my-app --style=sass
$ ng new my-app --style=scss
$ ng new my-app --style=less

これで、通常だと CSS で生成されている箇所が SASS(SCSS) に置き換わった状態で生成されます。もちろんコンパイル環境も用意されているので、そのまま開発に移れます。

アプリケーションを動かす

$ cd my-app
$ ng serve --open

ng new コマンドで作成したプロジェクトディレクトリが作成されているので、そこに移動します。プロジェクトディレクトリで、ng serve コマンドを実行することで、開発用サーバーを起動します。

--open オプションを指定することで、ブラウザを立ち上げ、http://localhost:4200/ を自動で開いてくれます。

ブラウザで次の画像が表示されたページが確認できれば、起動はOKです。

サーバーが起動中はソースファイルを監視しているため、ファイルの変更を行うとすぐにその変更がブラウザに通知され、リアルタイムでの確認が可能です。

Angular CLI の使い方

• GitHub – angular/angular-cli: CLI tool for Angular
• Home · angular/angular-cli Wiki · GitHub

プロジェクトに必要な各ファイルは手動で作ることもできますが、CLIに任せた方が楽です。ほかにもビルドやテストのコマンドもCLIには用意されているので、それらの使い方をまとめます。

基本は GitHub と Wikiにある使い方を参考にします。

ng new

• new · angular/angular-cli Wiki · GitHub

代表的なコマンドは次の通りです。詳細は上のWikiを参考にどうぞ。

以上。

参考URL

• Angular – クイックスタート
• GitHub – angular/angular-cli: CLI tool for Angular
• Home · angular/angular-cli Wiki · GitHub