The module "ng-particles" does not have a Container component available for export

I have integrated ng-particles into my Angular project by installing it with npm i ng-particles and adding
app.ts

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

  id = "tsparticles";

  /* Using a remote URL or JavaScript object for configuration */
  particlesUrl = "http://foo.bar/particles.json";

  /* Configuring various particle options */
  particlesOptions = {
    // Particle option values
  };

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

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

    // Adding custom presets or shapes here
  }
}

app.module.ts

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

@NgModule({
    declarations: [
        /* AppComponent */
    ],
    imports: [
        /* other imports */ NgParticlesModule /* Importing NgParticlesModule */
    ],
    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",

Following the instructions from https://www.npmjs.com/package/ng-particles, I encountered multiple errors while running https://i.stack.imgur.com/tgWdH.png

https://i.stack.imgur.com/ibgrO.png

What am I missing?

Providing version details https://i.stack.imgur.com/6gRXU.png

Answer №1

Each project may have its variations, but in my case simply having ng-particles listed in my package.json did not automatically install tsparticles (which is a peer dependency with the type Container).

To resolve this issue, I manually installed tsparticles using the command npm i tsparticles --save.

Versions:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Load the page's content gradually, without needing to wait for all the content to be fully loaded

I am facing an issue with a webpage that displays 10 different items, each of which has a slow loading time. Currently, the entire page waits for all 10 items to fully load before displaying anything. I am interested in finding out if it is feasible to sh ...

From HTML to Python to Serial with WebIOPi

I am facing a dilemma and seeking help. Thank you in advance for any guidance! My project involves mounting a raspberry pi 2 b+ on an RC Crawler rover, utilizing WebIOPi for the task. However, I am encountering challenges and unable to find useful resourc ...

Support for function calls is not available in Typescript version 2.1.5

I am encountering an issue with my ngrx reducer function: export const raceReducer: ActionReducer<IRace> = ( state: IRace = new Race(), action?: Action ) => { switch ( action.type ) { case RaceActions.ADD_OLP: return ngrxStateUpdater ...

How can I access a PHP variable from an external .php file within a JavaScript script?

I have recently implemented a JavaScript code called "upload.js" for uploading files to my server: function beginUpload(){ document.getElementById('upload_form').style.visibility = 'hidden'; return true; } function endUpload(s ...

The value returned by EntityRecognizer.resolveTime is considered as 'undefined'

In my bot's waterfall dialog, I am utilizing the LuisRecognizer.recognize() method to detect datetimeV2 entities and EntityRecognizer.resolveTime() to process the response. Here is an example of how I have implemented it: builder.LuisRecognizer.recog ...

`I'm encountering issues when trying to pass an array through localStorage into a new array`

This is a complex and detailed question that I am struggling to find a solution for. Despite using deprecated mysql due to hosting limitations, the problem lies elsewhere. Part 1 involves dataLoader.php, which queries the database and retrieves posx and p ...

Achieving CSS Buttons That Change to Green When Clicked and STAY Green

I've been tasked with working on a front-end project for a website that involves buttons changing color when clicked and staying that color. Here is the CSS <style> code I have written for these specific buttons: .button { background-color ...

Creating a Custom FlatList Content Container with React Native

Is it possible to customize FlatList items with a custom component? I want to create a setup where my FlatList items are encapsulated within a custom component similar to the following: <ScrollView pt={8} px={16} pb={128} > <Card e ...

Struggling to identify the error while utilizing Jasmine's throwError function

I am relatively new to using Jasmine and have been experimenting with the toThrowError() function. However, I can't seem to get my test to pass successfully. In one of my functions, I purposely throw an error: test.service.ts test(list:{}){ if ...

Customizing the like button functionality for individual elements, with the ability to unlike, utilizing Angular

I am looking to implement a Like button feature that increments the counter when clicked once, and decrements it on another click. I have multiple elements with the like button and I want them to function independently from each other. Please note that ...

Add the URL link according to the specific domain name

I am looking for a way to attach additional URL parameters to any links that contain example.com on a webpage. The current script I have only works if the link does not already have parameters attached to it. <script> document.body.innerHTML = d ...

Extract the content of an element and incorporate it into a script (AddThis)

HTML: <div id="file-section"> <div class="middle"> <p class="description"> Lorem ipsum... </p> </div> </div> jQuery: var share_on_addthis = { description: $('#file-section ...

Is there a way to effectively alter an object that has been assigned in a separate file?

Seeking Assistance: I am facing an issue in my current project where I need to store a javascript object in an external file and then export it using module.exports. The challenge now is that I want another file to be able to modify a specific value withi ...

Azure Function responding with a 401 error code upon passing parameters through a proxy

I have a situation where I am working with an Angular service that includes a GET request with parameters currentPage and postsPerPage. In my efforts to pass these parameters to an Azure function, I came across a tutorial advising me to set up proxies. Wh ...

Display information from a specific identifier in a modal popup window after clicking a button using PHP and MySQL

When a button is clicked on my website, a popup window appears using modal functionality. The issue I am facing is not being able to retrieve the correct data based on the id of the button. Below is the HTML table code snippet: <tbody> <?php $cou ...

Guide to creating standalone Express middleware that can interact with the raw request body

Can anyone help me with writing an Express middleware that can access the raw request body without affecting other handlers or middlewares? I want to achieve something like this: const middleware = [ express.raw({ type: '*/*' }), (req, res, n ...

Ways to incorporate an external JavaScript file into Angular and execute it within an Angular application

Imagine you have a file called index.js containing a function expression: $scope.submit = function() { if ($scope.username && $scope.password) { var user = $scope.username; var pass = $scope.password; if (pass == "admin" && user ...

Capturing the dynamic server response with nested JSON structures

I am in the process of creating a dynamic data-binding function named assemble that requires two input parameters: server response (JSON) - nested JSON object. instruction set (JSON) - a configuration object that dictates the binding. The Issue: The cur ...

Ways to specify the default value for a component

A sample of my custom component code (Amount.tsx) is shown below: const Price = ({ price, prevPrice }) => { return ( <div className="product-amount"> <div className="price"> {prevPrice ? (<del class ...

Angular: Enable function to await Observable completion before returning result

I require assistance with the user function below: getUser(uuid: string): Observable<WowUserDataModel> { let user: WowUserDataModel = { login: null, userUuid: uuid, firstName: null, lastName: null, displayName: nul ...