Undefined service in Angular component using TypeScript

Question

Hi I'm trying to consume a JSON REST API but I have a problem when I try to delete an element; when I call delete method I have this error:

EXCEPTION: Error in ./ClientiComponent class ClientiComponent - inline template:28:16 caused by: this.userService is undefined

Here ClientiComponent code

import { Component, OnInit, Injectable } from '@angular/core';
import { Http, Headers, Response } from '@angular/http';
import { User } from 'app/user';
import { Observable } from 'rxjs/Rx';
import { userService } from './userService'
import 'rxjs';
import 'rxjs/add/operator/toPromise';

@Component({
selector: 'clienti',
templateUrl: './clienti.component.html',
styleUrls: ['./clienti.component.css']
})
export class ClientiComponent {
private users = [];
private userService: userService;
data: Object;
loading: boolean;
selectedUser: User;
private userUrl = 'http://localhost:3000/users';
private headers = new Headers({ 'Content-Type': 'application/json' });

constructor(private http: Http) {
http.get('http://localhost:3000/users')
  .flatMap((data) => data.json())
  .subscribe((data) => {
    this.users.push(data)
  });
 }


delete(user: User): void {
alert("error");
this.userService
  .remove(user.id)
  .then(() => {

    this.users = this.users.filter(h => h !== user);
    if (this.selectedUser === user) { this.selectedUser = null; }
  });
}

If I put the remove method inside ClientiComponent it works fine, but instead I want figure out how to move this method inside my userService.ts file.

Here there is method in userService called from ClientiComponent

remove(id: number): Promise<void> {
    const url = `${this.userUrl}/${id}`;
    alert("url");
    return this.http.delete(url, {headers: this.headers})
      .toPromise()
      .then(() => null)
      .catch(this.handleError);
  }

What's wrong with my code?

Vignesh · Accepted Answer · 2017-03-23 11:51:31Z

1

Try to import the service inside the constructor and check now. see the below code

 constructor(
        private userService: userService){}

delete(user: User): void {
alert("error");
this.userService
  .remove(user.id)
  .then(() => {

    this.users = this.users.filter(h => h !== user);
    if (this.selectedUser === user) { this.selectedUser = null; }
  });
}

answered Mar 23, 2017 at 11:51

Vignesh

2,3844 gold badges28 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Alessandro Celeghin Over a year ago

Doesn't work, this is the error now: EXCEPTION: Uncaught (in promise): Error: DI Error

Vignesh Over a year ago

Do you imported in app.module.ts file and include under providers

Alessandro Celeghin Over a year ago

If I put userService into providers I get this error Cannot instantiate cyclic dependency! userService

Jaroslaw K. · Accepted Answer · 2017-03-23 12:05:25Z

1

Inject service in constructor your ClientiComponent, in this way:

constructor(private http: Http, private _userService: UserService) {
   //your constructor code...
}

You can read more about injection services and others in official documentation/tutorials (subsection: Inject the HeroService)

Additionally, I suggest to use good practise and name service use capital letters (f.e. UserService in user.service.ts)

edited Mar 23, 2017 at 12:05

answered Mar 23, 2017 at 11:51

Jaroslaw K.

5,4142 gold badges42 silver badges66 bronze badges

Collectives™ on Stack Overflow

Undefined service in Angular component using TypeScript

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related