2016-08-03 38 views
2

我試圖用NG2-QR碼在我的測試ionic2的應用程序,但是這從來沒有發現的指令,按照ionic serve輸出:Import指令 - NG2-QR碼

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
[email protected]http://localhost:8100/build/js/zone.js:538:32 [email protected]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<[email protected]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 [email protected]http://localhost:8100/build/js/zone.js:474:26 ZoneTask/[email protected]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]

我按照readme在GitHub上做:

npm install ng2-qrcode

創建具有成分標註A類:

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

,放在模板構建/頁/第1頁/ page1.html標籤:

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

但我發現了這個錯誤,什麼是錯的?很難找到Ionic2解釋或文件,我非常喜歡Ionic2和打字稿。

+1

您是否找到了解決方案?我有同樣的問題 – victorxiv

+0

是的,請參閱下面的解決方案。 – Jroger

回答

0

對於那些yho也喜歡原始的ng2-qrcode,我重構了ng2-qrcode使它與Ionic3(和Angular4 +)一起工作。 angularx-qrcode基本上是用TypeScript編寫的ng2-qrcode的替代品,具有相同的API以及AOT編譯和webpack捆綁。

回購angularx,QRCode的是在這裏: https://github.com/Cordobo/angularx-qrcode

讓我知道,如果這對你的作品。