Can not load ng2-datepicker even though I've configed System.JS

[weishiny]

Hi,

@jkuri I followed your readme.md guide but I found I still encounter the problem about the following:

Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/node_modules/ng2-datepicker/ng2-datepicker.js Error: XHR error (404 Not Found) loading http://localhost:3000/node_modules/ng2-datepicker/ng2-datepicker.js at XMLHttpRequest.wrapFn [as __zone_symbol___onreadystatechange] (http://localhost:3000/node_modules/zone.js/dist/zone.js:1242:29) [<root>] at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:166:47) [<root> => <root>] at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:420:38) [<root>] Error loading http://localhost:3000/node_modules/ng2-datepicker/ng2-datepicker.js as "ng2-datepicker" from http://localhost:3000/app/app.module.js at XMLHttpRequest.wrapFn [as __zone_symbol___onreadystatechange] (http://localhost:3000/node_modules/zone.js/dist/zone.js:1242:29) [<root>] at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:166:47) [<root> => <root>] at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:420:38) [<root>] Error loading http://localhost:3000/node_modules/ng2-datepicker/ng2-datepicker.js as "ng2-datepicker" from http://localhost:3000/app/app.module.js at addToError (http://localhost:3000/node_modules/systemjs/dist/system.src.js:122:78) [<root>] at linkSetFailed (http://localhost:3000/node_modules/systemjs/dist/system.src.js:695:21) [<root>] at http://localhost:3000/node_modules/systemjs/dist/system.src.js:495:9 [<root>] at Zone.run (http://localhost:3000/node_modules/zone.js/dist/zone.js:126:43) [<root> => <root>] at http://localhost:3000/node_modules/zone.js/dist/zone.js:713:57 [<root>] at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:166:47) [<root> => <root>] at drainMicroTaskQueue (http://localhost:3000/node_modules/zone.js/dist/zone.js:546:35) [<root>] at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:424:25) [<root>]

And the following is my system.config.js The version of ng2-datepicker is ng2-datepicker@1.8.2, and I've already tried some issues that be posted before but I still can not find solution, There's no index.js, there's no ng2-datepicker.umd.js and ng2-datepicker.js so that I have no idea how to set the configuration for system.js, I'm wondering whether the version is the cause?

#200 #133

` (function (global) { System.config({ paths: { // paths serve as alias 'npm:': 'node_modules/'
}, // 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',

  // for angular2-datatable(to use angular2 with 3rd party modules) 
  'angular2-datatable': 'npm:angular2-datatable',
  'lodash': 'npm:lodash/lodash.js',

  // for ng2-bootstrap(to use angular2 with 3rd party modules)      
  'ng2-bootstrap': 'npm:ng2-bootstrap',

  // for ng2-datepicker(to use angular2 with 3rd party modules)
  'ng2-datepicker': 'npm:ng2-datepicker',
  'moment': 'npm:moment',
  'ng2-slimscroll': 'npm:ng2-slimscroll',

  // other libraries
  'rxjs':                      'npm:rxjs',
  'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
  'angular2-datatable': { main: 'index.js', defaultExtension: 'js' },
  'ng2-bootstrap': { main: 'bundles/ng2-bootstrap.umd.js', defaultExtension: 'js' },

  'ng2-datepicker': { main: 'ng2-datepicker.js', defaultExtension: 'js' },
  'ng2-slimscroll': { main: 'ng2-slimscroll.js', defaultExtension: 'js' },
  'moment': { main: 'moment.js', defaultExtension: 'js' },

  app: {
    defaultExtension: 'js'
  },
  rxjs: {
    defaultExtension: 'js'
  }
}

}); })(this); `

[jkuri]

I am not sure latest version is compatible with SystemJS, I would need to check it. Can you try version prior to https://github.com/jkuri/ng2-datepicker/commit/639e9ce8deeb5260ffa67ad21e24269ac60f5613 please. 1.8.0 I think.

[weishiny]

Hi @jkuri ,

I've tried the version 1.8.0 and it's work for systemJS, thanks, but I encounter another problem that is

Error: Uncaught (in promise): Failed to load ng2-datepicker.component.html at resolvePromise (http://localhost:3000/node_modules/zone.js/dist/zone.js:665:31) [<root>] at resolvePromise (http://localhost:3000/node_modules/zone.js/dist/zone.js:636:17) [<root>] at http://localhost:3000/node_modules/zone.js/dist/zone.js:713:17 [<root>] at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:166:47) [<root> => <root>] at drainMicroTaskQueue (http://localhost:3000/node_modules/zone.js/dist/zone.js:546:35) [<root>] at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:424:25) [<root>] and i've read the post #66 but i 'm sorry that I don't clearly understand what the solution is. Could you provide a clearer direction for me, I appreciate you for your reply. sorry for my poor english. :_

[jkuri]

@weishiny I think moduleId: module.id was needed in component for SystemJS to find the template. Can you try with Angular 4.0.0, I believe this is not needed anymore.

[weishiny]

Hi @jkuri, do you mean your ng2-datepicker.component.ts inside node_module should be added for moduleId: module.id? If so, can I just add moduleId: module.id into ng2-datepicker.component.ts in the first place? If it is not working and then I will try using angular4

[therisenlord]

Guys, I am using TypeScript 2.5 and just downloaded ng2-datepicker 2.1.3.

Although I followed the instructions, however I get the same error. any help is really appreciated. Using System.Config.JS.

I have tried other versions like 1.8.2 and none of them are working.

(SystemJS) XHR error (404 Not Found) loading http://localhost:44331/node_modules//ng2-datepicker/ng2-datepicker.js

[jbrodsky-code]

I'm receiving a similar error as @therisenlord . Please advise as to how to resolve.

Error loading http://localhost:3000/node_modules/ng2-datepicker/src/main.ts as "ng2-datepicker"