json - 使用本地 JSON 文件导入时找不到模块

Question

我有这个简单的 Angular 项目，但无法导入我创建的本地 json 文件。这是 JSON 文件:

{
    "id": 1,
    "firstName": "Uziel",
    "lastName": "Cabanban",
    "car" : {
        "brand": "Toyota",
        "model": "Vios",
        "year": 2017
    }
}

JSON 文件存储在此目录中:src/assets/sampleJson.json .

这是我尝试导入所述 json 文件的组件:

import { Component, OnInit } from '@angular/core';
import SampleJson from '../assets/sampleJson.json';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {

}

我还没有写任何东西，因为我在 import SampleJson from '../assets/sampleJson.json 中有一条红线

任何建议将不胜感激

Answer 1

.json文件不是 TypeScript 模块。既然你要本地 文件(假设它是硬编码的)，您可以通过创建 .ts文件和 export一个常量/变量，如下所示:

sampleJson.ts

export const SampleJson = {
    "id": 1,
    "firstName": "Uziel",
    "lastName": "Cabanban",
    "car" : {
        "brand": "Toyota",
        "model": "Vios",
        "year": 2017
    }
}

然后在组件中:

import SampleJson from '../assets/sampleJson';  // path can change

希望这可以帮助

有关 TypeScript 模块的更多信息:https://www.typescriptlang.org/docs/handbook/modules.html

更新

或者您可以使用导入 JSON 文件
import * as SampleJSON from 'path/to/json/sampleJson.json
根据这个答案，使用 TypeScript v2.9.+:

https://stackoverflow.com/a/50674344/1331040