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

Redirect user to the "Confirm Logout" page in Keycloak after refreshing the page before logging out

While working on a project with keycloak, I've encountered an issue that I can't seem to figure out. After logging in and navigating to my project's page, everything operates smoothly. However, if I happen to refresh the page before logging ...

What is the process for running an Angular 1.4 application on a system with Angular 6 installed?

After installing Angular 6 with CLI, I realized that my project was written in Angular 1.4. How do I go about running it? ...

The ngrx selector is being invoked prior to the data being accessible

In my parent component, DashBoardComponent triggers the loadLast3YearBalances action upon login: this.store .select(loggedInUserBankAccountId) .subscribe((loggedBankAccountId) => { this.store.dispatch(DashBoardActions.loadLast3YearBalances( { lo ...

The ngFor directive in Angular should be used with the Filter pipe to ensure that

Having a Filter implemented in my Angular Project that fetches data from Firebase. The current status in the Filter is as follows: Name 1: Lea Muster Name 2: Bruno Mustermann Name 3: Lea Muster Name 4: Gabriela Musterfrau The goal is to show duplicate e ...

Updating the parameters when clicking on each pagination button: A guide

Does anyone have advice on implementing pagination? I am currently working on loading a datatable with a few records initially. Once the page is loaded, I want to be able to click on pagination buttons like next or any pagination buttons to display a new s ...

Combining angular's CLI project with a groovy Gradle application

I'm in the process of merging the seed project from angular-cli with my Gradle-packaged Java application, deployed on a Tomcat server. How can I successfully combine the Angular build with the Gradle build? Additionally, where is the ideal location t ...

Important notice: It is not possible to assign refs to function components. Any attempt to do so will result in failure. If you intended to assign a ref, consider

My console is showing a warning when I use the nextJs Link component. Can someone assist me in resolving this issue and providing an explanation? Here is the message from the console: https://i.stack.imgur.com/jY4FA.png Below is a snippet of my code: im ...

Troubleshooting font color issues with PrimeNG charts in Angular

I have a chart and I am looking to modify the color of the labels The gray labels on the chart need to be changed to white for better readability Here is my code snippet: HTML5: <div class="box-result"> <h5 class="title-resul ...

React Typescript Mui causing `onBlur` event to trigger with every change occurring

I'm currently developing a front-end application using Typescript and React with MUI. The form code I have written is as follows: <TextField label="Password" value={this.state.password} placeholder="Choose a password" type="password" onC ...

Loop through every element in the Angular2 template

I am working with the following template and I need to access all the elements within it. Using ViewChildren only gives me a reference to one element, most likely because no two elements are the same and I am not using the same directive/component inside t ...

Leverage TypeScript with AngularJS to validate interpolation and binding within HTML documents

While TypeScript can detect compile errors for *.ts files, the question arises if these benefits can be extended to AngularJS views/templates. Consider a scenario where the code snippet below is present: <div ng-controller="HomeController as home"> ...

Tips for implementing generics in an abstract class that extends a React Component

I am in the process of developing a unique abstract class that extends a React Component. My goal is to establish default Props while allowing the components that extend the abstract class to supply their own props. interface Props { ...

What is the method for typing an array of objects retrieved from realmDB?

Issue: Argument type 'Results<Courses[] & Object>' cannot be assigned to the parameter type 'SetStateAction<Courses[]>'. Type 'Results<Courses[] & Object>' lacks properties such as pop, push, reverse, ...

Issue with running tests on Angular Material components causing errors

Running ng test on my Angular 8 project with Angular material components is resulting in multiple failures. The issue seems to be related to missing test cases for these scenarios. DeleteBotModalComponent > should create Failed: Template parse errors: & ...

Navigating through nested objects using Rxjs

How to Extract Specific Attribute Values from Nested Objects Array using RxJS const obj = { name: 'campus', buildings: [ { name: 'building', floors: [ { name: 'floo ...

Tips on utilizing the `arguments` property in scenarios where Parameters<...> or a similar approach is anticipated

How can you pass the arguments of a function into another function without needing to assert the parameters? Example: function f(a:number, b:number){ let args:Parameters<typeof f> = arguments // Error: Type 'IArguments' is not assignab ...

Can someone explain the distinction between 'return item' and 'return true' when it comes to JavaScript array methods?

Forgive me for any errors in my query, as I am not very experienced in asking questions. I have encountered the following two scenarios :- const comment = comments.find(function (comment) { if (comment.id === 823423) { return t ...

Error: Unable to iterate through posts due to a TypeError in next.js

Hi there, this is my first time asking for help here. I'm working on a simple app using Next.js and ran into an issue while following a tutorial: Unhandled Runtime Error TypeError: posts.map is not a function Source pages\posts\index.tsx (1 ...

Identifying patterns within a string using JavaScript and TypeScript

Given a user-input pattern, for example [h][a-z][gho], and a string "gkfhxhk", I am attempting to determine if the string contains the specified pattern. The pattern dictates that the first character must be 'h', followed by any letter from a-z, ...

Creating a Dynamic Download Link in Angular 6

Hello everyone, I need assistance in making my download feature dynamic. Here is my HTML code: <button class="btn btn-primary" (click)="downloadMyFile({{account.students[0].schoolId}})"><i class="fa fa-file-pdf-o"></i> Download</butt ...