Для меня немного запутанная картина с именованными областями отображения и главное - с правильной настройкой. Нужно немного прояснить для себя.

Первое - настройка маршрутов. В ключе outlet указываем имя дополнительной области outlet - aux:

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', component: FirstComponent },
  { path: 'chat', component: ChatComponent, outlet: 'aux' },
];

В шаблоне обозначаем разметку для дополнительной области отображения и указываем ее имя через атрибут name - какое указали и в маршрутах:

<div style="display: flex">
  <router-outlet></router-outlet>
  <router-outlet name="aux"></router-outlet>
</div>

В навигации в директиве routerLink - добавляем конфигурационный объект с ключом outlets. Значение этого ключа - объект с ключами primary и aux; эти ключи - имена областей отрисовки outlets;

имя primary - это имя по умолчанию; имя aux - это то имя дополнительной области отображения, которое указали в маршруте.

Самое неочевидное - это значения этих ключей. Значения - это path, указанный в настройках маршрута - path: ‘home’, path: ‘chat’.

<nav>
  <a [routerLink]="['/']">first</a>
  <a [routerLink]="['/second']">second</a>
  <a [routerLink]="[{ outlets: { primary: 'home', aux: 'chat' } }]">open chat</a>
  <a [routerLink]="[{ outlets: { aux: null } }]">close chat</a>
</nav>

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

Запуск для генерации отчета покрытия тестами - команда:

ng test --watch=false --code-coverage

После выполнения команды в корне проекта будет создана директория coverage - внутри нужно найти файл index.html, который нужно открыть в браузере. Отобразится страница с графиками покрытия различных частей тестами.

В конфигурационном файле karma.conf можно настроить минимумы, допустимые в проекте для покрытия тестами его функциональных частей.

Для этого в файле нужно найти поле coverageIstanbulReporter и дописать в нем ключ thresholds со значениями:

coverageIstanbulReporter: {
  reports: [ 'html', 'lcovonly' ],
  fixWebpackSourcePaths: true,
  thresholds: {
    statements: 70,
    lines: 70,
    branches: 70,
    functions: 70
  }
}

… где 70 - это 70 процентов (%) - пороговое значение threshold для каждой из частей проекта.

По умолчанию при scaffolding нового Angular-проекта в настройках используется пробелы spaces для задания отступов indent. Но иногда требования компании\команды бывают такими, что нужно использовать tabs вместо spaces.

Для этого нужно изменить настройки проекта в некоторых местах.

Файл tslint.json:

...
"indent": [true, "tabs", 2]
...

Файл .prettierrc - если используется Prettier в проекте:

...
"useTabs": true
...

Файл .editorconfig:

[*]
indent_style = tabs
...

Оператор

1

startWith

1

startWith()

import { interval, Observable } from 'rxjs'; 
import { startWith, take } from 'rxjs/operators';

const stream$: Observable<string | number> = interval(1000).pipe(
  startWith('welcome'),
  take(5)
);
stream$.subscribe((v: string | number) => console.log(v));

Вывод будет таким:

welcome
0
1
2
3

Обратить внимание! Выведен поток из пяти элементов! Начальное значение

1

welcome

1

take()

Обратить внимание! В данном случае от потока отписываться не нужно, так как оператор

1

take()

1

complete()

1

take()

Изображения иногда встречаются с разными расширениями - .jpg или .jpeg. В чем же разница между ними? Это разные форматы изображения? На самом деле нет - изображение может быть как image.jpeg так и image.jpg. И это - одно и тоже изображение; и формат изображения также одинаковый - JPEG.

Просто раньше, когда операционные системы были старыми (типа DOS), они поддерживали формат расширения - только три символа после точки - .jpg. Сейчас (при современных ОС) это неактуально и расширение можно указывать так, как этот формат называется официально - .jpeg.

Вот и вся разница.