Question

我决定尝试使用angular2，并且在使用angular.io（alpha 44）提供的quickstart in typescript扩展时，一直喜欢玩它。然而，我似乎遇到了障碍，我很难导入我通过节点获得的新模块，更具体地说是ng2-bootstrap中的工具提示。我似乎无法“了解”快速入门项目如何工作，即使我已经阅读了systemjs，并试图修补自己。我尝试了各种方法，但似乎总是碰到某个墙。

我通过执行以下操作导入了ng2-bootstrap：

npm i ng2-bootstrap --save

然后在app.ts中使用导入和引用：

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

然而，它继续查看'src'文件夹，它在使用导入时不会对角度组件执行，为什么？任何人都可以帮助我理解事物是如何联系到的，以及我不理解的事情？

我在浏览器控制台中遇到的错误是：

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

Answer 1

一段时间后我回到了这个问题，发现了这个问题：https://github.com/valor-software/ng2-bootstrap/issues/50#issuecomment-165448962

以下链接将显示如何在angular2-beta0快速入门中导入ng2-bootstrap（或其他npm模块）。

Answer 2

文件"../../node_modules/ng2-bootstrap/ng2-bootstrap.d.ts需要declare module 'ng2-bootstrap'如果没有，那么import {tooltip} from 'ng2-bootstrap'将是编译器错误（尽管您仍然可能获得有效的JS）。

Answer 3

如果您直接在浏览器中打开http://127.0.0.1:8080/src/ng2-bootstrap，您会发现它不是有效的javascript文件。根据项目中的路径，您可能会收到40x HTTP错误或index.html的内容。

因此，当 SystemJS 尝试加载ng2-bootstrap.js时，会获取空文件或错误（html）内容并显示以下错误消息：

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

要解决此问题，您需要告诉SystemJS如何加载ng2-bootstrap.js。

如果你从angular2 quickstart开始，然后使用＆nbsp安装ng2-bootstrap --save＆＃39;安装bootstrap，这应该是你的配置：

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"
    }
});

Answer 4

我昨天导入http模块遇到了类似的问题，只需手动添加到我的index.html：

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

（当然你需要用你的模块替换http.dev.js）

希望它有所帮助，对不起，如果没有，我也是angular2的新手。

使用typescript和npm将外部组件导入angular2 quickstart项目

4 个答案: