Не удается импортировать локальный файл JSON в угловой 5

Question

Я пытаюсь импортировать локальный файл, чтобы использовать данные в нем. Я попробовал метод require и метод импорта. Ни то, ни другое не работает. Я использую 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

Вам необходимо прочитать содержимое файла json с помощью http. Сначала вам нужно создать службу для извлечения содержимого 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 2

Вы можете создать сервис для всех реализаций GET, POST, PUT & DELETE.Затем в вашем методе GET HttpClient, который импортирован из '@ angular / common / http', вызовите JSON со ссылкой на ваш локальный файл JSON.

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

Answer 3

Вы можете поместить свой файл в папку assets и получить его, используя HTTP GET из модуля HttpClient, при этом будет возвращен весь файл json, используйте путь к файлу в URL-адресе запроса GET;как то так:

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