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) ;


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;