Angular CLIメモ
基本的には helpを見るといい感じ
ng help するとわかるが、ng [command name] --help すると
そのコマンドの詳細がわかる
ng new [プロジェクト名]
ng n [プロジェクト名] でも実行できる
実行してみると下記操作が発生する
$ ng n test ? Would you like to add Angular routing? (y/N) ① ? Which stylesheet format would you like to use? (Use arrow keys) ② ❯ CSS SCSS [ https://sass-lang.com/documentation/syntax#scss ] Sass [ https://sass-lang.com/documentation/syntax#the-indented-syntax ] Less [ http://lesscss.org ] Stylus [ http://stylus-lang.com ]
① angularのroutingモジュールを作成するか聞かれている
② 使うCSSのフォーマットを聞かれている
上の二つはnewする時にオプションとして使うことができる 例
ng n test --routing=true --style=scss
またinstallをスキップすることもできる(あとでまとめてやりたい時とか）
ng n test --skipInstall
その他のオプション
prefix
プロジェクトを作成したときの app.component.tsで使われる selector部分の記述 (デフォルトは app-root) サードパーティー製のanglerライブラリを使うときにバッティングする可能性があるので2~4文字で 決め直すのが良い したの場合 t1-rootになる
ng n test1 --prefix=t1
skipTests
アプリケーションで作成される .spec.ts を自動的に生成しないようにするオプション
minimal
学習用にテスト関連用のファイルを生成しないようにするオプション
上の .spec.ts以外にも
tsconfig.spec.jsonなどのファイルが消える
デモや動きを確認したいときに使うと良い
他にも色々あるので後で見てみる
generate
angularの構成ファイルを生成するコマンド ng g で作成することもできる
このコマンドを実行すると基本的には appディレクトリの直下にファイルが作成される 下記の場合は app/test/ のイメージ
ng g component test
また下記のようにディレクトリを一つ掘って作成することもできる
ng g component hoge/hoge-bar
vueだとファイル名はキャメルケースで書いていたが angularのスタイルガイドは小文字のケバブケースが推奨されているので合わせる
オプション
inline
inlineTemplate と --inlineStyleがある
これを使うと今まで自動的に作成されていた .html や .css ファイルが出力されなくなり
component.ts内で書くようになる
htmlの内容が少ない時に使うと良い
prefix
prefixは new の時にあったようにselector の接頭辞を変える為のコマンド
下記で生成すると bar-prefix になる
ng g component prefix --prefix=bar
skipImport
通常は app.moduleの declarationsに自動的に import されるが このオプションを付けるとimport されなくなる
ng g component skip --skipImport
skipTests
コンポーネントの .spec.ts を作成しないようにするオプション
flat
appディレクトリ直下にコンポーネントを作成することができる
flat=false
service用のオプション serviceはflatオプションがtrueになっているのでfalseにしてやると コンポーネントのようにディレクトリが作られてその下にserviceが入るようになる
ng g service message --flat=false
ng serve
ホットリロードできる系のやつ
短縮系は ng s
オプションが長い場合はangular.jsonの serve-> optionsにオプションとして書いてあげるとデフォルトで設定できる
オプション
open
コンパイル後規定のブラウザで自動的に開くことができる packge.jsonに書くと便利
ng s --open
host
デフォルトでは --host = localhost になっている
小技で下記を実行するとネットワーク接続ができるようになる
別のPCから挙動を確認したりしたい時に便利
ng s --host=0.0.0.0 --disableHostCheck
disableHostCheckは許可していない通信制御を解除できる 外出先では使わないようにする
port
ポート変える用
ng s --port=4201
ng build
アプリケーションの静的ファイルを生成する これをサーバーにホストするとangulerアプリを動かすことができる
短縮系は ng b
buildすると dist ディレクトリが生成され、その中に同じプロジェクト名のディレクトリ が作成されその中に本体が入っている
オプション
configuration
ビルド設定を切り替えるようのオプション デフォルトは未指定かproductionどちらか選べる
ng b --configuration=production
angular.jsonでstagingとかの設定を追加するとそれ用の設定を書くことができる
またショートハンドのオプションも用意されていて productionだったら
ng b --prod
と記載できる
watch
ファイルの変更監視が有効になる これをするとファイルが変更されるたびにビルドされる ビルドの動作を確認したい時に使うと便利
ng b --watch
