Angular 8 amcharts 4, example chart does not appear, but watermark does

[bitcathedrals]

Hi,

I am running Angular 8, and amcharts4, latest versions I think. I wanted to start small with a simple example from the website but the minimal example doesn't render. All I see is the watermark in the lower corner.

import { Component, NgZone, OnInit } from '@angular/core';

import * as am4core from "@amcharts/amcharts4/core";
import am4themes_animated from "@amcharts/amcharts4/themes/animated";

import * as am4maps from "@amcharts/amcharts4/maps";

import am4geodata_worldLow from "@amcharts/amcharts4-geodata/worldLow";

am4core.useTheme(am4themes_animated);

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.less']
})
export class MapComponent {
    private map: am4maps.MapChart;

    constructor(private zone: NgZone) {}

    ngAfterViewInit() {
	this.zone.runOutsideAngular(() => {
            let map = am4core.create("mapdiv", am4maps.MapChart);

	    map.geodata = am4geodata_worldLow; 
	    map.projection = new am4maps.projections.Miller();

	    map.zoomControl = new am4maps.ZoomControl();

            this.map = map;
	});
    };
    
    ngOnDestroy() {
	this.zone.runOutsideAngular(() => {
	    if (this.map) {
		this.map.dispose();
	    }
	});
    };
};

Here is my html:
<div id="mapdiv" style="width: 100%; height: 500px; margin: 2px;">
</div>

and finally here is my package.json:

{
  "name": "angular",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod --build-optimizer=false",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@amcharts/amcharts4": "^4.5.3",
    "@amcharts/amcharts4-geodata": "^4.1.6",
    "@angular/animations": "~8.0.3",
    "@angular/common": "~8.0.3",
    "@angular/compiler": "~8.0.3",
    "@angular/core": "~8.0.3",
    "@angular/forms": "~8.0.3",
    "@angular/platform-browser": "~8.0.3",
    "@angular/platform-browser-dynamic": "~8.0.3",
    "@angular/router": "~8.0.3",
    "bootswatch": "^4.3.1",
    "jquery": "^3.4.1",
    "rxjs": "~6.4.0",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.800.6",
    "@angular/cli": "~8.0.6",
    "@angular/compiler-cli": "~8.0.3",
    "@angular/language-service": "~8.0.3",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3"
  }
}

I have tried disabling bootstrap, tweaking the html with various percentages and sizes, carefully matching my example to what's on the website. Everything renders except the map.

I think it's a bug now.

Here is what it looks like in the browser:

[Pauan]

@coderofmattie Thanks for the report, I was able to reproduce this and I'm investigating it.

[jchenevey]

Please ignore my previous comment - my issue appears to be a conflict with another piece of javascript on the page. If I disable all other javascript, the map works fine.

[benjamincharity]

fwiw I can reproduce this also.

1. It only seems to happen with the map (xy/pie/radar/tree/sankey/chord all work)
2. I do see the map data being loaded in correctly (as far as importing the map json data)
   • 
3. I can reproduce when loading an app compiled as aot
4. I cannot reproduce when serving (with or without the aot flag)

Versions:

Angular CLI: 8.0.6
Node: 11.9.0
OS: darwin x64
Angular: 8.0.3
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@amcharts/amcharts4-geodata       4.1.6
@amcharts/amcharts4               4.5.3
@angular-devkit/architect         0.800.6
@angular-devkit/build-angular     0.800.6
@angular-devkit/build-optimizer   0.800.6
@angular-devkit/build-webpack     0.800.6
@angular-devkit/core              8.0.6
@angular-devkit/schematics        8.0.6
@angular/cdk                      8.0.1
@angular/cli                      8.0.6
@angular/flex-layout              8.0.0-beta.26
@angular/material                 8.0.1
@ngtools/json-schema              1.1.0
@ngtools/webpack                  8.0.6
@schematics/angular               8.0.6
@schematics/update                0.800.6
ng-packagr                        5.3.0
rxjs                              6.5.2
typescript                        3.4.5
webpack                           4.30.0

---

EDIT:

After diving into #1146 I can confirm that disabling the build optimizer did solve this issue for me. Unfortunately that isn't a viable path forward for my team. And I really don't want to use a different charting library.. really loving working with amcharts 😞

---

Possibly related:

angular/angular-cli#12112
https://github.com/shlomiassaf/angular-cli-build-optimizer-es2015-issue

[benjamincharity]

Another FWIW: Looks as though it's likely the same as this issue #1146 although the resolution in that thread is less than satisfactory IMO.

---

Edit: Apologies, just noticed that OP does have --build-optimizer=false set in their package.json so possibly unrelated?

[Pauan]

@benjamincharity After diving into #1146 I can confirm that disabling the build optimizer did solve this issue for me. Unfortunately that isn't a viable path forward for my team.

Could you explain more? In our testing, disabling the build optimizer only had a minor impact on file size.

In any case, that issue is not with amCharts, the Angular build optimizer breaks many different packages, so you should file a bug report with the Angular CLI.

By the way, the reason it only breaks on maps is because V4 uses d3 for the maps, and it's actually d3 that's breaking.

[Pauan]

@coderofmattie I found the issue. It isn't actually an issue with Angular, you just need to add these lines of code and it will work:

let polygonSeries = map.series.push(new am4maps.MapPolygonSeries());
polygonSeries.useGeodata = true;

Could you please tell us what example you copied your code from, so we can update it?

[ha-akelius]

@Pauan
for us,This solution working on ng serve mode :), but not with ng build :(

So I don't know if you tested it with serve or build

@coderofmattie I found the issue. It isn't actually an issue with Angular, you just need to add these lines of code and it will work:

let polygonSeries = map.series.push(new am4maps.MapPolygonSeries());
polygonSeries.useGeodata = true;

Could you please tell us what example you copied your code from, so we can update it?

[Pauan]

@ha-akelius Are you using "build": "ng build --prod --build-optimizer=false", in your package.json?

[ha-akelius]

@Pauan it will work, but we can not use this option :(
so as I wrote in #1146 I downgraded amcharts to 4.2.6 :(
now we are not fully aligned with amcharts documentation,

[sohailss]

@Pauan after using this "build": "ng build --prod --build-optimizer=false" size of Build Package increased from 8-MB to 48-MB & literally i was shocked to see this as well rendering time 100 time increase and take too much time on first hit
If i not use this strategy then Map not show after hosting just wave icon show on, this is URL that is have hosted
https://clinicallab.azurewebsites.net

kindly provide feasible solution of mentioned #Bug

[Pauan]

@sohailss As we have explained, this is not a problem caused by amCharts, it is a bug with Angular. So you need to ask Angular to fix it, we cannot fix it.

Also, the build optimizer is a minor optimization, it shouldn't be causing that large of a size difference, so that's probably another bug with Angular.

[achillesheel02]

My problem is also kind of funny. The legend and other elemnts are viewable but the chart itself is empty. When I run ng serve, the page returns empty charts. However, if by any chance I was on another browser tab and then switch to the tab where my webpage is (after it fully loaded), the charts all appeared. Any fix to this? @Pauan

[hansbrito]

Hi @Pauan can you share a link with the Openned Issue in Angular?

PS. I've inserted a Timeline in my Angular Application@9.1.7 and changed the build script to "build": "ng build --prod --build-optimizer=false --output-path=dist", but in Production the Timeline still does not appear.

package.json:
{ "name": "bip", "version": "9.1.9", "scripts": { "ng": "ng", "start": "ng serve --open", "start-hmr": "ng serve --configuration hmr --source-map=false --hmr-warning=false", "dev": "ng serve --configuration hmr --source-map=true --hmr-warning=false", "build": "ng build --prod --build-optimizer=false --output-path=dist", "postinstall": "ng build --prod --build-optimizer=false --output-path=dist", "clean": "rm -rf dist && mkdir dist", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e", "bundle-report": "webpack-bundle-analyzer dist/stats.json" }, "private": true, "dependencies": { "@agm/core": "1.1.0", "@amcharts/amcharts4": "4.5.16", "@angular/animations": "9.1.9", "@angular/cdk": "9.2.4", "@angular/cdk-experimental": "9.2.4", "@angular/common": "9.1.9", "@angular/compiler": "9.1.9", "@angular/core": "9.1.9", "@angular/flex-layout": "9.0.0-beta.29", "@angular/forms": "9.1.9", "@angular/material": "9.2.4", "@angular/material-moment-adapter": "9.2.4", "@angular/platform-browser": "9.1.9", "@angular/platform-browser-dynamic": "9.1.9", "@angular/router": "9.1.9", "@asymmetrik/ngx-leaflet": "6.0.1", "@asymmetrik/ngx-leaflet-draw": "5.0.1", "@ngrx/effects": "9.2.0", "@ngrx/router-store": "9.2.0", "@ngrx/store": "9.2.0", "@ngrx/store-devtools": "9.2.0", "@ngx-translate/core": "12.0.0", "@swimlane/dragula": "3.8.0", "@swimlane/ngx-charts": "13.0.2", "@swimlane/ngx-datatable": "16.0.3", "@swimlane/ngx-dnd": "8.1.0", "@types/prismjs": "1.16.0", "angular-calendar": "0.28.2", "angular-in-memory-web-api": "0.9.0", "chart.js": "2.9.3", "classlist.js": "1.1.20150312", "crypto": "1.0.1", "crypto-js": "4.0.0", "d3": "5.15.0", "date-fns": "2.9.0", "esri-leaflet": "2.3.3", "esri-leaflet-geocoder": "2.3.2", "exports-loader": "0.7.0", "hammerjs": "2.0.8", "leaflet": "1.6.0", "leaflet-distortableimage": "0.13.6", "leaflet-draw": "1.0.4", "leaflet-filelayer": "1.2.0", "leaflet-groupedlayercontrol": "0.6.1", "leaflet-measure": "3.1.0", "leaflet.gridlayer.googlemutant": "0.8.0", "leaflet.measurecontrol": "1.1.0", "lodash": "4.17.15", "mat-progress-buttons": "9.1.1", "moment": "^2.24.0", "ng2-charts": "2.3.0", "ng2-file-upload": "1.4.0", "ngrx-store-freeze": "0.2.4", "ngx-color-picker": "8.2.0", "ngx-cookie-service": "2.3.0", "ngx-image-cropper": "^3.1.6", "ngx-indexed-db": "^5.0.4", "ngx-mask": "^9.1.2", "ngx-moment": "^3.5.0", "ngx-virtual-scroller": "^4.0.3", "ngx-webstorage-service": "^4.1.0", "node-sass": "4.14.1", "perfect-scrollbar": "1.4.0", "prismjs": "1.19.0", "prunecluster": "2.1.0", "rxjs": "6.5.5", "sass-svg": "1.2.0", "togeojson": "0.16.0", "tslib": "1.10.0", "web-animations-js": "2.3.2", "xlsx": "^0.15.6", "zone.js": "0.10.3" }, "devDependencies": { "@angular-devkit/build-angular": "0.901.7", "@angular/cli": "9.1.7", "@angular/compiler-cli": "9.1.9", "@angular/language-service": "9.1.9", "@angularclass/hmr": "2.1.3", "@types/jasmine": "3.5.2", "@types/jasminewd2": "2.0.8", "@types/leaflet": "1.5.12", "@types/leaflet-draw": "1.0.2", "@types/leaflet.gridlayer.googlemutant": "0.4.5", "@types/lodash": "4.14.149", "@types/node": "12.12.6", "codelyzer": "5.2.1", "jasmine-core": "3.5.0", "jasmine-spec-reporter": "4.2.1", "karma": "4.3.0", "karma-chrome-launcher": "3.1.0", "karma-coverage-istanbul-reporter": "2.1.1", "karma-jasmine": "2.0.1", "karma-jasmine-html-reporter": "1.5.1", "protractor": "5.4.3", "ts-node": "8.3.0", "tslint": "5.18.0", "typescript": "3.7.5", "webpack-bundle-analyzer": "3.6.0" } }

Dockerfile

#############
### build ###
#############

# base image
FROM node:12.2.0 as build

# set working directory
WORKDIR /app

# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH

# install and cache app dependencies
COPY package.json /app/package.json
RUN npm install
RUN npm install -g @angular/cli@9.1.7

# add app
COPY . /app

# generate build
RUN npm run build

############
### prod ###
############

# base image
FROM nginx:1.16.0-alpine

# copy artifact build from the 'build environment'
COPY --from=build /app/dist /usr/share/nginx/html

# expose port 80
EXPOSE 8080

# run nginx
# CMD ["nginx", "-g", "daemon off;"]
CMD ["/bin/sh", "-c", "sed -i 's/listen  .*/listen 8080;/g' /etc/nginx/conf.d/default.conf && exec nginx -g 'daemon off;'"]

Thanks in Advance.