找不到名称 'GlobalCompositeOperation'

Question

在使用 ng-lottie 制作动画时。它突然出现构建问题。 Know more .

因此，为了寻找替代方案，我正在尝试 ng-particles。

我已经安装并按照文档添加了配置。

但是，现在我得到 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>

我不知道问题是 angular 还是与 Canvas 有关。

请为 ng-lottie 或 ng-particles

提出任何可行的替代方案

Answer 1

这是打字稿版本的问题，关于我的详细信息，您可以在此处查看：

https://github.com/matteobruni/tsparticles/issues/3853

找不到名称 'GlobalCompositeOperation'

Cannot find name 'GlobalCompositeOperation'

javascript

animation

typescript

angular