Angular 7 – Bibliotecas de QRCode não estão funcionando no meu projeto

Preciso usar o QRCode no meu projeto Angular 7, e fui atrás de algumas bibliotecas já existentes, mas nenhuma delas funcionou.

Utilizei as seguintes:

  • https://github.com/Cordobo/angularx-qrcode (O que testei por último)
  • https://github.com/PragmaticClub/ng2-qrcode
  • https://www.npmjs.com/package/angular-qrcode

No Youtube e nos tutoriais do Medium explicam a mesma coisa: Instalar, importar no App.Module e adicionar a tag no arquivo HTML.

Só que no meu projeto, não aparece o QRcode. De jeito nenhum. Já importei no módulo do componente e no componente, e nem isso funcionou.

Alguém saberia me dizer o que preciso configurar para que mostre o QRCode na página?

Abaixo está o meu código, que está igual ao dos tutoriais listados:

arquivo.html

<div id="print">   <qrcode [qrdata]="'A variavel vai aqui quando funcionar'" [size]="256" [level]="'M'"></qrcode> </div>

arquivo.component.ts

import { Component, OnInit, AfterViewInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; // import { QRCodeModule } from 'angularx-qrcode';  @Component({   selector: 'app-print-qr-body',   templateUrl: './print-qr-body.component.html',   styleUrls: ['./print-qr-body.component.css'] }) export class PrintQRBodyComponent implements OnInit, AfterViewInit {    protocolo: any;    constructor(     private route: ActivatedRoute,   ) {      this.protocolo = this.route.snapshot.params['protocolo'];   }    ngOnInit() {     // this.protocolo = this.route.snapshot.params['protocolo'];   }    ngAfterViewInit() {     let printContents = document.getElementById('print').innerHTML;     document.body.innerHTML = printContents;      // window.print();     // window.close();   }  }

app.module

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { HttpClientModule } from '@angular/common/http'; import { FormsModule } from '@angular/forms'; import { NgxBarcodeModule } from 'ngx-barcode'; import { NgxMaskModule, IConfig } from 'ngx-mask'; import { QRCodeModule } from 'angularx-qrcode';  import { AppComponent } from './app.component'; import { MenuComponent } from './menu/menu.component'; import { PrintBodyComponent } from './setor/print-body/print-body.component'; import { PrintQRBodyComponent } from './setor/print-qr-body/print-qr-body.component';  import { AppRoutingModule } from './app-routing.module'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations';  export let options: Partial<IConfig> | (() => Partial<IConfig>);  @NgModule({   declarations: [     AppComponent,     MenuComponent,     PrintBodyComponent,     PrintQRBodyComponent,   ],   imports: [     BrowserModule,     CommonModule,     AppRoutingModule,     HttpClientModule,     FormsModule,     BrowserAnimationsModule,     NgxBarcodeModule,     QRCodeModule,     NgxMaskModule.forRoot(options),   ],   providers: [   ],   bootstrap: [AppComponent] }) export class AppModule { }

Algumas fontes que consultei:

  • https://www.techiediaries.com/generate-qrcodes-angular/
  • https://www.youtube.com/watch?v=4bsrqHcb-hQ
  • https://medium.com/letsboot/create-qr-codes-with-ngx-qrcode2-33bf39a65022