Difference between component decorator and NgModule decoder providers in Angular 2

Question

an array of component decorator suppliers

@Component({
    moduleId: module.id,
    selector:    'hero-list',
    templateUrl: './hero-list.component.html',
    providers:  [ HeroService ]
 })
 export class HeroListComponent implements OnInit {
    /* . . . */
 }

array of NgModule decoder providers

@NgModule({
  imports:      [ BrowserModule ],
  providers:    [ Logger ],
  declarations: [ AppComponent ],
  exports:      [ AppComponent ],
  bootstrap:    [ AppComponent ]
})

What is the difference between these two vendor packages in Angular2?

Answer 1

The difference is the area in which the provider is available, and how many instances will be created.

instance for provider

If you add it to a component, each instance of this component will have its own instance of services, while for non-lazy modules there will be only one instance for the entire application.

scope

If you add it to a component, only the component and directives will be applied to it, and the descendants of this component will be able to enter an instance.

, DI , , , . , (AppComponent), (@NgModule()).

Lazy "" . , , . , . forRoot() ( - ), , .