SVG.js 3 with Angular 7 "has no compatible call signatures" error

Question

I'm using Angular 7 and have been able to use SVG.js v2.* but I've been unable to get SVG.js v3.* to work. I've made two github projects, the first show SVG.js v2 working angular7-svgjs2, and the second shows SVG.js v3 not working with the only thing changed being the imported library angular7-svgjs3

Using SVG.js 2.7* (This works)

import { Component, AfterContentInit } from '@angular/core';

import * as SVGjs from 'svg.js';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterContentInit {
  title = 'angular7-svgjs2';

  ngAfterContentInit () {
    let draw = SVGjs('drawing');
    let rect = draw.rect(100, 100);
  }
}

Using SVG.js 3.0.* (This fails)

import { Component, AfterContentInit } from '@angular/core';

import * as SVGjs from '@svgdotjs/svg.js';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterContentInit {
  title = 'angular7-svgjs3';

  ngAfterContentInit () {
    let draw = SVGjs('drawing');
    let rect = draw.rect(100, 100);
  }
}

Here is the failure when running "ng serve" in the second example

score 1 · Accepted Answer · answered May 06 '19 at 10:16

svg.js v3 moved to esm. So what you import are esm exports.
Its not this function/object hybrid you had in v2.

So, only import what you actually need:

import {SVG, find, Rect, whateveryouneed} from '@svgdotjs/svg.js'

var canvas = SVG().addTo('#drawing')

As you can see also the initialising of new docs changed.

score 0 · Answer 2 · answered May 29 '19 at 12:47

On my end I do that to use svg.js 3.x in my project:

import * as SvgJs from '@svgdotjs/svg.js';

this.svgContainer = SvgJs.SVG(this.svgElement.nativeElement);

After it's your choice how you want to import classes/methods, my solution (the one you basically have) requires you to use the namespace to access them. The one from @Fuzzyma requires you to import one by one everything you want to use.

SVG.js 3 with Angular 7 "has no compatible call signatures" error

2 Answers2