Артем

.block {
  transform: rotate(-90deg);
}

Линия - это просто блок с размерами и черным фоном.
Чтобы добиться такого эффекта, достаточно воспользоваться свойствами
position: absolute; left: N; top: N; - чтобы убрать ее за пределы экрана
transform: rotate(45deg); - чтобы повернуть ее на нужный угол (в данном случае 45 градусов)
transition: 2s width; - чтобы анимировать изменение ширины
А после загрузки страницы запустить js скрипт, который задаст новую ширину линии, такую, чтобы она вылезла из-за границы экрана

window.onload = function () {
  var line = document.querySelector('#line');
  if (line) {
    line.style.width = '100px';
  }
}

Используя это, достаточно просто будет усложнить анимацию так, как вам хочется.

setTimeout не останавливает выполнение потока, соответственно в один момент времени вы устаналиваете сразу 10 таймаутов от 1 до 10 секунд.
Чтобы сделать так, как вы хотите, но без Promise'ов, рекомендую рекурсивные вызовы setTimeout

let tick = (delay, end) => {
  if (delay >= end) {
    return
  }
  setTimeout(() => {
    alert('hola')
    tick(delay + 1, end)
  }, delay * 1000)
}
tick(1, 10) // Выведет 'hola' 10 раз с разными увеличивающимися интервалами

.tab-content-block .tab-menu{
  ...
  /* 	overflow: hidden; */
}
.tab-menu li.active{
  ...
  position: relative;
}
.tab-menu li.active:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
  height: 10px;
  margin-bottom: -5px;
}

Для выравнивания используйте display: flex

https://jsfiddle.net/xa6d2cvb/5/

Или, если нет подложки, то вешать обработчик клика на контенте, когда появляется модальное окно

Решение через директиву:

@Input() appTemplateName: string;

constructor(protected template: TemplateRef<any>) { }

public get Template(): TemplateRef<any> {
    return this.template;
}

<ng-template appTemplateName="title">...</ng-template>

@ContentChildren(TemplateNameDirective) templates: QueryList<TemplateNameDirective>;
...
return this.templates.find(template => template.appTemplateName === requiredName).Template;

Проблему решил следующим образом.
Возможно где-то невнимательно прочитал документацию.
Коротко:
В tsconfig.ts прописать:

{
  "compilerOptions": {
    "baseUrl": ".", // корень проекта, в данном случае директория, где лежит конфиг
    "paths": [
       "env/*": ["env/*"]
    ]
  }
}

Подробнее:
Импорты относительно корня работают при условии наличия в tsconfig.json свойств baseUrl и paths.
А именно, если указать импорт
import { environment } from 'env/environment';
без указанных выше свойств в конфиге, искать модуль env/environment вебпак будет относительно файла, где этот импорт был произведен.
Для импорта относительно корня проекта в конфиге нужно прописать

{
  "compilerOptions": {
    "baseUrl": ".", // корень проекта, в данном случае директория, где лежит конфиг
    "paths": [
       "env/*": ["env/*"]
    ]
  }
}

Таким образом, встретив импорт, начинающийся с env/, вебпак будет искать модуль относительно baseUrl

Смена контекста внутри метода класса не работает. (Особенности компиляции typescript в js, как я понял).
Однако сменить контекст, когда вызывается метод класса возможно.

https://jsfiddle.net/1dudtzrv/2/

Пока решение незамысловатое: добавить пустой div с высотой line1.
Как вариант - динамически добавить margin-top для html