Just completed the upgrade of my Angular project from version 9 to version 12, but now encountering issues with a module that utilizes Plotly

Here is the content of my app module file. All components and imports are in their respective places as specified in the documentation:


        import { BrowserModule } from '@angular/platform-browser';
        import { NgModule } from '@angular/core';
        import * as PlotlyJS from 'plotly.js-dist';
        import { PlotlyModule } from 'angular-plotly.js';

        PlotlyModule.plotlyjs = PlotlyJS;

        import { AppComponent } from './app.component';

        @NgModule({
            declarations: [AppComponent],
            imports: [BrowserModule, PlotlyModule],
            providers: [],
            bootstrap: [AppComponent]
        })
        export class AppModule { }

Below is the error message I encountered in the console:


        main.ts:12 Error: Invalid PlotlyJS object. Please check https://github.com/plotly/angular-plotly.js#quick-start to see how to add PlotlyJS to your project.
        at new PlotlyModule (angular-plotly.js.js:520)
        at Object.PlotlyModule_Factory [as factory] (angular-plotly.js.js:529)
        at R3Injector.hydrate (core.js:11416)
        at R3Injector.get (core.js:11236)
        at core.js:11273
        at Set.forEach (<anonymous>)
        at R3Injector._resolveInjectorDefTypes (core.js:11273)
        at new NgModuleRef$1 (core.js:25336)
        at NgModuleFactory$1.create (core.js:25390)
        at core.js:29276
angulartypescriptplotlyangular12

Answer №1

After reviewing the documentation found at https://www.npmjs.com/package/angular-plotly.js?activeTab=readme, it appears that the approach to importing PlotlyJS may vary:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import * as PlotlyJS from 'plotly.js/dist/plotly.js'; // this line
import { PlotlyModule } from 'angular-plotly.js';

PlotlyModule.plotlyjs = PlotlyJS;

@NgModule({
    imports: [CommonModule, PlotlyModule],
    ...
})
export class AppModule { }

Answer №2

$ npm install angular-plotly.js plotly.js-dist-min --save

$ npm install @types/plotly.js-dist-min --save-dev

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import * as PlotlyJS from 'plotly.js-dist-min';
import { PlotlyModule } from 'angular-plotly.js';

PlotlyModule.plotlyjs = PlotlyJS;

@NgModule({
    imports: [CommonModule, PlotlyModule],
    ...
})
export class AppModule { }

Include the code below in your angular.json file to resolve any issues:

{
    "build": {
        "builder": "@angular-devkit/build-angular:browser",
        "options": {
            "scripts": [
                "node_modules/plotly.js-dist-min/plotly.min.js"
            ]
        }
    }
}

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

What is the best way to activate a submit button when at least one checkbox is selected?

I checked out Mark's solution on Stack Overflow regarding disabling a button if no checkboxes are selected in Angular2. However, I have more than one array to consider. How can I adjust the code provided in the link for my situation? Alternatively, d ...

htmlangular

Lazy loaded modules do not have access to singleton services

After breaking my initial AppModule into multiple modules, I decided to lazy-load one of the modules while using singleton services from a shared module. Following the instructions provided in the official Angular documentation (link here) and in a tutori ...

angularlazy-loadingangular2-services

Using an object hierarchy in Typescript to create an if statement

Currently, I am attempting to create a logical statement using a hierarchy structure as shown below: if ((config.elementConfig.curve[0].dataset[0].splitBy = 'my discrete var')) {..... However, when implementing this statement, I encounter the er ...

typescript

Retrieving 'this' within the catch clause following the execution of a promise

When using the this keyword within a catch clause after initiating a promise, it displays "this" as undefined. Here is my scenario: I have a service with a Router object injected into its constructor. From a method in the service, an HTTP request is made t ...

angular

The panel header is clickable and overlaps with the header buttons

My panel component includes a header with a title and buttons positioned in the right corner. Currently, the downward arrow (chevron) is used to toggle the expansion/minimization of the panel's contents. When I attempt to make the header clickable to ...

cssangular

Is there a way to specialize generic methods in Typescript and make them more specific?

I am working with a generic static method in an abstract class: abstract class Base { static find<T extends Base>(options?: Object): Promise<T[]> { return findResults(options); } } Now, I am trying to specify its type in a derived cla ...

typescriptoop

Updating data in Angular2+ components outside of the router outlet component area

<div><SearchProjects></SearchProjects></div> <div> <router-outlet></router-outlet> </div> When the search content is updated, I need to refresh the data for the router-outlet component accordingly. Init ...

angulartypescript2.0router-outlet

Is there a way for me to modify a value in Mongoose?

I have been attempting to locate clients by their ID and update their name, but so far I haven't been successful. Despite trying numerous solutions from various sources online. Specifically, when using the findOneAndUpdate() function, I am able to id ...

typescriptmongodbmongoose

Internet Explorer is throwing unexpected routing errors in Angular 2

I have a spring-boot/angular 2 application that is working perfectly fine on Chrome, Safari, Opera, and Edge. However, when accessed through Internet Explorer, the app directly routes to the PageNotFound component. I have tried adding shims for IE in the i ...

angularinternet-explorertypescriptspring-bootangular2-routing

Effortless code formatting with VS Code for TypeScript and JavaScript

Does anyone know of any extensions or JSON settings that can help me format my code like this: if(true) { } else { } Instead of like this: if(true){ } else { } ...

javascripttypescriptvisual-studio-codecode-formatting

How can one effectively access a nested JSON value in Angular by concatenating all fields?

If we have a JSON stored in the variable person like below: { "firstName": "First Name", "lastName": "Last Name", "address": { "city": "New-York", "street": "Some Street" } } To access the value of street, we would typical ...

javascriptjsonangularnestedconcatenation

Angular 7 ESRI loader search widget focus out bug: finding a solution

I am currently working on implementing an ESRI map using esri-loader in my Angular application. Everything seems to be working fine, but I am encountering an error when typing something into the search widget and then focusing out of it. "Uncaught Typ ...

angulartypescriptangular7esri

The one-tap login popup from Google always appears, even when the user is already logged in

Blocking Google's One Tap Login Popup in Angular 16 Is there a way to prevent Google's one tap login popup from appearing when the user is already logged in? Every time I refresh the page or save changes in the code (auto reload), the login popu ...

angulargoogle-oauthgoogle-signingoogle-identitygoogle-one-tap

Using Angular's typeahead with RxJs switchMap for subscribing to data sources

Implementing the Angular bootstrap Typeahead plugin for displaying colors. However, I am facing difficulty in resolving circular references like I have done in other parts of my project. The RxJs SwitchMap operator is not working for me in this case. Are t ...

angularrxjsng-bootstrapbootstrap-typeahead

Exploring the use of two different array types in the useState hook with TypeScript

Working on a movie gallery project, I am utilizing an API to download movies and TV series. They are then displayed in a Row component where users can click on thumbnails to open them. The challenge arises with TypeScript, as the useState array can receiv ...

reactjstypescriptreact-hooks

Assign a specific value to the sub-component within the grid using Angular 2+

Incorporating Angular 8 and TypeScript into my project, I have a grid that consists of various internal components, one being <ng-select/>. The data binding takes place in the child component during onInit. Upon loading and initialization of the dat ...

angulartypescriptangular-ngselectangular8

Tips on ensuring JSON object structure with type and interface in an Angular application

In my angular project, I have created a router config file to handle routing efficiently. This config file contains JSON data like this: router.config.ts { branch:{ list:'/app/branch/list', add:'/app/branch/add' }, ...

angular

ngModelChange doesn't trigger if the value is manually altered

Here is the scenario I am experiencing: //html <input (ngModelChange)="onSelection()" [(ngModel)]="selectedNode" > // in the ts file onSelection() { alert('changed'); } Typing something inside the input tri ...

angulartypescript

Encountering an issue with Modal functionality on Ionic 4 when spanning across multiple pages

A modal named worksmodal was created and works perfectly when opened from the page showworks. However, a new requirement emerged where the same modal needs to be opened from the Notifications page as well, resulting in an error when trying to open it from ...

angularionic-frameworkionic2ionic3ionic4

Implement a nested filter in Angular 8 to enhance data manipulation

Is it possible to apply a filter inside another filter in this scenario? I have a table of orders with nested tables of services, and I want to only display the orders where the type of service is 'type1'. I tried using the following line of code ...

angulartypescriptfilter