I followed the instructions in the official tutorial to start a project, but I'm encountering an issue with injecting services into my Angular2 app. Everything was working fine until I added a service. Here are the files :
app.component.ts
import { Component, OnInit } from '@angular/core';
import { client } from './client/client';
import { clientService } from './client/client.service';
@Component({
selector: 'my-app',
template: `
<nav>
<h1>{{title}}</h1>
<h2>client n° {{client.id}}</h2>
</nav>
<client-detail [client]="client"></client-detail>
`,
providers: [clientService]
})
export class AppComponent implements OnInit {
title = "client gendarmerie";
client: client;
constructor(private clientService: clientService) { }
getclient(): void {
this.clientService.getclient().then(client_eg => this.client = client_eg);
}
ngOnInit(): void {
this.getclient();
}
}
service/client.service
import { Injectable } from '@angular/core';
import { client } from './client';
import { client_EG } from './mock-client';
@Injectable()
export class clientService {
getclient(): Promise<client> {
return Promise.resolve(client_EG);
}
}
client/mock-client
import { client } from './client';
export const client_EG: client = {
id:parseInt('10243'),
contact: {
phone: parseInt('0606060606'),
access: ["Localisation", "chat", "picture"]
},
};
Before adding the service, everything was running without issues. However, when I try to launch the app, I encounter the following error:
core.umd.js:3462 EXCEPTION: Error in ./AppComponent class AppComponent
- inline template:3:12 caused by: Cannot read property 'id' of undefinedErrorHandler.handleError @ core.umd.js:3462(anonymous function) @ core.umd.js:6860ZoneDelegate.invoke @ zone.js:203NgZoneImpl.inner.inner.fork.onInvoke @ core.umd.js:6242ZoneDelegate.invoke @ zone.js:202Zone.run @ zone.js:96(anonymous function) @ zone.js:462ZoneDelegate.invokeTask @ zone.js:236NgZoneImpl.inner.inner.fork.onInvokeTask @ core.umd.js:6233ZoneDelegate.invokeTask @ zone.js:235Zone.runTask @ zone.js:136drainMicroTaskQueue @ zone.js:368ZoneTask.invoke @ zone.js:308 core.umd.js:3464 ORIGINAL EXCEPTION: Cannot read property 'id' of undefined