Angular 15如何从NPM包中导入JSON文件？

1. 启用TypeScript的JSON模块解析支持 #

Angular 15配套的TypeScript版本对模块解析规则更严格，默认可能未启用JSON文件的导入支持。修改项目根目录的tsconfig.json，在compilerOptions中添加或调整以下配置：

{
  "compilerOptions": {
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true,
    // 保留其他原有配置
  }
}

开启这两个选项后，TypeScript才能正确识别JSON格式的模块导入。

2. 直接导入JSON文件路径 #

绕过包入口配置的问题，直接指定包内JSON文件的路径导入：

import content from '@fireflysemantics/fs-a-md/target/content.json';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  content = content;
}

这种方式无需依赖包的main字段配置，直接明确指向目标文件，兼容性更强。

3. 添加自定义类型声明文件 #

如果需要保留通过包名导入的方式，可以在项目中为该包手动添加类型声明：

1. 在项目src目录下创建路径typings/@fireflysemantics/fs-a-md/，并新建index.d.ts文件
2. 在文件中写入以下声明代码：

declare module '@fireflysemantics/fs-a-md' {
  // 可根据content.json的实际结构定义更具体的类型，此处用any做示例
  const defaultExport: any;
  export default defaultExport;
}

3. 修改tsconfig.json的include字段，确保TypeScript能识别这个声明文件：

{
  "include": [
    "src/**/*",
    "src/typings/**/*"
  ]
}

4. 检查包的入口配置 #

确认包的package.json中除了main字段，是否存在types字段指向对应的类型声明文件。如果包本身没有提供类型声明，TypeScript会无法识别该模块，这也是触发错误的常见原因。若有权限修改包的配置，可以添加types字段指向自定义的类型文件。

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