Динамически загружать json в Angular 8

Question

Итак, мне нужно загрузить значение из файла конфигурации json в мое приложение Angular 8.

Вначале я загружал его статически, и поэтому, когда js был минимизирован - неустановленное значение из json читалось один раз и никогда больше.

Затем я попытался загрузить его динамически, вот так:

app.component.ts:

ngOnInit(): void {
    let appInfo = "";
    import("../assets/config/config.json").then(config => {
       appInfo = config.appInfo;
    });
    //using appInfo here - empty string.
}

Ну, это тоже не сработало. Снова это было неустановлено. Но на самом деле он присутствует в моей конфигурации. json ..

У кого-нибудь есть идеи по поводу другого подхода, который я могу попробовать?

Редактировать: я хочу получить доступ к этому в ngOnInit моего приложения. component.ts. В моем случае перед запуском приложения кто-то обновит значение appInfo в конфигурации. json. Я хочу получить доступ к нему при запуске. Также спасибо всем за предложения, я опробую их и обновлю, какие из них работают.

**** РЕДАКТИРОВАТЬ: Ни один из методов загрузки динамического c не работал для меня. Я закончил тем, что сделал это с помощью http-вызова, хотя я старался изо всех сил, чтобы избежать этого.

Answer 1

 ngOnInit(): void {
    let appInfo = "";
    this.getDataHttp('../assets/config/config.json').subscribe(
      data => {
        var testResponse = data;
        console.log("I CANT SEE DATA HERE: ", testResponse);
      }
  )
}

получить вызов для файла, файл может быть любым продуктом на другом сервере или локальной

getDataHttp(url:string) {

    return this.http.get(url);
}

подписка на этот вызов

ИЛИ

вы также можете применить динамический es 2020 c собственный импорт

var  moduleSpecifier = '../assets/config/config.json'
  import(moduleSpecifier).then((data) => {       
     let temp=data
    }).catch(error =>{debugger;alert(error.message)});

Answer 2

Я только что попробовал нужное решение, установив @ types / node с командой npm i --save-dev @types/node

, затем добавил это в tsconfig.app. json

"compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": ["googlemaps", "node"]
  }

, затем получил console.log(require("../assets/config/config.json")); где-то, где он будет назван

, затем перезапущен с ng serve, и это сработало ...

Answer 3

Рабочая демонстрация в этом StackBlitz Link

• Вы можете использовать rxjs в angular. Здесь, во-первых, мы можем получить ссылку на файл json в папке assets, используя оператор rx js of(). Оператор
• of() преобразует наш файл json в наблюдаемое. так что в будущем, если что-либо будет изменено из файла json, мы сможем получить измененное значение одновременно [Live Update To Template HTML file].
• Мы используем async pipe для подписки наблюдаемых и недопустимых подписка, наблюдаемая автоматически: angular.

app.component.ts is

import {of} from 'rxjs';
import * as data from '../assets/data';

export class AppComponent  {
   dataJson = of(data);
} 

app.component. html is

<ng-container *ngIf="dataJson | async as data">
    <table class="table table-striped table-dark">
       <thead>
           <tr>
               <th scope="col">Id</th>
               <th scope="col">Name</th>
           </tr>
       </thead>
       <tbody>
           <tr *ngFor="let row of data['default'] ; let i=index">
               <td> {{row.id }} </td>
               <td> {{row.CarName}}</td>
           </tr>
       </tbody>
    </table>
</ng-container>

Теперь, после обновления значения в вашей папке ресурсов json формы файла все изменения автоматически отражаются в файле шаблона без необходимости перезаписывать его снова.

Answer 4

в вашем компоненте импортируйте его следующим образом.

import * as jsonData from '../assets/test.json';

затем

ngOnInit() {
  console.log(jsonData)
}

Я могу получить такие данные.

Обновлено

Dynami c Загрузка

  private jsonData;

  async ngOnInit() {
    await import("../assets/test.json").then(data => {
      this.jsonData = data;
    });

    console.log(this.jsonData);
  }

Рабочая демоверсия