如何在 Angular 2 项目中使用凉亭组件答案

【问题标题】：How to use a bower component in a angular 2 Project如何在 Angular 2 项目中使用凉亭组件
【发布时间】：2017-04-21 21:57:23
【问题描述】：

我是 Angular 2 的初学者。Angular 2 项目使用 npm 包，我们可以在 Angular 2 项目中使用它们，只需如下导入即可

import { FormsModule } from '@angular/forms';

另外，我们可以使用 package.json 文件导入和安装 npm 包。

但问题是我必须在我的 Angular 2 项目中导入 bower 组件。这是bower component 的安装链接和使用指南 (https://www.predix-ui.com/?show=getting_started&type=local)

我将 bower 组件复制到项目中的 assets 文件夹中，并尝试在我的 index.html 中导入该 bower 组件，如下所示

<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 中，如下所示。

<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>

但随后出现以下错误。

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)

现在我对如何在我的项目中使用它们感到困惑。请给我一个提示。

谢谢

【问题讨论】：

可以在jsfiddle中添加吗？

标签： angular typescript components bower typescript-typings

【解决方案1】：

我猜你正在寻找这样的东西：

schemas: [CUSTOM_ELEMENTS_SCHEMA]

在您的@NgModule内

Plunker Example

【讨论】：

【解决方案2】：

webcomponents-lite.js polyfill 是先决条件according to the readme of px-spinner 。

在 index.html 中添加以下内容

<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>

【讨论】：