离子-amcharts4-对象原型只能是对象或为null:未定义

时间:2019-11-21 15:22:02

标签: angular typescript ionic-framework amcharts4

更新软件包后开始抛出错误。我尝试回滚更新,但错误仍然存​​在。

package.json:

{
  "name": "nexus-pwa",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@amcharts/amcharts4": "^4.7.10",
    "@angular/common": "~8.2.14",
    "@angular/compiler": "~8.2.14",
    "@angular/core": "~8.2.14",
    "@angular/forms": "~8.2.14",
    "@angular/platform-browser": "~8.2.14",
    "@angular/platform-browser-dynamic": "~8.2.14",
    "@angular/router": "~8.2.14",
    "@ionic-native/core": "^5.17.0",
    "@ionic-native/splash-screen": "^5.17.0",
    "@ionic-native/status-bar": "^5.17.0",
    "@ionic/angular": "^4.11.5",
    "core-js": "^3.4.1",
    "net": "^1.0.2",
    "ngx-spinner": "^8.0.3",
    "npm-check-updates": "^3.2.1",
    "ol": "^6.1.1",
    "point-in-polygon": "^1.0.1",
    "robust-point-in-polygon": "^1.0.3",
    "rxjs": "~6.5.3",
    "sockjs-client": "^1.4.0",
    "stompjs": "^2.3.3",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.803.19",
    "@angular-devkit/build-angular": "~0.803.19",
    "@angular-devkit/core": "~8.3.19",
    "@angular-devkit/schematics": "~8.3.19",
    "@angular/cli": "^8.3.19",
    "@angular/compiler": "~8.2.14",
    "@angular/compiler-cli": "~8.2.14",
    "@angular/language-service": "~8.2.14",
    "@ionic/angular-toolkit": "~2.1.1",
    "@types/jasmine": "~3.4.6",
    "@types/jasminewd2": "~2.0.8",
    "@types/node": "~12.12.11",
    "codelyzer": "^5.2.0",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.4.1",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "~5.4.2",
    "ts-node": "~8.5.2",
    "tslint": "~5.20.1",
    "typescript": "~3.5.3"
  },
  "description": "An Ionic project"
}

graph-detail.page.html:

<div #chartElement ></div>

graph-detail.page.ts

import * as am4charts from '@amcharts/amcharts4/charts';
import * as am4core from '@amcharts/amcharts4/core';
import {
  Component,
  OnInit,
  ViewChild
} from '@angular/core';

@Component({
  selector: 'app-graph-detail',
  templateUrl: './graph-detail.page.html',
  styleUrls: ['./graph-detail.page.scss'],
})
export class GraphDetailPage implements OnInit {

  @ViewChild('chartElement', { static: false }) chartElement;

  constructor(
  ) { }


  ngOnInit() {
    this.createGraph();
  }

  createGraph()
  {
    const chart = am4core.create(this.chartElement.nativeElement, am4charts.XYChart);
  }
}

错误:

tslib.es6.js:25 Uncaught TypeError: Object prototype may only be an Object or null: undefined
    at setPrototypeOf (<anonymous>)
    at Module.__extends (tslib.es6.js:25)
    at Label.js:62
    at Module../node_modules/@amcharts/amcharts4/.internal/core/elements/Label.js (Label.js:1345)
    at __webpack_require__ (bootstrap:84)
    at Module../node_modules/@amcharts/amcharts4/.internal/core/System.js (System.js:1)
    at __webpack_require__ (bootstrap:84)
    at Module../node_modules/@amcharts/amcharts4/.internal/core/utils/Animation.js (Animation.js:1)
    at __webpack_require__ (bootstrap:84)
    at Module../node_modules/@amcharts/amcharts4/.internal/core/Sprite.js (Sprite.js:1)

错误是在运行时,编译成功。 如果删除“ this.createGraph();”,该错误继续。 如果删除am4core.create行,该错误消失。

我尝试清理node_modules文件夹并重新安装所有软件包。 使用“ npm cache clean”清除缓存,什么也没有。

有什么想法吗?谢谢

更新:

问题出在amcharts4库版本中,因为版本4.7.9开始失败。

对于上面详细介绍的程序包配置,使用版本4.7.8可以正常工作。

1 个答案:

答案 0 :(得分:0)

您是否尝试过以下命令来构建应用程序

对于Angular

ng build --prod --build-optimizer=false

用于离子

ionic build --prod --build-optimizer=false

否则您必须在package.json中添加此语法

"scripts": {
  "build": "ng build --prod --build-optimizer=false"
}