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

Question

我决定试用 angular2，并且在扩展 angular.io（alpha 44）提供的 quickstart in typescript 的同时，一直很享受使用它的乐趣。但是我似乎遇到了麻烦，我很难导入通过节点获得的新模块，更具体地说是 ng2-bootstrap 中的工具提示。我似乎无法 "get" quickstart 项目是如何一起工作的，即使我已经阅读了 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' 文件夹中查找，而在使用导入时它不会为 angular 组件执行此操作，为什么？谁能帮我理解事物是如何联系在一起的，以及我不理解的地方？

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

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

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

Answer 2

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

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

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

希望对您有所帮助，如果没有，请见谅，我也是 angular2 的新手。

Answer 3

过了一会儿我又回到这个问题上，发现了这个：https://github.com/valor-software/ng2-bootstrap/issues/50#issuecomment-165448962

link 之后将展示如何在 angular2-beta0 快速入门中导入 ng2-bootstrap（或其他 npm 模块）。

Answer 4

如果您直接在浏览器中打开 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 开始，然后安装 bootstrap 和 'npm install ng2-bootstrap --save'，这应该是您的配置：

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

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

Importing external components into angular2 quickstart project with typescript and npm

import

typescript

systemjs

angular