В настоящее время у меня есть монорепозиторий, который содержит стандартное приложение Angular. На том же уровне, что и мое приложение, у меня есть рабочая область Angular, которая содержит только библиотеку.
Я сделал необходимое сопоставление в основном приложении, чтобы указать, где находится моя библиотека. Я могу без проблем использовать компоненты моей библиотеки.
У меня есть компонент под названием «загрузчик», который использует изображение в формате gif, которое находится в папке с моими активами. Во время сборки приложения я вижу, что мои изображения хорошо экспортируются в папку сборки, но когда я открываю браузер, я получаю ошибку 404, что он не находит мою гифку.
projects/my-lib-name/: ng-package.json
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
"dest": "../../dist/hive-commons",
"assets": ["./assets"],
"lib": {
"entryFile": "src/public-api.ts"
}
}
projects/my-lib-name/src/lib/my-module/my-folder-component: my-component.html
<img src = "assets/hive-commons/img/loading.gif" alt = "Loading"/>
Внутри workspace-name/dist/my-lib-name/assets/img
я вижу свой loading.gif
, но когда я импортирую этот компонент в свои приложения, я получаю это 404 loading.gif not found
->
http://localhost:4200/assets/hive-commons/img/hive-loading-70.gif
Вот значение: <base href = "/">
Уже попробовал <img src = "./assets/....
Проблема, которую я вижу сейчас, заключается в том, что моя библиотека пытается получить это изображение внутри папки assets
, когда я импортирую свою библиотеку в приложение, которое пытается получить внутри активы приложения, и она выиграла не нашел там... Я не могу понять, как я могу отображать из моего приложения angular
Есть способ взять активы в node_modules и переназначить их куда-нибудь еще. Пишу в ответ, так как мне здесь не хватает места
В angular.json
вы можете извлекать ресурсы из своей библиотеки и повторно отображать их в своем проекте. Синтаксис:
"assets": [
{
"glob": "**/*",
"input": "node_modules/my-dependency/assets",
"output": "./my-dependency-assets/"
},
Конечно, вы можете решить выставить их в ./assets
вместо ./my-dependency-assets
, но я бы не стал смешивать активы приложения с активами библиотеки, так как это будет головной болью в случае активов-омонимов.
Например, в hive-commons вы можете переименовать папку с ресурсами в hive-assets
, чтобы все компоненты вашей библиотеки указывали на URL-адреса ресурсов, такие как ./hive-assets/path/to/image.png
.
Затем в основном приложении вы переназначаете dist/hive-commons/hive-assets
на hive-assets
Я попробую и вернусь к вам
Спасибо за Ваш ответ ! Это работает как шарм :) И я последую вашему совету по поводу имени папки с ресурсами.
Откройте инструменты разработчика Chrome, посмотрите на элемент
<head>
и найдите<base href = "...">
внутри него. Какова его ценность? А можно попробовать<img src = "./assets/hive-commons/img/loading.gif" alt = "Loading"/>