error TS2322 in Angular with error "Type 'string' is not assignable to type '"canvas"" when using ng-particles

Question

I am trying to have the particles.js in the home screen component. I have installed "npm install ng-particles" and "npm install tsparticles." After serving and restarting and comparing to other projects I cant seem to figure it out. Below is the error I receive, although it does still run on localhost when I ng-serve. I am pretty new to typescript and angular so I really don't understand the 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 { }

Answer 1

I finally figured out what was the problem.

There's a property that is not part of the Options object of tsparticles

You can see it here

/* omitted for brevity */
    modes: {
        bubble: {
            distance: 400,
            duration: 2,
            opacity: 0.8,
            size: 30,
            speed: 1 // this is the property to remove
        },
/* omitted for brevity */

But you can type the options variable of the Home component using the ISourceOptions type from tsparticles to avoid any other issue.

import { ISourceOptions } from 'tsparticles';

/* omitted for brevity */

options: ISourceOptions = {

Like this.

After all these changes everything builds fine, hope everything is good after that.