Uncaught Error: Could not compile 'AboutPage' because it is not a component.(…)

[thomastthai]

System Setup Cordova CLI: 6.3.1 Ionic Framework Version: 2.0.0-rc.1 Ionic CLI Version: 2.1.4 Ionic App Lib Version: 2.1.2 Ionic App Scripts Version: 0.0.36 OS: Node Version: v6.9.1

Installation of ng2-qrcode was done with: npm install ng2-qcode

Error I'm getting from the browser debug console:

Uncaught Error: Could not compile 'AboutPage' because it is not a component.(…)

That error goes away if I remove the @Directive section. Error from CLI:

[14:54:07] tslint: C:/Users/Thomas/ionic2/app/src/pages/about/about.ts, line: 5 Unused import: 'QRCodeComponent'

   L4:  import { Component, Directive } from '@angular/core';
   L5:  import { QRCodeComponent } from 'ng2-qrcode';
   L6:  import { PopoverController } from 'ionic-angular';

[14:54:08] lint finished in 7.18 s

With the latest Angular and Ionic 2 release and changes, I made some changes in about.ts with directives section.

about.ts

//import { Component } from '@angular/core';
// next two lines are for qrcode
//import {Component, Directive, OnInit} from '@angular/core';
import { Component, Directive } from '@angular/core';
import { QRCodeComponent } from 'ng2-qrcode';
import { PopoverController } from 'ionic-angular';

import { PopoverPage } from '../about-popover/about-popover';

@Component({
  //directives: [QRCodeComponent],
  selector: 'page-about',
  templateUrl: 'about.html'
})

// qrcode
@Directive({
  selector:   "[QRCodeComponent]"
})

export class AboutPage {

  // for qrcode
  public qrcodeImg: any;
  public qrdata: string = "Test QR Info";
  public size: number = 300;
  public level: string = 'H';

  conferenceDate = '2047-05-17';

  constructor(public popoverCtrl: PopoverController) { 
    //this.qrcodeImg = 'Test Code String';
  }

  presentPopover(event) {
    let popover = this.popoverCtrl.create(PopoverPage);
    popover.present({ ev: event });
  }
}

Relevant code in about.html template:

<div>
    <qrcode [qrdata]="'Test QR info'" [size]="200" [level]="'H'"></qrcode>
  </div>

[thomastthai]

I got rid of that console error by updating my app.module.ts file with the following lines:

...
import { QRCodeComponent } from 'ng2-qrcode';**

@NgModule({
  declarations: [
    ...
    QRCodeComponent**
  ],
  imports: [
    IonicModule.forRoot(ConferenceApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    ...
    QRCodeComponent**
  ],
  providers: [ConferenceData, UserData, Storage]
})
export class AppModule {}

I still get the CLI warning:

[15:22:47] tslint: C:/Users/Thomas/ionic2/app/src/pages/about/about.ts, line: 5 Unused import: 'QRCodeComponent'

   L4:  import { Component, Directive } from '@angular/core';
   L5:  import { QRCodeComponent } from 'ng2-qrcode';
   L6:  import { PopoverController } from 'ionic-angular';

Now there is a new console error:

Uncaught TypeError: Class constructor InputMetadata cannot be invoked without 'new'

[ghost]

@thomastthai

This worked for me.. ItemDetailPage .ts import { Component } from '@angular/core'; import { NavController, NavParams } from 'ionic-angular'; import { Items } from '../../providers/providers'; import {QRCodeComponent} from 'ng2-qrcode'; @Component({ selector: 'page-item-detail', templateUrl: 'item-detail.html' }) export class ItemDetailPage { item: any; qrData:string; constructor( public navCtrl: NavController, navParams: NavParams, items: Items, ) { this.item = navParams.get('item') || items.defaultItem; this.qrData='id='+this.item.id; } item-detail.html <qrcode [qrdata]="qrData" [size]="100" [level]="'H'"></qrcode>