Open
Description
Details
Details
Description:
I'm encountering an error with particle rendering in an Angular 18 environment. Despite having the error, the particles are rendering, but it would be nicer not having that error
Error:
Steps to Reproduce:
Set up an Angular 18 project environment.
Integrate particle rendering functionality.
Environment:
Angular CLI: 18.0.2
Node: 18.19.33
TS 5.4.5
OS: macOS x64
Angular: 17.3.0
... animations, cdk, common, compiler, compiler-cli, core, forms
... material, platform-browser, platform-browser-dynamic, router
Package Version
@angular-devkit/[email protected]
@angular/[email protected]
@angular/[email protected]
@angular/[email protected]
@angular/[email protected]
@angular/[email protected]
@angular/[email protected]
@angular/[email protected]
@angular/[email protected]
@angular/[email protected]
@angular/[email protected]
@angular/[email protected]
@angular/[email protected]
Particle rendering library/version: @tsparticles/angular
Additional Information:
These are the libraries and versions used:
@tsparticles/[email protected]
@tsparticles/[email protected]
@tsparticles/[email protected]
My component:
import { AfterViewInit, Component, Inject, PLATFORM_ID } from '@angular/core';
import {
MoveDirection,
OutMode,
CollisionMode,
LimitMode,
DestroyType,
AnimationMode,
StartValueType,
InteractivityDetect,
DivType,
PixelMode,
Move,
} from '@tsparticles/engine';
import { NgParticlesService, NgxParticlesModule } from '@tsparticles/angular';
import { loadSlim } from '@tsparticles/slim';
import { isPlatformBrowser } from '@angular/common';
@Component({
selector: 'app-home',
standalone: true,
imports: [NgxParticlesModule],
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss'],
})
export class HomeComponent implements AfterViewInit {
id = 'tsparticles';
particlesOptions = {
autoPlay: true,
background: {
color: {
value: '#11294D',
},
opacity: 1,
},
clear: true,
delay: 0,
fullScreen: {
enable: true,
zIndex: 0,
},
detectRetina: true,
duration: 0,
fpsLimit: 120,
interactivity: {
detectsOn: InteractivityDetect.window,
events: {
onClick: {
enable: false,
mode: 'push',
},
onDiv: {
enable: false,
type: DivType.circle,
},
onHover: {
enable: true,
mode: 'bubble',
parallax: {
enable: false,
force: 2,
smooth: 10,
},
},
resize: {
delay: 0.5,
enable: true,
},
},
modes: {
trail: {
delay: 1,
pauseOnStop: false,
quantity: 1,
},
attract: {
distance: 200,
duration: 0.4,
easing: 'ease-out-quad',
factor: 1,
maxSpeed: 30,
speed: 0.3,
},
bounce: {
distance: 200,
},
bubble: {
distance: 400,
duration: 2,
mix: true,
opacity: 0.8,
color: {
value: '#ff0000',
},
size: 40,
divs: {
distance: 200,
duration: 0.4,
mix: false,
},
},
connect: {
distance: 80,
links: {
opacity: 0.5,
},
radius: 60,
},
grab: {
distance: 400,
links: {
blink: false,
consent: false,
opacity: 1,
},
},
push: {
default: true,
quantity: 4,
},
remove: {
quantity: 2,
},
repulse: {
distance: 200,
duration: 0.4,
factor: 100,
speed: 1,
maxSpeed: 30,
easing: 'ease-out-quad',
divs: {
distance: 200,
duration: 0.4,
factor: 100,
speed: 1,
maxSpeed: 30,
easing: 'ease-out-quad',
selectors: {},
},
},
slow: {
factor: 3,
radius: 200,
},
light: {
area: {
gradient: {
start: {
value: '#ffffff',
},
stop: {
value: '#000000',
},
},
radius: 1000,
},
shadow: {
color: {
value: '#000000',
},
length: 2000,
},
},
},
},
particles: {
bounce: {
horizontal: {
value: 1,
},
vertical: {
value: 1,
},
},
collisions: {
absorb: {
speed: 2,
},
bounce: {
horizontal: {
value: 1,
},
vertical: {
value: 1,
},
},
enable: false,
maxSpeed: 30,
mode: CollisionMode.bounce,
overlap: {
enable: true,
retries: 0,
},
},
color: {
value: '#f56e0f',
animation: {
h: {
count: 0,
enable: false,
speed: 1,
decay: 0,
delay: 0,
sync: true,
offset: 0,
},
s: {
count: 0,
enable: false,
speed: 1,
decay: 0,
delay: 0,
sync: true,
offset: 0,
},
l: {
count: 0,
enable: false,
speed: 1,
decay: 0,
delay: 0,
sync: true,
offset: 0,
},
},
},
effect: {
close: true,
fill: true,
},
move: {
angle: {
offset: 0,
value: 90,
},
attract: {
distance: 200,
enable: false,
rotate: {
x: 3000,
y: 3000,
},
},
center: {
x: 50,
y: 50,
mode: PixelMode.percent,
radius: 0,
},
decay: 0,
direction: MoveDirection.none,
drift: 0,
enable: true,
gravity: {
acceleration: 9.81,
enable: false,
inverse: false,
maxSpeed: 50,
},
path: {
clamp: true,
delay: {
value: 0,
},
enable: false,
},
outModes: {
default: OutMode.out,
},
random: false,
size: false,
speed: 5,
spin: {
acceleration: 0,
enable: false,
},
straight: false,
trail: {
enable: false,
length: 10,
fill: {},
},
vibrate: false,
warp: false,
},
number: {
density: {
enable: true,
width: 1920,
height: 1080,
},
limit: {
mode: LimitMode.delete,
value: 0,
},
value: 6,
},
opacity: {
value: {
min: 0.3,
max: 0.7,
},
animation: {
count: 0,
enable: false,
speed: 2,
decay: 0,
delay: 0,
sync: false,
mode: AnimationMode.auto,
startValue: StartValueType.random,
destroy: DestroyType.none,
},
},
reduceDuplicates: false,
shadow: {
blur: 0,
color: {
value: '#000',
},
enable: false,
offset: {
x: 0,
y: 0,
},
},
shape: {
close: true,
fill: true,
options: {
polygon: {
sides: 6,
},
},
type: 'polygon',
},
size: {
value: {
min: 100,
max: 150,
},
animation: {
count: 0,
enable: false,
speed: 3,
decay: 0,
delay: 0,
sync: false,
mode: AnimationMode.auto,
startValue: StartValueType.random,
destroy: DestroyType.none,
},
},
stroke: {
width: 0,
},
zIndex: {
value: 0,
opacityRate: 1,
sizeRate: 1,
velocityRate: 1,
},
destroy: {
bounds: {},
mode: 'none',
split: {
count: 1,
factor: {
value: 3,
},
rate: {
value: {
min: 4,
max: 9,
},
},
sizeOffset: true,
},
},
roll: {
darken: {
enable: false,
value: 0,
},
enable: false,
enlighten: {
enable: false,
value: 0,
},
mode: 'vertical',
speed: 25,
},
tilt: {
value: 0,
animation: {
enable: false,
speed: 0,
decay: 0,
sync: false,
},
direction: -90,
enable: false,
},
twinkle: {
lines: {
enable: false,
frequency: 0.05,
opacity: 1,
},
particles: {
enable: false,
frequency: 0.05,
opacity: 1,
},
},
wobble: {
distance: 5,
enable: false,
speed: {
angle: 50,
move: 10,
},
},
life: {
count: 0,
delay: {
value: 0,
sync: false,
},
duration: {
value: 0,
sync: false,
},
},
rotate: {
value: 0,
animation: {
enable: false,
speed: 0,
decay: 0,
sync: false,
},
direction: -90,
path: false,
},
orbit: {
animation: {
count: 0,
enable: false,
speed: 1,
decay: 0,
delay: 0,
sync: false,
},
enable: false,
opacity: 1,
rotation: {
value: 45,
},
width: 1,
},
links: {
blink: false,
color: {
value: '#ffffff',
},
consent: false,
distance: 200,
enable: false,
frequency: 1,
opacity: 1,
shadow: {
blur: 5,
color: {
value: '#000',
},
enable: false,
},
triangles: {
enable: false,
frequency: 1,
},
width: 2,
warp: false,
},
repulse: {
value: 0,
enabled: false,
distance: 1,
duration: 1,
factor: 1,
speed: 1,
},
},
pauseOnBlur: true,
pauseOnOutsideViewport: true,
smooth: false,
zLayers: 100,
name: 'Bubble',
motion: {
disable: false,
reduce: {
factor: 4,
value: true,
},
},
};
constructor(
private readonly ngParticlesService: NgParticlesService,
@Inject(PLATFORM_ID) private platformId: Object
) {}
ngAfterViewInit(): void {
if (isPlatformBrowser(this.platformId)) {
import('@tsparticles/angular').then(() => {
this.ngParticlesService.init(async (engine) => {
await loadSlim(engine);
});
});
}
}
}The HTML is just
<ngx-particles [id]="id" [options]="particlesOptions"></ngx-particles>Thanks in advance to anyone willing to help!