svg.js + Angular 7.3:在生产模式下构建会得到“不是构造函数”

时间:2019-03-16 10:16:53

标签: angular svg.js

开发模式中,此代码可以完美运行:

app.component.ts

import { Component, OnInit } from '@angular/core';
import SVG from "@svgdotjs/svg.js/src/svg"   //v 3.0.12

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

  ngOnInit() {
    this.draw = SVG().addTo('#canvas').viewbox(0, 0, 300, 140)
    var text = this.draw.text('ABCDE')

  }
}

但在生产模式中(在ng b --prod之后)我得到

main.b6499f06315e700352a1.js:1 ERROR TypeError: du[e] is not a constructor
    at mu (main.b6499f06315e700352a1.js:1)
    at yu (main.b6499f06315e700352a1.js:1)
    at Ul.addTo (main.b6499f06315e700352a1.js:1)
    at t.ngOnInit (main.b6499f06315e700352a1.js:1)
    at main.b6499f06315e700352a1.js:1
    at main.b6499f06315e700352a1.js:1
    at Yo (main.b6499f06315e700352a1.js:1)
    at _s (main.b6499f06315e700352a1.js:1)
    at Object.updateDirectives (main.b6499f06315e700352a1.js:1)
    at Object.updateDirectives (main.b6499f06315e700352a1.js:1)

[trata tata ta]

1 个答案:

答案 0 :(得分:2)

这是svg.js GitHub页面上发布的问题的摘要:

在撰写本文时,npm软件包@svgdotjs/svg.js v0.3.12的代码依赖于调用Function.name。当前的master分支上有一个fix for this issue,但尚未发布到NPM(此处有更多信息:https://github.com/svgdotjs/svg.js/issues/1005)。

解决方案:

作为一种变通方法(直到发布下一版本),可以在构建过程中使用与the rules used by svg.js类似的规则。 具体来说,您需要告诉Minifier不要弄乱特定的list of function names我不确定在Angular 7中如何实现,但是this post可能会有所帮助开始(Angular 5)。

或者(我不特别推荐这样做),您可以下载最新的master分支,运行build命令,然后将构建的代码复制到源目录中并直接使用,而不使用NPM软件包。