Антон Швец

source.pipe(
  switchMap( value => myBooleanSubject.pipe(filter(Boolean), mapTo(value)))
)
  .subscribe(value => ...)

В твоем примере зависимость создается внутри класса, а в примере выше зависимость уже создана и передается в класс при создании его экземляра.

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

Так же di предоставляет больше гибкости, инжектор это своего рода внешняя переменная, которую можно подменить. Что удобно при тестировании или при использовании в контексте.

Последнее время поглядываю на esbuild сидя на webpack.

Ну так можно с вебпака никуда не слезать, а для начала собирать js с помощью esbuild-loader вместо бабеля и ts.

ниче не понятно, чего куда.
Возможно вам поможет понимание того, как работает прокси.

При запуске дев сервера мы запускаем сервер на ноде который умеет слушать сеть по указанному порту и отдавать статические файлы, собранные вебпаком.
Далее в браузере мы отправляемся по ссылке типа "/api" которая пойдет на тот же самый хост и порт, на котором работает страничка. Этот запрос придет туда же, откуда страница взята, т.е. на наш nodejs сервер.
И там включается разбор запросов, который говорит "ага, вот адрес /api у нас должен проксироваться вот сюда" и сервер на ноде делает самостоятельно запрос по указанному в proxy конфиге адресу, передавая туда же все данные из запроса. Получив ответ, он отправит его под видом ответа от ноде-сервера, который попадет в браузер.

Зачем вообще нам прокси? Чтобы браузер считал что он никуда далеко не ходит, и OPTIONS не слал. И для того чтобы лишние пути во фронте не прописывать, изменить адреса бэкендов для разработки можно подсунув другой конфиг.

А теперь какие такие другие url? Если пойти из браузера по другому url в запущенный прокси он не попадет никогда, если не совпадет айпи адрес хоста и порт.

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

Переадресацию на разные роуты.
Конечно, часто разработчики хотят сделать так, чтоб один роут для разных прав показывал разное, теоретически это можно реализовать подменяя конфиг роутера, но я склоняюсь к тому, что путь однозначно должен соответствовать содержимому. Рассматривайте картинку на экране как функцию от роута и данных. Чем проще соответствие, тем лучше.

Реактивную форму сделайте, и будет вам Observable
А вообще [(ngModel)] это сахар для [ngModel]="name" (ngModelChange)="name = $event"

А ngChange это из angular.js

1. destructuring assignments в микросинтаксисе структурок не работает https://github.com/angular/angular/issues/27555

2. лучше писать так

<div *ngFor="let entry of obj | keyvalue">
  {{ entry.key }} {{ entry.value }}
</div>

backgroundImage

А вообще рекомендую описывать стили таким вот образом, читается лучше
https://stackblitz.com/edit/angular-ivy-3nwfzl?fil...

Ну видимо чето сырое в прод попало. Попробуйте поставить @angular/cli постарее.
npm i -g @angular/cli@версия
Версии можно тут посмотреть https://www.npmjs.com/package/@angular/cli

getData() {
  return this.http.get(url).pipe(shareReplay())
}

и не надо ничего лишнего городить, никаких сабжектов

fullName$ = formControl.valueChanges.pipe(
  switchMap((value: string) => this.ufopService.getOrganization(value)),
  map((organization:  Organization | null) => organization?.fullName ??  '')
)

внутри getOrganization проверять на вашу длину.

1. Все меняющиеся во времени сущности храни в Observable
2. Observable, который надо изменить снаружи называется Subject. Его разновидности, которые умеют помнить значения называются ReplaySubject (изначально пустой) и BehaviorSubject (изначально должен быть инициализирован).
3. Забирай ссылки на данные из сервиса в компонент.
4. Не подписывавайся на них, сразу вставляй в шаблон через asyncPipe

Пример.
В сервисе

private flagSource = new BehaviorSubject(false);
public flag: Observable<boolean> = this.flagSource;

setFlag(value: boolean) {
   this.flagSource .next(value);
}

в компоненте
flag = this.myService.flag;

в шаблоне
<div *ngIf="flag | async">

asyncPipe следит за обсерваблом и заставляет компонент поучаствовать в детекции изменений