Как прочитать файл Json и использовать везде как сервис?

Question

Мне нужно создать глобальный словарь с переводами на Angular, и я хочу использовать этот словарь в каждом компоненте. Я создал пользовательский сервис:

import { Injectable } from "@angular/core";
import _dictionary from "../assets/js/dictionary.json";

interface IWords {
  [key: string]: string;
}

@Injectable({
  providedIn: "root"
})
export class DictionaryService {
  private dictionary = new Map<string, IWords>();

  constructor() {
    console.log(_dictionary);
  }
}

Затем я добавил это к провайдерам: @NgModule({ providers: [ DictionaryService ]});

Как видите, сервис использует файл json с переводами.

Проблема в том, что конструктор сервиса не работает, поэтому я не вижу сообщения:

console.log(_dictionary);

Answer 1

Вы можете импортировать данные json следующим образом:

import * as _dictionary from "../assets/js/dictionary.json";

Однако вы не можете вставить их в свой конструктор. Вы можете включить его в свой сервис следующим образом:

export class DictionaryService {
  private dictionary = _dictionary;

  constructor() {}
}

Примечание: для переводов есть отличные инструменты, такие как ngx-translate и transloco , которые загружают jsonфайлы за кулисами, и делать это действительно хорошо. Я написал статью, объясняющую, как их использовать здесь .

Answer 2

Чтобы прочитать файл JSON, вы должны использовать http get и подписаться на него

import { HttpClient } from '@angular/common/http'; 
...
this.http.get("../assets/js/dictionary.json").subscribe(data => {
   console.log(data);
});

С уважением