Angular2 error in accessing imported service using typescript

Question

I am trying to create a form where the user will fill the required details and it would make a server call and save the required details. But I am getting this error no matter what I do. ORIGINAL EXCEPTION: TypeError: this.postService is undefined My code for the main app.component.ts is :

/// <reference path="../typings/tsd.d.ts" />
import {Component} from 'angular2/core';
import {HTTP_PROVIDERS} from 'angular2/http';
import {ControlGroup, Control, Validators, FormBuilder} from 
'angular2/common';
import {PostService} from './post.service'

@Component({
selector: 'my-app',
template:`

<form [ngFormModel]="form" (ngSubmit)="signup()">

<div class="form-group has-error has-feedback">  <div class="input-group">

            <input type="text" id="email_id" type="text" 
ngControl = "email_id" #email_id="ngForm" value = email_id >

        </div>  </div>
<div class="form-group has-error has-feedback"> <div class="input-group">

            <input type="password" id="password" type="text" 
ngControl = "password" #password="ngForm" value = password>

 </div>  </div>

<button class="btn btn-primary" type="submit">Sign Up</button>
</form>
`,
providers:[PostService, HTTP_PROVIDERS]


})

export class AppComponent {

form: ControlGroup;
postService:PostService;
constructor(fb: FormBuilder){
        this.form = fb.group({
            email_id: ['',Validators.required],
            password: ['',Validators.required]
        });     
}
signup(){
this.postService.createPost({ email: this.form.value.email_id,
 password: this.form.value.password });

}
}

I had earlier tried 'postService:PostService in the constructor but then also I was getting the same error that postService` is undifined.

the post.service.ts code is like :

import {Http} from 'angular2/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';
import {Injectable} from 'angular2/core'
import {Post} from './post';
import {Observable} from 'rxjs/Observable';


@Injectable()
export class PostService {
//dependency injection
private _url = "http:127.0.0.1/accounts/login_user/";
constructor(private _http:Http) {

}


createPost(post:Post){

    return this._http.post(this._url,JSON.stringify(post))
    .map(res=>res.json());
}
}

How can I fix this issue and successfully send data from the form to the server and display the response. Can some one please help me out?

Thank you.

Answer 1

You need to inject it into your component:

export class AppComponent {
  form: ControlGroup;

  constructor(fb: FormBuilder, private postService:PostService){ <----
    (...)
  }

  (...)
}

Don't forget to specify this service in the providers of your component:

@Component({
  providers: [ PostService ] 
})
export class AppComponent {
  (...)
}

or when bootstrapping the main component.

bootstrap(AppComponent, [ PostService ]);

Answer 2

在AppComponent ，需要注入服务：

constructor(fb: FormBuilder, this postService:PostService){