使用angular-cli时如何添加第三方库？-Java 学习之路

我想尝试使用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 .

这导致Web浏览器中出现错误消息 GET http://localhost:4200/ng2-material/all 404 (Not Found) ，我无法弄清楚如何摆脱它 .

angular-cli似乎正在做一些事情来创建一个 dist 文件夹，其中index.html中使用的一些节点模块最终进入，但是我没有配置't see where or how that' .

2 回答

13
[EDIT 29/09/2016] 现在angular-cli正在使用webpack iso system.js，这个答案在angular-cli wiki上并没有't make a lot of sense anymore. Check the pages ' 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>
```
最后重启服务器 .

没有使用角度材料测试它，但你明白了 .
回复于 2024-05-02T09:47:04+08:00

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

回复于 2024-05-02T09:47:04+08:00

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

2 回答

相关问题