如何配置ng-packagr，使其在Angular项目中生成源映射文件？

我懂你现在的困扰——明明已经在tsconfig.json里开启了源映射配置，执行ng-packagr后dist目录里却还是看不到对应的.map文件。其实这是因为ng-packagr有自己独立的源映射控制开关，只靠根目录的tsconfig配置并不够，下面给你一步步解决：

1. 给ng-package.json添加源映射配置 #

ng-packagr的核心配置是ng-package.json，必须在这个文件里明确开启源映射选项，才能让构建过程生成对应的文件：

{
  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
  "dest": "./dist",
  "lib": {
    "entryFile": "src/public-api.ts",
    "sourceMap": true  // 新增这一行，强制开启源映射生成
  }
}

2. 确认tsconfig.json的配置无冲突 #

虽然你已经开了源映射，但可以再检查一下tsconfig.json里的相关字段，确保没有配置冲突：

{
  "compilerOptions": {
    "sourceMap": true,
    "inlineSources": true,  // 可选配置，会把源码嵌入到源映射文件中，更方便调试
    // 其他编译配置...
  }
}

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

有时候旧的构建缓存会导致新配置不生效，先清理再重新执行命令：

rm -rf dist node_modules/.cache
npm run packagr

为什么根目录的tsconfig不够用？ #

ng-packagr在构建类库时，会使用自己的编译上下文，默认不会完全继承根目录tsconfig.json的所有输出类配置，像源映射这种和构建产物直接相关的选项，必须在ng-package.json的lib字段里显式声明，才能确保构建流程正确生成对应的源映射文件。

按照上面的步骤操作后，你应该就能在dist目录里看到.js.map和.d.ts.map文件了。

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