Search code examples
importtypescriptangularsystemjs

Importing external components into angular2 quickstart project with typescript and npm


I decided to try out angular2, and have been enjoying playing around with it while expanding upon the quickstart in typescript provided by angular.io (alpha 44). However I seem to have hit a snag, I am having a hard time importing new modules I got through node, more specifically the tooltip in ng2-bootstrap. I just can't seem to "get" how the quickstart project all works togheter, even if I have read up on systemjs, and tried tinkering around myself. I have tried various approach but always seem to hit a wall somewhere.

I imported ng2-bootstrap though by doing:

npm i ng2-bootstrap --save

Followed by using an import and reference in the app.ts:

/// <reference path="../../node_modules/ng2-bootstrap/ng2-bootstrap.d.ts"/>
import {tooltip} from 'ng2-bootstrap'

However it keeps looking in the 'src' folder which it does not do for the angular component when using import, why? Could anyone help me understand how things are linked togheter, and what I am not understanding?

The error I get in the browser console is:

Failed to load resource: the server responded with a status of 404 (Not Found) http://127.0.0.1:8080/src/ng2-bootstrap

Solution

  • I came back to this issue after a while, and found this: https://github.com/valor-software/ng2-bootstrap/issues/50#issuecomment-165448962

    Following the link will show how to import ng2-bootstrap (or other npm modules) in the angular2-beta0 quickstart.