How to use ngx-bootstrap in Angular 4 application with SystemJs module system

Question

I have tried out many variations of specifying path for allowing SystemJS to load the ngx-bootstrap package

    System.config({
    "defaultJSExtensions": true,
    "paths": {

        "@angular/core": "node_modules/@angular/core/bundles/core.umd.js",
        "@angular/forms": "node_modules/@angular/forms/bundles/forms.umd.js",
        "@angular/http": "node_modules/@angular/http/bundles/http.umd.js",
        ...
        "*": "node_modules/*",
        "ngx-bootstrap": "node_modules/ngx-bootstrap",
        "highcharts": "node_modules/highcharts/highcharts.js",
        "angular2-highcharts": "node_modules/angular2-highcharts/index.js"
    },
    "packages": {}
});

But still it won't load properly..

I see following error in the console

"(SystemJS) XHR error (404 Not Found) loading http://localhost:5555/node_modules/ngx-bootstrap.js 

wrapFn@http://localhost:5555/node_modules/zone.js/dist/zone.js?1493823577322:1230:30 [<root>]       

Error loading http://localhost:5555/node_modules/ngx-bootstrap.js as "ngx-bootstrap" from http://localhost:5555/hc/app.module.js" 

"Not expecting this error? Report it at https://github.com/mgechev/angular-seed/issues"

Tiep Phan · Accepted Answer · 2017-05-03 16:04:31Z

5

You're missing this part:

packages: {
  //... other code
  'ngx-bootstrap': { format: 'cjs', main: 'bundles/ngx-bootstrap.umd.js', defaultExtension: 'js' },
}

Demo here: https://github.com/valor-software/angular2-quickstart/blob/e9ea3dfd6ea48acf40a99e8e0ab1c9908f3467cd/systemjs.config.js#L22

edited May 3, 2017 at 16:04

answered May 3, 2017 at 15:59

Tiep Phan

12.6k3 gold badges40 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

David Chelliah Over a year ago

Your solution is correct. But with Angular seed project... I need it to project.config.ts like below

let additionalPackages: ExtendPackages[] = [{         name: 'ngx-bootstrap',         path: 'node_modules/ngx-bootstrap/bundles/ngx-bootstrap.umd.min.js'       }, {         name: 'highcharts',         path: 'node_modules/highcharts/highcharts.js'       },       {         name: 'angular2-highcharts',         path: 'node_modules/angular2-highcharts/index.js'       }];       this.addPackagesBundles(additionalPackages);

Taf Over a year ago

Adding just 'ngx-bootstrap': 'node_modules/ngx-bootstrap/bundles/ngx-bootstrap.umd.js' under the map declaration worked for me without doing the additional package declaration.

Collectives™ on Stack Overflow

How to use ngx-bootstrap in Angular 4 application with SystemJs module system

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related