DI Error in Angular Component

Question

I am new to Angular 2 and Typescript. I have a DI error as below which I could not solve. I tried to understand how this DI works:

I am trying to create a simple registration component that uses the service to validate and operate the REST API.

Here is my component:

authentication.component.ts

import { Component, Injectable } from '@angular/core'; import { UserService } from './user.service'; import { User } from './user'; @Component({ moduleId: module.id, selector: 'authentication', styles: ['input[type=email].ng-invalid {border: 1px solid #dd0000}'], template: ` <h3>Sign Up</h3> <hr> <form (ngSubmit)="signup()" > <input type="email" name="email" required [(ngModel)]="user.email"/> <input type="password" name="password" required [(ngModel)]="user.password"/> <input type="submit" /> </form> <span class.has-error>{{hasError}}</span>` }) @Injectable() export class AuthenticationComponent { public error: Error; public user: User; constructor(public userService: UserService) {} public signup(): void { this.userService.init(this.user); this.userService.signup().subscribe( s=>console.log(s), e=>console.log(e) ) } get diagnostic () { return JSON.stringify(this.user) }; } 

And this is my component:

user.service.ts

 import { Injectable } from '@angular/core'; import { Http, Response, Headers, RequestOptions } from '@angular/http'; import { Observable } from 'rxjs/Observable'; import { User } from './user'; @Injectable() export class UserService { public user: User; constructor( private http: Http, private headers: Headers = new Headers({'Content-Type': 'application/json'}), private requestOptions: RequestOptions = new RequestOptions({headers: headers})) {} public init(user: User) { this.user = user; } signup (): Observable<Response> { if (this.user.password !== this.user.passwordConfirm) { return Observable.throw(new Error('Şifreleriniz uyuşmuyor!')) } else { return this.http.post('/signup', this.user, this.requestOptions); } } } 

This is the stack:

 Error: DI Error at NoProviderError.ZoneAwareError (http://localhost:3000/node_modules/zone.js/dist/zone.js:958:33) at NoProviderError.BaseError [as constructor] (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:1239:20) at NoProviderError.AbstractProviderError [as constructor] (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:1365:20) at new NoProviderError (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:1405:20) at ReflectiveInjector_._throwOrNull (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:2937:23) at ReflectiveInjector_._getByKeyDefault (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:2976:29) at ReflectiveInjector_._getByKey (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:2908:29) at ReflectiveInjector_.get (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:2777:25) at AppModuleInjector.NgModuleInjector.get (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:8491:56) at CompiledTemplate.proxyViewClass.AppView.injectorGet (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:11935:49) at CompiledTemplate.proxyViewClass.DebugAppView.injectorGet (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:12315:53) at ElementInjector.get (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:11790:31) at ReflectiveInjector_._getByKeyDefault (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:2973:28) at ReflectiveInjector_._getByKey (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:2908:29) at ReflectiveInjector_.get (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:2777:25) 

Answer 1

If you do not want to use a one-time service template (this means that different instances are bound only to components (components)), you should put providers:[UserService] in the @Component decorator, as shown below,

 @Component({ moduleId: module.id, selector: 'authentication', providers: [UserService] ///<<<===here styles: ['input[type=email].ng-invalid {border: 1px solid #dd0000}'], ... ... }) 

But tell me if you want to have one instance of your UserService , then you should define it in the @NgModule decorator of your t25>

 import { UserService } from './user.service'; @NgModule({ imports:[...] providers:[UserService] ///<<<===here ... ... })