角度为 6.0 的 Billboard.js 3.5.1 给出错误类型错误：当 ng serve --prod 时，t.hasType 不是函数答案

【问题标题】：Billboard.js 3.5.1 with angular 6.0 gives ERROR TypeError: t.hasType is not a function when ng serve --prod角度为 6.0 的 Billboard.js 3.5.1 给出错误类型错误：当 ng serve --prod 时，t.hasType 不是函数
【发布时间】：2023-02-14 17:22:39
【问题描述】：

我尝试将 Billboard.js 与 angular6.0 应用程序一起使用当我使用 ng serve 运行时，应用程序工作正常。当我使用 ng serve --prod 运行时，应用程序会在应用程序生成图表 (bb.generate) 时出现以下错误

main.19bd664034f5a0e96060.js:formatted:7402 ERROR TypeError: t.hasType 不是函数在 main.19bd664034f5a0e96060.js:formatted:66053:39 在 e.init (main.19bd664034f5a0e96060.js:formatted:66067:22) 在新 e (main.19bd664034f5a0e96060.js:formatted:66471:23) 在 Object.generate (main.19bd664034f5a0e96060.js:formatted:69686:29) 在 e.ngAfterViewInit (main.19bd664034f5a0e96060.js:formatted:139959:35) 在 fa (main.19bd664034f5a0e96060.js:formatted:11674:55) 在 ha (main.19bd664034f5a0e96060.js:formatted:11662:36) 在 da (main.19bd664034f5a0e96060.js:formatted:11655:60) 在 Pa (main.19bd664034f5a0e96060.js:formatted:12147:17)

package.json 依赖项

“依赖”：{ "@angular/animations": "^6.0.3", "@angular/common": "^6.0.3", "@angular/编译器": "^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", “引导程序”：“^4.3.1”， ....

角度.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"
        ]
我可以将此版本的广告牌与 angular 6 一起使用吗

【问题讨论】：

标签： angular billboard.js

【解决方案1】：

从 Angular 6 导入和编译纯 ESM 似乎有问题。尝试导入 CJS dist 文件，如下例所示。

也在最新的 Angular 14 上进行了测试并且没有问题。

import { Component, OnInit } from '@angular/core';
import bb from "billboard.js/dist/billboard.js";

@Component({
  selector: 'app-chart',
  templateUrl: './chart.component.html',
  styleUrls: ['./chart.component.css']
})
export class ChartComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    bb.generate({
      data: {
        columns: [
          ["data1", 30, 200, 100, 400, 150, 250],
          ["data2", 50, 20, 10, 40, 15, 25]
        ],
        type: "bar"
      },
      bindto: "#chart"
    });
  }
}

【讨论】：