トッカンソフトウェア

Angular CLI

前回からしばらく経って、最近はAngular CLIを使って、Anguarのプロジェクトを作るのが主流になっています。
Angular CLIはプロジェクト作成、ファイル追加、テスト、ビルド、デプロイなどを行うコマンドラインツールです。

今回はAngular CLIを使ってプロジェクトを作ってみます。

Angular CLIのインストール

前回同様、 Node.jsを使用して環境を構築します。古いバージョンだとエラーが出ることがあるので、Node.jsも出来るだけ新しいバージョンを使用して下さい。

Angular CLIのインストールを行うには、コマンドプロンプトで以下を実行します。
				
npm install -g @angular/cli

			

プロジェクトの作成

プロジェクトの作成はng newコマンドを実行します。実行するとプロジェクトフォルダと各ファイルが作成されます。
				
ng new プロジェクト名

			
プロジェクトのフォルダが作られるのでcdコマンドで移動し、ng serveコマンドを実行するとWebサーバが起動されます。
				
cd プロジェクト名
ng serve --open

			
少し待つとブラウザが起動され、作成したプロジェクトの初期画面が開きます。

プロジェクトの作成時のオプション

ルーティングモジュールを組み込む場合は --routingを付けます。
				
ng new プロジェクト名 --routing

			
テストファイル(spec)を作成しない場合、 --skip-testsを付けます。
				
ng new プロジェクト名 --skip-tests

			

各機能の追加

コンポーネントやサービス、クラスを作成する場合、ng generateコマンドを実行します。

コンポーネントを作成
				
ng generate component コンポーネント名

			
サービスを作成
				
ng generate service サービス名

			
クラスを作成
				
ng generate class クラス名

			

ビルド

ビルドを行う場合、ng buildコマンドを実行します。実行するとdistフォルダにファイルが出力されます。
				
ng build

			
本番用にビルドを行う場合、--prodオプションを付けます。ファイルサイズが小さくなったり最適化したります。
				
ng build --prod

			
さらにサイズを小さくする場合、--build-optimizerオプションを付けます。
				
ng build --prod --build-optimizer

			


アップデート

Angular CLIのアップデートを行うには、アンイストールしてから再度、インストールします。
				
npm uninstall -g @angular/cli
npm cache verify
# npmのバージョンが5未満の場合 npm cache cleanを実施 
npm install -g @angular/cli@latest

			
各パッケージをアップデートするにはng updateコマンドを実行します。ng updateでアップデートできる一覧が表示されるので、
ng update パッケージ名でアップデートします。
以下の例では、一覧を表示後、@angular/coreをアップデートさせています。
				
ng update
ng update @angular/core

			


ページのトップへ戻る