Angular 复习与进阶系列 – Angular Compiler (AKA ngc) Quick View

前言

在 Get Started 那一篇, 我们提到过 Angular Compilation. 这篇稍微给点具体画面, 让大家感受一下.

但不会讲细节, 对细节感兴趣的可以看这篇 Medium – How the Angular Compiler Works.

Run ngc manually

ng new test --standalone --skip-tests -s -t
yarn install

创建好项目后, 运行 command

npm run ngc -p tsconfig.json

Folder & File

这时 Angular 会创建出 dist folder

里面就是 compile 好了的 .js file. Angular 会把 .ts, .html, .scss compile 成 .js

打开 app.component.js 长这样

HTML 变成了一堆 JS 函数, 从名字可以看出它们类似 document.createElement

CSS 也变成了单纯的 string.

总结

Angular Compile 的主要作用是提升 DX (Developer Experience), 类似 Scss 和 TS.

它会把 Decorator, Scss, TS, HTML 变成 JS, 把 "声明" 变成 "执行"。

还会替我们检查 HTML 中 TS 的语法类型.