How do I do dependency injection with service?

I got the typescript notification:

[Angular] Can't resolve all parameters for LandingComponent in
landing.component.ts:
([object Object], ?).

Update

I shouldn't do just use LangService in constructor like this:

private _langService: LangService;

Because LangService is a implementation. In real case there will be few implementations like LangMockedSerives, langService_01, langService_02. Thereby landing component should know nothig about implementation and work with interfaces only.

Service and it's interface

export interface ILangService {

}



export class LangService implements ILangService {

}

Component

import { ILangService } from '../../services/Ilang.service';



@Component({

    selector: 'app-landing',

    templateUrl: './landing.component.html',

    styleUrls: ['./landing.component.less']

})



export class LandingComponent {

    private langService: ILangService

    constructor(

        private http: HttpClient,

        _langService: ILangService;

    ) {

        this._langService = langService;

    }

}

app.module.ts

import { ILangService } from './services/Ilang.service';

import { LangService } from './services/Lang.service';



@NgModule({

  declarations: [

    AppComponent,

    LandingComponent,

  ],

  imports: [

    BrowserModule,

    HttpClientModule,

    RouterModule.forRoot([

      { path: '', component: LandingComponent },

    ], { useHash: false }),

  ],

  providers: [

    LangService

  ],

  bootstrap: [AppComponent]

})

export class AppModule { }

Updated Answer

If you want to use different implementations for the same service you should create an InjectionToken<T> and provide the right implementation for your interface in your module declarations.

Interface - lang.service.ts

Create an injection token that will be recognized by the injector typed with ILangService interface

export const LangService = new InjectionToken<ILangService>('LangService');



export interface ILangService { }

1st module - english.module.ts

Provide EnglishLangService for the LangService injection token where EnglishLangService implements ILangService interface

import { LangService } from './services/lang.service';

import { EnglishLangService } from './services/english-lang.service';



@NgModule({

  declarations: [ LandingComponent ],

  providers: [

    { provide: LangService, useClass: EnglishLangService }

  ]

})

export class EnglishModule { }

2nd module - french.module.ts

Provide FrenchLangService for the LangService injection token where FrenchLangService implements ILangService interface

import { LangService } from './services/lang.service';

import { FrenchLangService } from './services/french-lang.service';



@NgModule({

  declarations: [ LandingComponent ],

  providers: [

    { provide: LangService, useClass: FrenchLangService }

  ]

})

export class FrenchModule { }

Component - landing.component.ts

This way you can inject LangService in your component and the injector will retrieve the implementation provided in your module

import { LangService } from '../../services/lang.service';



@Component({

    selector: 'app-landing',

    templateUrl: './landing.component.html',

    styleUrls: ['./landing.component.less']

})

export class LandingComponent {

    constructor(

        private http: HttpClient,

        private langService: LangService,

    ) { }

}

Testing - mock-lang.service.ts

When testing you will be able to provide your mock implementation the same way you provide the right implementation in your application modules

import { LangService } from './services/lang.service';

import { MockLangService } from './services/mock-lang.service';



TestBed.configureTestingModule({

  providers: [

    { provide: LangService, useClass: MockLangService },

  ],

});

Original Answer

You should import your service with the class instead of the interface

import { LangService } from '../../services/lang.service';



@Component({

    selector: 'app-landing',

    templateUrl: './landing.component.html',

    styleUrls: ['./landing.component.less']

})

export class LandingComponent {

    constructor(

        private http: HttpClient,

        private langService: LangService;

    ) { }

}

Also don't forget to set the @Injectable() decorator on your service class declaration

import { Injectable } from '@angular/core';



@Injectable()

export class LangService implements ILangService { }

And of course, you have to provide the service to your module

import { LangService } from './services/Lang.service';



@NgModule({

  declarations: [

    AppComponent,

    LandingComponent,

  ],

  imports: [ ... ],

  providers: [

    LangService

  ],

  bootstrap: [AppComponent]

})

export class AppModule { }

You can read about Angular Dependency Injection here: https://angular.io/guide/dependency-injection

Another interesting link for advance service declarations: https://offering.solutions/blog/articles/2018/08/17/using-useclass-usefactory-usevalue-useexisting-with-treeshakable-providers-in-angular/

service.ts

import { Injectable } from '@angular/core';

import { HttpClient, Response, RequestOptions, Headers } from '@angular/common/http';

import { Observable } from 'rxjs/Observable';

import 'rxjs/add/operator/map';

import 'rxjs/add/operator/catch';

import 'rxjs/add/observable/throw';



export interface ILangService {

}



 @Injectable()   

export class LangService implements ILangService {



 constructor(private http: HttpClient) {  <-- httpclient for angular6

  }



getData(): Observable<any> {

return this.http.get('https://..../');

.map(this.extractData)

 .catch(this.handleError);

 }



private extractData(res: Response) {

const body = res.json();

return body || ;

}



private handleError(error: any) {

const errMsg = (error.message) ? error.message :

error.status ? `${error.status} - ${error.statusText}` : 'Server error';

console.error(errMsg);

console.log('Error....!');

 return Observable.throw(errMsg);

}

}

Component:-

import { LangService } from '../../services/lang.service'; <-- Import sevice here



@Component({

selector: 'app-landing',

templateUrl: './landing.component.html',

styleUrls: ['./landing.component.less']

})



 export class LandingComponent {

constructor(

private http: HttpClient,

_langService: LangService  <--- service

) { }



ngOnInit() {

let thisx = this;

this._langService.getData().subscribe(

function (success) {

// alert here on success

alert (success);

},

 error => console.log('Getting Server Data Error :: ' + 

JSON.stringify(error)));

}

}

LangService shoul be removed from app.module.ts providers:

@NgModule({

  declarations: [

    AppComponent,

    LandingComponent,

  ],

  imports: [

    BrowserModule,

    HttpClientModule,

    RouterModule.forRoot([

      { path: '', component: LandingComponent },

    ], { useHash: false }),

  ],

  providers: ,

  bootstrap: [AppComponent]

})

export class AppModule { }

And interface should be added to providers in component:

import { LangService } from '../../services/Lang.service';

import { ILangService } from '../../services/ILang.service';



@Component({

    selector: 'app-landing',

    templateUrl: './landing.component.html',

    styleUrls: ['./landing.component.less'],

    providers: [

        { provide: ILangService, useClass: LangService }

    ]

})



export class LandingComponent {

    private langService: ILangService

    constructor(

        private http: HttpClient,

        _langService: ILangService;

    ) {

        this._langService = langService;

    }

}