Angular 应用是怎么工作的？

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第15天

本文是译文，采用意译。

你是否好奇 Angular 应用背后场景都发生了什么？

你想知道 Angular 应用是怎么启动的？本文你值得阅读。

Angular 应用的启动基于 angular.json 文件。这个不是应用的入口文件，而是应用的启动文件。

应用入口在哪？

如果你使用旧版的 Angular，比如版本 4 或 5 ，你会注意到没有 angular.json 这个文件，取而代之的是 angular-cli.json 文件。别在意，都是表达同样内容的文件，只是命名不同而已。

angular.json 包含应用的所有配置信息。Angular builder 将通过这份文件，查找到应用的入口。

我们来看下 angular.json 文件包含什么，下面是一个例子。

代码语言：javascript复制

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    "outputPath": "dist/angular-starter",
    "index": "src/index.html",
    "main": "src/main.ts",
    "polyfills": "src/polyfills.ts",
    "tsConfig": "tsconfig.app.json",
    "aot": false,
    "assets": [
      "src/favicon.ico",
      "src/assets"
    ],
    "styles": [
      "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
      "src/style.css"
    ]
  }
}

angular.json 好比人类的 DNA。在上面的文件内容中，我们知道使用了那种 UI 框架，使用了什么 builder 去构建应用，index 页面路径，polyfills 路径等。