SVG.js 3 有 Angular 7 "has no compatible call signatures" 错误

Question

我正在使用 Angular 7 并且能够使用 SVG.js v2.* 但我一直无法使 SVG.js v3.* 工作。我做了两个 github 项目，第一个显示 SVG.js v2 工作 angular7-svgjs2, and the second shows SVG.js v3 not working with the only thing changed being the imported library angular7-svgjs3

使用 SVG.js 2.7*（有效）

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

使用 SVG.js 3.0.*（失败）

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

这里是第二个例子运行"ng serve"时的失败

Answer 1

svg.js v3 移至 esm。所以你导入的是esm导出的。
它不是你在 v2.

中使用的这种 function/object 混合体

因此，只导入您实际需要的内容：

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

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

如您所见，新文档的初始化也发生了变化。

Answer 2

最后，我这样做是为了在我的项目中使用 svg.js 3.x：

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

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

在您选择导入方式后 classes/methods，我的解决方案（您基本上拥有的解决方案）要求您使用命名空间来访问它们。来自@Fuzzyma 的那个要求你一个一个地导入你想使用的所有东西。

SVG.js 3 有 Angular 7 "has no compatible call signatures" 错误

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

svg

svg.js

angular