使用angular-cli时如何添加第三方库？

Question

我想尝试使用 angular-cli (https://github.com/angular/angular-cli) and then use ng2-material (https://github.com/justindujardin/ng2-material) 为 UI 组件创建一个 Angular 2 应用程序。但我只是不明白我必须如何/在哪里包含 ng2-material 库才能使用它。

我用 ng new myproject 创建了一个项目，然后用 ng serve 启动了服务器并打开了运行正常的网页。下一步，我安装了 ng2-material 和 npm install ng2-material --save。然后我将 MATERIAL_PROVIDERS 添加到 angular 的 bootstrap 中，如下所示 https://github.com/AngularShowcase/angular2-seed-ng2-material/blob/master/app/bootstrap.ts.

这会导致 Web 浏览器中出现错误消息 GET http://localhost:4200/ng2-material/all 404 (Not Found)，我不知道如何摆脱它。

angular-cli 似乎正在做一些事情来创建一个 dist-文件夹，其中 index.html 中使用的一些节点模块最终位于其中，但我不看不到配置的位置或方式。

Answer 1

尝试像这样在 index.html 中配置 SystemJS：

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

Answer 2

[EDIT 29/09/2016] 现在 angular-cli 正在使用 webpack iso system.js，这个答案并没有太多意义意义了。检查 angular-cli wiki 上的页面“3d party lib installation' and 'global lib installation”。

[EDIT 10/05/2016] 现在在 angular cli wiki.

上对此进行了详细描述

这对我有用：

在 ember-cli-build.js 中，将依赖项添加到 vendorNpmFiles，例如

module.exports = function (defaults) {
  var app = new Angular2App(defaults, {
      vendorNpmFiles: [
          'a2-in-memory-web-api/web-api.js'
      ]
  });
  return app.toTree();
}

（其中 a2-in-memory-web-api/web-api.js 是我的 node_modules 文件夹中的一个文件）

在 index.html 中添加以下行：

<script src="vendor/a2-in-memory-web-api/web-api.js"></script>

最后你重启了你的服务器。

尚未使用 angular material 对其进行测试，但您明白了。

使用angular-cli时如何添加第三方库？

How to add a third party library when using angular-cli?

angular-material

angular-cli

angular