javascript - kan inte hämta json-data från assets-mappen med Angular

vad jag vill : jag har en konfigurationsfil som innehåller några URL:er i en .json-fil som är lagrad i asset-mappen. Nu, istället för att ladda environments.prod eller .ts, vill jag ladda min json-filkonfiguration och baserat på det vill jag köra min applikation

vad jag gjorde

 below is my json file    which i placed  asset folder

{
    "baseUrl": "https://jsonplaceholder.typicode.com/",
    "baseUrl2": "https://reqres.in/api/users"
}

nu har jag skapat en ConfigServiceService.ts för att lagra konfigurationsfil

public _config: Object;

  constructor(public http:Http) { }

  getData(){
    debugger;
    return this.http.get("./assets/config.json").pipe(map(res =>  res.json()));
  }

efter detta skapar jag en ServiceProviderService.ts för att anropa servicefilen

configData:any;

  constructor(public http:Http,public config:ConfigServiceService) {

   }

  jsonData(){
    debugger;
    return this.configData;
  }

  ngOnInit(){
    debugger;
    this.config.getData().subscribe(res =>{
      console.log(res);
      this.configData = res;
    });


  }

nu ringer jag app.component.ts

 title = 'sample';
  constructor(public serv :ServiceProviderService){
    this.serv.jsonData();
  }

nu är mitt problem att jag inte kan få JSON-data och om jag lägger logiken som finns i ngoninit i ServiceProviderService.ts-filen i konstruktorn då får jag undefined

notera: här, om det finns mer än en URL, då distribueras varje URL till olika separata tjänstefiler. Anta base1-URL för en tjänstefil och base2-URL för en annan fil, hur kan jag uppnå det?

Svar #1

För att komma åt mapp med tillgångar. Se till att angular.json har en referens under

architect --> build --> alternativ till katalogen där filen är sparad:

 "assets": [
              "src/favicon.ico",
              "src/assets"
            ],

Svar #2

Försök att ge det en absolut URL så borde det fungera

Här, prova detta:

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

@Injectable()
export class ConfigService {

  constructor(private http: HttpClient) { }

  getData() {
    return this.http.get('/assets/config.json');
  }

}

Här är ett Fungerande Exempel StackBlitz för din referens.

Relaterade artiklar