import statement crashing an angular app despite installed module

Question

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)?

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.

The contents of the main 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
  }
}

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.

@Dmitry Grinko Done! Added a screenshot of the collapsed errors. I hope you can help... Please let me know if you need more info to diagnose the issue. Thanks — Reem Al-Assaf, Aug 11 '21 at 06:37
I fixed our issue [here](https://stackoverflow.com/questions/68722781/importing-vega-embed-after-installation/68738716#68738716)! — CatarinaRuna, Aug 11 '21 at 08:43

score 1 · Accepted Answer · answered Aug 11 '21 at 08:45

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

This page prompted the solution.

import statement crashing an angular app despite installed module

1 Answers1

Linked