angular2 cannot load ng2-bootstrap Datepicker

Question

I've tried several combinations within system.config - but I continue to get this error

Error: Error: XHR error (404 Not Found) loading http://localhost:3000/node_modules/ng2-bootstrap at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:3000/node_modules/zone.js/dist/zone.js:698:29) at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:265:35) at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:154:47) at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:335:33) Error loading http://localhost:3000/node_modules/ng2-bootstrap as "ng2-bootstrap" from http://localhost:3000/app/app.module.js

My system.config snippet is

(function (global) {
System.config({
paths: {
  // paths serve as alias
  'npm:': 'node_modules/',
  'ng2-bootstrap':   "node_modules/ng2-bootstrap"
},
// map tells the System loader where to look for things
map: {
  // our app is within the app folder
  app: 'app',

  // angular bundles
  '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
  '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
  '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
  '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
  '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
  '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
  '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
  '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
  'rxjs': 'npm:rxjs',
  'moment': 'node_modules/moment',
  'ng2-bootstrap': 'node_modules/ng2-bootstrap',
  'ng2-bootstrap/ng2-bootstrap': 'node_modules/ng2-bootstrap/bundles/ng2-bootstrap.umd.js'
  // other libraries

},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
  app: {
    main: './main.js',
    defaultExtension: 'js'
  },
  rxjs: {
    defaultExtension: 'js'
  },
  'ng2-bootstrap': {
    "defaultExtension": "js"
 }    
}  });   })(this);

can someone help me spot the mistake? and help me understand what went wrong?

Christoph Christoph · Accepted Answer · 2017-04-28T12:16:14

Take a look at the URL that the client is using to get the datepicker files: http://localhost:3000/node_modules/ng2-bootstrap.

While you have mapped the beginning path of 'ng2-bootstrap' in your systemjs.config.js, you have not mapped any path starting with 'node_modules'. Search through your project for URLs including 'node_modules' and remove the 'node_modules' from the path. Then the client should use URLs that the server can successfully map to the 'ng2-bootstrap' route.

One more word of caution: I think there is a problem with your second route 'ng2-bootstrap/ng2-bootstrap'. Because it starts with the same partial path as the route just above it, I'd expect that this route never applies because the first one always matches. You should verify this route, too.

angular2 cannot load ng2-bootstrap Datepicker

1 Answers