Why does the server attempt to load the chart in Angular 10 Universal using Amcharts 4?

I have experience with Angular, but I am now delving into the world of using Universal for SEO purposes.

My goal is to integrate a map from amcharts 4, which works fine without Angular Universal. However, I am facing an issue where the server attempts to load the chart and generates the following error:

ERROR Error: Uncaught (in promise): ReferenceError: addEventListener is not defined
ReferenceError: addEventListener is not defined
...

Here is my code:

  constructor(
    @Inject(PLATFORM_ID) private platformId: Object
  ) {
  }

  ngOnInit(): void {
    this.setUpChart();
  }

  setUpChart() {
    if (isPlatformBrowser(PLATFORM_ID)) {
      let chart = am4core.create("world-map", am4maps.MapChart);
      // ...
    }
  }

Answer №1

Special thanks to David for helping me identify the issues. There were two problems:

  1. isPlatformBrowser(PLATFORM_ID) =>

    isPlatformBrowser(platformId): Object

  2. The error was located in the library and only occurred outside of my condition. I have now updated my code to prevent this issue:


declare var require: any;

@Component({...})
export class MapComponent implements OnInit, OnDestroy {

  private chart;
  isBrowser: boolean

  constructor(
    @Inject(PLATFORM_ID) private platformId: Object
  ) {
    this.isBrowser = isPlatformBrowser(platformId)
  }

  ngOnInit(): void {
    if (this.isBrowser) {
      this.setUpChart();
    }
  }


  setUpChart() {
    if (this.isBrowser) {

      const am4core = require("@amcharts/amcharts4/core");
      const am4maps = require("@amcharts/amcharts4/maps");

      let chart = am4core.create("world-map", am4maps.MapChart);
      // ...
    }
  }

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

Typescript integration with Sequelize CLI for efficient database migrations

According to the Sequelize documentation, it claims to work with Typescript. However, for it to be fully functional in a production environment, DB migration scripts are necessary. The issue arises when using the Sequelize CLI as it only generates and runs ...

Ways to execute a jQuery function in Angular 2 post the completion of each component load

I've experimented with all the lifecycle hooks available, but I still haven't been able to achieve the desired outcome. What I'm trying to accomplish is to trigger a function that initializes multiple jQuery plugins for various elements on a ...

The NUXT project encounters issues when trying to compile

I am currently working on an admin panel using the nuxt + nest stack. I am utilizing a template provided at this link: https://github.com/stephsalou/nuxt-nest-template While in development mode, the project starts up without any issues. However, when I ...

Managing updates with the spread syntax: Dealing with undefined or null properties

Let's take a look at this example method: GetCustomerWithPoints(customerId: number): Customer { const customer = this.customerService.getCustomer(customerId); const points = this.pointService.getPointsForCustomer(customerId); return {...custo ...

I am having trouble loading the component; please direct me to the login page

Utilizing Angular 7 to develop an admin dashboard, I encountered an issue with the home page. The home page is supposed to load before logging in, but it only works after logging in. Prior to logging in, the page briefly appears for a second and then autom ...

Dynamically attach an Angular 2+ directive from a component

Looking to dynamically attach a directive from a component based on a condition. My attempt using @HostBinding doesn't seem to be working. import { Component, Directive, HostBinding } from '@angular/core'; @Component({ selector: &apos ...

Issue with Radio Button Value Submission in Angular 6 and Laravel 5.5

I developed a CRUD application utilizing Angular and Laravel 5.5. Within this application, I included three radio buttons, but encountered an error when trying to retrieve their values... A type error occurred indicating it was unable to read the data t ...

A loop in JavaScript/TypeScript that runs precisely once every minute

Here is a snippet of my code: async run(minutesToRun: number): Promise<void> { await authenticate(); await this.stock.fillArray(); await subscribeToInstrument(this, this.orderBookId); await subscribeToOrderbook(this, this.orderBookId ...

Solving issues in an Angular project

Upon receiving an angular project with a variety of existing errors and a list of enhancements to work on, I encountered difficulties when trying to run "npm install". The operating system displayed an error message stating "Operation not permitted". Despi ...

Are there any other options for handling the click event for all elements in Angular besides writing a click function for

click here for code screenshots see more code screenshots here This image displays five(5) li elements, each with the same function. However, if there are many more li elements, I am interested in finding a way to streamline and apply this function to al ...

Cypress: Uncovering the method invoked by a button click

I'm currently utilizing Vue3 with Vite and Cypress. My Vue3 component utilizes the script setup SFC syntax. Below is the code snippet for my component: <template> <div> <button data-cy="testBtn" @click="btnClick()&q ...

TypeScript - the object may potentially be 'null'

Despite receiving an error message, the program is running perfectly. https://i.sstatic.net/4NQyR.jpg var video = document.querySelector('#camera-stream'), if(!navigator.getMedia){ displayErrorMessage("Your browser doesn't have su ...

npm encountered an error while trying to update Angular 4

Looking to update Angular2 to Angular 4 and encountering an issue with the following command: npm install @angular/common@latest @angular/compiler@latest @angular/compiler-cli@latest @angular/core@latest @angular/forms@latest @angular/http@latest @angular ...

Creating a Circle with Pixi.js v4 and Typerscript in IONIC 2

I have been attempting to create a custom class in TypeScript that utilizes PIXI.js to draw circles. Below is the code for my home.ts class: import { Component, ViewChild, ElementRef } from '@angular/core'; import { NavController } from 'i ...

Exploring the Power of Routing in Angular 4 and WordPress

I am encountering an issue with routing in my Angular 4 app within a Wordpress theme. Currently, the page resolves to: But I want it to resolve to: Any suggestions on how to solve this problem? ...

TypeScript Type Mapping for HTML Element Tags

I am currently working on a TypeScript + React project and facing an issue with the polymorphic as prop in one of my components. Specifically, I want to restrict this prop to only accept HTML tags, excluding ReactNodes or JSX Elements. Unfortunately, I hav ...

Typescript and Mongoose Schema - Common Design Mistakes

I am encountering two issues while defining a schema using mongoose and typescript. Below is the code snippet I'm having trouble with: import { Document, Schema, Model, model} from "mongoose"; export interface IApplication { id: number; name ...

New post: "Exploring the latest features in Angular

Looking for help with integrating Angular and SpringREST to fetch data from the backend? Here's my situation: I need to retrieve a JSON string from the backend using a POST request, send it to my site's hosted link, and display it on the user int ...

Transformer Class: An object containing properties that are instances of another class

class ClassA { x: number; y: number; sum(): number { return this.x + this.y; } } class ClassB { @Type(() => ClassA) z: {[key: string]: ClassA}; } const b = transformObject(ClassB, obj); const z = b.z[key]; const s = z.s ...

What could be causing the data-* prefix to malfunction in Angular 9?

I'm facing an issue with a basic component in Angular 9. Check out the code below: Component : @Component({ selector: 'hello', template: `<h1>Hello {{name}}!</h1>`, styles: [`h1 { font-family: Lato; }`] }) export class He ...