I am trying to use the save-svg-as-png library with my angular 7 project.
However, I cannot manage to get it to work. I have installed the library using
npm install --save save-svg-as-png
and I can see the library under node_modules.
Unfortunately, the library is an old-style javascript library and I do not know what I need to do in order to have access to it in my typescript components.
The readme refers to the Typings library for which type definitions apparently exist. However, the Typings page mentions that it is deprecated for TypeScript 2, so I did not pursue this.
Apparently there is @types/save-svg-as-png for native Angular 2+ support, but when I try to install it with
npm install --save @types/save-svg-as-png
the library cannot be found (npm ERR! code 404).
I googled some more and came across this issue on github where somebody has apparently got it working with Angular 2 by including it in the angular-cli.js file, but with the changes to Angular, this file no longer exists in version 7 and I do not know how that would need to be done nowadays.
I've also found the following article on how to integrate javascript libraries into Angular 2+, but most of it relies on @types being available (which they are not, see above) and only has a brief section on how to supply your own typings.d.ts file but after playing around for quite a while, I did not get any further. Is there a more detailed explanation showing how to use this approach?
I've also found this article on stackoverflow on how to integrate IIFE based libraries into typescript apps but did not get it working.
I've added the following line to my index.html file
<script type="javascript" src="node_modules/save-svg-as-png/lib/saveSvgAsPng.js"></script>
but how do I now access the functions provided by the library? If I understood things correctly, they should now be available on the window object, but that does not seem to be the case.
I've also read this stackoverflow question on how to use non typescript libraries but one of my problems is that I don't even know into what namespace save-svg-as-png is being imported.
Has anyone managed to get this library working with an Angular 6/7 project and could give a detailed explanation on all steps required?
I'll try to summarise the solution as suggested by Hypenate:
Install the library:
npm install --save save-svg-as-png
At the top of my typescript file/angular component:
import * as svg from 'save-svg-as-png';
Using it in my angular component:
svg.svgAsPngUri(document.getElementById('idOfMySvgGraphic'), {}, (uri) => {
console.log('png base 64 encoded', uri);
});
All exported functions are available on svg.