如何在angular 2项目中使用bower构件_Angular_Typescript_Components_Bower_Typescript Typings

如何在angular 2项目中使用bower构件

angular typescript

如何在angular 2项目中使用bower构件,angular,typescript,components,bower,typescript-typings,Angular,Typescript,Components,Bower,Typescript Typings,我是角2的初学者。Angular 2项目使用npm包，我们可以在Angular 2项目中使用它们，只需导入如下内容 import { FormsModule } from '@angular/forms'; <head> <meta charset="utf-8"> <title>TestApp</title> <base href="/"> <link rel="import" href="./assets/p

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

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

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

此外，我们还可以使用

package.json

文件导入和安装npm包

但问题是我必须在angular 2项目中导入

bower

组件。这是有关安装的链接，以及

bower组件的使用指南

（）

我将bower组件复制到项目中的assets文件夹中，并尝试在我的

index.html

中导入该bower组件，如下所示

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

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

但它给出了以下错误

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)

zone.js:388未处理的承诺拒绝：模板分析错误：
“px收件箱”不是已知元素：
1.如果“px收件箱”是一个角度组件，则验证它是否是此模块的一部分。
2.如果“px inbox”是一个Web组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到此组件的“@NgModule.schemas”以抑制此消息。("
[错误->]我想你在找这样的东西：
schemas: [CUSTOM_ELEMENTS_SCHEMA]

在您的@NgModule

webcomponents-lite.js polyfill是先决条件
在index.html中添加以下内容
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>

您可以添加到JSFIDLE中吗？