Мой пакет Angular 8 NPM не находит своих активов

Question

Мои активы успешно копируются в мой пакет npm; однако, когда я устанавливаю свой пакет, они не доступны после обслуживания приложения.

Изображения в моем приложении ищут путь, подобный следующему: https://localhost: 4200 / assets / images / image. jpg

В узловых модулях структура папок пакета выглядит следующим образом:

-scopedPackageName

- связки

- esm5 ...

- активы

--- images

---- image.jpg <----- файл Я хочу, чтобы мой пакет увидел </p>

Невозможно найти хорошие статьи о том, как это работает. Любой из них будет признателен.

Я уже рассмотрел кодирование base64, но потеря качества не подходит для моего варианта использования.

Я пробовал несколько вещей в angular. json что не сработало:

"build": {
                    "builder": ...
                    "options": {
                        "outputPath": ...
                        "index": ..
                        "main": ...
                        "polyfill": ...
                        "tsConfig": ...
                        "assets": [
                            "src/assets",
                            "src/assets/images",
                            {
                                "glob": "**/*",
                                "input": "node_modules/@geode/geode-lib/assets",
                                "output": "/assets/"
                            }
                        ],
                        "styles": [...],
                        "scripts": []

И это

"build": {
                    "builder": ...
                    "options": {
                        "outputPath": ...
                        "index": ..
                        "main": ...
                        "polyfill": ...
                        "tsConfig": ...
                        "assets": [
                            "src/assets",
                            "src/assets/images",
                          "node_modules/@geode/geode-lib/assets",
                         "node_modules/@geode/geode-lib/assets/images"
                        ],
                        "styles": [...],
                        "scripts": []

Первый не дает ошибок, но не меняет результат.

Второй каждый дает такую ​​ошибку:

Произошло необработанное исключение: путь ресурса node_modules / scopedPackageName / assets должен начинаться с источника проекта root. См. "C: \ Users .... \ AppData \ Local \ Temp \ ng-MLqnKS \ angular -errors.log" для получения дополнительной информации.

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

Спасибо за любую информацию что вы можете предоставить.

Answer 1

Я создал пример проекта для этого на GitHub, см. Здесь: https://github.com/tenkmilan/angular-scoped-package-with-image

В примере есть пакет с областью действия, он находится в @myscope и имя пакет scoped-package. После npm install пример изображения можно найти по пути node_modules\@myscope\scoped-package\assets\images.

В angular.json оно добавляется к assets следующим образом:

"assets": [
  "src/favicon.ico",
  "src/assets",
  {
    "glob": "**/*",
    "input": "./node_modules/@myscope/scoped-package/assets",
    "output": "/assets/"
  }

В angular.json это означает, что содержимое ./node_modules/@myscope/scoped-package/assets будет помещено в папку dist в папке assets. Если мы запустим команду npm run build, мы увидим, что она действительно существует:

И вот почему в шаблоне Angular она должна ссылаться следующим образом:

<img src="assets/images/doge.jpg">