Providers Array in app.module.ts in Angular 2

Question

This might just well be a trivial question but I need to clarify the doubts.

I was following the tutorial https://angular.io/docs/ts/latest/tutorial/toh-pt5.html and suddenly it stuck me.

In my hero.component.js

I have

import { Component } from '@angular/core';
import { Hero } from './hero';
import { OnInit } from '@angular/core';

@Component({
  selector: 'my-heroes',
  template:`
            <h2>My Heroes</h2>
            <ul class="heroes">
              <li *ngFor="let hero of heroes" [class.selected]="hero === hero" (click)="onSelect(hero)">
                <span class="badge">{{hero.id}}</span> {{hero.name}}
              </li>
            </ul>
            <my-hero-detail [hero]="selectedHero"></my-hero-detail>`,
  styles: [`
    .selected {
      background-color: #CFD8DC !important;
      color: white;
    }
    .heroes {
      margin: 0 0 2em 0;
      list-style-type: none;
      padding: 0;
      width: 15em;
    }
    .heroes li {
      cursor: pointer;
      position: relative;
      left: 0;
      background-color: #EEE;
      margin: .5em;
      padding: .3em 0;
      height: 1.6em;
      border-radius: 4px;
    }
    .heroes li.selected:hover {
      background-color: #BBD8DC !important;
      color: white;
    }
    .heroes li:hover {
      color: #607D8B;
      background-color: #DDD;
      left: .1em;
    }
    .heroes .text {
      position: relative;
      top: -3px;
    }
    .heroes .badge {
      display: inline-block;
      font-size: small;
      color: white;
      padding: 0.8em 0.7em 0 0.7em;
      background-color: #607D8B;
      line-height: 1em;
      position: relative;
      left: -1px;
      top: -4px;
      height: 1.8em;
      margin-right: .8em;
      border-radius: 4px 0 0 4px;
    }
  `]

})

export class HeroComponent implements OnInit { 
  selectedHero:Hero ;
  heroes:Hero[];

  constructor(private _heroService:HeroService){} 

  onSelect(hero:Hero): void{
    this.selectedHero = hero;
  }

  getHeroes():void {
    this._heroService.getHeroes().then(myHeroes => this.heroes = myHeroes) ;
  }

  ngOnInit():void{
    this.getHeroes();
  }

}

This has errors which looks like caused by the missed reference of ./hero.service

But the file is already part of app.module.ts Providers Array.

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HeroComponent }  from './hero.component';
import { HeroDetailComponent } from './hero-detail.component';
import { HeroService } from './hero.service'; 

@NgModule({
  imports:      [ 
                  BrowserModule,
                  FormsModule
                ], 
  declarations: [ 
                  AppComponent,
                  HeroComponent,
                  HeroDetailComponent
                ], 
  providers:    [
                  HeroService 
                ],
  bootstrap:    [ AppComponent] 
})
export class AppModule { }

Then why do we need to import import { HeroService } from './hero.service'; again in hero.componnet.ts file to get rid of the rerrors?

Is not @NgModule meant to get rid of repetitive imports of all our directives,components,pipes etc. as pointed out by this blog :

https://scotch.io/bar-talk/getting-to-know-angular-2s-module-ngmodule ?

I think you are confusing two different things here. The imports in the `@NgModule` declare or provide different components, pipes, services, etc. for others who use this module and components within the module itself. The second import, at the top of each component, e.g. `import { UserService } from './user-service';` is like importing the interface description to provide the knowledge to this component on how this service can be used. — alex kucksdorf, Feb 09 '17 at 12:42
@alexkucksdorf It seems that not importing sevices into the `app.module.ts` and leave the `providers` array blank, just import the service to the `component` and have the instance of the service can make everything works fine. So, why do we have the `providers` array in `module`? — funkid, Apr 15 '19 at 01:55
If you use the `module` approach, you will have *one* instance of your service that will be shared across your components, which means less memory load and easier data sharing between component. Otherwise each requesting component will have its own instance of the service. — alex kucksdorf, Apr 15 '19 at 07:08

score 0 · Answer 1 · answered Feb 09 '17 at 14:24

import { Component } from '@angular/core';
import { Hero } from './hero';
import { OnInit } from '@angular/core';

@Component({
  selector: 'my-heroes',
  providers : [HeroService],
  template:`
            <h2>My Heroes</h2>
            <ul class="heroes">
              <li *ngFor="let hero of heroes" [class.selected]="hero === hero" (click)="onSelect(hero)">
                <span class="badge">{{hero.id}}</span> {{hero.name}}
              </li>
            </ul>
            <my-hero-detail [hero]="selectedHero"></my-hero-detail>`,
  styles: [`
    .selected {
      background-color: #CFD8DC !important;
      color: white;
    }
    .heroes {
      margin: 0 0 2em 0;
      list-style-type: none;
      padding: 0;
      width: 15em;
    }
    .heroes li {
      cursor: pointer;
      position: relative;
      left: 0;
      background-color: #EEE;
      margin: .5em;
      padding: .3em 0;
      height: 1.6em;
      border-radius: 4px;
    }
    .heroes li.selected:hover {
      background-color: #BBD8DC !important;
      color: white;
    }
    .heroes li:hover {
      color: #607D8B;
      background-color: #DDD;
      left: .1em;
    }
    .heroes .text {
      position: relative;
      top: -3px;
    }
    .heroes .badge {
      display: inline-block;
      font-size: small;
      color: white;
      padding: 0.8em 0.7em 0 0.7em;
      background-color: #607D8B;
      line-height: 1em;
      position: relative;
      left: -1px;
      top: -4px;
      height: 1.8em;
      margin-right: .8em;
      border-radius: 4px 0 0 4px;
    }
  `]

})

export class HeroComponent implements OnInit { 
  selectedHero:Hero ;
  heroes:Hero[];

  constructor(private _heroService:HeroService){} 

  onSelect(hero:Hero): void{
    this.selectedHero = hero;
  }

  getHeroes():void {
    this._heroService.getHeroes().then(myHeroes => this.heroes = myHeroes) ;
  }

  ngOnInit():void{
    this.getHeroes();
  }

}

Providers Array in app.module.ts in Angular 2

1 Answers1