Angular CLI项目用ng-packagr编译JSON导入报错求助

我之前也碰到过一模一样的问题！ng-packagr处理静态资源的逻辑和Angular CLI默认行为有差异，导致本地开发正常但打包时找不到JSON文件，下面是几个亲测有效的解决办法：

方法1：在ng-package.json中明确配置静态资源 #

ng-packagr不会自动打包assets目录下的文件，需要你在配置文件里指定要包含的静态资源：

1. 打开项目根目录的ng-package.json（如果没有就新建一个）
2. 在lib字段下添加assets数组，指定你的JSON文件路径：

{
  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
  "dest": "./dist",
  "lib": {
    "entryFile": "src/public_api.ts",
    "assets": ["./src/assets/data.json"]
  }
}

注意：路径要相对于你的库的源码根目录，比如你的JSON在src/assets/下就这么写。打包后这个文件会被复制到dist/assets/目录，和你本地的导入路径保持一致。

方法2：启用TypeScript的resolveJsonModule配置 #

Angular 5对应的TypeScript版本已经支持直接导入JSON文件，不需要额外的typings.d.ts声明，反而自定义声明可能在打包时被忽略：

1. 打开库的tsconfig.lib.json文件
2. 在compilerOptions里添加以下配置：

"compilerOptions": {
  // 其他已有配置...
  "resolveJsonModule": true,
  "esModuleInterop": true
}

3. 修改你的导入语句为默认导出：

import data from '../assets/data.json';

这样TypeScript会自动识别JSON模块，ng-packagr编译时也能正确解析路径。

方法3：将JSON转为TypeScript常量文件（适合小型JSON） #

如果上面两种方法都不生效，可以直接把JSON内容转成TS常量，彻底绕开静态资源打包问题：

1. 新建src/assets/data.ts文件，把JSON内容复制进去并转为常量：

export const data = {
  // 原JSON的所有内容
};

2. 修改导入语句为：

import { data } from '../assets/data';

这种方法完全不需要处理静态资源，兼容性最好，适合JSON内容不经常变动的场景。

额外注意事项 #

• 确认你的ng-packagr版本和Angular 5兼容：Angular 5对应ng-packagr的v2.x版本，不要安装过高版本（比如v3+对应Angular 6+）
• 打包后检查dist目录，确认JSON文件（或TS文件）是否被正确复制到对应路径

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