谁能告诉我哪个先运行，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 是未知的，因此 Angular 无法了解根组件。它在解析时必须抛出错误，但它不会抛出错误。这意味着，它已经知道 app-root，这意味着 Main.js 是入口点。但这怎么可能，如何在没有 Html 页面的情况下触发 javascript 文件呢？

第一种方式：- Angular.json ---> Main.js--->Index.html （但这怎么可能？谁触发了 Main.js？）

第二种方式：- Angular.json--->Index.html---->Main.js （但是 Angular 如何知道？？）

另外， 我的问题是，如果我在应用程序组件本身内部编写巨大的“ts”代码，那么即使在流程到达之后它也不会被执行，<app-root>因为 Angular 不知道<app-root>实际是什么，直到它找到 Main.js在 body 标签中并执行它，然后只有它可以知道它。

Answer 1

您可以轻松测试它。放入,和console.log(1)中。第一个控制台将是，因此首先运行。index.htmlconsole.log(2)main.ts1index.html

当应用程序打开时，最初index.html开始渲染，它将渲染为空<app-root></app-root>- 因为 Angular 应用程序仍需加载（您可以轻松测试CTRL + U- 这是浏览器看到的初始内容）。这是 SPA 应用 SEO 的一大瓶颈。

加载 Angular 应用程序后，它将动态地将内容填充<app-root></app-root>到index.html.

更新

我错过了为什么在标记时error不抛出的部分。@Ashish 在他的回答中解释得非常好（并且绝对值得投票），所以我将在这里引用他的答案：index.html<app-root></app-root>

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

Answer 2

从 Nenad 的回答可以清楚地看出，index.html 首先加载，然后是 main.js。加载 main.js 后，它会在 .js 文件中呈现根组件<app-root>。

您在这里的主要困惑似乎是，Angular<app-root>在加载或执行 main.js/main.ts 之前在 html 中遇到，那么为什么它不抛出任何错误或异常，因为如果 main.js 未加载，则意味着<app-root>尚未定义。

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