[BUG]: The component 'QRCodeComponent' appears in 'imports', but is not standalone and cannot be imported directly. It must be imported via an NgModule

[koddr]

Firstly, thanks @Cordobo for updating Angular to 18! 😉

My config:

• Angular: v18.1.2
• angularx-qrcode: v18.0.1

Problem:

I keep getting an error The component 'QRCodeComponent' appears in 'imports', but is not standalone and cannot be imported directly. It must be imported via an NgModule when using this library on my project.

Home standalone component:

// src/app/pages/home/home.component.ts

// ...

import { QRCodeComponent } from 'angularx-qrcode';

@Component({
  selector: 'app-home-page',
  standalone: true,
  imports: [
    QRCodeComponent, // <-- error line here
  ],
  templateUrl: './home.component.html',
})
export class HomePageComponent {
  // ...
}

In console:

✘ [ERROR] TS-992011: The component 'QRCodeComponent' appears in 'imports', but is not standalone and cannot be imported directly. 
It must be imported via an NgModule. [plugin angular-compiler]

    src/app/pages/home/home.component.ts:22:4:
      22 │     QRCodeComponent,
         ╵     ~~~~~~~~~~~~~~~

How to solve this error?

[Cordobo]

Hi @koddr

could you provide me a stripped-down repo with the source code? I cannot reproduce the issie locally.

[koddr]

@Cordobo no problem: https://stackblitz.com/edit/stackblitz-starters-j2rj6i?file=src%2Fmain.ts

[koddr]

@Cordobo any updates about this bug? 😉

[Cordobo]

Hi @koddr

try importing QRCodeModule instead of QRCodeComponent, that worked for me in your stackblitz, here is an updated version https://stackblitz.com/edit/stackblitz-starters-pm9nfu?file=tsconfig.json,src%2Fmain.ts

HTH

[koddr]

@Cordobo okay, it works.

The only question left is: maybe the logical name for standalone components (starting from modern Angular 18+) will be QRCodeComponent instead of QRCodeModule? Perhaps in future releases such a name would be the best solution so that there would be no issues like this one 😉

[Cordobo]

@koddr you`re welcome!

I'm with you, this lib should export an (additional) component. As it's open source software, why not give it a try?