Угловая AoT сборка импорта локального файла JSON

Question

В моем первом угловом приложении у меня есть служба, которая импортирует файл json для загрузки некоторых данных (мне нужно загрузить его синхронно, перед DOM).

В режиме разработки, когда я изменяю файл jsonКли перестроить приложение, и все работает как шарм. К несчастью, build -prod , изменяющий json в моем каталоге dist / assets, не обновляет приложение. Компилятор встраивает json в мой main-es2015.js и больше не ссылается на внешний файл.

works.service.ts :

import { Injectable } from '@angular/core';
import PICTURES  from '../../assets/pictures.json';

@Injectable({
  providedIn: 'root'
})
export class WorksService {
    pictures: any;

    constructor() {
      this.pictures = PICTURES
    }

    getWorks() { return this.pictures; }

    getSingleWork(id: string) { 

      return  this.pictures.find(i => i.id === id);}

    getPreviousWork(id: string) { 

      const index = this.pictures.findIndex(i => i.id === id) - 1;

      if (typeof this.pictures[index] === 'undefined') {
        // cycle to start
        return this.pictures[this.pictures.length-1]
      }
      else {
        return this.pictures[index]
      }
    }

    getNextWork(id: string) { 

      const index = this.pictures.findIndex(i => i.id === id) + 1;

      if (typeof this.pictures[index] === 'undefined') {
        // cycle to start
        return this.pictures[0]
      }
      else {
        return this.pictures[index]
      }
    }
}

Я пытался использовать httpClientили для динамической загрузки json:

this.pictures = import('../../assets/pictures.json')

, но страница загружается раньше файла, и я не могу понять, как загрузить его раньше.

Answer 1

Будет лучше создать новый pictures.ts файл и поместить его в этот файл, как ваш JSON как объект.

// pictures.ts
export const pictures: any = { "name":"John", "age":30, "car":null };

после этого импортируйте этот const и используйте его в своих компонентах.

// pictures.component.ts
import { pictures } from "./pictures";