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

Posted 2023-03-13

【中文标题】使用本地 JSON 文件导入时找不到模块

【英文标题】：Cannot find module on import with local JSON file

【发布时间】：2019-11-30 04:35:21

【问题描述】：

我有这个简单的 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 中得到了一条红线

任何建议将不胜感激

【问题讨论】：

你会写出你的app.component.ts文件的路径吗？也许相对路径“../assets/”不是合法的相对路径。

app.component.ts 位于 /src/app/app.component.ts 中，而 json 文件位于 /src/assests/sampleJson.json 中。 assets 文件夹是在我生成 Angular 项目时自动生成的。我没有手动创建它。

【参考方案1】：

.json 文件不是 TypeScript 模块。由于您想要 local 文件（假设它是硬编码的），您可以通过创建一个 .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://***.com/a/50674344/1331040

【参考方案2】：

感谢所有建议，但我换了一个方向，不再使用import。相反，我使用了require，并像这样使用它：

import  Component  from '@angular/core';
import  user  from './user.model';

declare var require: any;

var myUser: user = require('../assests/sampleJson.json');

@Component(
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
)
export class AppComponent 
  constructor () 
    console.log(myUser);
  

到目前为止，它打印了我的 json 文件的内容