Angular6.0集成Billboard.js3.5.1生产环境报错及兼容性咨询

• 环境配置：Angular 6.0.3 + Billboard.js 3.5.1
• 问题现象：
  • 执行ng serve开发环境运行完全正常
  • 执行ng serve --prod生产构建后，调用bb.generate生成图表时抛出如下错误：

main.19bd664034f5a0e96060.js:formatted:7402 ERROR TypeError: t.hasType is not a function
at main.19bd664034f5a0e96060.js:formatted:66053:39
at e.init (main.19bd664034f5a0e96060.js:formatted:66067:22)
at new e (main.19bd664034f5a0e96060.js:formatted:66471:23)
at Object.generate (main.19bd664034f5a0e96060.js:formatted:69686:29)
at e.ngAfterViewInit (main.19bd664034f5a0e96060.js:formatted:139959:35)
at fa (main.19bd664034f5a0e96060.js:formatted:11674:55)
at ha (main.19bd664034f5a0e96060.js:formatted:11662:36)
at da (main.19bd664034f5a0e96060.js:formatted:11655:60)
at Pa (main.19bd664034f5a0e96060.js:formatted:12147:17)

• package.json依赖片段：

"dependencies": {
"@angular/animations": "^6.0.3",
"@angular/common": "^6.0.3",
"@angular/compiler": "^6.0.3",
"@angular/core": "^6.0.3",
"@angular/forms": "^6.0.3",
"@angular/http": "^6.0.3",
"@angular/platform-browser": "^6.0.3",
"@angular/platform-browser-dynamic": "^6.0.3",
"@angular/router": "^6.0.3",
"billboard.js": "3.5.1",
"bootstrap": "^4.3.1",
....
}

• angular.json脚本配置片段：

"scripts": [
  "node_modules/billboard.js/dist/billboard.min.js",
  "node_modules/jquery/dist/jquery.min.js",
  "node_modules/popper.js/dist/umd/popper.js",
  "node_modules/bootstrap/dist/js/bootstrap.min.js"
]

提问：Billboard.js 3.5.1能否与Angular 6.0兼容使用？

Billboard.js 3.x 系列不兼容 Angular 6.x。

Billboard.js 3.x 的底层依赖、语法标准（如ES模块特性、内部API设计），与Angular 6.x对应的构建工具链（Angular CLI 6.x依赖的Webpack 4.x、TypeScript版本）存在不匹配。生产环境下的代码压缩、树摇优化会破坏Billboard.js的内部方法，报错中的t.hasType就是被混淆后无法正确识别的内部函数。

可行的解决方式：

1. 降级Billboard.js版本：选择Billboard.js 2.x系列（如2.9.3），该版本的语法输出与Angular 6.x的环境完全匹配，能彻底避免生产构建的兼容性问题。
2. 临时调整构建优化规则：在angular.json的build配置中，将optimization下的scripts设为false，禁用对脚本文件的压缩混淆。但这种方法会增大最终包体积，仅作为临时 workaround，不推荐长期使用。

内容的提问来源于stack exchange，提问作者Florence