Error: Unable to destructure the 'init' property of a null object in ngx e-charts

While utilizing ngx-echarts, an issue arose for me. Prior to updating to versions 4.x.x, everything was running smoothly. However, after conducting an npm i command, the application failed to start up.

Answer №1

The issue arose due to a recent update in ngx-charts. For versions higher than 5.0, include the following code in your app.module:

    NgxChartsModule.forRoot({
       charts: { initialize: charts.initialize }
  })

Additionally, make sure to add this line in tsconfig.json under angular compiler options:

"enableIvy": false

Answer №2

The previous suggestion from @Arokia Lijas didn't resolve the issue for me as it caused errors in build --prod

However, I came across a different solution that worked:

export function chartModule(): any {
      return import('echarts');
        }

When implemented in NgModule:

    NgxEchartsModule.forRoot({
  echarts: chartModule
}),

This alternative method worked perfectly for my situation. Source: https://github.com/xieziyu/ngx-echarts/issues/241#issuecomment-742777787

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

Exploring Angular 4: Performing tests on a component containing another component

I am currently conducting testing on my Angular application: ng test Below is the content of my html file (page-not-found.component.html): <menu></menu> <div> <h4> ERROR 404 - PAGE NOT FOUND </h4> </div> Afte ...

Assign a value using the select component from Material UI

I just finished creating a dropdown menu const [selectedValue, setSelectedValue] = useState(''); const handleSelectionChange = (e: any) => { //setSelectedValue(e) console.log('value', selectedValue) } .... <Fo ...

Issue with HTTP interceptor failing to activate

I'm having trouble with my interceptor not triggering. Despite trying multiple solutions, I can't seem to get it working. The interceptor is failing to intercept http requests, resulting in the 'Authorization' header not being added. ...

Angular 6 application experiencing an issue where the browser console is not displaying an error that says "Cannot GET /

I was tasked with making modifications to an Angular 6 web application, which I hadn't worked on before. After receiving the source code, I attempted to display the website but encountered errors. I spent late nights and early mornings trying to succe ...

...additional properties in React function components using TypeScript

Here is a snippet of code that I am working with: <InputComponent id="email" name={formik.values.email} type="text" formik={formik} className="signInInput" disabled/> However, there seems to be an issue with the disable ...

Tips for resolving the error message "TypeError: Converting circular structure to JSON"

I had a straightforward query where I needed to select all from the aliases table. Everything was working fine until I ran npm update. TypeError: Converting circular structure to JSON public async fetchAliases(req: Request, res: Response): Promise< ...

The process of prioritizing specific elements at the top of an array when ordering

In my array, I want to prioritize specific items to always appear at the top. The API response looks like this: const itemInventorylocationTypes = [ { itemInventorylocationId: '00d3898b-c6f8-43eb-9470-70a11cecbbd7', itemInvent ...

Steps to resolving the 404 Not Found issue: nginx configuration with Angular and Keycloak

I am currently in the process of developing an Angular (10) application that utilizes Keycloak as its Identity and Access Management server. The general flow of the application is outlined below, https://i.sstatic.net/bs35F.png The URLs for the different ...

Error occurs when Protractor end-to-end tests encounter a problem with browser.executeAsyncScript

I encountered an error while attempting to implement e2e testing for our application. My initial test case failed with the following error message: Failed: Error while running testForAngular: javascript error: Unexpected identifier JavaScript stack: ...

What methods can TypeScript employ to comprehend this situation?

There's an interesting scenario when it comes to assigning a variable of type unknown to another variable. TypeScript requires us to perform type checking on the unknown variable, but how does TypeScript handle this specific situation? It appears that ...

Managing singleton instances in TypeScript and NextJs across multiple files

Lately, I've been immersed in a personal project that involves creating API endpoints using NextJs and TypeScript to interact with the Discord API via discord.js. Don't worry if you're unfamiliar with the discord API, as the focus here is no ...

Unlock the power of asynchronous dependencies on a global scale with Inversify

I'm looking to resolve an asynchronous dependency at the top level without relying on top-level awaits. Currently, I've implemented a temporary solution by defining an asynchronous function getService() in the controller file. However, this appr ...

Concocting your custom blob in Angular 2 from input may lead to data corruption

For educational purposes, I am looking to utilize the html input tag in order to select a jpeg image, extract the File Object, read it with fileReader, and use the retrieved image string (base64) to generate a new blob/file. The service successfully uploa ...

Tips for leveraging TypeScript with Redux connected components

How can I properly type props that are connected to a reducer? The following code may produce TypeScript errors but still works during runtime. class Sidebar extends React.Component { constructor(props) { super(props); } render() { return ...

When combining Angular 5 with Angular Material Select and Reactive Forms, you may encounter a situation where the initial options

I'm currently facing an issue with a reactive form that contains multiple <mat-select> elements. Despite the fact that form.value shows the initial option, it is not displayed upon the form's initial load. Key component.ts: export cla ...

Tips for avoiding multiple reference paths in Angular TypeScript: - Simplify your imports

Setting up Typescript for an Angular 1.5 application has been a bit of a challenge. To ensure that a TS file can be compiled by gulp without any errors, I have to include the following line: ///<reference path="../../../../typings/angularjs/angular.d.t ...

Is it possible to pass values to an object of an extended class?

Uncertainty creeps in as I ponder a potentially foolish idea (possibly recursive): I find myself tasked with building two objects using the same parameters. One object features a shared method, while the other boasts two private methods (think of them as p ...

display the picture depending on the circumstances

Is there a way for the image tag to display different images based on a condition? I attempted the code below, but it's not displaying the image: <img src="{{row.image}}!=null?'data:image/jpeg;base64,{{row.image}}':'./assets/img/qu ...

Can a dynamic HTML page be created using Angular's ngClass directive and Bootstrap classes to ensure responsiveness?

Is there a way to dynamically resize buttons in my Angular application using the Bootstrap class btn-sm? I'm currently using this code snippet: <button [ngClass]="{ 'btn-sm' : window.screen.width < '575.5px' }"> ...

A method for cycling through parent and child objects in JavaScript (Vue.js) and storing them in an array - how to

I have a JSON object structured like this. const jsonData = { "id": "6", "name": "parent", "path": "/", "category": "folder", "fid": "6", "children": [ { ...