So rufen Sie die JSON-Datei in Angular 2 ab

Behalten Sie die json-Datei im Verzeichnis Assets (parallel zum Anwendungsverzeichnis)

Wenn Sie mit ng new YourAppname generiert hätten, besteht dieses Asset-Verzeichnis in derselben Zeile wie das 'app'-Verzeichnis, und Services sollten das untergeordnete Verzeichnis des app-Verzeichnisses sein. Kann wie folgt aussehen:

:: app/services/myservice.ts

getOrderSummary(): Observable {
    // get users from api
    return this.http.get('assets/ordersummary.json')//, options)
        .map((response: Response) => {
            console.log("mock data" + response.json());
            return response.json();
        }
    )
    .catch(this.handleError);
} 

Bei Verwendung von angle-cli Bewahren Sie die json-Datei im Verzeichnis Assets (parallel zum Anwendungsverzeichnis) auf

return this.http.get('<json file path inside assets folder>.json'))
    .map((response: Response) => {
        console.log("mock data" + response.json());
        return response.json();
    }
    )
    .catch(this.handleError);
}

Hinweis: Hier müssen Sie nur den Pfad innerhalb des Assets-Ordners wie assets/json/oldjson.json angeben. Dann müssen Sie Pfad wie /json/oldjson.json schreiben 

Wenn Sie Webpack verwenden, müssen Sie über der gleichen Struktur im Öffentlichen Ordner wie in dem Assets-Ordner arbeiten.

In Winkel 5

du kannst es einfach sagen 

this.http.get<Example>('assets/example.json')

Dadurch erhalten Sie Observable<Example>

Sie müssen einenHTTP- Aufruf an Ihren games.json ausführen, um ihn abzurufen . So etwas wie:

this.http.get(./app/resources/games.json).map

Sie brauchen nicht HttpClient , Sie brauchen nicht einmal Angular. Sie benötigen lediglich WebPack und JSON-Loader, beide sind bereits Bestandteil von Angular-CLI. 

Alles, was Sie brauchen, ist diese Zeile:

import * as someName from './somePath/someFile.json;

Und Ihre Json-Daten finden Sie unter someName.default. Dieser Code wird jedoch einen Typfehler vom TypeScript-Compiler auslösen. Dies ist kein echter Fehler, sondern nur ein Typfehler.

Um es zu lösen, fügen Sie diesen Code in Ihre src/typings.d.ts-Datei ein (falls nicht vorhanden, erstellen Sie ihn):

declare module "*.json"
{
  const value: any;
  export default value;
}

Bitte beachten Sie : Wenn Sie mit dieser Methode arbeiten, wird Ihr json (minify/uglify) zur Buildzeit in das App-Paket kompiliert. Dies bedeutet, dass Sie nicht warten müssen, bis diese Datei geladen wird. Dies ist auch der Fall, wenn Sie sich für httpClient.get(...) entscheiden. Dies bedeutet eine schnellere Anwendung!

ich denke, der Ordner für Assets ist öffentlich. Sie können direkt über den Browser darauf zugreifen

http: // localhost: 4020/assets/

im Gegensatz zu anderen Privatenordnern legen Sie Ihre Json-Datei im Assets-Ordner ab

service.service.ts
--------------------------------------------------------------

import { Injectable } from '@angular/core';
import { Http,Response} from '@angular/http';
import { Observable } from 'rxjs';
import 'rxjs/add/operator/map';

@Injectable({
  providedIn: 'root'
})
export class ServiceService {
 private url="some URL";

constructor(private http:Http) { }     

//getData() is a method to fetch the data from web api or json file

getData(){
           getData(){
          return this.http.get(this.url)
            .map((response:Response)=>response.json())
        }
          }
}






display.component.ts
--------------------------------------------

// In dieser Komponente erhält man die Daten mit suscribe () und speichert sie in local object als dataObject und zeigt sie in display.component.html wie {{dataObject .propertyName}} an. 

import { Component, OnInit } from '@angular/core';
import { ServiceService } from 'src/app/service.service';

@Component({
  selector: 'app-display',
  templateUrl: './display.component.html',
  styleUrls: ['./display.component.css']
})
export class DisplayComponent implements OnInit {
      dataObject :any={};
constructor(private service:ServiceService) { }

  ngOnInit() {
    this.service.getData()
      .subscribe(resData=>this.dataObject =resData)
}
}

Ich musste die Einstellungsdatei synchron laden, und dies war meine Lösung:

export function InitConfig(config: AppConfig) { return () => config.load(); }

import { Injectable } from '@angular/core';

@Injectable()
export class AppConfig {
    Settings: ISettings;

    constructor() { }

    load() {
        return new Promise((resolve) => {
            this.Settings = this.httpGet('assets/clientsettings.json');
            resolve(true);
        });
    }

    httpGet(theUrl): ISettings {
        const xmlHttp = new XMLHttpRequest();
        xmlHttp.open( 'GET', theUrl, false ); // false for synchronous request
        xmlHttp.send( null );
        return JSON.parse(xmlHttp.responseText);
    }
}

Dieser wird dann als app_initializer bereitgestellt, der vor dem Rest der Anwendung geladen wird. 

app.module.ts

{
      provide: APP_INITIALIZER,
      useFactory: InitConfig,
      deps: [AppConfig],
      multi: true
    },