Angular 5 [object Object] error with json - json

Question

I'm trying to load json data via httpclient using get in Angular 5. I'm using a service, interface, component and json file; I've followed a few tutorials already to try and get this to work as well as verified my json with jsonlint. From what I can see, everything should function, the json should be parsed and everything should be fine except I get 'error: [object Object]' in the console every time. I've tried various things to fix it, such as
data => this.jsonArticles = Object.values(data);
this.articles = data[0];
but I can't get my data into any other form.
article.service.ts
import { Injectable } from '#angular/core';
import { Article } from './article';
import { Observable } from 'rxjs/Observable';
import { HttpClient } from '#angular/common/http';
#Injectable()
export class ArticleService {
// Variables
private _jsonUrl: string = './assets/data.json';
// Constructors
constructor(private http: HttpClient) { }
// Methods
getArticles(): Observable<Article[]> {
return this.http.get<Article[]>(this._jsonUrl);
}
}
article.component.ts
import { Component, OnInit } from '#angular/core';
import { ArticleService } from '../article.service';
import { Article } from '../article';
#Component({
selector: 'app-article',
templateUrl: './article.component.html',
styleUrls: ['./article.component.scss']
})
export class ArticleComponent implements OnInit {
// Variables
public jsonArticles = [];
public errorMsg;
// Consturctors
constructor(private _articleService: ArticleService) { }
// Methods
ngOnInit(){
this._articleService.getArticles()
.subscribe(
data => this.jsonArticles = data,
error => this.errorMsg = error);
}
}
article.ts
export interface Article {
id: number;
author: string;
title: string;
content: string;
tags: string[];
categories: string[];
publishDate: string;
published: boolean;
}
data.json
[
{
"id": 3,
"author": "",
"title": "Fancy Meat",
"content": "Strip steak bresaola capicola tail cow chicken corned beef turkey.",
"tags": ["test", "lorum"],
"categories": ["blah"],
"publishDate": "2018-02-12T08:15:00.000-05:00",
"published": true
},
]
I truncated the json file for brevity, there are more entries in the file making my json object an array and there is no comma after the last entry in the json array.

Answer 1

I got this error because I forgot to import HttpClientModule into app.module.ts and declare it into imports
...
import { HttpClientModule } from '#angular/common/http';
#NgModule({
declarations: [
...
],
imports: [
BrowserModule,
FormsModule,
AppRouteModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }