Angular如何构建和运行

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

以下是我迄今为止所了解的情况。我想知道我是否错过了什么

角度如何构建

在使用TypeScript编写Angular应用程序之后，我们使用Angular CLI命令来构建应用程序

ng build

命令将应用程序编译到输出目录中，生成工件将存储在

dist/

目录中

内部流程

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

2.反过来，Webpack调用TypeScript加载程序，该加载程序获取Angular项目中的所有

.ts

文件，然后将它们传输到JavaScript，即浏览器可以理解的

.js

文件

post说Angular有两个编译器：

• 视图编译器

• 模块编译器

关于构建的问题

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

Angular CLI首先调用用TypeScript=>编写的Angular内置编译器，然后调用TypeScript Transpiler=>然后调用要捆绑并存储在

dist/

目录中的网页包

角度如何运行

构建完成后，我们应用程序的所有组件、服务、模块等都会传输到

JavaScript.js

文件中，用于在浏览器中运行Angular应用程序

声明

使用

AppComponent

类（在main.ts中）引导时，Angular在

index.html

中查找

，找到它，实例化AppComponent的实例，并将其呈现在

标记中

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

跑步问题

虽然上面的语句中使用了

main.ts

来解释引导过程，但Angular应用程序不是使用JavaScript

.js

文件引导或启动的吗

不是所有上述语句都是在运行时使用JavaScript

.js

文件完成的吗

---

有人知道所有零件是如何在深度上结合在一起的吗？

角度是如何形成的？

Angular CLI

调用

Webpack

，当

Webpack

点击

.ts

文件时，它将其传递给

TypeScript

编译器，该编译器有一个输出转换器，用于编译

Angular

模板

所以构建顺序是：

Angular CLI

=>

Webpack

=>

TypeScript

Compiler=>

TypeScript

编译器在编译时调用

Angular

编译器

角度如何运行？

Angular

使用

Javascript

文件引导和运行

实际上，引导过程是运行时的，在打开浏览器之前发生。这就引出了我们的下一个问题

所以，如果引导过程发生在

Javascript

文件中，那么为什么

Angular

文档使用

main.ts

TypeScript文件来解释引导过程呢

Angular

文档只讨论

.ts

文件，因为这是源文件

这是一个简短的回答。如果有人能深入回答，我将不胜感激

感谢@在聊天中回答我的问题。

（当我说Angular时，我指的是Angular 2+，如果我提到Angular 1，我会明确地说Angular js）

序曲：令人困惑 Angular，可能更准确地说，Angular cli已经将构建过程中涉及的许多Javascript趋势分析工具合并在一起。这确实会引起一点混乱

为了进一步混淆，angular js中经常使用术语

compile

，指的是获取模板的伪html并将其转换为DOM元素的过程。这是编译器工作的一部分，只是其中一个较小的部分

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

角：它是做什么的？ 这一部分可能会引起争议，我们将拭目以待其核心是Angular提供的服务，它是一种依赖注入机制，可以跨Javascript、HTML和CSS工作。您单独编写所有的小片段，并在每个小片段中遵循Angular引用其他片段的规则。然后以某种方式将其编织起来

更具体地说：

• 模板允许将HTML连接到Javascript组件中。这允许用户对DOM本身的输入（例如单击按钮）输入到Javascript组件中，还允许Javascript组件中的变量控制DOM中的结构和值
• Javascript类（包括Javascript组件）需要能够访问它们所依赖的其他Javascript类的实例（例如，经典依赖项注入）。BookListComponent需要BookListService的实例，而BookListService可能需要BookListPolicy或类似的实例。这些类中的每个类都有不同的生存期（例如，服务通常是单例的，组件通常不是单例的），Angular必须管理所有这些生存期、组件的创建以及依赖项的连接
• CSS规则需要以这样的方式加载，即它们只应用于DOM的一个子集（组件的样式是该组件的本地样式）

需要注意的一点可能很重要，即Angular不负责Javascript文件如何引用其他Javascript文件（例如，

import

关键字）。这是由Webpack负责的

编译器做什么？ 现在你知道我们可以谈什么了

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); });

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

  }

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'
        })
    ]
}   

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

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

 devtool: 'source-map',

 loader: 'raw-loader'