如何调试Angular 17.3.x的AOT编译器（@angular/compiler）？

一、确保本地构建产物带调试信息 #

• 构建Angular仓库时，执行yarn build compiler --dev，强制生成带source map的调试版产物。
• 检查dist/packages/compiler目录下是否存在.js.map文件，这是关联源码调试的核心前提。

二、关联测试项目到本地编译期依赖 #

• 在测试项目的package.json中，把@angular/compiler指向本地构建产物：

  "@angular/compiler": "file:../angular/dist/packages/compiler",
  

• 执行yarn install完成依赖链接，确保编译时使用本地带调试信息的编译器版本。

三、VS Code调试会话配置（针对CLI触发的AOT编译） #

• 在测试项目的.vscode/launch.json中添加以下配置：

  {
    "version": "0.2.0",
    "configurations": [
      {
        "type": "node",
        "request": "launch",
        "name": "Debug AOT Compiler",
        "program": "${workspaceFolder}/node_modules/@angular/cli/bin/ng",
        "args": ["build", "--configuration=production"], // 强制启用AOT
        "skipFiles": ["<node_internals>/**"],
        "sourceMaps": true,
        "resolveSourceMapLocations": [
          "${workspaceFolder}/**",
          "../angular/dist/packages/**" // 关联本地Angular源码的source map
        ]
      }
    ]
  }
  

• 在Angular仓库的packages/compiler/src/template_parser/目录下的目标文件（如template_parser.ts）中设置断点。

四、启动调试并触发断点 #

• 启动上述调试会话，当CLI执行AOT编译时，会自动命中模板解析器中的断点。
• 若断点未触发，检查：
  • resolveSourceMapLocations路径是否正确指向本地Angular仓库的dist目录
  • 测试项目angular.json的build配置中aot字段是否设为true

五、直接调试编译器单元测试（快速验证逻辑） #

• 无需通过CLI项目，直接在Angular仓库中调试模板解析器的单元测试：
  1. 在Angular仓库的.vscode/launch.json添加配置：

     {
       "type": "node",
       "request": "launch",
       "name": "Debug Template Parser Tests",
       "program": "${workspaceFolder}/node_modules/jest/bin/jest.js",
       "args": ["packages/compiler/src/template_parser/template_parser.spec.ts", "--watch"],
       "sourceMaps": true
     }
     

  2. 在template_parser.ts中设断点，启动调试即可直接运行对应测试并触发断点。

内容的提问来源于stack exchange，提问作者Satabol