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
ページのトップへ戻る