Problems integrating svgcanvas in angular project - 'loader to handle this file type' error

[pixelflicker]

Hello,

I tried to integrate svgcanvas in a angular project to create our own SVG-Editor GUI with the gread editor from svgedit.
I installed the plugin with npm and tried to instantiate a new Canvas inside a angular component:

import SvgCanvas from '@svgedit/svgcanvas';

` const container = document.querySelector('#editorContainer');

const config = {
  initFill: { color: 'FFFFFF', opacity: 1 },
  initStroke: { color: '000000', opacity: 1, width: 1 },
  text: { stroke_width: 0, font_size: 24, font_family: 'serif' },
  initOpacity: 1,
  imgPath: '/src/editor/images',
  dimensions: [ 500, 300 ],
  baseUnit: 'px'
}

this.canvas = new SvgCanvas(container, config);`

But i'm not able to use it. I get the error:

ERROR in ./node_modules/@svgedit/svgcanvas/dist/svgcanvas.js 8:4068
Module parse failed: Unexpected token (8:4068)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)

It seems that this is a Problem with Typescript that does not understand how to mange the js-File. I never had such a problem with a npm-imported dependency and cant find any solution for that. Maybe someone can help?

Regards
Michael

[sbodese]

Hi, im got also problems to integrate this svgeditor in angular 14.x or 15.x. like the documentation says:

"npm i -s '@svgedit/svgcanvas'

you can then import it in your application:

import svgCanvas from '@svgedit/svgcanvas'"

doesnt work,

i got a TS7016 Error

Error: src/app/shared/components/image-preview/image-preview.component.ts:2:23 - error TS7016: Could not find a declaration file for module '@svgedit/svgcanvas'. 'C:/gits/product/frontend/product/node_modules/@svgedit/svgcanvas/dist/svgcanvas.js' implicitly has an 'any' type. Try npm i --save-dev @types/svgedit__svgcanvasif it exists or add a new declaration (.d.ts) file containingdeclare module '@svgedit/svgcanvas';`

2 import SvgCanvas from '@svgedit/svgcanvas';
`

Thanks and Greetings Steffen

[pixelflicker]

I updated to angular 14 and the problem is gone. Sorry, that i couldnt help you with your problem.

[jfhenon]

Good news.