Webpack打包Angular11 TypeScript项目生成JS source map而非TS源映射问题

问题根因 #

你配置的@ngtools/webpack没有透传TypeScript编译阶段的源映射到Webpack打包链路，导致Webpack只能拿到编译后的JS代码生成源映射，无法关联到原始TS源码。

修复步骤 #

1. 更新tsconfig.json配置
   确保TypeScript编译器开启源映射生成，在compilerOptions中添加以下配置：

{
  "compilerOptions": {
    "sourceMap": true,
    "inlineSources": true,
    "mapRoot": "./"
  }
}

2. 修改AngularCompilerPlugin配置
   在你现有的AngularCompilerPlugin初始化参数中显式开启源映射：

new AngularCompilerPlugin({
    skipCodeGeneration: false,
    typeChecking: true,
    tsConfigPath: path.resolve(srcDir, 'tsconfig.json'),
    compilerOptions: {
        entryModule: 'something.module#SomethingModule',
    },
    // 新增配置，开发环境开启源映射
    sourceMap: dev
}),

3. 调整TerserPlugin的源映射开关
   你当前配置TerserPlugin始终开启源映射，但生产环境你未配置devtool，建议修改为和环境匹配：

new TerserPlugin({
    sourceMap: dev, // 仅开发环境生成源映射
    parallel: true,
    // 其余原有配置保持不变
})

额外小提示：你的Webpack配置头部缺少path模块引入，运行时会报错，建议在最上方添加const path = require('path');。

验证方法 #

修改后启动带--watch的开发构建，打开浏览器调试工具的Sources面板，在webpack://目录下找到你的原始.ts源码文件，打断点即可确认映射是否生效。

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