Cannot import ng-bootstrap via systemjs

Question

Here is my task:

1. Loading @ng-bootstrap/ng-bootstrap using npm install --save @ng-bootstrap/ng-bootstrap
2. Loadig @ng-bootstrap/ng-bootstrap via systemjs (I can see ng-bootstrap.js in Safari among loaded resources!), I also tried several combinations with same result.
3. Importing in main module: import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
4. Calling NgbModule.forRoot() in imports part of main module

Error: undefined is not an object (evaluating 'ng_bootstrap_1.NgbModule.forRoot')

I have tried console.log(NgbModule.forRoot) and got undefined right after the import.

systemjs:

    (function(global) {


    var map = {
        app: 'app',
        '@angular' : 'lib/@angular',
        'rxjs': 'lib/rxjs',
        '@ng-bootstrap/ng-bootstrap': 'https://npmcdn.com/@ng-bootstrap/ng-bootstrap'
        };


    var packages  = {
        app: {
            main: './bootstrap.js',
            defaultExtension: 'js'
        },
        rxjs: {
            defaultExtension: 'js'
        },
        '@ng-bootstrap/ng-bootstrap': {
            main: './bundles/ng-bootstrap.js',
            defaultExtension: 'js'
        }
    };


    var ngPackageNames= [
        'common',
        'compiler',
        'core',
        'forms',
        'http',
        'router',
        'platform-browser',
        'platform-browser-dynamic'
    ];

    ngPackageNames.forEach(function(pkgName) {
        packages['@angular/' + pkgName] = {main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js'};

    });

    System.config({
        defaultJSExtension: true,
        transpiler: null, 
        packages: packages,
        map: map
    });


}) (this);

app.module.ts:

    import { NgModule }       from '@angular/core';
    import { BrowserModule }  from '@angular/platform-browser';
    import { FormsModule }    from '@angular/forms';
    import { RouterModule }   from '@angular/router';
    import { HttpModule, RequestOptions } from '@angular/http';
    import { LocationStrategy, HashLocationStrategy } from '@angular/common';
    import { NgbModule }      from '@ng-bootstrap/ng-bootstrap';

    import { AppComponent }       from './app.component';
    import { AppRoutes }       from './app.routes';

    import { HomeModule } from './home/home.module';
    import { AuthenticationService } from './authentication/authentication.service';
    import { AuthenticationModule } from './authentication/authentication.module';
    import { ArticlesModule } from './articles/articles.module';


    @NgModule({
      imports: [
        BrowserModule,
        HttpModule,
        FormsModule,
        AuthenticationModule,
        ArticlesModule,
        HomeModule,
        RouterModule.forRoot(AppRoutes),
        NgbModule.forRoot()
      ],
      declarations: [
        AppComponent
      ],
      providers: [
        AuthenticationService
      ],
      bootstrap: [AppComponent]
    })



    export class AppModule { }

 tsconfig: 

    {
    "compilerOptions": {
        "target": "es6",
        "module": "system",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false
    },
    "exclude": [
        "node_modules"
    ]
}

Answer 1

I was stucked with the same issue.

For me it turns out that the problem only exists when compiling with es2015 as target. I changed it to es5 now and it works. Maybe that helps you as a quick work around.

"target": "es5",
    "module": "commonjs",
    "declaration": false,
    "removeComments": true,
    "noLib": false,
    "lib": [
      "es2016",
      "dom"
    ],

Ntl. there seems to be a problem in the way @ng-bootstrap is used with SystemJS.