Angular で Webアプリケーションを作成する為に、MacOS上にAngular CLIで開発環境を構築する為の備忘録
Angular CLI とは
Angular を使って開発をする為の、コマンドラインツールです。Angularを使う場合には基本的にこれを用いることになるかと思いますが、メリットは色々あります。
Angular CLI をインストールする方法
npm install -g @angular/cli
メモ: Angular CLI を npm install しようとしたら、EEXIST: file already exists .... といったエラーが出た場合の対応
今回バージョンは次のものになります
@angular/cli@10.0.1
プロジェクトを作成する
プロジェクト名を決める
今回はよくあるものですが my-app
にしてみます
コマンド
% ng new my-app
↑のコマンドを叩くと、↓のような質問プロンプトが表示されます。 これに答えてきます。
? 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 ]
すると、以下のようなファイルたちが生成されていきます。
CREATE probless/README.md (1026 bytes) CREATE probless/.editorconfig (274 bytes) CREATE probless/.gitignore (631 bytes) CREATE probless/angular.json (3670 bytes) CREATE probless/package.json (1258 bytes) CREATE probless/tsconfig.base.json (458 bytes) CREATE probless/tsconfig.json (475 bytes) CREATE probless/tslint.json (3184 bytes) CREATE probless/.browserslistrc (852 bytes) CREATE probless/karma.conf.js (1020 bytes) CREATE probless/tsconfig.app.json (292 bytes) CREATE probless/tsconfig.spec.json (338 bytes) CREATE probless/src/favicon.ico (948 bytes) CREATE probless/src/index.html (294 bytes) CREATE probless/src/main.ts (372 bytes) CREATE probless/src/polyfills.ts (2835 bytes) CREATE probless/src/styles.styl (80 bytes) CREATE probless/src/test.ts (753 bytes) CREATE probless/src/assets/.gitkeep (0 bytes) CREATE probless/src/environments/environment.prod.ts (51 bytes) CREATE probless/src/environments/environment.ts (662 bytes) CREATE probless/src/app/app-routing.module.ts (246 bytes) CREATE probless/src/app/app.module.ts (393 bytes) CREATE probless/src/app/app.component.styl (0 bytes) CREATE probless/src/app/app.component.html (25757 bytes) CREATE probless/src/app/app.component.spec.ts (1065 bytes) CREATE probless/src/app/app.component.ts (213 bytes) CREATE probless/e2e/protractor.conf.js (869 bytes) CREATE probless/e2e/tsconfig.json (299 bytes) CREATE probless/e2e/src/app.e2e-spec.ts (641 bytes) CREATE probless/e2e/src/app.po.ts (301 bytes) ⠼ Installing packages... ✔ Packages installed successfully. Successfully initialized git.
プロジェクトを動かす
$ cd my-app $ ng serve
↑のコマンドを叩くと、以下のようなテキストが表示されます。
Compiling @angular/animations : es2015 as esm2015 Compiling @angular/core : es2015 as esm2015 Compiling @angular/compiler/testing : es2015 as esm2015 Compiling @angular/animations/browser : es2015 as esm2015 Compiling @angular/core/testing : es2015 as esm2015 Compiling @angular/common : es2015 as esm2015 Compiling @angular/platform-browser : es2015 as esm2015 Compiling @angular/common/http : es2015 as esm2015 Compiling @angular/common/testing : es2015 as esm2015 Compiling @angular/animations : es2015 as esm2015 Compiling @angular/core : es2015 as esm2015 Compiling @angular/compiler/testing : es2015 as esm2015 Compiling @angular/animations/browser : es2015 as esm2015 Compiling @angular/core/testing : es2015 as esm2015 Compiling @angular/common : es2015 as esm2015Compiling @angular/platform-browser-dynamic : es2015 as esm2015 Compiling @angular/platform-browser/testing : es2015 as esm2015 Compiling @angular/router : es2015 as esm2015 Compiling @angular/animations/browser/testing : es2015 as esm2015 Compiling @angular/common/http/testing : es2015 as esm2015 Compiling @angular/forms : es2015 as esm2015 Compiling @angular/platform-browser/animations : es2015 as esm2015 Compiling @angular/platform-browser-dynamic/testing : es2015 as esm2015 Compiling @angular/router/testing : es2015 as esm2015 chunk {main} main.js, main.js.map (main) 60.6 kB [initial] [rendered] chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 141 kB [initial] [rendered] chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered] chunk {styles} styles.js, styles.js.map (styles) 12.9 kB [initial] [rendered] chunk {vendor} vendor.js, vendor.js.map (vendor) 2.64 MB [initial] [rendered] Date: 2020-07-09T08:47:41.158Z - Hash: 485f10dac3e8cce82aab - Time: 8120ms ** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ ** : Compiled successfully.
続々とコンパイルされていき、 localhost:4200
でブラウザから確認できる様になります。
一旦、これで開発できる環境は整いました。