Антон Швец

1) useExisting не создаёт новый экземпляр зависимости, а создаёт ссылку на него под другим классом, служащим ему заменой (алиасом).

не ссылку и не под другим классом.
Когда провайдишь сущность, ты сообщаешь di-контейнеру (у нас это инжектор) di-токен, по которому инжектор выдает тебе сущности.
Класс для него это частный случай di-токена.
Можно ведь и так сделать

providers: [{
  provide: 'doc',
  useExisting: DOCUMENT
}]

Подробнее тут https://angular.io/guide/dependency-injection-prov...

2) useExisting следует использовать вместе с useClass

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

3) класс-алиас, который внедряем должен полностью соответствовать интерфейсу оригинального класса на который мы собираемся заменить.

Не обязательно, инжектор твои типы не проверяет, просто выдает то что он запомнил.

А по главному вопросу

Когда следует использовать UseExistingProvider?

Когда тебе нужно существующую сущность предоставить под другим токеном. Допустим какие-то другие классы инжектят себе зависимости по им известному токену, вот, чтобы они по нему нашли наш инстанс.
В ангуляре полно такого, HttpClient инжектит HTTP_INTERCEPTORS, директивы форм инжектят NG_VALIDATORS, бутстрап инжектит APP_INITIALIZER и т.д.

Вместе с именно классами useExisting практически не используется, не вижу смысла.

да
для браузера и поисковиков это обычные кастомные элементы, они нейтральны.
Для семантики можно role прописывать.

this.http.post(url, {
  login, password
})

ниче не надо больше.
Подписываешься, реквест отправляется, json в body будет автоматом.

Observable - наблюдаемый объект. Наблюдаемый.
Его потребитель всегда может знать когда произошли изменения, запустить обновление вьюшки, плюс выстроить свои потоковые цепочки из операторов.
А если ты просто что-то в сервисе там изменил, ангуляр скорее всего об этом не узнает. То что у тебя работает, значит что где-то в это время сработала проверка изменений (скорее всего глобальная), т.е. просто повезло.

по дефолту запрос возвращает json.
Впишите observe: "response" в опциях запроса. Третий аргумент

Инитициализируется приложение, проходит проверка auth.guard и currentTokenValue() возвращает null

Получите токен до запуска приложения, с помощью APP_INITIALIZER, он как раз промис юзает.
Например как тут https://blog.zverit.com/frontend/2017/06/17/app-in...

А вообще промис и обсервабл легко конвертировать туда-сюда.

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

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

моноширинный шрифт, прозрачный инпут, позади инпута pre, который заполняется пробелами и точками по мере ввода символов в инпут

Например, я нажал кнопку "Продолжить", перешел на страницу "Анкета", заполнил ее и меня перенаправило на другую страницу.

Вы же отправляете на бэк какие-то данные, по заполненной анкете например?
Добавьте туда время заполнения.

Теперь страницу "Анкета" я смогу увидеть, и изменить что-либо, лишь через 1 час

А при открытии анкеты заново, наверно получаете с бэка данные по заполненной анкете.
Вместе с ними получите время и выставляйте часы, т.е. setTimeout или timer на вот это время заполнения плюс один час, таймер сработал, можно снимать дизейбл с кнопки.

Один раз создать, а потом скрывать/показывать

public reveal(overlay: HTMLDivElement): void {
    this.renderer.setStyle(overlay, 'display', '');
  }

  public hide(overlay: HTMLDivElement): void {
    this.renderer.setStyle(overlay, 'display', 'none');
  }

  public createOverlay(el: HTMLElement): HTMLDivElement {
    const { renderer, spinnerSrc, ensurePosition } = this;

    const overlay: HTMLDivElement = renderer.createElement('div');
    renderer.addClass(overlay, 'loading-overlay');

    const img: HTMLImageElement = renderer.createElement('img');
    renderer.addClass(img, 'loading-spinner');
    renderer.setAttribute(img, 'src', spinnerSrc);

    renderer.appendChild(overlay, img);
    renderer.appendChild(el, overlay);

    ensurePosition(el, renderer);

    return overlay;
  }

  private ensurePosition(el: HTMLElement, renderer: Renderer2) {
    const { position } = getComputedStyle(el);
    if (!(['absolute', 'fixed', 'relative'].some(p => p === position))) {
      renderer.setStyle(el, 'position', 'relative');
    }
  }

this.elRef.nativeElement -> el

лучше дефолтную, динамическое переключение языков пользователю обычно не важно.
Есть @ngneat/transloco еще

Discriminated Unions + type guards