Angular v13 の開発環境構築

この記事は [Angular Advent Calendar 2021](https://qiita.com/advent-calendar/2021/angular) の1日目の記事です。

先月4日に Angular v13 が[リリース](https://blog.angular.io/angular-v13-is-now-available-cce66f7bc296)されました。[angular-eslint](https://github.com/angular-eslint/angular-eslint) や [NgRx](https://github.com/ngrx/platform) などの周辺ツールやライブラリも続々とv13に対応し、最新版への移行やこれから始める準備ができたかと思います。

本記事ではAngular v13を用いたアプリケーションのセットアップ手順を解説していきます。

## 初期化

Angular CLIを用いてプロジェクトを作成しましょう。
※Node.js v12.20.0〜 / v14.15.0〜 / v16.10.0〜 をインストール済みとします。

```
npx @angular/cli@latest new my-app
```

途中で何度かセットアップに必要な項目に対して質問されます。適宜回答しましょう。

```
Need to install the following packages:
  @angular/cli
Ok to proceed? (y) y
? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? SCSS
```

作業ディレクトリに移動しましょう。

```
cd my-app
```

## Lint 設定

初期状態では Linter が入っていません。[angular-eslint](https://github.com/angular-eslint/angular-eslint) の Schematics を使いましょう。

```
npx ng add @angular-eslint/schematics
```

```
ℹ Using package manager: npm
✔ Found compatible package version: @angular-eslint/schematics@13.0.1.
✔ Package information loaded.

The package @angular-eslint/schematics@13.0.1 will be installed and executed.
Would you like to proceed? Yes
✔ Package successfully installed.
    
    All @angular-eslint dependencies have been successfully installed 🎉
    
    Please see https://github.com/angular-eslint/angular-eslint for how to add ESLint configuration to your project.
    
    
    We detected that you have a single project in your workspace and no existing linter wired up, so we are configuring ESLint for you automatically.
    
    Please see https://github.com/angular-eslint/angular-eslint for more information.
    
CREATE .eslintrc.json (984 bytes)
UPDATE package.json (1444 bytes)
UPDATE angular.json (3501 bytes)
✔ Packages installed successfully.
```

今後の更新で `ng lint` 実行時にインストールするか尋ねられるようになるようです。
https://github.com/angular/angular-cli/pull/22203

## E2E テスト

E2E テストにはこれまで [Protractor](https://github.com/angular/protractor) が使われてきましたが、v12 以降は新規プロジェクトの作成時に追加されなくなりました。ここでは例として [Cypress](https://github.com/cypress-io/cypress) を利用します。なお、Protractor は Angular v15 がリリースされる2022年末に[開発終了](https://github.com/angular/protractor/issues/5502)します。


```
npx ng add @cypress/schematic 
```

```
ℹ Using package manager: npm
✔ Found compatible package version: @cypress/schematic@1.6.0.
✔ Package information loaded.

The package @cypress/schematic@1.6.0 will be installed and executed.
Would you like to proceed? Yes
✔ Package successfully installed.
? Would you like the default `ng e2e` command to use Cypress? Yes
CREATE cypress.json (298 bytes)
CREATE cypress/tsconfig.json (139 bytes)
CREATE cypress/integration/spec.ts (178 bytes)
CREATE cypress/plugins/index.ts (180 bytes)
CREATE cypress/support/commands.ts (1377 bytes)
CREATE cypress/support/index.ts (651 bytes)
UPDATE package.json (1597 bytes)
UPDATE angular.json (4354 bytes)
✔ Packages installed successfully.
```

## ユニットテスト（※任意）

上記の手順で `npm run lint` や `npm run e2e` が使えるようになりました。ユニットテストに関しては Angular では現在 [Karma](https://github.com/karma-runner/karma) が採用されていますが、 [jest-preset-angular](https://github.com/thymikee/jest-preset-angular) を利用することで [Jest](https://github.com/facebook/jest) を使ってテストを実行できます。

Karma を アンインストールし、 Jest をインストールします。

```
npm uninstall @types/jasmine jasmine-core karma karma-chrome-launcher karma-coverage karma-jasmine karma-jasmine-html-reporter
```

```
npm install -D @types/jest jest jest-preset-angular
```

設定ファイルを差し替えます。

```
rm karma.conf.js src/test.ts
```

```
echo "import 'jest-preset-angular/setup-jest';" >> src/setup-jest.ts
```

```
echo "module.exports = {\n  preset: 'jest-preset-angular',\n  setupFilesAfterEnv: ['<rootDir>/src/setup-jest.ts'],\n  testMatch: ['<rootDir>/src/**/+(*.)+(spec|test).+(ts|js)?(x)'],\n};" >> jest.config.js
```

`tsconfig.spec.json` の `types` および `files` を更新します。

```json
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/spec",
    "types": [
      "jest"
    ]
  },
  "files": [
    "src/polyfills.ts",
    "src/setup-jest.ts"
  ],
  "include": [
    "src/**/*.spec.ts",
    "src/**/*.d.ts"
  ]
}
```

最後に `package.json` の `test` スクリプトを書き換えましょう。

```
{
  "name": "my-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "jest",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "cypress:open": "cypress open",
    "cypress:run": "cypress run"
  },
```

`npm test` を実行すると Jest が起動します。

```
npm test

> my-app@0.0.0 test
> jest

 PASS  src/app/app.component.spec.ts
  AppComponent
    ✓ should create the app (149 ms)
    ✓ should have as title 'my-app' (35 ms)
    ✓ should render title (39 ms)

Test Suites: 1 passed, 1 total
Tests:       3 passed, 3 total
Snapshots:   0 total
Time:        4.264 s
Ran all test suites.
```

テスト実行時に下記のような警告が出る場合、

```
ts-jest[config] (WARN) message TS151001: If you have issues related to imports, you should consider setting `esModuleInterop` to `true` in your TypeScript configuration file (usually `tsconfig.json`). See https://blogs.msdn.microsoft.com/typescript/2018/01/31/announcing-typescript-2-7/#easier-ecmascript-module-interoperability for more information.
```

`tsconfig.json` の `compilerOptions` に `"esModuleInterop": true` を追加してください。

```json
{
  "compilerOptions": {
    ...
    "esModuleInterop": true,
  },
}

```

## VS Code 拡張（※任意）

Angular Language Service をインストールしましょう。
https://marketplace.visualstudio.com/items?itemName=Angular.ng-template

Angular CLI の Pull Requests を見ると、今後は VS Code でプロジェクトを開いた際に Angular Language Service が推奨する拡張として表示されるようです。
https://github.com/angular/angular-cli/pull/22167

## ブラウザ拡張（※任意）

Angular DevTools をインストールしましょう

https://chrome.google.com/webstore/detail/angular-devtools/ienfalfjdbdpebioblfackkekamfmbnh

コンポーネントのデバッグやパフォーマンス計測に有用です。

## おわりに

2021年も残すところもあと少しとなりました。最近の Angular は IE サポート廃止や esbuild の採用、Tailwind CSS のサポート強化など新しい試みがあり見ていて面白いです。「まだ Angular に触れたことが無い」「Angular に興味がある」という方は本記事を参考に Angular デビューしてみましょう。

また、筆者がコントリビュートしている [Nx](https://github.com/nrwl/nx) は Angular CLI の機能に加えモノレポ管理や Next.js / NestJS / Jest / Cypress / Storybook 等をサポートをしており、今回紹介したような開発環境もコマンド一つで作成できるので便利です。

```
npx create-nx-workspace workspace --preset=angular --appName=my-app
```

こちらも是非お試しください。それでは良いお年を👋