CODEWITHSUNDEEP
angularamcharts
Adamo Bosco
Adamo Bosco

Reputation: 1

AMCharts Map not rendering in production mode

I developed an Angular application with AMCharts Map.

It seems that the minimized code doesn't render the map.

"dependencies": {
    "@amcharts/amcharts4": "^4.4.8",
    "@amcharts/amcharts4-geodata": "^4.1.5",
    "@angular/animations": "^7.2.15",
    "@angular/cdk": "^7.3.7",
    "@angular/common": "^7.2.15",
    "@angular/compiler": "^7.2.15",
    "@angular/core": "^7.2.15",
    "@angular/forms": "^7.2.15",
    "@angular/material": "^7.3.7",
    "@angular/platform-browser": "^7.2.15",
    "@angular/platform-browser-dynamic": "^7.2.15",
    "@angular/router": "^7.2.15",
    "angular-font-awesome": "^3.1.2",
    "bootstrap": "^4.3.1",
    "core-js": "^2.5.4",
    "font-awesome": "^4.7.0",
    "jquery": "^3.4.1",
    "popper": "^1.0.1",
    "rxjs": "~6.3.3",
    "rxjs-compat": "^6.5.2",
    "zone.js": "~0.8.26"
  }

Upvotes: 0

Views: 1855

Answers (2)

JSantaCL
JSantaCL

Reputation: 560

Perhaps a late answer but it may help. I'll just copy and paste what I mentioned on the issue referred by Kavinda.

We recently faced this issue (still an issue). As the officially recommended solution is not an option, because our app size is already too large we solved it by lazy loading amcharts AND explicitly separating amchart scripts using webpack magic comments. Not exactly what we use but. it may give you an idea:

  import(/* webpackChunkName: "amcharts" */ "@amcharts/amcharts4/core"),
  import(/* webpackChunkName: "amcharts" */ "@amcharts/amcharts4/charts"),
  import(/* webpackChunkName: "amcharts" */ "@amcharts/amcharts4/themes/animated")
]).then((modules) => {
  const am4core = modules[0];
  const am4charts = modules[1];
  const am4themes_animated = modules[2].default;

  // Chart code goes here
}).catch((e) => {
  console.error("Error when creating chart", e);
})

This will generate a separate chunk called amcharts.js

For a detailed explanation read this article on Angular: Dynamically immporting large libraries

Upvotes: 1

Kavinda Jayakody
Kavinda Jayakody

Reputation: 786

The reason is (according to amCharts), the angular build optimizer remove amChart library and some other libraries when using build optimizer. I know it's kind of confusing. But read this issue. You'll understand why and few workaround to use

Upvotes: 0

Related Questions