Question

根据“我的知识”，首先调用index.html文件，然后调用main.ts，该文件用于引导应用程序组件。请提出建议！

Answer 1

首先，Angular查看angular.json文件并检查在“ main”属性中定义了哪个文件。因此，基本上，main.ts文件包含在该属性中（默认情况下）。之后，它进入main.ts文件，该文件引导我们的AppModule。

Answer 2

如果您查看angular.json文件，

您将看到类似以下的内容。

  "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "outputPath": "dist/TEST",
        "index": "src/index.html",
        "main": "src/main.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "src/tsconfig.app.json",
        "assets": [
          "src/assets",
          {
            "glob": "**/*.json",
            "input": "public/",
            "output": "./public/"
          },
          "src/manifest.json"
        ],
        "styles": [         
          "src/styles/styles.scss"
        ],
        "scripts": [
          "node_modules/jquery/dist/jquery.min.js",

        ]
      }
    }
   }

因此，当您构建角度应用程序时，需要给基本的index.html文件提供选择器，该选择器包含AppComponent的代码。

在main.ts中，您将找到引导应用程序的AppModule

Answer 3

您可以将这两个文件视为两个不同的入口点。

index.html充当DOM或组件树的入口点。

main.ts充当TypeScript的入口点。

这些是您在angular.json中指定的文件：

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "demo": {
      ...
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html", // Right Here
            "main": "src/main.ts", // Right Here
            ...
          },
          "configurations": {
            ...
          }
        },
        ...
      }
    }
  },
  "defaultProject": "demo"
}

但是，如果您看到index.html文件夹中生成的dist文件，您将看到类似以下内容：

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Your App Name Here</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="assets/your-company-logo.png">
</head>

<body>
  <app-root></app-root>
  <script type="text/javascript" src="runtime.js"></script>
  <script type="text/javascript" src="polyfills.js"></script>
  <script type="text/javascript" src="styles.js"></script>
  <script type="text/javascript" src="vendor.js"></script>
  <script type="text/javascript" src="main.js"></script>
</body>

</html>

如您所见，在构建之后生成的所有JS文件都链接在底部的script标记中。因此可以肯定地说index.html将充当整个App的入口点。

客户端将收到包含index.html和其他js文件（例如runtime，polyfills，styles，vendor，{{1 }}等。这些文件是由main文件配置的构建过程生成的。因此，一旦加载了这些JS文件，浏览器就会知道angular.json文件的内容以及浏览器在哪里可以找到它们。

到目前为止，由于Angular应用尚未启动，浏览器将不会意识到main.ts标签。

浏览器运行<app-root></app-root>文件的内容后，Angular App将会启动。我说内容是因为这些TS文件是内置的，而已运行的JS文件已运行。因此，到目前为止，我还不确定该代码在编译和构建之后的去向。

自从启动了Angular应用程序，并且自从根main.ts的{{1}}数组中出现Angular以来，它就已经自举了Root组件，浏览器随后将了解此bootstrap的含义是。

然后，Angular还将开始从RootComponent创建组件树。

大致是Angular App引导的方式。我已尽力使您了解所有工作原理。

在运行Angular Code时，首先调用的是什么？是第一个index.js或main.ts还是其他东西？

3 个答案: