2
votes

I trying use the ng2-qrcode in my test ionic2 app, but this never found the directive, follow the ionic serve output:

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]

I follow the readme on GitHub and do:

npm install ng2-qrcode

Create a Class with component annotation:

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

And put the tag in template build/pages/page1/page1.html:

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

But I'm getting this error, what is wrong? Is hard do find Ionic2 explanations or documentations and I'm very beginner in Ionic2 and typescript.

2
have you found the solution? I have the same problemvictorxiv
yes, see the solution below.Jroger

2 Answers

1
votes

I follow the solution from @yahyaKacem in issue "mport QRCode with typescript import", here's a plunker with an example.

I dont test the last version, but maybe a newer version will work ( exist a merge related to this issue ).

0
votes

For those who liked the original ng2-qrcode as well, I refactored ng2-qrcode to make it work with Ionic3 (and Angular4+). angularx-qrcode is basically a drop-in-replacement for ng2-qrcode written in TypeScript with the same APIs plus AOT compilation and webpack bundling.

The Repo angularx-qrcode is here: https://github.com/Cordobo/angularx-qrcode

Let me know, if this works for you.