The topic is widely covered on the Internet, on stackoverflow.com found more than 4 questions on this topic. But the solutions given there for some reason do not work. In this case, the data from the file is quite possible to pick up promise. The file address in the apiHost variable is correct. At the very least, promise takes the data from there normally.
friends.service.ts :
import { Injectable } from '@angular/core'; import { Friend } from './friend'; import { Http, Response } from '@angular/http'; import { Observable } from 'rxjs/Observable'; import { MessageService } from './message.service'; import 'rxjs/add/operator/catch'; import 'rxjs/add/operator/map'; @Injectable() export class FriendsService { public apiHost: string = './assets/generated.json'; constructor(private http: Http, private messageService: MessageService) { } getFriends():Observable<any> { return this.http.get(this.apiHost) .map((res:Response) => {res.json();}) .catch((error:any) => Observable.throw(error.json().error || 'Can\'t get generated.json')); } getFriend(id: string):Observable<any> { /* ... */ } } friends-list.component.ts :
import { Component, OnInit } from '@angular/core'; import { Friend } from '../friend'; import { FriendsService } from '../friends.service'; @Component({ selector: 'app-friends-list', templateUrl: './friends-list.component.html', styleUrls: ['./friends-list.component.css'] }) export class FriendsListComponent implements OnInit { public friends: Object; selectedFriend: Friend; onSelect(friend: Friend): void { this.selectedFriend = friend; } getFriends(): void { this.friendsService.getFriends().subscribe(result => this.friends = result); } constructor(private friendsService: FriendsService) { } ngOnInit() { this.getFriends(); } } There are no errors either in the console or in the browser. What's wrong? Why service does not return file data?
For example, working code with promis:
friends.service.ts :
import { Injectable } from '@angular/core'; import { Friend } from './friend'; import { Http, Response } from '@angular/http'; import 'rxjs/add/operator/toPromise'; // Чтобы забрать инфу промисом import { MessageService } from './message.service'; @Injectable() export class FriendsService { public apiHost: string = './assets/generated.json'; constructor(private http: Http, private messageService: MessageService) { } // Забираем json промисом public getFriends(): Promise<Object> { return this.http.get(this.apiHost) .toPromise() .then((response) => { this.messageService.add({message: 'Список друзей загружен.', type: 'success'}); return response.json(); }).catch((err) => { this.messageService.add({message: 'Не удалось загрузить список друзей.', type: 'error'}); console.log(err); }); } } friends-list.component.ts :
import { Component, OnInit } from '@angular/core'; import { Friend } from '../friend'; import { FriendsService } from '../friends.service'; @Component({ selector: 'app-friends-list', templateUrl: './friends-list.component.html', styleUrls: ['./friends-list.component.css'] }) export class FriendsListComponent implements OnInit { public friends: Object; selectedFriend: Friend; onSelect(friend: Friend): void { this.selectedFriend = friend; } getFriends(): void { this.friendsService.getFriends().then(result => this.friends = result); } constructor(private friendsService: FriendsService) { } ngOnInit() { this.getFriends(); } } 