Включите активы при создании библиотеки angular

Я создаю библиотеку, которая содержит настраиваемый шрифт значка. Однако, когда я создаю свою библиотеку с использованием ng build <library-name> --prod, папка ресурсов не включается в сборку, что означает, что значки не отображаются при использовании производственной сборки.

Я пробовал несколько решений, таких как добавление массива assets в angular.json и копирование папки ресурсов в созданную папку dist.

Я использую Angular 8, а библиотека была создана с помощью angular-cli.

Я пробовал включать шрифты двумя способами: используя @import url( '../assets/icon_font.css' ); в одном из файлов стилей и добавляя ../assets/icon_font.css в styleUrls в одном из компонентов, которые этого требуют. (icon_font.css - это файл css, который включает шрифты значков)

Вот макет моей библиотеки:

- src
  - lib
    - assets
      - icon_font.css
      - font files
    - component that requires icons
      - style sheet that has @import icon_font.css
    - other components and classes

Я хотел бы, чтобы .ttf и другие файлы шрифтов в каталоге assets/ были доступны в экспортированной папке dist.


angular assets angular-cli angular-library ng-packagr
person Aivaras Kriksciunas    schedule 31.08.2019    source источник
comment
Есть что почитать: github.com/angular/angular-cli/issues/11071   -  person R. Richards    schedule 31.08.2019
comment
папка с активами включена в angular.json?   -  person Reza    schedule 01.09.2019
comment
Да, я включил его в options, но теперь он выдает Schema validation ошибку: Data path "" should NOT have additional properties(assets).   -  person Aivaras Kriksciunas    schedule 01.09.2019
comment
Папка Assets должна быть включена в angular.json проект только в приложении angular. Для библиотеки вы получите сообщение об ошибке @AivarasKriksciunas. Вам нужно будет добавить его в ng-package.json целевой библиотеки в папке проектов   -  person Raphaël Balet    schedule 29.10.2020
comment
Вы можете воспользоваться другим подходом: включить значки в библиотеку, например, показать эту ссылку: netbasal.com/   -  person Eliseo    schedule 12.11.2020

Ответы (3)


arrow_upward
36
arrow_downward

Как уже было сказано, angular библиотека теперь поддерживает ресурсы, так как v9.x от angular.
Но это не очень хорошо объяснено на их веб-сайт. Чтобы он заработал, вам необходимо:

  1. Добавьте папку ресурсов в корень проекта библиотеки
    введите описание изображения здесь
  2. Добавьте "assets": ["./assets"], в ng-package.json файл библиотеки
{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/icon",
  "assets": ["./assets"], // <-- Add it here
  "lib": {
    "entryFile": "src/public-api.ts"
  }
}
  1. ng build custom-project --prod. Затем он появится в вашей папке dist
    введите описание изображения здесь

Тогда вы можете просто добавить то, что хотите, в эту папку

Дополнительные советы: используйте его в своем проекте

Затем, если вы хотите использовать его в проекте, в который он импортируется, выполните:

Активы, js, стили в angular.json

Добавьте эти файлы в свой angular.json файл

 {
   /*...*/
   "assets": [ // Import every assets
     {
       "glob": "**/*",
       "input": "./node_modules/custom-project/assets",
       "output": "/assets/"
     }
   ],
   "styles" : [ // Only custom css
     "node_modules/custom-project/assets/my-css-file.css"
   ],
   "scripts" : [
     "node_modules/custom-project/assets/my-js-file.js"
   ]
 }

Js как часть app.module

Вы также можете напрямую добавить js в дочерний файл , даже если я не уверен, действительно ли это ленивая загрузка этих файлов.
Например, в ваш home.module.ts файл, импортируйте

 import 'custom-project/assets/my-js-file.js'
person Raphaël Balet    schedule 29.10.2020
comment
Можно ли скопировать активы из папки node_modules проекта библиотеки? Я пробовал активы: [../../node_modules/@foo/core/assets], но безуспешно. Я надеялся, что он создаст папку с ресурсами в dist / ‹project› и скопирует все ресурсы из foo. Это работает с обычным проектом Angular, добавляя конфигурацию ресурсов в build / builder / options в angular.json для angular-devkit / build-angular: browser. - person Eric; 12.11.2020
comment
@Eric Я обновил ответ, он отвечает на ваш вопрос? - person Raphaël Balet; 12.11.2020
comment
@rbalet Похоже на пост Angular 6, используя указанный вами синтаксис, вы не можете добавлять ресурсы из модуля узла, если они не находятся в каталоге src. Вместо строкового пути вы должны поместить этот объект в массив ресурсов: { "glob": "**/*", "input": "./node_modules/module_name/assets", "output": "./assets" } - person Nirmal; 21.11.2020
comment
@ Nirmal, Спасибо, обновил ответ. @Eric, теперь должен работать, не забудьте также добавить его в ресурсы, найденные в production - person Raphaël Balet; 17.12.2020
comment
Решение работает, но в библиотеке Angular, созданной с помощью интерфейса командной строки, папка ресурсов находится внутри папки src, а не на том же уровне. Я не понимаю, что у меня есть решение для копирования ресурсов в Angular, которое не соответствует структуре папок по умолчанию. Конечно, это не ваша вина, просто я сказал, что это плохое дизайнерское решение со стороны Angular или команды ng-package. - person Dani P.; 19.01.2021

arrow_upward
12
arrow_downward

Как вы сказали в своем ответе, невозможно было заставить упаковщик упаковывать активы вместе с файлами сборки.

Теперь ng-packagr выпустила новую версию, которая позволяет включать ресурсы вместе с файлы сборки:

Вы можете скопировать эти объекты с помощью параметра "Ресурсы".

{
  "ngPackage": {
    "assets": [
      "CHANGELOG.md",
      "./styles/**/*.theme.scss"
    ],
    "lib": {
      ...
    }
  }
}

Дополнительная информация здесь: https://github.com/ng-packagr/ng-packagr/blob/master/docs/copy-assets.md

person German Quinteros    schedule 30.03.2020
comment
Этот ответ был бы намного полезнее, если бы он предоставил контекст для этих строк. Какой файл? Где в файле? - person theMayer; 03.09.2020
comment
в вашей библиотеке angular должен быть файл ng-package.json. Это информация для вашего упаковщика - person Shishibi; 06.10.2020

arrow_upward
4
arrow_downward

Глядя на другие сообщения и проблемы на github, похоже, что нет способа заставить упаковщик упаковывать активы вместе с файлами сборки. Вместо этого я скопировал папку assets в папку dist вручную перед ее развертыванием в npm. После этого мне просто нужно было бы сказать пользователям вручную @import icon_font.css в одну из своих таблиц стилей.

person Aivaras Kriksciunas    schedule 02.09.2019
comment
Какой исходный путь вы указали в коде вашей библиотеки для доступа к ресурсам, которые присутствовали в вашей библиотеке? Куда именно вы копировали ассеты в папку dist? Вы можете помочь? - person Mehul Parmar; 22.06.2020