How to use save-svg-as-png with angular 6

Question

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?

Answer 1

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 .

Answer 2

Also, we can use the saveSvgAsPng.js file as an external js file instead of installing that package

1. Add saveSvgAsPng.js file into src/assets/js
2. And add this JavaScript file in scripts array in angular.json file

"scripts": [ "src/assets/js/saveSvgAsPng.js" ]

3. declare saveSvgAsPng in your component.ts

declare const saveSvgAsPng: any;

4. And call that when you need to download.

saveSVG(): void{ saveSvgAsPng(document.getElementById('id'), fileName); }

Make sure to restart your angular app ( ng serve ) if you change scripts array or declared name