Skip to content

Bug Report: NgxParticlesComponent Not Working with Standalone Angular Components #119

@sarib-nasir

Description

@sarib-nasir

I'm using Angular standalone components with @tsparticles/angular and @tsparticles/engine. However, I’m encountering the following issues:

  1. NgxParticlesComponent is not standalone

When trying to use in a standalone component, Angular throws an error

The component 'NgxParticlesComponent' appears in 'imports', but is not standalone and cannot be imported directly. It must be imported via an NgModule.
Since standalone components do not use NgModule, this makes integration difficult.

  1. Type Error in particlesOptions

When assigning MoveDirection.bottom, ClickMode.push, or HoverMode.repulse to particlesOptions, TypeScript throws:
Type 'string' is not assignable to type 'number | "none" | MoveDirection | "bottom" | "bottomLeft" | "bottomRight" | "left" | "right" | "top" | "topLeft" | "topRight" | "outside" | "inside" | MoveDirectionAlt | undefined'.

this is another error i am receiving on importing Click Mode and Hover Mode
Image

Environment
Angular Version: 19
tsParticles Version: (latest)
Node.js Version: v20.17.0
Provide a standalone-compatible version of NgxParticlesComponent.
Improve TypeScript definitions to correctly infer enums in particlesOptions.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions