安装后导入vega-embed [英] Importing vega-embed after installation

问题描述

我已经安装了 vega &vega-lite &vega-embed 使用 npm，现在我按照说明

我搜索了 allowSyntheticDefaultImports 认为这是一个标志，我可以将其设置为 true 以允许导入，但我在应用程序中什么也没找到...

我的配置文件内容如下:

package.json

<代码>{名称":a-chis-angular"，版本":0.0.0"，脚本":{ng":ng"，开始":服务"，build":ng build"，watch":ng build --watch --configuration development"，测试":ng测试"},私人":真的，依赖关系":{@angular/animations":~12.2.0"，@angular/common":~12.2.0"，@angular/compiler":~12.2.0"，@angular/core":~12.2.0"，@angular/forms":~12.2.0"，@angular/platform-b​​rowser":~12.2.0"，@angular/platform-b​​rowser-dynamic":~12.2.0"，@angular/router":~12.2.0"，引导程序":^5.1.0"，d3":^7.0.0"，rxjs":~6.6.0"，tslib":^2.3.0"，织女星":^5.20.2"，vega-embed":^6.18.2"，vega-lite":^5.1.0"，zone.js":~0.11.4"；},开发依赖":{@angular-devkit/build-angular":~12.2.0"，@angular/cli":~12.2.0"，@angular/compiler-cli":~12.2.0"，@types/d3":^7.0.0"，@types/jasmine":~3.8.0"，@types/node":^12.11.1"，茉莉花核心":~3.8.0"，业力":~6.3.0"，karma-chrome-launcher":~3.1.0"，业力覆盖":~2.0.3"，业力茉莉":~4.0.0"，karma-jasmine-html-reporter":~1.7.0"，打字稿":~4.3.5"}}

tsconfig.json

<代码>{compileOnSave":假，编译器选项":{baseUrl":./"，outDir":./dist/out-tsc"，forceConsistentCasingInFileNames":真，strictNullChecks":假，严格":错误，noUnusedLocals":假，noUnusedParameters":假，noImplicitReturns":真，noFallthroughCasesInSwitch":真，sourceMap":真，声明":假，下级迭代":真，experimentalDecorators":真，模块分辨率":节点"，importHelpers":真，目标":es2017"，模块":es2020"，库":[es2018"，dom"]},angularCompilerOptions":{enableI18nLegacyMessageIdFormat":假，suppressImplicitAnyIndexErrors":真，strictInjectionParameters":真，strictInputAccessModifiers":真，strictTemplates":真，noImplicitAny":假}}

解决方案

我通过添加 "esModuleInterop": true 和 " 解决了 import 问题allowSyntheticDefaultImports": true 到我的 tsconfig.json 文件:.

我的文件现在看起来像这样:

<代码>{compileOnSave":假，编译器选项":{baseUrl":./"，outDir":./dist/out-tsc"，esModuleInterop":真，allowSyntheticDefaultImports":真，forceConsistentCasingInFileNames":真，strictNullChecks":假，严格":错误，noImplicitReturns":真，noFallthroughCasesInSwitch":真，sourceMap":真，声明":假，下级迭代":真，experimentalDecorators":真，模块分辨率":节点"，importHelpers":真，目标":es2017"，模块":es2020"，库":[es2018"，dom"]},angularCompilerOptions":{enableI18nLegacyMessageIdFormat":假，suppressImplicitAnyIndexErrors":真，strictInjectionParameters":真，strictInputAccessModifiers":真，strictTemplates":真，noImplicitAny":假}}

此页面提示了解决方案.

I have installed vega & vega-lite & vega-embed using npm and now I am following the instructions here on how to embed a graph into my own page (not display it inside vs-code as the vega-embed extension does).

I have written the following code in my Angular app which throws errors:

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);
  }
}

I put one of the examples density-heatmaps.vg.json in my Angular's assets folder and would like to display it inside my http://localhost:4200 page.

At first, I thought it was the main code that was causing the errors, but then I realized it is actually the import line at the top that is crashing my app...

Could someone please help me understand why the import statement crashes the app and how I can fix it?

Afterward, I can continue working on my code and get the graphic to show in my html figure area hopefully...

By the way, I have tried both import embed from 'vega-embed' and import * as embed from 'vega-embed' but both crash the app. I would appreciate any help.

p.s. Here is a screenshot of my inspect console:

I searched for allowSyntheticDefaultImports thinking that it is a flag I can set to true for allowing the import, but I found nothing in the app...

The contents of my config files are as follows:

package.json

{
  "name": "a-chis-angular",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~12.2.0",
    "@angular/common": "~12.2.0",
    "@angular/compiler": "~12.2.0",
    "@angular/core": "~12.2.0",
    "@angular/forms": "~12.2.0",
    "@angular/platform-browser": "~12.2.0",
    "@angular/platform-browser-dynamic": "~12.2.0",
    "@angular/router": "~12.2.0",
    "bootstrap": "^5.1.0",
    "d3": "^7.0.0",
    "rxjs": "~6.6.0",
    "tslib": "^2.3.0",
    "vega": "^5.20.2",
    "vega-embed": "^6.18.2",
    "vega-lite": "^5.1.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.2.0",
    "@angular/cli": "~12.2.0",
    "@angular/compiler-cli": "~12.2.0",
    "@types/d3": "^7.0.0",
    "@types/jasmine": "~3.8.0",
    "@types/node": "^12.11.1",
    "jasmine-core": "~3.8.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "typescript": "~4.3.5"
  }
}

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strictNullChecks": false,
    "strict": false,
    "noUnusedLocals": false,
    "noUnusedParameters": 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
  }
}

解决方案

I fixed the import issue by adding "esModuleInterop": true and "allowSyntheticDefaultImports": true to my tsconfig.json file:.

My file now looks like this:

{
  "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
  }
}

This page prompted the solution.

这篇关于安装后导入vega-embed的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！