Question

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

在开发模式下（ng服务），我可以正确查看地图。
构建没有生产模式的应用程序（命令：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"
  }

Answer 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

Answer 2

原因是（根据amCharts），角度构建优化器在使用构建优化器时会删除amChart库和其他一些库。我知道这有点令人困惑。但是请阅读此issue。您将了解原因，并且很少使用替代方法

AMCharts Map无法在生产模式下呈现

2 个答案: