Question

我正在尝试导入本地文件以使用其中的数据。我已经尝试了require方法和import方法。似乎都不起作用。我正在使用Angular 5和Typescript 2.9.2。我被锁定在角度5。我正在为aot进行构建，当我查看导出的fesm5文件时，json文件似乎无法解决。（我不想使用HTTP ...）

import * as data from '../../assets/file.json';

当我尝试将tsconfig值设置为：

 "resolveJsonModule": true,

我在构建时遇到错误：

 Cannot read property 'slice' of undefined
 TypeError: Cannot read property 'slice' of undefined
at addReferencesToSourceFile (/Users/ME/Projects/PROJECT/node_modules/@angular/compiler-cli/src/transformers/compiler_host.js:520:54)
at TsCompilerAotCompilerTypeCheckHostAdapter.getSourceFile (/Users/ME/Projects/PROJECT/node_modules/@angular/compiler-cli/src/transformers/compiler_host.js:348:13)

我也尝试过：

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

这似乎根本没有帮助。

也尝试过：

declare function require(url: string);

var data = require('../../assets/file.json');

这似乎也无法解析最终文件中的json。

Answer 1

您可以将文件放在 assets 文件夹下，并使用HttpClient模块中的HTTP GET获取它，它将返回整个json文件，并使用您的GET请求URL中的文件路径；像这样的东西：

this.http.get('../assets/file.json')
    .subscribe(jsonFormat => { 
      //Your code 
});

Answer 2

您需要使用http读取json文件内容所以首先您需要创建一个服务来获取json内容

    import { HttpClient } from '@angular/common/http'; 
    import { Observable } from 'rxjs/Observable';
    import { Injectable } from "@angular/core";

    @Injectable()
    export class JsonSettingService {
      constructor(private http: HttpClient) {
      }

       public getJsonData(): Observable<any> {
        return this.http.get("./assets/jsonFile.json");
      }
    }

然后将服务注入组件

    export class MyComponent implements OnInit {
        constructor(
            private jsonSettingService : JsonSettingService  
        ) { }

       ngOnInit(){
           this.jsonSettingService.getJsonData().subscribe(data => {
                console.log(data);
            });
       }
    }

如果您需要任何帮助，请告诉我。

Answer 3

您可以为所有GET，POST，PUT＆DELETE实现创建服务。然后，在从“ @ angular / common / http”导入的HttpClient的GET方法中，调用带有本地JSON文件链接的JSON。

    public getAbout(): Observable<any> {
        return this.http.get("./assets/json/about.json");
    }

无法以角度5

3 个答案: