Is there a possibility that an error is occurring with the import statement even though the syntax is correct and the required library has been installed? Could the issue lie within the core settings files, specifically the ones mentioned below (package.json & tsconfig.json)?
We have taken over a large Angular application and have successfully added vega, vega-lite, and vega-embed using npm. We are now attempting to integrate vega graphs into the local server webpage.
The key contents of the main files are as presented:
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": {
...
},
"devDependencies": {
...
}
}
tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
...
},
"angularCompilerOptions": {
...
}
}
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({
...
})
export class VegaComponent implements OnInit {
...
constructor() { }
ngOnInit(): void {
...
}
createSvg(): void {
...
}
async embedGraph(): Promise<void> {
...
}
}
We have attempted various import configurations as shown:
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');
All of these attempts resulted in crashing the application.