Cannot load ng2-bootstrap in Systemjs.config.js in Angular2

Question

I am having a problem to load ng2-bootstrap into my Angular2 application. I use systemjs.config.js to load libs. In my local machine this config works fine, I am able to have every lib files loaded into my app. But once I move to server, ng2-bootstrap stop working.... Could someone help me with this? I have been struggling with this almost 2 days...

Please see the following:

my systemjs.config.js

var isPublic = typeof window != "undefined";

(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',
    '@angular':                   (isPublic)? 'libs/@angular' : 'node_modules/@angular',
    'rxjs':                       (isPublic)? 'libs/rxjs' : 'node_modules/rxjs',
    'ng2-table':                  (isPublic)? 'libs/ng2-table' : 'node_modules/ng2-table',
    'ng2-bootstrap':              (isPublic)? 'libs/ng2-bootstrap' : 'node_modules/ng2-bootstrap',
    'socket.io-client':           (isPublic)? 'libs/socket.io-client/dist/socket.io.min.js' : 'node_modules/socket.io-client/dist/socket.io.min.js'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  // 
  // 'ng2-bootstrap':              { format: 'cjs', main: 'bundles/ng2-bootstrap.umd.js', defaultExtension: 'js' }
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'ng2-table':                  { format: 'cjs', main: 'ng2-table.js', defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' }
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'forms',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
    'animations',
    ''
  ];
  // Individual files (~300 requests):
  function packIndex(pkgName) {
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
  }
  // Bundled (~40 requests):
  function packUmd(pkgName) {
    if(pkgName === '') {
      packages['ng2-bootstrap/'] = { main: 'bundles/ng2-bootstrap.umd.js', defaultExtension: 'js' }
    } else {
      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);
  var config = {
    map: map,
    packages: packages
  };
  System.config(config);
})(this);

my app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {FormsModule, ReactiveFormsModule}    from '@angular/forms';
import { HttpModule }     from '@angular/http';
import { Ng2TableModule } from 'ng2-table/ng2-table';
import {ModalModule, PaginationModule, ProgressbarModule, TabsModule, DatepickerModule} from 'ng2-bootstrap';


import { AppComponent }  from './app.component';
import { routing }       from './app.routing';

import { ModuleSectionComponent } from './components/workflow/jobtemplate/job-wrapper.component';
import { WorkspaceService } from './services/workspace.service';
import { WorkflowService } from './services/workflow.service';
import { UserService } from './services/user.service';
import { JobService } from './services/job.service';
import {WorkSpaceModal} from "./components/workspace/workspacemodal";
import {ModuleOptDirective} from './components/directive/workflow.directive';

@NgModule({
  imports: [
    BrowserModule,
    HttpModule,
    FormsModule,
    ReactiveFormsModule,
    Ng2TableModule,
    PaginationModule.forRoot(),
    ModalModule.forRoot(),
    routing,
    ProgressbarModule.forRoot(),
    TabsModule.forRoot(),
    DatepickerModule.forRoot()
  ],
  declarations: [
    AppComponent,
    ModuleSectionComponent
  ],
  providers: [
    WorkspaceService,
    WorkflowService,
    UserService,
    JobService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

my view file

{{!< default}}
{{#contentFor "scripts"}}
  <!-- 1. Load libraries -->
  <!-- Polyfill(s) for older browsers -->
  <script src="libs/core-js/client/shim.min.js"></script>
  <script src="libs/zone.js/dist/zone.js"></script>
  <script src="libs/reflect-metadata/Reflect.js"></script>
  <script src="libs/systemjs/dist/system.src.js"></script>

  <!-- 2. Configure SystemJS -->
  <script src="systemjs.config.js"></script>
  <script>
      System.import('app').catch(function(err){ console.error(err); });
  </script>
{{/contentFor}}

<!-- 3. Display the application -->
  <my-app><br><br><center>
    <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
    <span class="sr-only">Loading...</span></center></my-app>

Answer 1

you didn't add ng2-bootstrap to packages. Do one of the below options:

Option1:

var packages = {
  'app':                        { main: 'main.js',  defaultExtension: 'js' },
  'ng2-table':                  { format: 'cjs', main: 'ng2-table.js', defaultExtension: 'js' },
  'ng2-bootstrap':              { main: 'bundles/ng2-bootstrap.umd.js', defaultExtension: 'js' }
  'rxjs':                       { defaultExtension: 'js' }
};

Option2:

var ngPackageNames = [
  ...
  'ng2-bootstrap'
];

// Bundled (~40 requests):
function packUmd(pkgName) {
  if(pkgName === 'ng2-bootstrap') {
    packages['ng2-bootstrap'] = { main: 'bundles/ng2-bootstrap.umd.js', defaultExtension: 'js' }
  } else {
    packages['@angular/'+pkgName] = { main: 'bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
  }
}