Error in PDF and XLSX export in micro-frontends based Angular app

[lucabonvinigug]

Bug description

I'm using @amcharts/amcharts5 at version ^5.1.3 in an a micro-frontends based Angular app, when i click on Export to PDF or Export to XLSX, i got error only when it's published (locally it works):

• for PDF export the error is: ERROR Error: Uncaught (in promise): ChunkLoadError: Loading chunk 643 failed. (missing: http://localhost:4201/pdfmake.js)

• for XLSX export the error is: GET http://localhost:4201/462.js net::ERR_ABORTED 404 (Not Found)

  ERROR Error: Uncaught (in promise): ChunkLoadError: Loading chunk 462 failed. (error: http://localhost:4201/462.js)

Seems it tries to get pdfmake.js and 462.js in localhost and not, for example in root.

Environment

Angular CLI: 12.2.16 "@amcharts/amcharts5": "^5.1.3", "@amcharts/amcharts5-fonts": "^5.0.1", "@amcharts/amcharts5-geodata": "^5.0.2", "typescript": "~4.3.5" "single-spa": ">=4.0.0", "single-spa-angular": "^5.0.2",

[martynasma]

Can you try with the latest version (5.2.10)?

[lucabonvinigug]

I updated amcharts to the version 5.2.10, but the error is still present

[Pauan]

@lucabonvinigug Since you're using Angular, have you tried using the the <base> tag to control the loaded URL?

[lucabonvinigug]

@Pauan yes I use <base href="/"> in index.html of "container" and "micro frontend" Angular apps.

[Pauan]

@lucabonvinigug I tried following our Angular tutorial. I used npm run build to create a production build and then tested it, everything worked fine. It sounds like you have some sort of misconfiguration on your server, or a misconfiguration of Angular.

amCharts doesn't handle file loading, we use the standard import() syntax to load files. So that means the file loading is entirely handled by Angular. Unfortunately we can't provide support for issues that are the fault of Angular, so you'll have to ask for help someplace else, like on StackOverflow.

[lucabonvinigug]

I found the solution. In order to prevent building warnings, I added in the angular.json, in allowedCommonJsDependencies array: "pdfmake/build/pdfmake.js", "xlsx/dist/xlsx.core.min.js"

But I needed to change the deployUrl value (in the angular.json) with the prod relative path, eg.: "deployUrl": "/my-app-path/my-analytics-path/"

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. It will be closed in 5 days unless a new comment is added.