Как использовать save-svg-as-png с угловой 6 - PullRequest
Новая
       8

Как использовать save-svg-as-png с угловой 6

0 голосов
/ 08 февраля 2019

Я пытаюсь использовать библиотеку save-svg-as-png с моим проектом angular 7.

Однако мне не удается заставить его работать.Я установил библиотеку, используя 

npm install --save save-svg-as-png

, и я могу видеть библиотеку под node_modules.

К сожалению, библиотека является библиотекой javascript старого стиля, и я не знаю, что мне нужносделать для того, чтобы иметь доступ к нему в моих компонентах машинописи.

Readme ссылается на библиотеку Typings , для которой, очевидно, существуют определения типов .Тем не менее, на странице Typings упоминается, что она устарела для TypeScript 2, поэтому я не стал ее использовать.

По-видимому, существует @ types / save-svg-as-png для собственного Angular 2+ поддержка, но когда я пытаюсь установить ее с 

npm install --save @types/save-svg-as-png

, библиотека не может быть найдена (npm ERR! code 404).

Я погуглил еще немного и наткнулся на эту проблему наgithub , где кто-то, очевидно, работает с Angular 2, включив его в файл angular-cli.js, но с изменениями в Angular этот файл больше не существует в версии 7, и я не знаю, как это понадобитсябудет сделано в наши дни.

Я также нашел следующую статью о том, как интегрировать библиотеки javascript в Angular 2 + , но большая часть этого зависит от наличия @types (что онинет, см. выше) и имеет только краткий раздел о том, как предоставить свой собственный файл typings.d.ts, но, поиграв некоторое время, я больше ничего не получил.Есть ли более подробное объяснение, показывающее, как использовать этот подход?

Я также нашел эту статью о stackoverflow о том, как интегрировать библиотеки на основе IIFE в приложения для машинописного текста , но он не работал.

Я добавил следующую строку в мой index.html файл 

<script type="javascript" src="node_modules/save-svg-as-png/lib/saveSvgAsPng.js"></script>

, но как мне теперь получить доступ к функциям, предоставляемым библиотекой?Если я правильно понял вещи, теперь они должны быть доступны на объекте окна, но это не так.

Я также прочитал этот вопрос stackoverflow о том, как использовать библиотеки без машинописи но одна из моих проблем заключается в том, что я даже не знаю, в какое пространство имен импортируется save-svg-as-png.

Кто-нибудь сумел заставить эту библиотеку работать с проектом Angular 6/7 и мог датьподробное объяснение всех необходимых шагов?

1 Ответ

0 голосов
/ 09 февраля 2019

Я постараюсь обобщить решение, предложенное Hypenate:

Установить библиотеку: 

npm install --save save-svg-as-png

В верхней части моего файла машинописного текста / угловой компонент: 

import * as svg from 'save-svg-as-png';

Использование его в моем угловом компоненте: 

svg.svgAsPngUri(document.getElementById('idOfMySvgGraphic'), {}, (uri) => {
      console.log('png base 64 encoded', uri);
    });

Все экспортируемые функции доступны в svg.

...