Angular – standalone component compatibility with LucideAngularModule.pick

[R-Bower]

Prerequisites

• Version: 0.219.0
• Are you running from source/main: No
• Are you using a released build: Yes
• Operating system: MacOS

Step to reproduce

1. Follow the installation guide on the npm page for lucide-angular.

2. Try to use with a standalone component.

import {Component} from "@angular/core"
import {Box, LucideAngularModule} from "lucide-angular"

@Component({
  imports: [LucideAngularModule.pick({Box})],
  selector: "test",
  standalone: true,
  template: ``,
})
export class TestComponent {}

Actual behavior

The code does not compile.

Compilation error:

TS2322: Type 'ModuleWithProviders ' is not assignable to type 'readonly any[] | Type '

Notes

The current import strategy is not compatible with Angular's standalone components.

[karsa-mistmere]

Thanks for the bug report, @R-Bower, I'm a bit busy at the moment, but I will get to this as soon as my time allows.

[Bonus2712]

hey, @karsa-mistmere has anything come up on this ticket yet? I want to use the Lucide icons in any case and also just in the combination with angular 16 and standalone components :)

[karsa-mistmere]

@R-Bower, @Bonus2712: This should now be resolved in the latest release https://github.com/lucide-icons/lucide/releases/tag/0.269.0

Sorry this took so long (especially seeing how simple the fix was). Let me know if you run into anything else.
I did consider making LucideAngularComponent standalone to begin with, but that would mean having to drop support for Angular 13.

[seangolob]

Hi @karsa-mistmere. I appreciate your work on this bug.

I am currently trying to get lucide-angular to work with standalone components as well. I have followed the steps to reproduce and I am still seeing errors in my project. I am using version 0.274.0

I am receiving these errors while running my app:

-NG2012: 'imports' contains a ModuleWithProviders value, likely the result of a 'Module.forRoot()'-style call. These calls are not used to configure components and are not valid in standalone component imports - consider importing them in the application bootstrap instead.

and

error TS2322: Type 'ModuleWithProviders<LucideAngularModule>' is not assignable to type 'readonly any[] | Type<any>'.

Please let me know if there is any other information that will help with your investigation. I would love to use standalone components and lucid-angular!

[karsa-mistmere]

Hey @seangolob,
The error you get is loud and clear: you cannot use a LucideAngularModule.pick({...}) style import. This is not specific to Lucide, it's how standalone components work.

As a workaround you can do either of the following:

1. import just LucideAngularModule, no pick() added and then either:

• use the LUCIDE_ICONS injection token to provide icons in your standalone component's providers list, see https://lucide.dev/guide/packages/lucide-angular#injecting-multiple-icon-providers
• pass LucideIconData objects directly as <lucide-icon [img]="HomeIcon" />

2. create a custom module that both imports and exports LucideIconModule, with your necessary picks added

(My preferred modus operandi is 1B)

[seangolob]

@karsa-mistmere Thank you for your guidance. I am new to the angular space and I am still getting my bearings straight. Thank you!