Angular 20+ 高阶教程 – Angular Compiler (AKA ngc) Quick View

前言

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

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

 

Run ngc manually

ng new test --style=scss --skip-tests --routing=false --ssr=false --zoneless -s -t

创建好项目后，微调整 app.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: '<h1>Hello World</h1>',
  styles: `
    h1 {
      color: red;
    }
  `,
})
export class App {
  constructor() {
    console.log('do something');
  }
}

然后运行 command

yarn run ngc -p tsconfig.app.json

 

Folder & File

这时 Angular 会创建出 out-tsc folder

里面就是 compile 好了的 .js file。

Angular 会把 .ts、.html、.scss compile 成 .js。

打开 app.js 长这样

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

CSS 也变成了单纯的 string。

 

总结

Angular Compiler 的主要作用是提升 DX (Developer Experience)，类似 Scss 和 TS。

它会把 Decorator (e.g. @Component)、Scss、TS、HTML 通通变成 JS，把 "声明式代码" 变成 "执行代码"。

 

 

目录

上一篇 Angular 20+ 高阶教程 – Getting Started

下一篇 Angular 20+ 高阶教程 – Dependency Injection 依赖注入

想查看目录，请移步 Angular 20+ 高阶教程 – 目录

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