如何在Angle 2项目中使用Bower组件 [英] How to use a bower component in a angular 2 Project
问题描述
我是angular 2的初学者。Angular 2项目使用npm包，我们可以通过简单地按如下所示导入在angular 2项目中使用它们
I am beginner to angular 2. Angular 2 project use npm packages and we can use them in angular 2 projects by simply importing as follows
import { FormsModule } from '@angular/forms';
另外，我们可以使用 package.json 导入并安装npm软件包文件。
also, we can import and install npm packages using package.json file.
但是问题是我必须在我的angular 2项目中导入 bower 组件。
这是 bower组件
（ https://www.predix-ui.com/?show=getting_started&type=local ）
But the problem is I have to import bower component in my angular 2 project.
this is the link for installation and guideline for use that bower component
(https://www.predix-ui.com/?show=getting_started&type=local)
我将Bower组件复制到项目中的Assets文件夹中，并尝试将Bower组件导入到 index.html 中，如下所示
I copied the bower components into assets folder in my project and tried to import that bower component in my index.html as follows
<head>
<meta charset="utf-8">
<title>TestApp</title>
<base href="/">
<link rel="import" href="./assets/px-spinner/px-spinner.html" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
然后我尝试在我的 app.component.html中使用它们文件，该文件位于我的 src / app 中，如下所示。
Then I tried to use them in my app.component.html file which is in my src/app as follows.
<h1>
{{title}}
</h1>
<px-spinner>
<px-inbox height="100vh" list-items='[{"id":"1","title":"GT Vibration","subtitle":"Block 2","severity":"important","date":"2016-10-05T01:29"}]'>
// define or bind to your details view here
</px-inbox>
</px-spinner>
，但随后出现以下错误。
but then it gives the following error.
zone.js:388Unhandled Promise rejection: Template parse errors:
'px-inbox' is not a known element:
1. If 'px-inbox' is an Angular component, then verify that it is part of this module.
2. If 'px-inbox' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("
</h1>
<link rel="import" href="./assets/px-spinner/px-spinner.html" />
[ERROR ->]<px-inbox height="100vh" list-items='[{"id":"1","title":"GT Vibration","subtitle":"Block 2","severity"): AppComponent@4:0 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors:
'px-inbox' is not a known element:
1. If 'px-inbox' is an Angular component, then verify that it is part of this module.
2. If 'px-inbox' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("
</h1>
<link rel="import" href="./assets/px-spinner/px-spinner.html" />
[ERROR ->]<px-inbox height="100vh" list-items='[{"id":"1","title":"GT Vibration","subtitle":"Block 2","severity"): AppComponent@4:0
at TemplateParser.parse (http://127.0.0.1:4200/main.bundle.js:13787:19)
at RuntimeCompiler._compileTemplate (http://127.0.0.1:4200/main.bundle.js:32817:51)
at http://127.0.0.1:4200/main.bundle.js:32737:62
at Set.forEach (native)
at RuntimeCompiler._compileComponents (http://127.0.0.1:4200/main.bundle.js:32737:19)
at createResult (http://127.0.0.1:4200/main.bundle.js:32633:19)
at ZoneDelegate.invoke (http://127.0.0.1:4200/main.bundle.js:62681:26)
at Zone.run (http://127.0.0.1:4200/main.bundle.js:62563:43)
at http://127.0.0.1:4200/main.bundle.js:62951:57
at ZoneDelegate.invokeTask (http://127.0.0.1:4200/main.bundle.js:62714:35)
现在，我对如何在项目中使用它们感到困惑。请给我一个提示。
Now I am confused about how to use them in my project. Please give me a hint.
谢谢
推荐答案
我猜你正在寻找这样的东西：
I guess you're looking for something like this:
schemas: [CUSTOM_ELEMENTS_SCHEMA]
在您的 @NgModule
Plunker Example
这篇关于如何在Angle 2项目中使用Bower组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
