Блог

Я новичок в superset-ui и в настоящее время хочу использовать его в нашем приложении Angular, хотя эта проблема возникает и для React.

Я просто хотел попробовать компоненты «@superset-ui/legacy-preset-chart-nvd3» на данный момент. Чтобы сделать это, я следовал использованию, приведенному в https://github.com/apache-superset/superset-ui/tree/master/plugins/legacy-preset-chart-nvd3.

Я попробовал это с помощью нового сгенерированного углового приложения, использующего интерфейс командной строки. Но когда я запустил свое приложение Angular, я получил следующую ошибку:

 ERROR in ./node_modules/@superset-ui/chart-controls/esm/types.js 1:0-43
"export 'Metric' was not found in '@superset-ui/core'
 

Та же ошибка наблюдается и в приложении React:

 ./node_modules/@superset-ui/chart-controls/esm/types.js
Attempted import error: 'Metric' is not exported from '@superset-ui/core'
 

Ниже приведен мой файл app.component.ts., в котором я пытаюсь использовать компонент:

 import { Component, OnInit } from '@angular/core';
import { BarChartPlugin } from '@superset-ui/legacy-preset-chart-nvd3';

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

  ngOnInit() {
    new BarChartPlugin().configure({ key: 'bar' }).register();
  }

  title = 'my-first-project';
}
 

пакет.json:

 {
  "name": "my-first-project",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~10.1.1",
    "@angular/common": "~10.1.1",
    "@angular/compiler": "~10.1.1",
    "@angular/core": "~10.1.1",
    "@angular/forms": "~10.1.1",
    "@angular/platform-browser": "~10.1.1",
    "@angular/platform-browser-dynamic": "~10.1.1",
    "@angular/router": "~10.1.1",
    "@superset-ui/core": "^0.17.48",
    "@superset-ui/legacy-preset-chart-nvd3": "^0.17.48",
    "antd": "^4.15.6",
    "path": "^0.12.7",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-icons": "^4.2.0",
    "react-loadable": "^5.5.0",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1001.1",
    "@angular/cli": "~10.1.1",
    "@angular/compiler-cli": "~10.1.1",
    "@types/node": "^12.11.1",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.2"
  }
}
 

tsconfig.json

 {
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ]
  }
}
 

Шаги по воспроизведению поведения:

1. Создайте новое приложение:

• Для Angular: ng новый мой первый проект (также установите необходимые зависимости реакции)
• Для React: npx создать-реагировать-приложение мое-приложение.

2. Добавьте следующие строки в app.component.ts (угловой) или App.js (реагирует):

• импорт { NVD3ChartPreset } из «@superset-ui/устаревший-предустановленный-график-nvd3»;
• новый набор NVD3ChartPreset().регистрация();

3. Запустите приложение

Они взломали свою клиентскую библиотеку где-то в ветке 0.17.x. Я понизил рейтинг до более низкой версии, и это сработало для меня:

     "@superset-ui/chart-controls": "0.16.9",
    "@superset-ui/core": "0.16.7"