2016-12-07 4 views
1

ich Anfänger bin Winkel 2. Winkel 2 Projektpakete Verwendung npm und wir können sie in Winkel 2 Projekte verwenden, indem Sie einfach als auchWie ein Bower Komponente in einem Winkel 2 Projekt verwenden

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

Import folgt, Wir können npm-Pakete mit der Datei package.json importieren und installieren.

Aber das Problem ist, dass ich bower Komponente in meinem eckigen 2 Projekt importieren muss. dies ist der Link für die Installation und Richtlinien für die Verwendung, die bower component (https://www.predix-ui.com/?show=getting_started&type=local)

I Bower Komponenten in Assets Ordner in meinem Projekt kopiert und versucht, diese Bower Komponente in meinem index.html zu importieren als

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

Dann habe ich versucht, sie in meiner app.component.html Datei zu verwenden, die in meinem src/app wie folgt ist.

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

aber dann gibt es den folgenden Fehler.

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"): [email protected]: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"): [email protected]: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) 

Jetzt bin ich verwirrt darüber, wie sie in meinem Projekt zu verwenden. Bitte gib mir einen Hinweis.

Dank

+0

können Sie in jsfiddle hinzufügen? –

Antwort

3

Ich denke, Sie etwas wie folgt aussehen:

schemas: [CUSTOM_ELEMENTS_SCHEMA] 

in Ihrem @NgModule

Plunker Example

+0

Vielen Dank. Es funktioniert jetzt. –

0

WebComponents-lite.js polyfill ist Voraussetzung according to the readme of px-spinner.

Fügen Sie folgende in index.html

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