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

回答1:

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.

回答2:

the file "../../node_modules/ng2-bootstrap/ng2-bootstrap.d.ts needs to have declare module 'ng2-bootstrap' If it doesn't then import {tooltip} from 'ng2-bootstrap' will be a compiler error (although you still might get valid JS).

回答3:

If you open http://127.0.0.1:8080/src/ng2-bootstrap directly in browser, you will see it is not a valid javascript file. Depending on paths in your project, either you get a 40x HTTP error or content of your index.html.

So, when SystemJS tries to load ng2-bootstrap.js, it gets an empty file or wrong (html) content and displays this error message:

"SyntaxError: expected expression, got '<'
    Evaluating http: //localhost:8080/ng2-bootstrap/ng2-bootstrap
    Error loading http: //localhost:8080/app/boot.js"

To fix that you need to tell SystemJS how to load ng2-bootstrap.js.

If you started from angular2 quickstart and then installed bootstrap with 'npm install ng2-bootstrap --save', this should be your config:

System.config({
    packages: {
        app: {
            format: 'register',
            defaultExtension: 'js'
        }
        "node_modules/ng2-bootstrap": {
            format: 'register',
            defaultExtension: 'js'
        }
    }
    paths: {
        "ng2-bootstrap/ng2-bootstrap":   "node_modules/ng2-bootstrap/ng2-bootstrap"
    }
});

回答4:

I had a similar problem with the import of the http-module yesterday and just had to add manually to my index.html:

<script src="../node_modules/angular2/bundles/http.dev.js"></script>

(of course you need to replace http.dev.js with your module)

Hope it helps, sorry if it doesn't, I'm new to angular2, too.

来源：https://stackoverflow.com/questions/34194792/importing-external-components-into-angular2-quickstart-project-with-typescript-a

标签

import

typescript

angular

systemjs