-1

In the root module(app.module.ts),

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    DirectoryComponent,
    FilterPipe,
    LoggingService
  ],
  imports: [
    FormsModule,
    BrowserModule,
    HttpClientModule,
    routing
  ],
  providers: [],
  bootstrap: [AppComponent]
})

imports:[..] indicate, root module importing other modules.

declarations:[..] indicate, components/services/pipes/.. created and owned by root module.

What does providers and bootstrap signify?

overexchange
  • 15,768
  • 30
  • 152
  • 347

1 Answers1

1

bootstrap is simply an array from which the root component is digged out. In your case root being AppComponent, where an instance of the root component is created and inserted within the element tag identified by the component's selector. The AppComponent selector — in your case and in most documentation samples — is app-root so Angular looks for a <app-root> tag in the index.html like the one below: 

<body>
  <app-root></app-root>
</body>

Providers are usually singleton (one instance) objects, that other objects have access to through dependency injection (DI). A provider describes what the injector should instantiate a given token, so it describes how an object for a certain token is created. If you plan to use an object multiple times, for example Http service in different components, you can ask for same instance of that service (reuse it). You do that with the help of DI by providing a reference to the same object that DI creates for you. 

@Component){
  ..
  providers: [Http]
}
..instead of creating new object every time:

@Component){}
class Cmp {
  constructor() {
    // this is pseudo code, doens't work
    this.http = new Http(...options);
  }
}

Providers are a general idea behind Dependency Injection. Here is a very good example regarding bootstrap and providers.

Sunil Lama
  • 4,531
  • 1
  • 18
  • 46
  • What about multiple entries in `bootstrap` array? – overexchange Nov 21 '17 at 04:55
  • Hi @overexchange, yes we can have multiple entries in bootstrap array lest you don't want them. please refer [multiple entry bootstrap](https://stackoverflow.com/questions/41681346/bootstrapping-muliple-components-in-angular2) – Sunil Lama Nov 21 '17 at 05:07
  • What does bootstrapping multiple entities(component/service/whatever/..) mean? – overexchange Nov 21 '17 at 06:25
  • @overexchange, it means you are telling your angular app to look for the component that they are there and usable – Sunil Lama Nov 21 '17 at 06:59