序章
これは、AngularCLIで実行したいほとんどのことに必要なコマンドを見つけるのに役立つチートシートです。 Angular CLIの簡単な紹介については、このチュートリアルをご覧ください。
バージョンの確認
使用しているCLIのバージョンを確認します。
ng --version
バージョンの更新
これを実行します:
npm uninstall -g @angular/cli cache clean npm install -g @angular/[email protected]
ヘルプ
一般的なヘルプを取得します。
ng help
または、特定のコマンドのヘルプを取得します。
ng help generate
新たなプロジェクト
新しいプロジェクトを生成します。
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
:個別のファイルではなく、コンポーネントにインラインテンプレートを使用します。
いくつかのフラグを使用した例を次に示します。
ng new my-app --prefix yo --style scss --skip-tests --verbose
すべてのものを生成する
コンポーネントを生成します。
ng g c unicorn-component
サービスを生成します。
ng g s everything-service
パイプを生成します。
ng g pipe my-pipe
ディレクティブを生成します。
ng g directive my-directive
列挙型を生成します:
ng g enum some-enum
モジュールを生成します。
ng g module fancy-module
クラスを生成します。
ng g cl my-class
インターフェイスを生成します。
ng g interface my-interface
ルートガードを生成します。
ng g guard my-guard
--dry-run
および--verbose
フラグは、任意の生成コマンドで使用できます。
サービング
プロジェクトに奉仕する
ng s
デフォルトのブラウザで自動的にサービスを提供して開きます。
ng s -o
別のポートにサービスを提供します。
ng s --port 5555
テストの実行
ng test
また、test
コマンドで使用できるいくつかのフラグ:
--watch
:一部のファイルが変更されたときに再テストします。--code-coverage
:カバレッジレポートを追加します。--progress
:テストの実行中に進行状況を表示します。--browsers
:使用するブラウザを指定します。--colors
:出力に色を使用するかどうか。
リンティング
リンターを実行します。
ng lint
リンターのいくつかのフラグ:
--fix
:リンティングエラーの修正を適用します。--force
:リンティングが失敗した場合でも強制的に成功します。
アプリの構築
build
コマンドを使用してアプリをビルドします。
ng build
buildで使用できるフラグは次のとおりです。
--target
:ビルドのターゲットを指定します(例:--target production
)。--aot
:事前コンパイルを使用します。--base-href
:使用するベースhrefを指定します。--deploy-url
:デプロイメントURLを指定します。--extract-css
:グローバルスタイルをJavaScriptに保持するのではなく、CSSファイルに配置します。--watch
:ファイルが変更されるたびに再構築します。
WebpackConfigをイジェクトする
Angular CLIはあなたのプロジェクトのためにもうそれをしませんか? イジェクトするだけで、完全なWebpack構成を利用して、心の欲求に合わせて調整できます。
ng eject
結論
これらは、AngularCLIの最も一般的なコマンドの一部です。 Angular CLIの簡単な紹介については、このチュートリアルをご覧ください。