I'm running Angular2 v4.4.0beta. I'm trying to return an object and it's children from my api. The endpoint is called and here is the json:
{
"companyId":3,
"name":"Third",
"description":null,
"characters":[{
"characterId":3,
"name":"Third",
"description":null,
"status":null,
"companyId":3,
"userId":null
}]
}
Here is Company.ts
import { Component } from '@angular/core';
import { Character } from './Character';
export class Company {
companyId: number;
name: string;
description: number;
characters: Character[];
}
And Character.ts
import { Component } from '@angular/core';
export class Character {
characterId: number;
name: string;
description: string;
status: number;
userId: string;
companyId: number;
}
This is my Get function in the component
getCompany(id: number) {
this.companyService.getCompany(id)
.subscribe(
(data: Company) => this.company = data,
error => this.errorMessage = <any>error);
}
And finally this is the service function
getCompany(id: number): Observable<Company> {
return this.http.get(this.url + "/Get/" + id,
{ headers: this.authService.authJsonHeaders() })
.map((resp: Response) => resp.json() as Company)
.catch(this.handleError);
}
If I fetch the items separately both models work but if I return the characters within the company it errors out.
Chrome debugger shows this error
Failed to load resource: net::ERR_CONNECTION_RESET
And the component logs this error
0 - {"isTrusted":true}
What am I missing?
Edit: The authHeader is inserting a JWT into the call
authJsonHeaders() {
let header = new Headers();
header.append('Content-Type', 'application/json');
header.append('Accept', 'application/json');
header.append('Authorization', 'Bearer ' +
sessionStorage.getItem('bearer_token'));
return header;
}
Okay,
Apparently the issue was in the serializer. It was errored out serializing the children but managed to return valid json anyway.
I tossed [JsonIgnore] tags on more connecting elements to properly prevent circular references and the error went away.