typescript - Import-direktiv i ionic2 - ng2-qrcode

Jag försöker använda ng2-qrcode i min test ionic2-app, men detta hittar aldrig direktivet, följ ionic serve-utdata:

servera /?restart=454981 (www/index.html) servera /cordova.js (mockad) servera /build/js/es6-shim.min.js servera /build/js/Reflect.js servera /build/js/zone.js servera /build/js/app.bundle.js servera /build/css/app.md.css servera /build/app.html servera /build/pages/page1/page1.html 0 045123 logga Angular 2 körs i utvecklingsläge. Anropa enableProdMode() för att aktivera produktionsläge. 1 045125 varning Native: försökte anropa StatusBar.styleDefault, men Cordova är inte tillgängligt. Se till att inkludera cordova.js eller kör på en enhet/simulator 2 045159 grupp
EXCEPTION: Fel: Okontrollerat (i promise): Ingen Directive-annotering hittades på QRCodeComponent 3 045160 fel EXCEPTION: Fel: Okontrollerat (i promise): Ingen Directive-annotering hittades på QRCodeComponent 4
045160 fel STACKTRACE: 5 045161 fel
resolvePromise@http://localhost:8100/build/js/zone. js:538:32 lösPromise@http://localhost:8100/build/js/zone.js:523:18 schemaläggLösEllerAvvisa/<@http://localhost:8100/build/js/zone.js:571:18 Zonhttp://localhost:8100/build/js/zone.js:356:24 NgZoneImpl/this.inner<.påInvokeUppgift@http://localhost:8100/build/js/app.bundle.js:35178:32 Zonhttp://localhost:8100/build/js/zone.js:355:24 Zonhttp://localhost:8100/build/js/zone.js:256:29 tömMikroUppgiftsKö@http://localhost:8100/build/js/zone.js:474:26 ZonUppgift/this.utför@http://localhost:8100/build/js/zone.js:426:22

6 045161 gruppSlut 7 045162 fel Ohanterat Promise-avvisande:, Ingen Direktiv-anteckning hittades på QRCodeComponent, ; Zon:, angular, ; Uppgift:, Promise.then, ; Värde:, [objekt Objekt]

Jag följer readme på GitHub och gör:

npm install ng2-qrcode

Skapa en klass med komponentanotering:

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 ) { }
}

Och sätt taggen i mallen build/pages/page1/page1.html:

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

Men jag får det här felet, vad är fel? Det är svårt att hitta förklaringar eller dokumentation för Ionic2 och jag är väldigt nybörjare på Ionic2 och TypeScript.

Svar #1

Jag följer lösningen från @yahyaKacem i ärendet "Importera QRCode med typescript import", här är ett plunker med ett exempel.

Jag testar inte den senaste versionen, men kanske en nyare version fungerar (det finns en sammanslagning relaterad till detta problem).

Svar #2

För de som också gillade den ursprungliga ng2-qrcode, har jag omarbetat ng2-qrcode för att få det att fungera med Ionic3 (och Angular4+). angularx-qrcode är i princip en drop-in-ersättning för ng2-qrcode skriven i TypeScript med samma API:er plus AOT-kompilering och webpack-buntning.

Repoet angularx-qrcode finns här: https://github.com/Cordobo/angularx-qrcode

Låt mig veta om detta fungerar för dig.