use Injectable service insight another Injectable service angular 5

Question

I am struggling to use Injectable service insight another Injectable service in angular 5 Here is my crudService.ts :

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class CrudService
{
    constructor(
        private http: HttpClient
    ) { }

    postItem(url: any, body: any, headers?: any, params?: any)
    {
        return this.http.post<any>(url,
            body,
            {
                headers, params
            }
        );
    }
}

Here is my authentication.service.ts where i am inserting crudService.ts file:

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpParams, HttpClientModule } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

import { CrudService } from "../common/services/crudservice";

@Injectable()
export class AuthenticationService {
    constructor(
        private http: HttpClient,
        private crudService: CrudService
    ) { }

    login(username: string, password: string) {
        let url = "example";
        let body = "example";
        let headers = "example";
        return this.crudService.postItem(url, body, headers);
    }
}

and insight app.module.ts file I import only CrudService class :

import { CrudService } from "./common/services/crudService";
@NgModule({
    imports: [
        ...
    ],
    declarations: [
        ...
    ],
    providers: [
        ...,
        CrudService
    ],
    bootstrap: [AppComponent]
})

my CrudService injectable export class insight app.module.ts file. Actually I tried different scenarious like import two classes : CrudService and AuthenticationService insight app.module.ts in the same time and other approaches... During compilation I don't have any errors but when my application is started i have error :

ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[LoginComponent -> AuthenticationService]: 
  StaticInjectorError(Platform: core)[LoginComponent -> AuthenticationService]: 
    NullInjectorError: No provider for AuthenticationService!
Error: StaticInjectorError(AppModule)[LoginComponent -> AuthenticationService]: 
  StaticInjectorError(Platform: core)[LoginComponent -> AuthenticationService]: 
    NullInjectorError: No provider for AuthenticationService!

Please if anybody have already solve the problem related to using one @Injectable() class insight another @Injectable() class and registration that logic insight app.module.ts for Angular 5, please send me the link or some scenario which is possible to follow to successfully compile, run and use @Injectable() classes. If i need precise something, please ask me and I will provide more details. Thanks

P.S. My AuthenticationService is injected insight LoginComponent class :

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';

import { AlertService, AuthenticationService } from '../_services/index';
import { CrudService } from "../common/services/crudservice";

@Component({
    moduleId: module.id,
    templateUrl: 'login.component.html'
})

export class LoginComponent implements OnInit {
    model: any = {};
    loading = false;
    returnUrl: string;

    constructor(
        private route: ActivatedRoute,
        private router: Router,
        private authenticationService: AuthenticationService) { }

    ngOnInit() {

    }


    login() {
        this.loading = true;
        this.authenticationService.login(this.model.username, this.model.password)
            .subscribe(
            resp => {

            },
            error => {

            });
    }
}

Where are you injecting the `AuthenticationService`? Because in app.module, you are only injecting the `CrudService` so the error is telling you that there is `No provider for AuthenticationService!` — Alf Moh, Aug 11 '18 at 20:46
As stated in the prior comment, the error is telling you that there is no provider for your `AuthenticationService`. This normally means that you forgot to include it in the `providers` array of your module. — DeborahK, Aug 11 '18 at 21:13
Alf Moh, DeborahK i added also LoginComponent code where I injected AuthenticationService. — Andrei, Aug 11 '18 at 21:13
So if I have structure : CrudService is injected in AuthenticationService, AuthenticationService injected in LoginComponent. So which service I need to add in app.module.ts ? Do I need to add providers insight login.component.ts ? Thanks I tried to inject CrudService in provider and login.component.ts and add.module.ts in the same time and separately... Maybe i did something wrong — Andrei, Aug 11 '18 at 21:19
it will be great to get online JSBIN or something where we can debug — , Aug 11 '18 at 22:06

score 0 · Answer 1 · answered Aug 11 '18 at 22:19

Thanks Alf Moh, DeborahK and Mark Uretsky. I found the answer... I removed from app.module.ts CrudService class from providers and added the line in login.components.ts:

providers: [AuthenticationService, CrudService]

How login.components.ts looks like this :

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';

import { AlertService, AuthenticationService } from '../_services/index';
import { CrudService } from "../common/services/crudservice";

@Component({
    moduleId: module.id,
    templateUrl: 'login.component.html',
    providers: [AuthenticationService, CrudService]
})

export class LoginComponent implements OnInit {
    model: any = {};
    loading = false;
    returnUrl: string;

    constructor(
        private route: ActivatedRoute,
        private router: Router,
        private authenticationService: AuthenticationService) { }

    ngOnInit() {
    }

    login() {
        this.loading = true;
        this.authenticationService.login(this.model.username, this.model.password)
            .subscribe(
            resp => {

            },
            error => {

            });
    }
}

Thank you very much for your advices. Now I understood that for using @Injectable() class insight another @Injectable() class, insight the component where these classes are used should be declaration of that classes insight "providers" array. Thanks!

use Injectable service insight another Injectable service angular 5

1 Answers1