模块“ng-particles”没有导出成员“容器”答案

【问题标题】：Module '"ng-particles"' has no exported member 'Container'模块“ng-particles”没有导出成员“容器”
【发布时间】：2021-03-08 12:59:13
【问题描述】：

我想在我的 Angular 项目中使用 ng-particles，我已经使用 npm i ng-particles 安装了它并添加了
app.ts

import { Container, Main } from 'ng-particles';
export class AppComponent{

  id = "tsparticles";

  /* Starting from 1.19.0 you can use a remote url (AJAX request) to a JSON with the configuration */
  particlesUrl = "http://foo.bar/particles.json";

  /* or the classic JavaScript object */
  particlesOptions = {
    background: {
      color: {
        value: "#0d47a1"
      }
    },
    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: 40
        },
        push: {
          quantity: 4
        },
        repulse: {
          distance: 200,
          duration: 0.4
        }
      }
    },
    particles: {
      color: {
        value: "#ffffff"
      },
      links: {
        color: "#ffffff",
        distance: 150,
        enable: true,
        opacity: 0.5,
        width: 1
      },
      collisions: {
        enable: true
      },
      move: {
        direction: "none",
        enable: true,
        outMode: "bounce",
        random: false,
        speed: 6,
        straight: false
      },
      number: {
        density: {
          enable: true,
          value_area: 800
        },
        value: 80
      },
      opacity: {
        value: 0.5
      },
      shape: {
        type: "circle"
      },
      size: {
        random: true,
        value: 5
      }
    },
    detectRetina: true
  };

  particlesLoaded(container: Container): void {
    console.log(container);
  }

  particlesInit(main: Main): void {
    console.log(main);

    // Starting from 1.19.0 you can add custom presets or shape here, using the current tsParticles instance (main)
  }
}

app.module.ts

import {NgParticlesModule} from "ng-particles";
import {NgModule} from "@angular/core";

@NgModule({
    declarations: [
        /* AppComponent */
    ],
    imports: [
        /* other imports */ NgParticlesModule /* NgParticlesModule is required*/
    ],
    providers: [],
    bootstrap: [
        /* AppComponent */
    ]
})
export class AppModule {
}

app.html

<ng-particles [id]="id" [options]="particlesOptions" (particlesLoaded)="particlesLoaded($event)" (particlesInit)="particlesInit($event)"></ng-particles>

package.json

"ng-particles": "^2.2.2",

我已经按照https://www.npmjs.com/package/ng-particles的步骤进行操作

但是我在运行时遇到了一堆我不知道的错误

我错过了什么吗？

请查找版本

【问题讨论】：

您使用的是哪个 Angular 和 TypeScript 版本？
嗨@Caelan，我已经在我的帖子中添加了，你能检查一下吗？
谢谢，问题在于 TypeScript 3.7 不支持 import type，我很快就会发布更新。抱歉，我没有用那个版本测试过
感谢您的更新，如果我将 typescript 版本降级到 3.6.0，是否支持？
是的，它将支持启动3.4。其实3.8下面的支持是不保证的

标签： javascript angular typescript animation particles.js

【解决方案1】：

这可能因每个项目而异，但对我而言，仅在 package.json 中包含 ng-particles 不会安装 tsparticles（它是具有 Container 类型的对等依赖项）。

手动安装tsparticles (npm i tsparticles --save) 为我解决了这个问题。

版本：

    "tsparticles": "1.36.0",
     "ng-particles": "2.19.0",
     ---- Other Dependencies for reference ---
      "typescript": "4.1.5",
      "@angular/*": "11.2.3",
     (Node: "14.18.0", NPM: 6.14.13)

【讨论】：