Search code examples
angularsvgsvg.js

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

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 svgjs v3 failure

Solution

  • 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.