Всем привет. На связи Омельницкий Сергей. Сегодня я бы хотел рассказать, что делать если вы хотите предоставить доступ к статическому контенту, который находится вне корня исходного angular проекта.



В angular, для настроек конфигураций и рабочего окружения используют файл angular.json. В этом файле мы можем найти свойство assets в котором хранится массив с указанием путей к статическому контенту. В общем виде он выглядит вот так:


"assets": [
  "src/favicon.ico",
  "src/assets"
],

Но бывают случаи, когда проект не один, а несколько. Появляются общие статические файлы для этих проектов и возникает вопрос — А как получить к ним доступ? Если попробовать просто указать путь к файлам вне проекта в assets, то при запуске проекта вы получите ошибку вида — An unhandled exception occurred: The configs asset path must start with the project source root.


И тут на помощь приходят расширенные настройки самого assets, а именно: вы можете сконфигурировать передаваемые параметры в качестве объекта. Этот объект может содержать в себе следующие поля:


  • glob: Поиск файлов по шаблону. Для базовой директории нужно использовать input.
  • input: Путь относительно корня рабочей области.
  • output: Путь относительно результирующей директории (по умолчанию dist/project-name).
  • ignore: Список для исключения в globs шаблоне.

Давайте трансформируем наш assets в новый вид:


"assets": [
  { "glob": "**/*", "input": "src/assets/", "output": "/assets/" },
  { "glob": "favicon.ico", "input": "src/", "output": "/" }
]

А теперь давайте добавим папку /common, которая находится вне проекта. Дадим ей доступ по /tmp/**/*:


"assets": [
  "src/favicon.ico",
  "src/assets",
  {"glob": "**/*", "input": "./common", "output": "/tmp/" }
],

Ну в общем-то и все. Подробнее почитать об этом можно в официальной документации ангуляра