Angular 5组件包开发问题：如何导出资源文件夹中的JSON文件

我之前用ng-packagr打包Angular组件包时也碰到过一模一样的问题——默认配置下它只会处理组件相关的代码文件，像JSON这类静态资源根本不会被自动包含到最终的包里面。结合你用的ng-packagr 2.0.0版本，给你几个具体的解决步骤：

1. 配置ng-packagr的资源打包规则 #

首先在项目根目录创建（或修改）ng-package.json文件，通过assets字段指定要打包的资源路径，这个配置会告诉ng-packagr把指定的资源文件复制到最终的dist包目录中：

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

这里的./resources/**/*.json会匹配resources文件夹下所有层级的JSON文件，你可以根据实际路径调整匹配规则。

2. 让TypeScript正确识别JSON导入 #

Angular 5对应的TypeScript版本比较早（大概2.4.x），还不支持resolveJsonModule特性，所以需要手动声明JSON模块：
在项目根目录创建typings.d.ts文件，添加以下内容：

declare module "*.json" {
  const value: any;
  export default value;
}

这样你在组件里就能正常导入JSON文件了，比如：

import myData from '../resources/my-data.json';

3. 修正package.json的拼写错误（重要！） #

我注意到你的package.json里写了"perDependencies"，这应该是"peerDependencies"的拼写错误——这个字段用来声明组件包依赖的Angular核心版本，拼写错误会导致依赖解析出问题，记得修正它。

4. 确保资源被包含在发布包中 #

最后检查你的package.json的files字段，确保打包后的资源文件会被包含进去。如果你的发布目录是dist，那只要包含dist即可（因为ng-packagr已经把资源复制到dist里了）：

"files": [
  "dist"
]

如果需要直接包含resources目录，也可以加上：

"files": [
  "dist",
  "resources/**/*.json"
]

完成这些配置后，运行ng-packagr -p ng-package.json重新打包，你会发现dist目录里已经包含了resources文件夹和对应的JSON文件。在其他项目中安装这个包后，就能正常访问这些资源了。

内容的提问来源于stack exchange，提问作者Bráulio Figueiredo