Добавляем статические файлы вне проекта ангуляр

Всем привет. На связи Омельницкий Сергей. Сегодня я бы хотел рассказать, что делать если вы хотите предоставить доступ к статическому контенту, который находится вне корня исходного 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/" } ],

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