My goal is to incorporate particles.js into the home screen component of my project. I have successfully installed "npm install ng-particles" and "npm install tsparticles." However, even after serving and restarting the application, I am unable to resolve the issue. Despite the error message below, the project still runs on localhost with ng-serve. As a newcomer to TypeScript and Angular, I find it challenging to grasp the nature of this error.
Error: src/app/home/home.component.html:2:33 - error TS2322: Type '{ background: { color: { value: string; }; }; fpsLimit: number; interactivity: { detectsOn: string; events: { onClick: { enable: boolean; mode: string; }; onHover: { enable: boolean; mode: string; }; resize: boolean; }; modes: { ...; }; }; particles: { ...; }; detectRetina: boolean; }' is not assignable to type 'RecursivePartial<IOptions>'.
The types of 'interactivity.detectsOn' are incompatible between these types.
Type 'string' is not assignable to type '"canvas" | InteractivityDetect | "parent" | "window" | undefined'.
2 <Particles id="tsparticles" [options]="particlesOptions"></Particles>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/app/home/home.component.ts:6:16
6 templateUrl: './home.component.html',
~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component HomeComponent.
Home.component.html
<div class="particle-background">
<Particles id="tsparticles" [options]="particlesOptions"></Particles>
</div>
Home.component.ts
import { Component, OnInit } from '@angular/core';
import { NgParticlesModule } from 'ng-particles';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
particlesOptions = {
background: {
color: {
value: "white"
}
},
fpsLimit: 60,
interactivity: {
detectsOn: "canvas",
events: {
onClick: {
enable: true,
mode: "push"
},
onHover: {
enable: true,
mode: "repulse"
},
resize: true
},
modes: {
bubble: {
distance: 400,
duration: 2,
opacity: 0.8,
size: 30,
speed: 1
},
push: {
quantity: 4
},
repulse: {
distance: 100,
duration: 0.4
}
}
},
particles: {
color: {
value: "#a9a9a9"
},
links: {
color: "#a9a9a9",
distance: 200,
enable: true,
opacity: 0.7,
width: 1.5
},
collisions: {
enable: true
},
move: {
direction: "none",
enable: true,
outMode: "bounce",
random: false,
speed: 2,
straight: false
},
number: {
density: {
enable: true,
value_area: 800
},
value: 80
},
opacity: {
value: 1
},
shape: {
type: "diamond"
},
size: {
random: true,
value: 3
}
},
detectRetina: true
};
}
App.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ResumeComponent } from './resume/resume.component';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';
import { ProjectsComponent } from './projects/projects.component';
import { HomeComponent } from './home/home.component';
import { NgParticlesModule } from 'ng-particles';
@NgModule({
declarations: [
AppComponent,
ResumeComponent,
AboutComponent,
ContactComponent,
ProjectsComponent,
HomeComponent
],
imports: [
BrowserModule,
AppRoutingModule,
NgParticlesModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }