W app.module.ts zaimportuj moduł http:

import { HttpClientModule } from '@angular/common/http';

@NgModule({
 declarations: [
AppComponent,
routingComponents
 ],
 imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule
 ],
 providers: [PageService],
 bootstrap: [AppComponent]
})

następnie w serwisie wstrzyknij zależność i zaimportuj HttpClient oraz utwórz plik .json z danymi i podepnij ten plik do metody http.get()

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

uwaga: domyślnie pobiera HttpClient z innej lokalizacji. Ścieżka musi być właśnie taka, jak powyżej

export class PageService {

    private _url = '/assets/data/pages.json';

    constructor(private http: HttpClient) { }   

    getContent() {
        return this.http.get(this._url);
    }

}

Następnie tworzymy interface, żeby być pewnym, że przyjmujemy właściwe dane. Np w nowym katalogu tworzymy plik nazwaInterface.ts a w nim:

export interface IPage {
    id: number;
    title: string;
    content: string;
}

zatem w serwisie metoda do pobrania zawartości musi się nieco zmienić:

getContent(): Observable<IPage[]> {
    return this.http.get<IPage[]>(this._url);
}

Następnie w componencie, w którym chcemy pobierać dane z observera musimy dodać opcję subscribe do metody z serwisu, która zwraca obiekt typu observer

export class PagesListComponent implements OnInit {

    public pages;
    constructor(private _pageList: PageService) { }

    ngOnInit() {
        this._pageList.getContent()
            .subscribe(data => this.pages = data);
    }

}