【2019年5月】yarn で @angular/cli

前回の記事で yarn をインストールいたしましたが続いて Angular の開発環境を構築してみたいと思います。

まず angular-cli のインストール

Yarn で Angular の環境構築してみます。

以下のコマンドで cli のインストールを行います。

$ yarn global add @angular/cli
yarn global v1.15.2
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Installed "@angular/cli@7.3.8" with binaries:
      - ng
✨  Done in 23.42s.

Package Manager を Yarn に変更する。

以下の記事にありました。

• Using Yarn with Angular CLI v6+

以下のコマンドで設定を変更します。

$ ng config -g cli.packageManager yarn

上記の記事は v6 対応のようですが現時点の v7.3.8 でも有効でした。

サンプルプロジェクトの作成

以下のコマンドでサンプルプロジェクトを作成します。

$ ng new ng-yarn-sample
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS   [ http://sass-lang.com/d
ocumentation/file.SASS_REFERENCE.html#syntax ]
CREATE ng-yarn-sample/README.md (1029 bytes)
CREATE ng-yarn-sample/.editorconfig (246 bytes)
CREATE ng-yarn-sample/.gitignore (629 bytes)
CREATE ng-yarn-sample/angular.json (3967 bytes)
CREATE ng-yarn-sample/package.json (1313 bytes)
CREATE ng-yarn-sample/tsconfig.json (435 bytes)
CREATE ng-yarn-sample/tslint.json (1621 bytes)
CREATE ng-yarn-sample/src/favicon.ico (5430 bytes)
CREATE ng-yarn-sample/src/index.html (299 bytes)
CREATE ng-yarn-sample/src/main.ts (372 bytes)
CREATE ng-yarn-sample/src/polyfills.ts (2841 bytes)
CREATE ng-yarn-sample/src/styles.scss (80 bytes)
CREATE ng-yarn-sample/src/test.ts (642 bytes)
CREATE ng-yarn-sample/src/browserslist (388 bytes)
CREATE ng-yarn-sample/src/karma.conf.js (1027 bytes)
CREATE ng-yarn-sample/src/tsconfig.app.json (166 bytes)
CREATE ng-yarn-sample/src/tsconfig.spec.json (256 bytes)
CREATE ng-yarn-sample/src/tslint.json (244 bytes)
CREATE ng-yarn-sample/src/assets/.gitkeep (0 bytes)
CREATE ng-yarn-sample/src/environments/environment.prod.ts (51 bytes)
CREATE ng-yarn-sample/src/environments/environment.ts (662 bytes)
CREATE ng-yarn-sample/src/app/app-routing.module.ts (245 bytes)
CREATE ng-yarn-sample/src/app/app.module.ts (393 bytes)
CREATE ng-yarn-sample/src/app/app.component.scss (0 bytes)
CREATE ng-yarn-sample/src/app/app.component.html (1152 bytes)
CREATE ng-yarn-sample/src/app/app.component.spec.ts (1119 bytes)
CREATE ng-yarn-sample/src/app/app.component.ts (219 bytes)
CREATE ng-yarn-sample/e2e/protractor.conf.js (752 bytes)
CREATE ng-yarn-sample/e2e/tsconfig.e2e.json (213 bytes)
CREATE ng-yarn-sample/e2e/src/app.e2e-spec.ts (643 bytes)
    Successfully initialized git.

生成されたファイルを確認してみましょう。

$ cd ng-yarn-sample
$ ls
README.md	e2e		package.json	tsconfig.json	yarn.lock
angular.json	node_modules	src		tslint.json

yarn.lockが生成されていますね。無事に、yarn が仕事したようです。

テストサーバーを起動してみる

以下のコマンドで Angular の開発サーバーを起動します。

$ yarn start
yarn run v1.15.2
$ ng serve
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
                                                                              u Date: 2019-05-05T09:50:50.664Z
Hash: 3369ec20a97407d9776a
Time: 26375ms
chunk {es2015-polyfills} es2015-polyfills.js, es2015-polyfills.js.map (es2015-polyfills) 284 kB [initial] [rendered]
chunk {main} main.js, main.js.map (main) 11.6 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 236 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 16.7 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.77 MB [initial] [rendered]
ℹ ｢wdm｣: Compiled successfully.

npm run start よりタイプは減りましたね！

UT (Karma) の実施

以下のコマンドでUTを起動してみましょう。

$ yarn test
yarn run v1.15.2
$ ng test
 11% building 11/11 modules 0 active05 05 2019 18:53:07.271:WARN [karma]: No captured browser, open http://localhost:9876/
05 05 2019 18:53:07.312:INFO [karma-server]: Karma v4.0.1 server started at http://0.0.0.0:9876/
05 05 2019 18:53:07.317:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
05 05 2019 18:53:07.337:INFO [launcher]: Starting browser Chrome
05 05 2019 18:53:26.496:WARN [karma]: No captured browser, open http://localhost:9876/    
05 05 2019 18:53:26.753:INFO [Chrome 73.0.3683 (Mac OS X 10.13.6)]: Connected on socket dz8O9bRMX6ihkARVAAAA with id 30137211
Chrome 73.0.3683 (Mac OS X 10.13.6): Executed 1 of 3 SUCCESS (0 secs / 0.214 secChrome 73.0.3683 (Mac OS X 10.13.6): Executed 2 of 3 SUCCESS (0 secs / 0.332 secChrome 73.0.3683 (Mac OS X 10.13.6): Executed 3 of 3 SUCCESS (0 secs / 0.439 secChrome 73.0.3683 (Mac OS X 10.13.6): Executed 3 of 3 SUCCESS (0.516 secs / 0.439 secs)
TOTAL: 3 SUCCESS
TOTAL: 3 SUCCESS

ブラウザが開き http://localhost:9876/?id=30137211 の jasmine レポートが表示されます。

yarn での Angular 環境についてはまとまった情報がないですが、引き続き yarn + Angular での開発をすすめていきたいと思います。