svg.js + Angular 7.3:在生产模式下构建会得到“不是构造函数" [英] svg.js + Angular 7.3: Build in production mode get 'not a constructor'

问题描述

在开发模式中，此代码可完美运行:

In development mode this code works perfectly:

app.component.ts

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之后)，我得到

but in production mode (after ng b --prod) I get

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]

推荐答案

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

在撰写本文时，npm软件包@svgdotjs/svg.js v0.3.12具有依赖于调用Function.name的代码.当前主分支上有一个此问题的修复程序，但它具有尚未发布到NPM(更多信息，请参见: https://github.com/svgdotjs/svg.js/issues/1005 ).

At the time of writing this, the npm package @svgdotjs/svg.js v0.3.12 has code that relies on calling Function.name. There is a fix for this issue on the current master branch, but it has not been published to NPM yet (more info here: https://github.com/svgdotjs/svg.js/issues/1005).

解决方案:

作为一种变通办法(直到发布下一版本)，您可以在构建过程中使用类似的规则来函数名称列表.我不确定在Angular 7中如何实现，但是

As a work-around (until the next version is published), you can use similar rules in your build process to the rules used by svg.js when it is built. Specifically, you will need to tell your minifier to not mangle a specific list of function names. I am not sure how it would be done in Angular 7, but this post might be helpful place to start (Angular 5).

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

Alternatively (and I don't particularly recommend this) you can download the latest master branch, run the build command, and then copy the built code into your source directory and use it directly instead of using the NPM package.

这篇关于svg.js + Angular 7.3:在生产模式下构建会得到“不是构造函数"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！