谁能给我一个明确的想法，哪个先运行，Index.html 还是 main.ts？

Question

StackOverflow 上有很多与此相关的问题，但没有一个有逻辑的答案。

如果

index.html

首先运行。

main.ts

或者更好地说

main.js

（转译后）无法自行运行，因为它最后是一个 Javascript 文件，而

index.html

文件是包含之前底部的

main.js

的引用的文件结束 body 标签，显然，webpack 完成了这一切。

现在，假设从

angular.json

文件的配置中，角度知道

index

是应该首先提供的主要 HTML 文件。

话又说回来，由于

main.js

此时未知，因此角度无法知道根组件。它在解析

<app-root></app-root>

时必须抛出错误，但它不会抛出错误。这意味着，它已经知道

app-root

，这意味着

main.js

是入口点。但这怎么可能，如何在没有 HTML 页面的情况下触发 Javascript 文件？

第一种方法：-

angular.json ---> main.js--->index.html

（但这怎么可能？谁触发了 main.js？）

第二种方式：-

angular.json--->index.html---->main.js

（但是角度如何知道？？）

还有，

我的问题是，如果我在应用程序组件本身内部编写巨大的“ts”代码，那么即使在流程到达

<app-root>

之后它也不会被执行，因为Angular不知道

<app-root>

实际上是什么，直到它在 body 标签中找到 main.js 并执行它，然后只有它才能知道它。

Answer 1

您可以轻松测试它。将

console.log(1)

放入

index.html

中，将

console.log(2)

放入

main.ts

中。第一个控制台将是

1

，因此

index.html

首先运行。

当应用程序打开时，最初

index.html

开始渲染，它将以空

<app-root></app-root>

渲染 - 因为 Angular 应用程序仍待加载（您可以使用

CTRL + U

轻松测试 - 这是浏览器看到的初始内容） 。这是 SPA 应用 SEO 的一大瓶颈。

一旦加载 Angular 应用程序，它将动态地将内容填充到

<app-root></app-root>

的

index.html

。

更新

我错过了为什么当

error

来到

index.html

标签时不抛出

<app-root></app-root>

的部分。 @Ashish 解释说，他的回答非常好（并且绝对值得点赞），所以我将在这里引用他的答案：

原因是，index.html不是一个Angular模板文件，它是纯粹的 html，你可以在其中放置任何元素，但它永远不会 抛出一个错误。但对于 Angular 模板文件，在编译时它 检查是否已定义，如果没有则抛出编译时错误 定义。

Answer 2

从 Nenad 的回答中可以清楚地看出，首先加载 index.html，然后加载 main.js。加载 main.js 后，它会在

<app-root>

中渲染根组件。

您的主要困惑似乎是，Angular 在加载或执行 main.js/main.ts 之前在 html 中遇到

<app-root>

，那么为什么它不会抛出任何错误或异常，因为如果 main.js 未加载，则意味着

 <app-root>

尚未定义。

原因是，index.html不是一个Angular模板文件，它是纯html，你可以在其中放置任何

<xyz>

元素，它永远不会抛出错误。但对于 Angular 模板文件，在编译时它会检查

<xyz>

是否已定义，如果未定义则抛出编译时错误。