Исключить автономные компоненты в зависимости от сборки в Angular
У меня есть две среды — одна для тестирования, вторая для релиза. У меня есть отдельный компонент, который помогает мне при отладке, но я не хочу включать его в сборку выпуска. Как я могу это исключить? Я имею в виду, что моя цель не скрыть его (за любым флагом *ngIf), а полностью удалить его из сборки.
Ответы 4
Два возможных пути:
- Отложенные просмотры
Вы можете использовать функцию отложенного просмотра в Angular (https://angular.io/guide/defer).
Вы сможете определить что-то вроде:
@defer (when debugMode) {
<your-component />
}
Где debugMode — это переменная среды.
По сути, это функция отложенной загрузки компонентов.
- Исключить файл TsConfig
вы можете исключить файл из сборки Angular в tsconfig.json:
"exclude": [
"path/to/your/file.ts"
]
Чтобы использовать это, вам может понадобиться один файл tsconfig.json для «производственной» сборки и один для «отладочной» сборки, которая не исключает файл.
Затем обновите angular.json, чтобы использовать правильный файл tsconfig для сборки:
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
},
{
"replace": "src/yourconfig.ts",
"with": "src/yourconfig.prod.ts"
}
],
@defer не работает — если вы проверите файл main.ts, вы увидите, что этот файл все еще находится в коде. Defer используется для отложенной загрузки компонента, а не для постоянного исключения его из сборки на основе условия (devMode или env). Что касается fileReplace, я знаю этот трюк, но вам нужно хранить два файла - один для prod, второй для dev. Должно быть что-то лучше
Я не думаю, что можно каким-либо другим способом исключить из компиляции просто файл. Также существует проблема, заключающаяся в том, что вы ссылаетесь на этот компонент в своем коде, поэтому компилятор попытается разрешить его и скомпилировать.
ок, fileReplace работает только для файлов, которые могут передавать регулярное выражение; так что это только решение env. Не могу принять решение Обновлено: Мы публикуем в тот же момент. Я поищу что-нибудь другое
Что вы подразумеваете под «так что это только решение для env»? это все равно не то, что ты ищешь?
В Angular вы можете настроить приложение для разных сред. Прочтите официальную документацию Angular об этом.
Лучший метод — использовать «@defer (когда isDevMode) {}» с «--configuration Production» в package.json. IsDevMode — это основная функция, «--configuration Production» — один из параметров команды «ng build».
@defer работает только в том случае, если дочерний и родительский элементы являются автономными и дочерний элемент не содержит элементов, импортированных откуда-либо (например, const, enum или интерфейс).
Идея состоит в том, чтобы создать фрагмент данных (аналогично модулю lazyLoaded), который никогда не будет загружен из-за результата функции. Его можно изменить для использования переменных .env.
Устранение/исключение неработающего кода обрабатывается командой Angular. https://github.com/angular/angular/issues/51175
Спасибо за помощь
Вы можете завершить первое решение @n_denny (отключаемые представления) с заменой файла рабочей конфигурации.
Ваш взгляд:
@defer (when debugMode) {
<your-component />
}
Конфигурация angular.json
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/app/your-component.component.ts",
"with": "src/app/your-empty-component.component.ts"
}
],
...
your-empty-component.component.ts — пустой угловой компонент
хороший ответ! очень подробно!