AMCharts 地图未在生产模式下呈现答案

【问题标题】：AMCharts Map not rendering in production modeAMCharts 地图未在生产模式下呈现
【发布时间】：2019-06-03 08:31:46
【问题描述】：

我使用 AMCharts Map 开发了一个 Angular 应用程序。

在开发模式下 (ng serve) 我可以正确查看地图。
在没有生产模式的情况下构建应用程序（命令：ng build）我可以正确查看地图。
在生产模式下构建应用程序（命令：ng build --prod）地图不会被渲染。我在浏览器控制台中没有错误。

似乎最小化的代码没有渲染地图。

"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"
  }

【问题讨论】：

刷新页面。
试了很多次，还是不行！
在 AmCharts 文档中找到了解决方案：“编辑 package.json 并将 --prod --build-optimizer=false 添加到“build”脚本中：”
相关：github.com/amcharts/amcharts4/issues/1146
在 react 应用程序中使用 amcharts 时会出现同样的问题。使用版本 4.7.5

标签： angular amcharts

【解决方案1】：

也许是一个迟到的答案，但它可能会有所帮助。我将复制并粘贴我在issue referred by Kavinda 上提到的内容。

我们最近遇到了这个问题（仍然是一个问题）。由于官方推荐的解决方案不是一个选项，因为我们的应用程序大小已经太大，我们通过lazy loading amcharts AND 使用webpack magic comments 明确分隔amchart 脚本来解决它。不完全是我们使用的，但是。它可能会给你一个想法：

  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);
})

这将生成一个名为amcharts.js的单独块

详细解释请阅读this article on Angular: Dynamically immporting large libraries

【讨论】：

嘿@JsantaCL。很酷的方式。这在没有 build-optmizer=false 的情况下是否有效？
可以，我们的应用太大了，需要优化器。

【解决方案2】：

原因是（根据 amCharts），角度构建优化器在使用构建优化器时删除了 amChart 库和其他一些库。我知道这有点令人困惑。但是请阅读此issue。你会明白为什么和很少使用的解决方法

【讨论】：