Импорт vega-embed после установки

Question

Я установил vega & vega-lite & с использованием npmи теперь я следую инструкциям здесь о том, как встроить график на мою страницу ( не отображать его внутри vs-кода как vega-embed расширение делает).

Я написал в своем приложении Angular следующий код, который выдает ошибки:

vega.component.html

      <h3 class="center">Vega Viz</h3>

<figure id="vega" class="center"></figure>

vega.component.ts

      import { Component, OnInit } from '@angular/core';
import embed from 'vega-embed';
import * as d3 from 'd3';

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

  svg: any;

  margin = 50;
  width = 750 - (this.margin * 2);
  height = 400 - (this.margin * 2);

  constructor() { }

  ngOnInit(): void {
    this.createSvg();
    this.embedGraph();
  }

  createSvg(): void {
    this.svg = d3
      .select("figure#vega")
      .append("svg")
      .attr("width", this.width + (this.margin * 2))
      .attr("height", this.height + (this.margin * 2))
      .append("g")
      .attr("transform", "translate(" + this.margin + "," + this.margin + ")");
  }

  async embedGraph(): Promise<void> {
    const spec = "/assets/density-heatmaps.vg.json";
    embed.vegaEmbed("figure#vega", spec);
    const result = await embed("figure#vega", spec);
    console.log(result.view);
  }
}

Я поставил один из примеров density-heatmaps.vg.json в моем Angular assets папку и хотел бы отобразить ее в моем http://localhost:4200 страница.

Сначала я подумал, что это основной код, который вызывает ошибки, но потом я понял, что на самом деле это строка импорта вверху вызывает сбой моего приложения ...

Может ли кто-нибудь помочь мне понять, почему оператор импорта вызывает сбой приложения и как я могу это исправить?

После этого я могу продолжить работу над своим кодом и показать графику в моем html figure область надеюсь ...

Кстати, я пробовал оба import embed from 'vega-embed' и import * as embed from 'vega-embed'но оба приводят к сбою приложения. Буду признателен за любую помощь.

ps Вот скриншот моей консоли инспектирования:

Я искал allowSyntheticDefaultImports думая, что это флаг, который я могу установить в значение true для разрешения импорта, но я ничего не нашел в приложении ...

Answer 1

Я исправил import проблема, добавив "esModuleInterop": true и "allowSyntheticDefaultImports": true к моему tsconfig.json файл:.

Теперь мой файл выглядит так:

      {
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "strictNullChecks": false,
    "strict": false,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2017",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "suppressImplicitAnyIndexErrors": true,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true,
    "noImplicitAny": false
  }
}

Эта страница подсказала решение.