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
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
Alf Moh, DeborahK i added also LoginComponent code where I injected AuthenticationService. — Andrei
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
it will be great to get online JSBIN or something where we can debug — Mark Uretsky

Andrei Andrei · Accepted Answer · 2018-08-11T22:19:03

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 Answers