![【Angular】Angular CLI コマンド(ngコマンド)を整理してみた](https://awc.ajouter-essence.com/wp-content/uploads/2020/04/xjxwbfso2f0-1024x683.jpg)
仕事でAngularを扱わないといけなくなったのですが、
はじめ何が何やらさっぱりでして、とりあえずAngularをインストールしてngコマンドを叩くとこから始めました。
なので、それをざっくりとまとめておきます。
Angular CLI
まずは、Angular CLIのインストールが必要。
インストールしたらngコマンドを使うことができるようになります。
npm install -g @angular/cli
ちなみに-gオプションを付けて、グローバルにインストールしました。
グローバルにというのは、パスを指定しなくてもどこからでも使うことができるようになることを指します。
指定しない場合は、カレントディレクトリにインストールすることになります。
サーバ起動
サーバを起動する。
ng serve
サーバ起動した後に自動的にブラウザを開く場合は–openオプションを付けます。
ng serve --open
同一ネットワーク内で他PCからのアクセスもできるようにするには、–hostオプションで0.0.0.0を指定してあげます。
ng serve --host 0.0.0.0
プロジェクト作成
プロジェクトを作成する。
ng new MyApp
オプションでCSSをSASS、SCSSに変更することもできます。
ng new MyApp <span>-</span><span>-</span>style=sass ng new MyApp <span>-</span><span>-</span>style=scss
個人的にはいつもscssを指定してあげています。
また、自分はMacで作業しているのでならなかったのですが、Windowsの場合ワーニングが出る場合があるようです。
遭遇した場合は、こちらを参考にしてください。
fseventsが依存関係でエラーになる
コンポーネント作成
コンポーネントを作成する
ng g component [フォルダ]/[コンポーネント名]
コンポーネントを追加したあとは、ルーティングに追加しましょう。
こちらのファイルにコンポーネントを追加してあげることでルーティングできるようになります。
app-routing.module.ts
クラス作成
クラスを作成する。
ng g class [フォルダ]/[クラス名]
コンポーネント作成と同様。
パイプ作成
パイプを作成する。
ng g pipe [フォルダ]/[パイプ名]
コンポーネント作成と同様。
ビルド
一旦は、参考サイトを添付
Angularで作ったアプリをApacheサーバーにUPして公開する
これからAngularを覚えるなら
こちらのサイトがすごくわかりやすくまとめてあります。
まずは、ここで基本を押さえると後々楽になるのではと・・・
いくつか参考サイトを載せておきます。
Angular入門 未経験から1ヶ月でサービス作れるようにする