[2019年1月版] angular-cliが神過ぎて涙が溢れているのを止めないで

angular-cli をインストール

$ npm install -g @angular/cli

環境によってはsudo npm ...を行って下さい。

angular-cli での新規作成するコマンドいろいろ

プロジェクトの新規作成

$ ng new angular-cli-example
$ cd angular-cli-example

このng newコマンドでプロジェクトの初期設定をいろいろやってくれます。素敵です(涙目)。
カレントディレクトリにプロジェクト名ディレクトリが生成されるのでcdで下に移動するのは忘れずに。
ng newで渡すプロジェクト名で"_"を使うとCSS選択の後でエラーが発生し、先に進めません！

$ ng new sample_project
? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? SCSS   [ http://sass-lang.com   ]
Schematic input does not validate against the Schema: {"name":"sample_project","version":"7.2.1","routing":false,"style":"scss"}
Errors:

  Data path ".name" should match format "html-selector".

う～ん、"_"はdamnみたいです。

ローカルの開発サーバー起動

例えば4203ポートで開発サーバー起動する場合は以下のようになります。

ng serve--open --port 4203

デフォルトポートでは4200ですが複数の環境でng serveしたい場合はポート指定すると便利です。

コンポーネントの追加

$ ng g c sample/list

gはgenerateの略、cはcomponentの略です。このコマンドでsrc/app/sample/list/list.component.xxxファイル群が生成されます。
app.moduleにも追記してくれます。(！)
htmlやcssをcomponent.tsに含めてしまう場合は、

$ ng g c sample/list --inline-template --inline-style

とすればhtmlやcssファイルは生成されません。

サービスの追加

$ ng g s sample

例によってgはgenerateのgですが、sはserviceのsです。上記のコマンドでsample.service.ts、sample.service.spec.tsが生成されます。

ただし、コンポーネントの時とディレクトリの階層が違うので注意が必要です。コンポーネントと同じディレクトリにサービスを生成したい場合は、sample/sampleと指定します。

ちょっと e2e でも書きたいことがあるのでまとまったら上げます。

こちらからは以上です！