angular-how-to-read-angular-source-code

下载源码

Angular的源码托管在GitHub上，通过git clone命令下载源码。

1	git clone https://github.com/angular/angular.git

创建Angular项目

参考这里创建Angular项目

用VSCode或者WebStorm打开项目，找到src/main.ts文件，这是Angular应用的入口文件。可以看到如下代码：

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

此处通过调用platformBrowserDynamic().bootstrapModule(AppModule)来启动应用。那么bootstrapModule是什么呢？通过在Angular源码中搜索bootstrapModule，可以找到如下代码：

bootstrapModule<M>(
    moduleType: Type<M>,
    compilerOptions:
      | (CompilerOptions & BootstrapOptions)
      | Array<CompilerOptions & BootstrapOptions> = [],
  ): Promise<NgModuleRef<M>> {
    const options = optionsReducer({}, compilerOptions);
    return compileNgModuleFactory(this.injector, options, moduleType).then((moduleFactory) =>
      this.bootstrapModuleFactory(moduleFactory, options),
    );
  }

快速定位源码的位置

我的习惯是，同时打开两个IDE，一个用来查看应用代码，一个用来查看Angular源码。这样可以快速定位源码的位置。
比如对于上面的bootstrapModule, 则可以复制一份，到Angular源码所在的IDE中（WebStorm), 连按两下Shift键，然后粘贴bootstrapModule，就可以找到源码。

IDE本身提供的Go to Definition/implementation（或者按住Ctrl点击方法名）功能对于源码来说并不好用，只能定位到*.d.ts类型文件，而不能定位到源码文件。

如何调试源码

阅读源码的最好方式就是单步调试，一步一步观察程序是如何运行的。

浏览器调试

Webpack

Angular App默认使用Webpack打包，Webpack打包后的代码是经过压缩和混淆的，不利于调试。但是Webpack提供了SourceMap功能，可以将打包后的代码映射到源码，方便调试。

运行Angular程序后，在浏览器地址栏输入localhost:4200，按键盘上的F12键打开开发者工具，切换到Source选项卡，可以看到项目的源码。在Webpack结点下找到src/main.ts文件，点击行号，可以在代码中打断点。然后按F5刷新页面，就可以看到断点被触发了。

但是当你step into源码时，会发现并没有进入到bootstrapModule方法中，而是停在了core.mjs文件的末尾，这时我们需要在core.mjs文件中找到bootstrapModule方法，然后在方法体内打断点。注意bootstrapModule会在core.mjs文件中出现多次，有些甚至是注释，可以搜索bootstrapModule(来定位。

ESBuild

Angular 17以后也支持esbuild打包，而且打包后的代码调试更方便，如下图。

WebStorm调试

WebStorm调试十分简单，现在代码中打上断点，然后在Run Configuration列表中选择Angular Application，点击绿色的Debug按钮，就可以开始调试了。

VSCode调试

待补充