angular 2 + npm install package not working

Question

Whenever I install a new package via npm install my angular 2 import is not recognizing the package and my browser returns 404 error.

For example, I've been trying to install the following package:

https://github.com/dougludlow/ng2-bs3-modal

and this is what my browser returns:

GET http://localhost:3000/node_modules/ng2-bs3-modal/ng2-bs3-modal 404 (Not Found)fetchTextFromURL @ system.src.js:1154(anonymous function) @ system.src.js:1710ZoneAwarePromise @ angular2-polyfills.js:589(anonymous function) @ system.src.js:1709(anonymous function) @ system.src.js:2734(anonymous function) @ system.src.js:3308(anonymous function) @ system.src.js:3575(anonymous function) @ system.src.js:3960(anonymous function) @ system.src.js:4419(anonymous function) @ system.src.js:4671(anonymous function) @ system.src.js:406ZoneDelegate.invoke @ angular2-polyfills.js:332Zone.run @ angular2-polyfills.js:227(anonymous function) @ angular2-polyfills.js:576ZoneDelegate.invokeTask @ angular2-polyfills.js:365Zone.runTask @ angular2-polyfills.js:263drainMicroTaskQueue @ angular2-polyfills.js:482ZoneTask.invoke @ angular2-polyfills.js:434
angular2-polyfills.js:332 Error: Error: XHR error (404 Not Found) loading http://localhost:3000/node_modules/ng2-bs3-modal/ng2-bs3-modal(…)

Although I can see that node_modules\ng2-bs3-modal is existing.

What's wrong here?

Answer 1

You need to configure SystemJS to load right files from the library.

You could try the following configuration:

<script>
  System.configure({
    map: {
      'ng2-bs3-modal': 'node_modules/ng2-bs3-modal'
    },
    packages: {
      'ng2-bs3-modal': {
        format: 'register',
        defaultExtension: 'js'
      }
    }
  });
  (...)
</script>