尽管安装了模块，但导入语句仍使 Angular 应用程序崩溃 [英] import statement crashing an angular app despite installed module

问题描述

如果语法正确且库已经安装，import 语句会导致错误(附图)的原因是什么?可能是下面两个主要设置文件 (package.json & tsconfig.json) 中的内容吗?

What could be the reason that an import statement would cause an error (attached image) if the syntax is correct and the library has already been installed? Could it be something in the two main settings files below (package.json & tsconfig.json)?

我们继承了一个很大的 Angular 应用程序，并在其中安装了 vega &vega-lite &vega-embed 使用 npm，现在我们正在尝试将 vega 图嵌入到提供的本地服务器网页中.

We have inherited a big Angular application, and have installed in it vega & vega-lite & vega-embed using npm and now we are trying to embed vega graphs in the local-server webpage that is served.

主要文件内容如下:

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

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

我们已经尝试了以下所有方法:

We have tried all the following:

import { default as vegaEmbed } from 'vega-embed';
import * as embed from 'vega-embed';
import embed from 'vega-embed';
var embed = require("vega-embed");
var vega = require('vega');
require('vega-embed');

它们都使应用程序崩溃.

They all crash the app.

推荐答案

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

We resolved an identical problem by adding "esModuleInterop": true and "allowSyntheticDefaultImports": true to our tsconfig.json file:.

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

The complete 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
  }
}

此页面提示了解决方案.

这篇关于尽管安装了模块，但导入语句仍使 Angular 应用程序崩溃的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！