Question

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

以下是我迄今所理解的内容。想知道我是否错过了什么。

Angular的构建方式

使用TypeScript对角度应用进行编码后，我们使用Angular CLI命令构建应用。

ng build命令将应用程序编译到输出目录中，构建工件将存储在dist/目录中。

内部流程

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

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

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

查看编译器
模块编译器

有关构建的问题

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

Angular CLI First调用以Typescript =＆gt;编写的角度内置编译器然后调用Typescript Transpiler =＆gt;然后调用Webpack捆绑并存储在dist/目录中。

Angular如何运行

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

Angular Docs

中的陈述

使用AppComponent类（在main.ts中）引导时，Angular在<app-root>中查找index.html，找到它，实例化AppComponent的实例，并将其呈现在<app-root>标记内。
当用户在应用程序中移动时，Angular会创建，更新和销毁组件。

有关运行的问题

虽然上面的Statement中使用了main.ts来解释引导过程，但是isn＆＃t; t角应用是使用Javascript .js文件引导或启动的吗？

以上所有语句是否都是使用Javascript .js文件在运行时完成的？

有谁知道所有部分如何深入融合？

Answer 1

让我从头开始。

在我的应用程序中，我直接从Webpack运行应用程序。

要构建和运行应用程序，我们使用 webpack --progress 和 webpack-dev-server --inline 命令将package.json编写为以下

"scripts": {
    "serve": "webpack-dev-server --inline ",
    "build": "webpack --progress"

  }

当我们运行webpack --progress命令时，它会开始阅读webpack.config.js文件，在该文件中找到如下的入口点。

module.exports = {
    devtool: 'source-map',
    entry: './src/main.ts',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.ts$/,
                loaders: ['awesome-typescript-loader', 'angular2-template-loader'],
                exclude: [/\.(spec|e2e)\.ts$/]
            },
            /* Embed files. */
            {
                test: /\.(html|css)$/,
                loader: 'raw-loader',
                exclude: /\.async\.(html|css)$/
            },
            /* Async loading. */
            {
                test: /\.async\.(html|css)$/,
                loaders: ['file?name=[name].[hash].[ext]', 'extract']
            },
        ]
    },
    resolve: {
        extensions: ['.ts', '.js']
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ]
}

然后它读取所有Typescript文件并根据tsconfig.json文件中声明的规则进行编译，然后将其转换为相应的.js文件及其映射文件。

如果它在没有任何编译错误的情况下运行，它将创建bundle.js文件，其中包含我们在Webpack输出部分中声明的名称。

现在让我解释一下为什么我们使用加载器。

awesome-typescript-loader，angular2-template-loader 我们使用这些加载器编译Typescript文件和angular2-template中声明的基础上的tsconfig.json文件-loader在Angular 2 Component元数据中搜索templateUrl和styleUrls声明，并用相应的require语句替换路径。

resolve: {
        extensions: ['.ts', '.js']
    }

我们使用上述解决方案部分告诉Webpack将Typescript转换为JavaScript文件

plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ]

插件部分用于注入第三方框架或文件。在我的代码中，我使用它来注入目标文件夹的index.html。

 devtool: 'source-map',

以上行用于查看浏览器中的Typescript文件并调试它主要用于开发人员代码。

 loader: 'raw-loader'

以上raw-loader用于加载.html和.css文件，并将其与Typescript个文件捆绑在一起。

最后，当我们运行 webpack-dev-server --inline 时，它将创建自己的服务器并启动应用程序，作为我们提到目的地的web-pack.config.js文件中提到的路径文件夹和入口点。

在大多数应用程序的Angular 2入口点是main.ts我们提到了初始引导模块，例如（app.module）这个模块包含完整的应用程序信息，例如所有指令，服务，模块，整个应用程序的组件和路由实现。

注意：许多人怀疑为什么index.html只启动应用程序，即使他们没有提到任何地方。答案是当Webpack serve命令运行时，它创建自己的服务器，默认情况下，如果你没有提到任何默认页面，它会加载index.html。

我希望给定的信息可以帮助一些人。

Answer 2

因此，如果使用Javascript文件进行引导过程，那么为什么 Angular Docs使用main.ts TypeScript文件来解释引导过程？

这是由ng build发出的main.ts转换后的.js版本的一部分，该版本尚未被修改和缩小，您如何期望初学者理解这段代码？它看起来不是很复杂吗？

Object(__WEBPACK_IMPORTED_MODULE_1__angular_platform_browser_dynamic__["a" /* platformBrowserDynamic */])().bootstrapModule(__WEBPACK_IMPORTED_MODULE_2__app_app_module__["a" /* AppModule */])
    .catch(function (err) { return console.log(err); });

并且使用ng build --prod --build-optimizer来优化和缩小您的代码以便对其进行优化，生成的包很紧凑并且格式不可读。

webpackJsonp([1],{0:function(t,e,n){t.exports=n("cDNt")},"1j/l":function(t,e,n){"use strict";n.d(e,"a",function(){return r});var r=Array.isArray||function(t){return t&&"number"==typeof t.length}},"2kLc

而main.ts文件是人类可读和清晰的，这就是为什么angular.io使用main.ts来解释角度应用的引导过程。Angular: Why TypeScript?除此之外如果你是一个这样一个伟大的框架的作者你会用什么方法来使你的框架流行和用户友好？你不会去寻求清晰简洁的解释而不是复杂的解释吗？我同意angular.io文档缺乏深入的解释并且它不是很好但是到目前为止我已经看到他们正在努力使它变得更好。

Answer 3

这个答案可能迟到了，但是最近有一个关于这个主题的很好的演讲，它从初学者的角度开始，并且深入。我不会尝试用我的文字来总结或指出该线程中的错误信息，而只是通过Kara Erickson: How Angular works链接视频。

她是Angular框架的技术负责人，并且在以下方面做得非常不错：

什么是Angular框架的主要部分
编译器如何工作，产生什么
什么是“组件定义”
什么是应用程序引导程序，它如何工作

Answer 4

Angular 9+使用AOT（提前编译），这意味着它将散布在各个文件中的所有位，即组件（.ts + .html + .css），模块（.ts）并构造浏览器可理解的JavaScript，运行时由浏览器下载并执行。

在Angular 9之前，是JIT（及时编译），在此期间，根据浏览器的要求对代码进行了编译。

有关详细信息，请参见：Angular AOT Documentaiton

Angular如何构建和运行

4 个答案: