Angular 16 NgxQRCodeModule is not compatible with Angular Ivy

[raulnoz]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[X ] Feature request
[ ] Documentation issue or request

Current behavior

the library (@techiediaries/ngx-qrcode) which declares NgxQRCodeModule is not compatible with Angular Ivy. Check if a newer version of the library is available

Expected behavior

NgxQRCodeModule is compatible with Angular Ivy

Minimal reproduction of the problem with instructions

Just build a project with angular 16 and above

What is the motivation / use case for changing the behavior?

Error during building

Environment

Angular version: 16 and above

Your version of `@techiediaries/ngx-qrcode`:
9.1.0

Browser:
- [X] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX

For Tooling issues:
- Node version: XX  v18.12.1
- Platform:  Windows

Others:
Windows 10

[wen9218]

Hi, I have got the same issue.

Can you please check?

[born2net]

having same issue, any updates on a fix? thank you.

[mw108]

Don't get your hopes to high that the library will be updated. I just switched to angular2-qrcode. Super easy migration.

https://www.positronx.io/angular-generate-or-create-qr-code-using-angular2-qrcode-package/

[kyryl-bogach]

Same issues here! The same happens for the package you suggested @mw108 😢

[mw108]

The same happens for the package you suggested @mw108 😢

Are you sure? The alternative package (angular2-qrcode) works fine for me with Angular 16.

https://stackblitz.com/edit/stackblitz-starters-coxmss?file=src%2Fmain.ts

[hschindler]

Hi,

changing tsconfig.json compilerOptions works for me on angular V15: "target":"es2022", "module":"esnext" and "lib": ["es2022", "dom"]

[izogfif]

changing tsconfig.json compilerOptions works for me on angular V15

This library works in Angular 15, but it doesn't work on Angular 16.

[mw108]

This library works in Angular 15, but it doesn't work on Angular 16.

It does: https://stackblitz.com/edit/stackblitz-starters-coxmss?file=src%2Fmain.ts

[izogfif]

This library works in Angular 15, but it doesn't work on Angular 16.

It does: https://stackblitz.com/edit/stackblitz-starters-coxmss?file=src%2Fmain.ts

The library @techiediaries/ngx-qrcode does not work with Angular 16. I get compilation failure when I try to import NgxQRCodeModule:

 node_modules/@techiediaries/ngx-qrcode/lib/qrcode.module.d.ts:1:22
    1 export declare class NgxQRCodeModule {
                           ~~~~~~~~~~~~~~~

 This likely means that the library (@techiediaries/ngx-qrcode) which declares NgxQRCodeModule is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

Were you able to make it work? If yes, how?

[mw108]

Ok, nevermind. I assumed you meant the angular2-qrcode library. Check my answer above: https://github.com/techiediaries/ngx-qrcode/issues/103#issuecomment-1629195205

[izogfif]

Ok, nevermind. I assumed you meant the angular2-qrcode library. Check my answer above: #103 (comment)

Weird, when I try to import QRCodeModule from angular2-qrcode inside @NgModule({ imports: [QRCodeModule]}) export class MyModule {}, I get exactly the same issue as with @techiediaries/ngx-qrcode:

  node_modules/angular2-qrcode/lib/index.d.ts:18:22
    18 export declare class QRCodeModule {
                            ~~~~~~~~~~~~
    This likely means that the library (angular2-qrcode) which declares QRCodeModule is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

Does it mean that QRCodeModule can only be imported inside standalone component?

Besides, they have the Ivy support issue, too.

Update: moving QRCodeModule from imports to providers fixed compilation error, but now <qr-code> is just empty. In sources it's

<qr-code [value]="'www.positronx.io'"></qr-code>

but in browser (DOM) it's

<qr-code _ngcontent-ng-c2395826517=""></qr-code>

Update 2: using angularx-qrcode instead seems to be working.

[DevDianDankie]

just take these files in the repo -> projects/ngx-qrcode/src/lib -> and make your own component. one less npm package to then worry about