使用angular-cli时如何添加第三方库? [英] How to add a third party library when using angular-cli?
问题描述
我想尝试使用 angular-cli (https://github.com/angular/angular-cli) 然后使用 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 中使用的一些节点模块最终位于,但我看不到在哪里或这是如何配置的.
现在 angular-cli 正在使用 webpack iso system.js,这个答案没有有很多意义了.检查页面 '3d party lib installation' 和 '全局库安装'在angular-cli wiki上.>
现在在 angular cli wiki.
这对我有用:
在 ember-cli-build.js 中,您将依赖项添加到 vendorNpmFiles,例如
module.exports = 函数(默认值){var app = new Angular2App(defaults, {供应商Npm文件:['a2-in-memory-web-api/web-api.js']});返回 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>
最后重启服务器.
尚未使用有棱角的材料对其进行测试,但您明白了.
I wanted to try out creating an Angular 2 app with angular-cli (https://github.com/angular/angular-cli) and then use ng2-material (https://github.com/justindujardin/ng2-material) for UI components. But I just don't understand how / where I have to include the ng2-material library in order to use it.
I created a project with ng new myproject
then I started the server with ng serve
and opened the webpage which just worked out fine. Next step, I installed ng2-material with npm install ng2-material --save
. Then I added MATERIAL_PROVIDERS
to angular's bootstrap as is shown here https://github.com/AngularShowcase/angular2-seed-ng2-material/blob/master/app/bootstrap.ts.
This results in an error message GET http://localhost:4200/ng2-material/all 404 (Not Found)
in the web browser, and I just can't figure out how to get rid of it.
angular-cli seems to be doing something to create a dist
-folder where some of the node modules that are used in the index.html end up in, but I don't see where or how that's configured.
[EDIT 29/09/2016] Now that angular-cli is using webpack iso system.js, this answer doesn't make a lot of sense anymore. Check the pages '3d party lib installation' and 'global lib installation' on the angular-cli wiki.
[EDIT 10/05/2016] This is now described in full detail on the angular cli wiki.
This worked for me:
In the ember-cli-build.js, you add the dependency to the vendorNpmFiles, e.g.
module.exports = function (defaults) {
var app = new Angular2App(defaults, {
vendorNpmFiles: [
'a2-in-memory-web-api/web-api.js'
]
});
return app.toTree();
}
(where a2-in-memory-web-api/web-api.js is a file in my node_modules folder)
In the index.html you add the following line:
<script src="vendor/a2-in-memory-web-api/web-api.js"></script>
Finally you restart your server.
Haven't tested it with angular material but you get the idea.
这篇关于使用angular-cli时如何添加第三方库?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!