Angular 5库构建：ng-packagr打包时无法导入JSON文件如何解决？

这个问题的核心原因是：本地开发时应用的TypeScript配置（或全局typings）能识别你的JSON模块声明，但ng-packagr构建类库时使用的是库专用的tsconfig.lib.json，默认没有启用JSON模块解析，也可能没有正确处理资产文件的路径映射。下面是几个可行的解决办法：

方案1：配置tsconfig.lib.json启用JSON模块解析 #

ng-packagr会优先使用库根目录下的tsconfig.lib.json进行编译，我们需要修改这个文件来让TypeScript支持JSON导入：

1. 打开tsconfig.lib.json，在compilerOptions中添加以下配置：

{
  "compilerOptions": {
    // 保留原有配置...
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.json", // 确保JSON文件被纳入编译范围
    "typings.d.ts"
  ]
}

2. 保存后重新执行构建命令ng build your-library-name。

这个配置让TypeScript原生支持JSON模块导入，甚至可以不用你之前在typings.d.ts中添加的声明（不过保留也没问题）。

方案2：将JSON文件标记为库资产 #

如果JSON文件是类库的静态资源（比如本地化配置），可以通过ng-package.json将其标记为资产，让ng-packagr在构建时自动复制到输出目录：

1. 打开库根目录下的ng-package.json，添加assets字段：

{
  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
  "dest": "./dist",
  "lib": {
    "entryFile": "src/public-api.ts"
  },
  "assets": [
    "./src/assets/locale-en.json" // 你的JSON文件路径
  ]
}

2. 调整导入路径：构建后JSON文件会出现在dist/assets目录下，所以导入时可以使用相对路径（比如import localeEn from '../assets/locale-en.json'），ng-packagr会自动处理路径映射。

方案3：将JSON内容转为TypeScript常量（最简单的替代方案） #

如果你的JSON内容不经常变动，可以直接把JSON内容转换成TypeScript常量文件，彻底避免模块导入问题：

1. 创建src/assets/locale-en.ts文件，内容如下：

export const localeEn = {
  // 把原JSON的内容直接粘贴到这里
  "key1": "value1",
  "key2": "value2"
};

2. 在需要使用的地方导入这个常量：

import { localeEn } from '../assets/locale-en';

这个方案不需要修改任何配置，对类库构建的兼容性最好，适合静态配置类的JSON文件。

内容的提问来源于stack exchange，提问作者K.Rice