Библиотека Angular 404 loading.gif не найдена

В настоящее время у меня есть монорепозиторий, который содержит стандартное приложение 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

Откройте инструменты разработчика Chrome, посмотрите на элемент <head> и найдите <base href = "..."> внутри него. Какова его ценность? А можно попробовать <img src = "./assets/hive-commons/img/loading.gif" alt = "Loading"/>

Arnaud Denoyelle 07.04.2022 11:16

Вот значение: <base href = "/"> Уже попробовал <img src = "./assets/.... Проблема, которую я вижу сейчас, заключается в том, что моя библиотека пытается получить это изображение внутри папки assets, когда я импортирую свою библиотеку в приложение, которое пытается получить внутри активы приложения, и она выиграла не нашел там... Я не могу понять, как я могу отображать из моего приложения angular

Johnny Da Costa 07.04.2022 11:25

Есть способ взять активы в node_modules и переназначить их куда-нибудь еще. Пишу в ответ, так как мне здесь не хватает места

Arnaud Denoyelle 07.04.2022 11:29
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
1
3
21
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

В 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

Я попробую и вернусь к вам

Johnny Da Costa 07.04.2022 11:57

Спасибо за Ваш ответ ! Это работает как шарм :) И я последую вашему совету по поводу имени папки с ресурсами.

Johnny Da Costa 07.04.2022 12:16

Другие вопросы по теме