Angular CLI - @ledsun blog

Angularの開発環境はRuby on Railsと同じくらい複雑です。最小でindex.htmlファイル1つで動かせるAngularJSと比べると驚きです。このような環境を手動で作るのは大変なので、自動的に作成してくれるコマンドがあります。これがAngular CLIです。 Ruby on Railsにおけるrails newコマンドのようなものです。

Angular 日本語ドキュメンテーションの手順に従うと小さなアプリケーションが作れます。

npm startを実行すると次の画面が見れます。

f:id:ledsun:20210902122954p:plain — Angular CLIで作成したアプリケーションの初期画面

次のindex.htmlファイルが生成されます。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MyApp</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

不思議なことにJavaScriptファイルが読み込まれていません。ブラウザが読み込んでいるソースコードを見てみます。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MyApp</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="styles.css"></head>
<body>
  <app-root></app-root>
<script src="runtime.js" defer></script><script src="polyfills.js" defer></script><script src="styles.js" defer></script><script src="vendor.js" defer></script><script src="main.js" defer></script></body>
</html>

なぜか5つのscriptタグが追加されています。 npm startで起動しているng serveコマンドがAngular Live Development Server というサーバーを起動しています。

PS C:\dev\hello-angular\my-app> npm start

> my-app@0.0.0 start
> ng serve

✔ Browser application bundle generation complete.

Initial Chunk Files   | Names         |      Size
vendor.js             | vendor        |   2.08 MB
polyfills.js          | polyfills     | 508.66 kB
styles.css, styles.js | styles        | 381.45 kB
main.js               | main          |  55.02 kB
runtime.js            | runtime       |   6.61 kB

                      | Initial Total |   3.01 MB

Build at: 2021-08-27T00:26:10.724Z - Hash: f64b9774d242f7401afd - Time: 4907ms

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


√ Compiled successfully.

これが何かしているようです。

npm run buildコマンドを実行すると次のようにこれらのスクリプトファイルはコンパイルされます。

PS C:\dev\hello-angular\my-app> npm run build

> my-app@0.0.0 build
> ng build

✔ Browser application bundle generation complete.
✔ Copying assets complete.
✔ Index html generation complete.

Initial Chunk Files               | Names         |      Size
main.79ed4c43eb91def85e3b.js      | main          | 134.10 kB
polyfills.fe861a01c9204748df8e.js | polyfills     |  36.19 kB
runtime.47c71d9e559014d0f763.js   | runtime       |   1.02 kB
styles.31d6cfe0d16ae931b73c.css   | styles        |   0 bytes

                                  | Initial Total | 171.30 kB

Build at: 2021-08-27T00:38:58.121Z - Hash: 17628c34e93e6d0bbc8c - Time: 6847ms

index.htmlも次のように生成されます。

<!DOCTYPE html><html lang="en"><head>
  <meta charset="utf-8">
  <title>MyApp</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="styles.31d6cfe0d16ae931b73c.css"></head>
<body>
  <app-root></app-root>
<script src="runtime.47c71d9e559014d0f763.js" defer></script><script src="polyfills.fe861a01c9204748df8e.js" defer></script><script src="main.79ed4c43eb91def85e3b.js" defer></script>

</body></html>

このファイルにははじめからscriptタグが埋め込まれています。

どのファイルがコンパイルされのかはangular.jsonという設定ファイルで制御されているようです。これが100行ほどあり、初見殺しになっています。