Properly setting up angular 2 with ng-bootstrap

Question

As a n00b to angular and Bootstrap, and relatively new to node js, I'm trying to set up a clean base (I hope) using the webpack starter kit from here:

https://github.com/AngularClass/angular2-webpack-starter

and the official Bootstrap 4 for Angular 2 from here: https://ng-bootstrap.github.io/#/getting-started

So far I've just added some imports to the webapp starter kit:

"@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.9",
"bootstrap": "^4.0.0-alpha.5",
"tslint": "^3.15.1",

Now my problem is that I have no clue whatsoever what to do with and where to put the mentioned code fragments from the ng-bootstrap install documentation:

https://ng-bootstrap.github.io/#/getting-started

What I'm asking for is:

1) an explanation about what these code fragments are for, and where to put this stuff in the concrete starter kit project linked above (because I'm willing to learn, but that info is a bit too short for a n00b).

I mean, what's for example AppComponent ? It's undefined - and I have no clue what that refers to.

2) Where is now actually Bootstrap within this project?

These may be stupid questions for someone knowing theses things. But as a newbie, I'm completely lost there at the moment.

Thanks a lot for your help in advance.

Copied from mentioned ng-bootstrap install docs:

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgbModule.forRoot(), ...],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Other modules in your application can simply import NgbModule :

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [OtherComponent, ...],
  imports: [NgbModule, ...]
})
export class OtherModule {
}

Answer 1

Look in the app.module file. You should see the @NgModule() AppModule . This is the AppModule posted in your example. You should make sure that when you add the NgbModule to the imports that you call forRoot , just like your example.

As far as the second example, right now the entire application can be build by using only the AppModule . But as the application grows, you may want to break it up in to smaller modules, in which case for these other module, you should just add NgbModule to the imports ( without forRoot() ). forRoot() is only meant to be called when adding to the root app module. For further information on using modules, you should check out the documentation on modules

As far as the Bootstrap goes, ng-bootstrap is only the component library, and the styling for those components is based on the actual Bootstrap CSS. You have installed Bootstrap, but you also need to add the CSS to the application. You can try to follow all these complicated steps , but if you want to just get started, maybe it would be best just to use the CDN for right now. In your index.html just add

<link rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" 
      integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi"
      crossorigin="anonymous">

That should be all you need to get started