Import-Direktive in ionic2 - NG2-qrcode

Question

ich den NG2-qrcode in meinem Test ionic2 app versucht, aber das fand nie die Richtlinie, folgen Sie der ionic serve Ausgabe:

serve /?restart=454981 (www/index.html) serve /cordova.js (mocked) serve /build/js/es6-shim.min.js serve /build/js/Reflect.js serve /build/js/zone.js serve /build/js/app.bundle.js serve /build/css/app.md.css serve /build/app.html serve /build/pages/page1/page1.html 0 045123 log Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode. 1 045125 warn Native: tried calling StatusBar.styleDefault, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator 2 045159 group
EXCEPTION: Error: Uncaught (in promise): No Directive annotation found on QRCodeComponent 3 045160 error EXCEPTION: Error: Uncaught (in promise): No Directive annotation found on QRCodeComponent 4
045160 error STACKTRACE: 5 045161 error
resolvePromise@http://localhost:8100/build/js/zone.js:538:32 resolvePromise@http://localhost:8100/build/js/zone.js:523:18 scheduleResolveOrReject/<@http://localhost:8100/build/js/zone.js:571:18 Zonehttp://localhost:8100/build/js/zone.js:356:24 NgZoneImpl/this.inner<.onInvokeTask@http://localhost:8100/build/js/app.bundle.js:35178:32 Zonehttp://localhost:8100/build/js/zone.js:355:24 Zonehttp://localhost:8100/build/js/zone.js:256:29 drainMicroTaskQueue@http://localhost:8100/build/js/zone.js:474:26 ZoneTask/this.invoke@http://localhost:8100/build/js/zone.js:426:22

6 045161 groupEnd 7 045162 error Unhandled Promise rejection:, No Directive annotation found on QRCodeComponent, ; Zone:, angular, ; Task:, Promise.then, ; Value:, [object Object]

ich die folgen readme auf GitHub und zu tun:

npm install ng2-qrcode

eine Klasse mit Komponente Anmerkung erstellen:

import { Component } from '@angular/core'; 
import { NavController, NavParams } from 'ionic-angular'; 
import {QRCodeComponent} from 'ng2-qrcode' 

@Component({ 
    templateUrl: 'build/pages/page1/page1.html', 
    directives: [QRCodeComponent], 
}) 
export class Page1 
{ 
    constructor(private navCtrl: NavController) { } 
} 

Und legte den Tag in Vorlage build/pages/Seite1/page1.html:

<qrcode qrdata="'My QR code data string'" size="256" level="'M'"></qrcode> 

Aber ich diesen Fehler, was ist falsch? Ist schwer, finde Ionic2 Erklärungen oder Dokumentationen und ich bin sehr Anfänger in Ionic2 und Typoskript.

Answer 1

folge ich der Lösung von @yahyaKacem in Frage „mport QRCode with typescript import“, hier ist ein plunker mit einem Beispiel.

Ich teste nicht die letzte Version, aber vielleicht eine neuere Version wird funktionieren (existieren eine Zusammenführung in Bezug auf dieses Problem).

Answer 2

Für diejenigen, denen der ursprüngliche ng2-qrcode gefallen hat, habe ich ng2-qrcode umgestaltet, damit er mit Ionic3 (und Angular4 +) funktioniert. anglex-qrcode ist im Grunde ein Drop-in-Ersatz für ng2-QRcode, der in TypeScript mit den gleichen APIs plus AOT Compilation und Webpack Bundling geschrieben wurde.

Die Repo angularx-qrcode ist hier: https://github.com/Cordobo/angularx-qrcode

Lassen Sie mich wissen, wenn dies für Sie arbeitet.