angular - Angular 如何构建和运行

Question

只是想了解 Angular 如何在幕后构建和运行？

以下是我到目前为止的理解。想知道我是否遗漏了什么。

Angular 如何构建

在使用 TypeScript 对我们的 Angular 应用程序进行编码后，我们使用 Angular CLI 命令来构建应用程序。
ng build命令将应用程序编译到输出目录中，构建工件将存储在 dist/ 中。目录。

内部流程

1. Angular CLI 运行 Webpack 来构建和捆绑所有 JavaScript 和 CSS 代码。

2. 反过来，Webpack 调用 TypeScript 加载器来获取所有 .ts Angular 项目中的文件，然后将它们转换为 JavaScript，即转换为 .js文件，浏览器可以理解。

This帖子说 Angular 有两个编译器:

查看编译器

模块编译器

关于构建的问题

调用构建过程的顺序是什么？

Angular CLI 首先调用用 TypeScript 编写的 Angular 内置编译器 => 然后调用 TypeScript Transpiler => 然后调用 Webpack 打包并存储在 dist/目录。

Angular 如何运行

构建完成后，我们应用程序的所有组件、服务、模块等都将转换为 JavaScript .js用于在浏览器中运行 Angular 应用程序的文件。

Angular Docs中的声明

当您使用 AppComponent 引导时类(在 main.ts 中)，Angular 查找 <app-root>在 index.html ，找到它，实例化 AppComponent 的一个实例，并将它呈现在 <app-root> 中标记。

当用户在应用程序中移动时，Angular 会创建、更新和销毁组件。

关于运行的问题

虽然 main.ts在上面的语句中用于解释引导过程，Angular 应用程序不是使用 JavaScript 引导或启动的 .js文件？

是不是所有上述语句都是使用 JavaScript 在运行时完成的 .js文件？

有谁知道所有部分是如何深度组合在一起的？

Answer 1

(当我说 Angular 时，我的意思是 Angular 2+，如果我提到 Angular 1，我会明确说 angular-js)。

前言:令人困惑

Angular，或许更准确地说，angular-cli 已经将一些参与构建过程的 Javascript 趋势工具合并在一起。它确实会导致一些困惑。

为了进一步混淆，术语 compile在 angular-js 中经常使用，指的是取模板的伪 html 并将其转换为 DOM 元素的过程。这是编译器所做的工作的一部分，只是较小的部分之一。

首先，不需要使用 TypeScript、angular-cli 或 Webpack 来运行 Angular。回答你的问题。我们应该看一个简单的问题:“什么是 Angular？”

Angular :它有什么作用？

本节可能有争议，我们将拭目以待。 Angular 提供的服务的核心是一种依赖注入(inject)机制，它可以跨 Javascript、HTML 和 CSS 工作。 你单独编写所有的小片段，在每个小片段中，你遵循 Angular 的规则来引用其他片段。 Angular 然后以某种方式完全编织了它。

更具体一点:

模板允许将 HTML 连接到 Javascript 组件中。这允许用户对 DOM 本身的输入(例如单击按钮)输入到 Javascript 组件中，还允许 Javascript 组件中的变量控制 DOM 中的结构和值。

Javascript 类(包括 Javascript 组件)需要能够访问它们所依赖的其他 Javascript 类的实例(例如经典依赖注入(inject))。 BookListComponent 需要一个 BookListService 的实例，它可能需要一个 BookListPolicy 的实例或类似的东西。这些类中的每一个都有不同的生命周期(例如，服务通常是单例，组件通常不是单例)，而 Angular 必须管理所有这些生命周期、组件的创建以及依赖项的连接。

CSS 规则需要以这样一种方式加载，即它们仅适用于 DOM 的一个子集(组件的样式是该组件的本地样式)。

需要注意的一件可能重要的事情是 Angular 不负责 Javascript 文件如何引用其他 Javascript 文件(例如 import 关键字)。这由 Webpack 处理。

编译器是做什么的？

现在你知道 Angular 做了什么，我们可以谈谈编译器做了什么。我会避免太技术化，主要是因为我无知。但是，在依赖注入(inject)系统中，您通常必须使用某种元数据来表达您的依赖关系(例如，类如何表示 I can be injected 、 My lifetime is blah 或 You can think of me as a Component type of instance )。在 Java 中，Spring 最初是用 XML 文件完成的。 Java 后来采用了注解，它们已成为表达元数据的首选方式。 C# 使用属性来表达元数据。

Javascript 没有一个很好的机制来公开这个内置的元数据。 angular-js 做了一次尝试，还不错，但是有很多规则不容易检查，而且有点困惑。 Angular 支持两种指定元数据的方式。您可以编写纯 Javascript 并手动指定元数据，有点类似于 angular-js，只需遵循规则并编写额外的样板代码即可。或者，您可以切换到 TypeScript，它恰好具有用于表达元数据的装饰器(那些 @ 符号)。

所以这里是我们最终可以使用编译器的地方。编译器的工作是获取该元数据并创建作为您的应用程序的工作件系统。您专注于所有部分和所有元数据，编译器构建一个大型互连应用程序。

编译器是如何做到的？

编译器有两种工作方式，运行时和提前。从这里开始，我将假设您使用的是 TypeScript:

运行时间:当 typescript 编译器运行时，它会获取所有装饰器信息并将其推送到附加到装饰类、方法和字段的 Javascript 代码中。在您的 index.html您引用您的 main.js调用 bootstrap方法。该方法传递给您的顶级模块。

bootstrap 方法启动运行时编译器并为其提供对该顶级模块的引用。然后，运行时编译器开始抓取该模块、该模块引用的所有服务、组件等以及所有关联的元数据，并构建您的应用程序。

AOT: Angular 提供了一种在构建时完成大部分工作的机制，而不是在运行时完成所有工作。这几乎总是使用 a webpack plugin 来完成的。 (这一定是最流行但最不为人知的 npm 包之一)。它在 typescript 编译运行后运行，因此它看到的输入与运行时编译器基本相同。 AOT 编译器像运行时编译器一样构建您的应用程序，然后将其保存回 Javascript。

这样做的好处不仅是可以节省编译本身所需的 CPU 时间，还可以减少应用程序的大小。

具体答案

Angular CLI First calls angular built in compiler written in Typescript => then calls the Typescript Transpiler => then calls the Webpack to bundle and store in the dist/ directory.

不会。Angular CLI 调用 Webpack(Angular CLI 的真正服务是配置 webpack。当你运行 ng build 时，它只不过是启动 Webpack 的代理)。 Webpack 首先调用 Typescript 编译器，然后调用 angular 编译器(假设 AOT)，同时打包你的代码。

Although main.ts is used in Statement above for explaining bootstrap process, Isn't angular app is bootstrapped or started using Javascript .js files ?

我不完全确定你在这里问什么。 main.ts将被 tranpiled 成 Javascript。该 Javascript 将包含对 bootstrap 的调用这是 Angular 的入口点。当 bootstrap完成后，您将运行完整的 Angular 应用程序。

This post says Angular has two compilers:

View Compiler

Module Compiler

老实说，我只是要在这里声称无知。我认为在我们的水平上，我们可以将其全部视为一个大型编译器。

Does anyone know how all parts fit together in depth ?

我希望以上满足这一点。

不要@我:Angular 不仅仅是依赖注入(inject)

当然。它执行路由、查看构建、更改检测和各种其他事情。编译器确实会生成用于 View 构建和更改检测的 Javascript。当我说这只是依赖注入(inject)时，我撒了谎。然而，依赖注入(inject)是核心，足以驱动其余的答案。

我们应该称它为编译器吗？

它可能会进行大量解析和词法分析，并且因此肯定会生成大量代码，因此您可以将其称为编译器。

另一方面，它并没有真正将您的代码转换为一种不同的表示形式。相反，它需要一堆不同的代码片段并将它们编织成更大系统的可消耗片段。然后引导过程(在编译之后，如果需要)获取这些部分并将它们插入到 Angular 核心中。