序章

これは、AngularCLIで実行したいほとんどのことに必要なコマンドを見つけるのに役立つチートシートです。 Angular CLIの簡単な紹介については、このチュートリアルをご覧ください。

バージョンの確認

使用しているCLIのバージョンを確認します。

  1. ng --version

バージョンの更新

これを実行します：

  1. npm uninstall -g @angular/cli cache clean

  2. npm install -g @angular/cli@latest

ヘルプ

一般的なヘルプを取得します。

  1. ng help

または、特定のコマンドのヘルプを取得します。

  1. ng help generate

新たなプロジェクト

新しいプロジェクトを生成します。

  1. ng new my-app

そして、ここにあなたが使うことができるいくつかの旗があります：

  • --dry-run：作成されるファイルを確認しますが、実際には何もしません。
  • --verbose：もっとおしゃべりになりましょう。
  • --skip-install：しないでください npm install、オフラインまたは低速インターネットで便利です。
  • --skip-tests：スペックファイルを作成しないでください。
  • --skip-git：gitリポジトリを初期化しないでください。
  • --source-dir：ソースディレクトリの名前
  • --routing：アプリにルーティングを追加します。
  • --prefix：コンポーネントセレクターに使用するプレフィックスを指定します。
  • --style：デフォルトは css、ただし、に設定できます scss.
  • --inline-style：個別のファイルではなく、コンポーネントにインラインスタイルを使用します。
  • --inline-template：個別のファイルではなく、コンポーネントにインラインテンプレートを使用します。

いくつかのフラグを使用した例を次に示します。

  1. ng new my-app --prefix yo --style scss --skip-tests --verbose

すべてのものを生成する

コンポーネントを生成します。

  1. ng g c unicorn-component

サービスを生成します。

  1. ng g s everything-service

パイプを生成します。

  1. ng g pipe my-pipe

ディレクティブを生成します。

  1. ng g directive my-directive

列挙型を生成します：

  1. ng g enum some-enum

モジュールを生成します。

  1. ng g module fancy-module

クラスを生成します。

  1. ng g cl my-class

インターフェイスを生成します。

  1. ng g interface my-interface

ルートガードを生成します。

  1. ng g guard my-guard

The --dry-run と --verbose フラグは、任意の生成コマンドで使用できます。

サービング

プロジェクトに奉仕する

  1. ng s

デフォルトのブラウザで自動的にサービスを提供して開きます。

  1. ng s -o

別のポートにサービスを提供します。

  1. ng s --port 5555

テストの実行

  1. ng test

そして、あなたがで使うことができるいくつかの旗 test 指図：

  • --watch：一部のファイルが変更されたときに再テストします。
  • --code-coverage：カバレッジレポートを追加します。
  • --progress：テストの実行中に進行状況を表示します。
  • --browsers：使用するブラウザを指定します。
  • --colors：出力に色を使用するかどうか。

リンティング

リンターを実行します。

  1. ng lint

リンターのいくつかのフラグ：

  • --fix：リンティングエラーの修正を適用します。
  • --force：リンティングが失敗した場合でも強制的に成功します。

アプリの構築

でアプリを構築する build 指図：

  1. ng build

buildで使用できるフラグは次のとおりです。

  • --target：ビルドのターゲットを指定します（例： --target production).
  • --aot：事前コンパイルを使用します。
  • --base-href：使用するベースhrefを指定します。
  • --deploy-url：デプロイメントURLを指定します。
  • --extract-css：グローバルスタイルをJavaScriptに保持するのではなく、CSSファイルに配置します。
  • --watch：ファイルが変更されるたびに再構築します。

WebpackConfigをイジェクトする

Angular CLIはあなたのプロジェクトのためにもうそれをしませんか？ イジェクトするだけで、完全なWebpack構成を利用して、心の欲求に合わせて調整できます。

  1. ng eject

結論

これらは、AngularCLIの最も一般的なコマンドの一部です。 Angular CLIの簡単な紹介については、このチュートリアルをご覧ください。