Angular 18+ 高级教程 – Angular Compiler (AKA ngc) Quick View

前言

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

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

Run ngc manually

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

创建好项目后, 运行 command

npm run ngc -p tsconfig.json

or yarn run

yarn 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，把 "声明式代码" 变成 "执行代码"。

目录

上一篇 Angular 18+ 高级教程 – Getting Started

下一篇 Angular 18+ 高级教程 – Dependency Injection 依赖注入

想查看目录，请移步 Angular 18+ 高级教程 – 目录

喜欢请点推荐，若发现教程内容以新版脱节请评论通知我。happy coding