I have been attempting to integrate Vega v3 into a simple Angular v2 framework (using typescript v2 and webpack v2), but I am encountering unexpected behavior. Below, I will outline the issues I have been facing during this integration process.
You can find the full demo repository here.
To start with, the bundled version of Vega was not functioning correctly for me. In response, I made the decision to manually include all dependencies mentioned in an example provided by the official Vega documentation. Additionally, I explored the option of directly utilizing Vega modules.
Furthermore, there were three sample specifications available from the official sources (first spec, second spec, third spec) that were utilized for testing within the given setup.
Finally, upon executing the sequence of base Vega drawing methods for each specification, the outcomes were varied:
- The first spec triggered an error:
, resulting in a disruption of the entire Angular application. For more details, refer to this comprehensive stack trace.EXCEPTION: Error in ./VegaPlotComponent class VegaPlotComponent_Host - inline template:0:0 caused by: Cannot read property 'orient' of undefined - The second spec and third spec resulted in the creation of an inexplicable
width="9", height="9"svg square, as demonstrated in figure 1 and figure 2 through plot size depiction for the 2nd spec and plot size illustration for the 3rd spec.
- The first spec triggered an error:
Figure 1. Inspection of the DOM fragment of the Vega plot-Angular component using developer tools.
Figure 2. Selection of the rendered view of the DOM fragment of the Vega plot-Angular component.
Hence, what could be the reason behind the compatibility issue between Vega 3 and Angular2?