この記事は Angular Advent Calendar 2021 の1日目の記事です。
先月4日に Angular v13 がリリースされました。angular-eslint や NgRx などの周辺ツールやライブラリも続々と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 の 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 が使われてきましたが、v12 以降は新規プロジェクトの作成時に追加されなくなりました。ここでは例として Cypress を利用します。なお、Protractor は Angular v15 がリリースされる2022年末に開発終了します。
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 が採用されていますが、 jest-preset-angular を利用することで 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 を更新します。
{
"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 を追加してください。
{
"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 をインストールしましょう
コンポーネントのデバッグやパフォーマンス計測に有用です。
おわりに
2021年も残すところもあと少しとなりました。最近の Angular は IE サポート廃止や esbuild の採用、Tailwind CSS のサポート強化など新しい試みがあり見ていて面白いです。「まだ Angular に触れたことが無い」「Angular に興味がある」という方は本記事を参考に Angular デビューしてみましょう。
また、筆者がコントリビュートしている Nx は Angular CLI の機能に加えモノレポ管理や Next.js / NestJS / Jest / Cypress / Storybook 等をサポートをしており、今回紹介したような開発環境もコマンド一つで作成できるので便利です。
npx create-nx-workspace workspace --preset=angular --appName=my-app
こちらも是非お試しください。それでは良いお年を👋