Question

我想尝试使用angular-cli（https://github.com/angular/angular-cli）创建一个Angular 2应用，然后使用ng2-material（https://github.com/justindujardin/ng2-material）来创建UI组件。但我只是不明白我必须包含ng2-material库以便使用它。

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

这会在网络浏览器中显示错误消息GET http://localhost:4200/ng2-material/all 404 (Not Found)，而我无法弄清楚如何摆脱它。

angular-cli似乎正在做一些事情来创建一个dist - 文件夹，其中index.html中使用的一些节点模块最终进入，但我看不到在哪里或如何配置

Answer 1

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

[编辑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>

最后重启服务器。

没有用棱角分明的材料进行测试，但你明白了。

Answer 2

尝试在SystemJS中配置index.html，如下所示：

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

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

2 个答案: