軽くAngularに触れてみたくなったので、
取り急ぎ、公式ドキュメントを参考にプロジェクトを立ち上げるところまで。
尚、Node.jsがインストールされている前提となっております。
Angular CLI 導入
npmパッケージマネージャーを使用してCLIをインストール
npm install -g @angular/cli
ワークスペース、プロジェクト立ち上げ
ng new angular-app-sample
? Would you like to enable autocompletion? This will set up your terminal so pressing TAB while typing Angular CLI commands
will show possible options and autocomplete arguments. (Enabling autocompletion will modify configuration files in your
home directory.)
>> CLIを初めて使用する時にプロンプトを表示し、自動補完を設定するように求めてきます
? Would you like to share pseudonymous usage data about this project with the Angular Team
at Google under Google's Privacy Policy at https://policies.google.com/privacy. For more
details and how to change this setting, see https://angular.io/analytics.
>> GoogleのAngularチームに情報共有するか聞かれる
? Would you like to add Angular routing?
>> ルーティングどうするか聞かれる
? Which stylesheet format would you like to use?
>> スタイルシートどうするか聞かれる
立ち上げ直後のディレクトリ構成
アプリケーションを実行する
ng serve コマンドはサーバーを起動し、ファイルを監視し、 それらのファイルを変更した時にはアプリケーションを再ビルドします。--open（または -o）オプションは、ブラウザで自動的に http://localhost:4200/ で開きます。
cd angular-app-sample
ng serve --open
次のようなページが表示されればOK
最後にバージョン確認
ng version
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 14.2.5
Node: 18.9.0 (Unsupported)
Package Manager: npm 8.19.1
OS: darwin x64
Angular: 14.2.5
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1402.5
@angular-devkit/build-angular 14.2.5
@angular-devkit/core 14.2.5
@angular-devkit/schematics 14.2.5
@schematics/angular 14.2.5
rxjs 7.5.7
typescript 4.7.4