在一个Angular (typescript)应用中，我需要在我的environment.ts中包含一个.json文件。要做到这一点，我必须在tsconfig中设置两个选项:

{
  "compilerOptions": {
    "moduleResolution": "node",
    "resolveJsonModule": true
  }
}

然后，我可以将我的json文件导入到environment.ts:

import { default as someObjectName } from "../some-json-file.json";

您可以导入JSON文件，而不需要显式地修改tsconfig，即您正在导入JSON

import mydata  from './mydataonfile.json' assert { type: "json" };

我知道这并不能完全回答问题，但是很多人来这里是想知道如何直接从文件加载JSON。

另一种方法

const data: {[key: string]: any} = require('./data.json');

你仍然可以定义json类型，不需要使用通配符。

例如，自定义类型json。

interface User {
  firstName: string;
  lastName: string;
  birthday: Date;
}
const user: User = require('./user.json');

使用TypeScript 2.9。+你可以简单地导入JSON文件，这样做有类型安全和智能感知的好处:

import colorsJson from '../colors.json'; // This import style requires "esModuleInterop", see "side notes"
console.log(colorsJson.primaryBright);

确保在tsconfig的compilerOptions部分添加这些设置。json(文档):

"resolveJsonModule": true,
"esModuleInterop": true,

边注:

Typescript 2.9.0在这个JSON特性上有一个bug，它在2.9.2被修复了 esModuleInterop只对colorsJson的默认导入是必需的。如果你将其设置为false，那么你必须使用import * as colorsJson从'../colors.json'导入它

在我的情况下，我必须改变:"include": ["src"]到"include":["。除了“resolveJsonModule”:true，因为我试图导入manifest。Json来自项目的根目录，而不是来自。/src

你应该加上

"resolveJsonModule": true

作为tsconfig.json的compilerOptions的一部分。