title: Where to put the import module in a new installation of ng-2 Bootstrap?
body: <p>I'm a complete newbie attempting to setup ng2 Bootstrap (Angular2 with Bootstrap4 css) using this <a href="https://ng-bootstrap.github.io/#/getting-started" rel="nofollow">tutorial</a>, so far I've installed the dependencies: <strong>Angular</strong> (requires Angular version 2 or higher, tested with 2.0-rc.5) <strong>Bootstrap CSS</strong> (tested with version 4.0 alpha V3) and I've started the application: </p>
  
  <p>The problem is I don't know where to add the following line of code without causing errors:</p>
  
  <blockquote>
    <p>Once installed you need to import our main module.</p>
  </blockquote>
  
  <pre><code>import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
  </code></pre>
  
  <blockquote>
    <p>The only remaining part is to list the imported module in your
    application module. You should end up with the code similar to:</p>
  </blockquote>
  
  <pre><code>import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
  
  @NgModule({
    declarations: [AppComponent, ...],
    imports: [NgbModule, ...],
    bootstrap: [AppComponent]
  })
  export class AppModule {
  }
  </code></pre>
  
  <p><strong>UPDATE 3:</strong> These are all the files in question I only changed the system.config.js according to the suggestion, and the app.module.ts, am I missing anything else? When I try to run it like this I get a blank page, and it doesn't load it seems that import [<strong>NgbModule</strong>] in app.module is the problem that causes a blank page. <strong>How do I properly import it?</strong></p>
  
  <p><strong>System.Config.JS</strong> </p>
  
  <pre><code>/**
   * System configuration for Angular 2 samples
   * Adjust as necessary for your application needs.
   */
  (function(global) {
  
    // map tells the System loader where to look for things
    var map = {
      'app':                        'app', // 'dist',
      '@ng-bootstrap':'node_modules/@ng-bootstrap',
      '@angular':                   'node_modules/@angular',
      'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
      'rxjs':                       'node_modules/rxjs'
    };
  
    // packages tells the System loader how to load when no filename and/or no extension
    var packages = {
      'app':                        { main: 'main.js',  defaultExtension: 'js' },
  
      'rxjs':                       { defaultExtension: 'js' },
   '@ng-bootstrap/ng-bootstrap':{ main: 'index.js', defaultExtension: 'js'},
    };
  
    var ngPackageNames = [
      'common',
      'compiler',
      'core',
      'forms',
      'http',
      'platform-browser',
      'platform-browser-dynamic',
      'router',
      'router-deprecated',
      'upgrade',
    ];
  
  
  
    // Individual files (~300 requests):
    function packIndex(pkgName) {
      packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
    }
  
    // Bundled (~40 requests):
    function packUmd(pkgName) {
      packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
    }
  
    // Most environments should use UMD; some (Karma) need the individual index files
    var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
  
    // Add package entries for angular packages
    ngPackageNames.forEach(setPackageConfig);
  
    // No umd for router yet
    packages['@angular/router'] = { main: 'index.js', defaultExtension: 'js' };
  
    var config = {
      map: map,
      packages: packages
    };
  
    System.config(config);
  
  })(this);
  </code></pre>
  
  <p><strong>AppModule.TS</strong></p>
  
  <pre><code>import { NgModule }      from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { AppComponent }  from './app.component';
  import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
  @NgModule({
    imports: [ BrowserModule, NgbModule ],
  
    declarations: [ AppComponent ],
    bootstrap: [ AppComponent ]
  })
  export class AppModule { }
  </code></pre>
  
  <p><strong>Main.TS</strong></p>
  
  <pre><code>import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  
  import { AppModule } from './app.module';
  
  platformBrowserDynamic().bootstrapModule(AppModule);
  </code></pre>
  
  <p><strong>App.Component.ts</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
      selector: 'my-app',
      template: '&lt;h1&gt;My First Angular 2 2 2 App&lt;/h1&gt; &lt;div class="row"&gt;&lt;div class="col-sm-4"&gt;.col-sm-4&lt;/div&gt;&lt;div class="col-sm-4"&gt;.col-sm-4&lt;/div&gt;&lt;div class="col-sm-4"&gt;.col-sm-4&lt;/div&gt;&lt;/div&gt;'
  })
  export class AppComponent { }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Angular 2 QuickStart&lt;/title&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;link rel="stylesheet" href="styles.css"&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" crossorigin="anonymous"&gt;
  
      &lt;!-- Polyfill(s) for older browsers --&gt;
      &lt;script src="node_modules/core-js/client/shim.min.js"&gt;&lt;/script&gt;
  
      &lt;script src="node_modules/zone.js/dist/zone.js"&gt;&lt;/script&gt;
      &lt;script src="node_modules/reflect-metadata/Reflect.js"&gt;&lt;/script&gt;
      &lt;script src="node_modules/systemjs/dist/system.src.js"&gt;&lt;/script&gt;
  
      &lt;script src="systemjs.config.js"&gt;&lt;/script&gt;
      &lt;script&gt;
        System.import('app').catch(function(err){ console.error(err); });
      &lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;my-app&gt;Loading...&lt;/my-app&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>So far I've tried replacing the code of main.ts inside the app folder, but I can't get it to work. My question is <strong>How do I import the main module, and do I replace the existing code or just add on to it?</strong> I'm just trying to get ng2-bootstrap to work properly, any help will be deeply appreciated. Thanks!    </p>
  
  <p>This is my folder structure to help solve this problem. Thanks!</p>
  
  <pre><code> vzlr-stack/
       ├──typings/
       ├──node_modules/
       ├──e2e/      
       ├──app/   
         ├──app.component.js
         ├──app.component.js.map
         ├──app.component.spec.js
         ├──app.component.spec.js.map
         ├──app.component.spec.ts
         ├──app.component.ts
         ├──app.module.js
         ├──app.module.js.map
         ├──app.module.ts
         ├──main.js
         ├──main.js.map
         ├──main.ts
       ├──wallaby.js
       ├──typings.json
       ├──tslint.json
       ├──tsconfig.json
       ├──systemjs.config.js
       ├──styles.css
       ├──Readme.md
       ├──protractor.config.js
       ├──package.json
       ├──LICENSE
       ├──karma-test-shim.js
       ├──karma.conf.js
       ├──index.html
       ├──dockerfile
       ├──CHANGELOG.md
       ├──.travis.yml
       ├──.gitignore
       ├──.editorconfig
       ├──.dockerignore
  </code></pre>