Cannot Find name error coming in angular2

Question

I have a component called customComponent

import {Component} from '@angular/core';
import { appService } from './app.service'; 
@Component({
  selector: 'custom-root',
  template: `<h1>how</h1>
    <ul *ngFor="let hero of heroes"><li>{{hero}}</li></ul>`,
})
export class CustomComponent {
    heroes = ['first','second','third'];
   //heroes;

   value: string = ""; 
 // constructor(appService: appService) { }  

   /* ngOnInit(): void { 
      this.value = this._appService.getApp(); 
   } */

}

In appService i have

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

@Injectable()
export class appService {  
   getApp(): string { 
      return "Hello world"; 
   } 
} 

In app.module.ts i am importing the app service

import { appService } from './app.service'; 


@NgModule({
  declarations: [
    AppComponent,CustomComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule
   // appService
  ],  
  providers: [appService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Now I am getting an error

cannot find name appService in custom Component line number 15

How can I solve this?

Answer 1

In CustomComponent file import:

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

Then use it in constructor for DI:

constructor(@Inject(appService) private appService) { }

After this make sure you uncomment appService in providers of your module.

imports: [
  BrowserModule,
  FormsModule,
  HttpModule,
  RouterModule,
  appService
],