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

Question

I tried many options for specifying the path to allow SystemJS to download 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 will not load properly.

I see the 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" 

Answer 1

You are 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