Angular пакет внешних пользовательских веб-компонентов

Question

Я создал веб-компонент, используя пользовательские элементы с Angular 8. Часть компонента состоит в отображении некоторых пользовательских значков (разработанных и упакованных как другое приложение). Я включил пакет пользовательских значков в файл package.json компонента:

"dependencies": {
     "@somelibrary/icons": "1.0.34"
}

Я правильно установлен в модулях узла. В файле angular.json я включаю файл css в стилях:

"styles": [
    "src/styles.css",
    "node_modules/@somelibrary/icons/css/fontface.css"
],

Где в файле fontface.css указаны URL-адреса файлов пользовательских шрифтов с font-face:

@font-face {
  font-family: "my-fonts";
  src:url('../fonts/my-fonts.woff2') format('woff2'),
    url('../fonts/my-fonts.woff') format('woff'),
    url('../fonts/my-fonts.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

Затем я создаю пользовательский веб-компонент и объединяю все созданные js файлы в один для использования в качестве автономного компонента.

cat dist/lib/runtime.js dist/lib/polyfills.js dist/lib/scripts.js dist/lib/main.js > dist/myComponent.js

Проблема заключается в том, что при использовании окончательно созданного Файл javascript (включите его в простой индекс. html страница), файлы tff и woff не включены, поэтому я просто вижу заполнитель значка.

Я попытался включить файлы шрифтов во время встроенного файла myComponent.js, но, как и ожидалось, я получаю синтаксическую ошибку.

cat dist/lib/runtime.js dist/lib/polyfills.js dist/lib/scripts.js dist/lib/main.js dist/lib/my-fonts.ttf> dist/myComponent.js

Я видел ответы типа this , но цель - это переносимый компонент, а также потому, что внешние шрифты. Я не могу переместить их в папку ресурсов, так как они могут меняться со временем.

Я также исследовал параметры из этого потока , я не могу экстернализовать ресурсы (так как они приходят из пакета ) и URL-адрес ader, используемый для файлов ttf и wof, не работает.

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

Answer 1

Мне наконец удалось решить мою проблему.

Через пакет. json и перед сборкой я кодирую файл .woff (содержащий значки) в base64. Затем создайте новый fontface-copy.css, где URL-адрес sr c включает все данные в URI данных, например:

src:url(`data:application/octet-stream;base64,[encoded_output]`)

Наконец, включите вновь созданный файл в основной файл css и после сборки значки находятся внутри файла javascript.

Обновление с более подробной информацией после запроса:

То, как я это делал, было в файле package.json, в скрипте сборки и до ng build Я добавил несколько дополнительных команд npm run для включения файла шрифтов в комплект js.

Первый шаг - это кодирование woff-файла, содержащего шрифты, в base64 с помощью следующей команды

base64 my-fonts.woff > base64-fonts.txt 

Следующим шагом является добавление строки data:application/octet-stream;base64, перед закодированным текстом. Это можно сделать с помощью команды sed .

В приложении должен существовать файл .css (с шрифтом), который ссылается на файл .woff, например:

@font-face {
  font-family: "my-fonts";
  src:url('../fonts/my-fonts.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

Последний шаг - заменить URL ссылка внутри файла. css с содержимым только что созданного файла base64-fonts.txt (с сохранением цитат, также с использованием sed). Новый файл css теперь содержит встроенные закодированные шрифты, и после сборки приложения шрифты должны быть включены в связанный файл.

Небольшой пример пакета. json Файл:

"build": "npm run fonts-encode && npm run fonts-edit && npm run replace-css && ng build my-app --prod --output-hashing=none",
"fonts-encode": "base64 my-fonts.woff > base64-fonts.txt",
"fonts-edit": "[sed_command] base64-fonts.txt",
"replace-css": "[sed_command] base64-fonts.txt font-face.css"