Upgrading to Angular 19: Error TS2304 - Cannot Find Name 'QRCodeModule'

Today, I upgraded to Angular 19, and I'm encountering an issue that I can't resolve.



"I installed version angularx-qrcode: "^19.0.0", and I'm getting an error message that I don't understand...

error TS2304: Cannot find name 'QRCodeModule'.
QRCodeModule,


I'll share all the relevant files with you.

package.json

"private": true,
"dependencies": {
"@amcharts/amcharts4": "^4.10.22",
"@angular/animations": "^19.2.0",
"@angular/common": "^19.2.0",
"@angular/compiler": "^19.2.0",
"@angular/core": "^19.2.0",
"@angular/forms": "^19.2.0",
"@angular/localize": "^19.2.0",
"@angular/platform-browser": "^19.2.0",
"@angular/platform-browser-dynamic": "^19.2.0",
"@angular/router": "^19.2.0",
"@fortawesome/angular-fontawesome": "^0.10.2",
"@fortawesome/fontawesome-free": "^6.4.0",
"@fortawesome/fontawesome-svg-core": "^6.1.0",
"@fortawesome/free-solid-svg-icons": "^6.1.0",
"@ng-idle/core": "^14.0.0",
"@ng-idle/keepalive": "^14.0.0",
"@ngneat/transloco": "^3.1.1",
"@ngxs/devtools-plugin": "^19.0.0",
"@ngxs/storage-plugin": "^19.0.0",
"@ngxs/store": "^19.0.0",
"angularx-qrcode": "^19.0.0",
"bootstrap": "^5.1.3",
"chokidar": "3.6.0",
"dompurify": "^3.2.4",
"esbuild": "^0.25.0",
"html2canvas": "^1.4.1",
"jspdf": "^3.0.0",
"ngx-bootstrap": "^19.0.2",
"ngx-cookie-service": "^19.1.2",
"ngx-extended-pdf-viewer": "^23.0.0-alpha.2",
"pdf-lib": "^1.17.1",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"typeface-nunito": "^1.1.13",
"zone.js": "~0.15.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "^19.2.0",
"@angular-eslint/builder": "^19.2.0",
"@angular-eslint/eslint-plugin": "^19.2.0",
"@angular-eslint/eslint-plugin-template": "^19.2.0",
"@angular-eslint/schematics": "^19.2.0",
"@angular-eslint/template-parser": "^19.2.0",
"@angular/cli": "^19.2.0",
"@angular/compiler-cli": "^19.2.0",
"@angular/language-service": "^19.2.0",
"@types/node": "^12.20.55",
"@typescript-eslint/eslint-plugin": "^5.35.1",
"@typescript-eslint/parser": "^5.35.1",
"eslint": "^8.0.0",
"jasmine-core": "~5.1.0",
"karma": "^6.4.0",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0",
"typescript": "^5.3.2"
}
}


signin.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SigninComponent } from './signin.component';
import { RouterModule } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { TranslocoModule } from '@ngneat/transloco';
import { SigninService } from './signin.service';
import { PipesModule } from 'src/shared/pipes/pipes.module';
import { LanguageSelectorModule } from 'src/shared/component/language-selector/language-selector.module';




@NgModule({
imports: [
CommonModule,
FormsModule,
RouterModule,
PipesModule,
TranslocoModule,
LanguageSelectorModule,
QRCodeModule,
],
declarations: [
SigninComponent,
],
providers: [
SigninService
]
})
export class SigninModule { }


template

<qrcode *ngIf="showQRCode" [qrdata]="keyUri" [width]="32" [errorCorrectionLevel]="'M'"
style="font-size: 5px;"></qrcode>
<qrcode *ngIf="!showQRCode" style="visibility: hidden" [qrdata]="keyUri" [width]="32"
[errorCorrectionLevel]="'M'" style="font-size: 5px;"></qrcode>


I thank you for your help and the time you dedicated to my problem.

Continue reading...