Angular项目构建时无法生成内联Source Maps的问题咨询

1. 修正project.json中的构建配置 #

你之前仅设置sourceMaps: true只会生成分离的source map文件，要开启内联，需要将sourceMaps替换为对象形式，明确指定inline: true：

{
  "targets": {
    "build": {
      "options": {
        // 其他构建配置...
        "sourceMap": {
          "scripts": true,
          "styles": true,
          "vendor": true,
          "inline": true
        }
      }
    }
  }
}

• scripts: 为JS业务代码生成source map
• styles: 为CSS样式文件生成source map
• vendor: 为第三方依赖代码生成source map
• inline: 将source map内容直接嵌入到输出的JS/CSS文件中，而非生成单独的.map文件

2. 保留tsconfig.json的配套配置 #

继续保留你之前添加的两项配置，让TypeScript编译阶段生成内联基础source map，再由Angular构建工具整合到最终打包产物中：

{
  "compilerOptions": {
    // 其他编译配置...
    "inlineSourceMap": true,
    "inlineSources": true
  }
}

3. 适配构建器类型 #

• 如果项目使用Esbuild（Angular 16+、Nx默认构建器），上述配置直接生效；
• 如果是旧版Webpack构建器，无需手动修改Webpack配置，Angular的project.json配置会自动覆盖Webpack的devtool参数。

4. 清理缓存后重新构建 #

缓存可能导致配置不生效，执行以下命令清理后再构建：

# Nx项目
nx reset
nx build your-app-name

# Angular CLI项目（若用angular.json）
ng cache clean
ng build

验证结果 #

构建完成后，打开dist/目录下的JS/CSS文件，查看文件末尾是否存在//# sourceMappingURL=data:application/json;base64,...格式的内容——若存在，说明内联source map已成功生成。

内容的提问来源于stack exchange，提问作者J.Down