简体   繁体   中英

svg.js + Angular 7.3: Build in production mode get 'not a constructor'

In development mode this code works perfectly:

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')

  }
}

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]

This is a summary of the issues posted on the svg.js GitHub page:

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

Solutions:

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

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.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM