Cannot find name 'GlobalCompositeOperation'

While working with ng-lottie for animations. It is suddenly having build issues. Know more .

Hence, in search of alternatives I am trying ng-particles.

I have installed it and added the configs as per docs.

But, now I am getting Cannot find name 'GlobalCompositeOperation'

Package.json

{
"name": "ngrx-poc",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve --port 4202",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"dependencies": {
"@angular/animations": "~13.1.0",
"@angular/common": "~13.1.0",
"@angular/compiler": "~13.1.0",
"@angular/core": "~13.1.0",
"@angular/forms": "~13.1.0",
"@angular/localize": "~13.1.0",
"@angular/platform-browser": "~13.1.0",
"@angular/platform-browser-dynamic": "~13.1.0",
"@angular/router": "~13.1.0",
"@ng-bootstrap/ng-bootstrap": "^12.0.0",
"@ngrx/store": "^13.0.2",
"@popperjs/core": "^2.10.2",
"apexcharts": "^3.33.2",
"bootstrap": "^5.1.3",
"lottie-web": "^5.9.1",
"ng-apexcharts": "^1.7.0",
"ng-otp-input": "^1.8.5",
"ng-particles": "^2.43.1",
"ngx-lottie": "^8.0.1",
"ngx-toastr": "^14.2.1",
"rxjs": "~7.4.0",
"tslib": "^2.3.0",
"tsparticles": "^1.43.1",
"tsparticles-engine": "^2.0.0-beta.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "~13.1.2",
"@angular/cli": "~13.1.2",
"@angular/compiler-cli": "~13.1.0",
"@types/jasmine": "~3.10.0",
"@types/node": "^12.11.1",
"jasmine-core": "~3.10.0",
"karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.1.0",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "~1.7.0",
"typescript": "~4.5.2"
}
}



app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';


import { AppComponent } from './app.component';
import { StoreModule } from '@ngrx/store';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { BsDropdownComponent } from './components/bs-dropdown/bs-dropdown.component';
import { UserListComponent } from './components/user-list/user-list.component';
import { HttpClientModule } from '@angular/common/http';
import { ProductComponent } from './components/product/product.component';
import { addProductReducer } from './components/product/product.reducer';
import { ReactiveFormsModule } from '@angular/forms';
import { TopNavComponent } from './top-nav/top-nav.component';
import { ToasterComponent } from './components/toaster/toaster.component';
import { ToastrModule } from 'ngx-toastr';
import { ChartsApexComponent } from './components/charts-apex/charts-apex.component';
import { NgApexchartsModule } from 'ng-apexcharts';
import { OtpInputComponent } from './components/otp-input/otp-input.component';
import { NgOtpInputModule } from 'ng-otp-input';
import { NgxLottieComponentComponent } from './components/ngx-lottie-component/ngx-lottie-component.component';
import { LottieModule } from 'ngx-lottie';
import player from 'lottie-web';
import { CheckBootstrapComponent } from './components/check-bootstrap/check-bootstrap.component';
import { NgParticlesModule } from "ng-particles";

// lottie config
export function playerFactory() {
return player;
}


@NgModule({
declarations: [
AppComponent,
BsDropdownComponent,
UserListComponent,
ProductComponent,
TopNavComponent,
ToasterComponent,
ChartsApexComponent,
OtpInputComponent,
NgxLottieComponentComponent,
CheckBootstrapComponent,
],
imports: [
BrowserModule,
NgbModule,
HttpClientModule,
BrowserAnimationsModule,
StoreModule.forRoot({ product: addProductReducer }),
ReactiveFormsModule,
NgApexchartsModule,
NgOtpInputModule,
NgParticlesModule,
LottieModule.forRoot({ player: playerFactory }),
ToastrModule.forRoot({
preventDuplicates: true,
iconClasses: {
error: 'toast-error',
info: 'toast-info',
success: 'toast-success',
warning: 'toast-warning',
}
}), // ToastrModule added


],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}



App.ts

import { Component } from '@angular/core';
import { NgParticlesModule } from 'ng-particles';
import { ISourceOptions } from 'tsparticles';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
particlesOptions: ISourceOptions = {
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,
},
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.component.html

<ng-particles id="tsparticles" [options]="particlesOptions" ></ng-particles>


I don't know wheather the issue is of angular or it is related to Canvas.

Please suggest any working alternatives for ng-lottie or ng-particles

Continue reading...