Да нет, поддержка TS в Ангуляре далеко не полная. Вот что я с ходу помню:

1. Всевозможные View/Content Child/Query никак не проверяются на корректность. Можно написать какую-нибудь ерунду вроде @ContentChild(Foo) foo: Bar и она успешно скомпилируется, хотя казалось бы ошибку заметить несложно. Плюс сюда же накладываются нетипизируемые щаблоны, из-за которых при выборе по id может попасться объект вообще любого типа — счастливой отладки, блин.

   
   

2. Они же не дружат со строгим режимом и проверками на null.

   
   

3. При динамической загрузке модулей под видом NgModule в рантайме может оказаться NgModuleFactory.

   
   

Эдди Османи «Паттерны для масштабируемых JavaScript-приложений»

Удивляюсь, почему интерфейсами для пакетов являются классы, константы и т.п., а не функции активации с конфигом.

Давно уже придумали экспортировать default функцию-фабрику. debug в node.js использует как раз такой подход.

Вам спасибо, что делитесь опытом ) мы пока еще не на финальной стадии, чтобы обернуть опыт в статью, но это уже не за горами.

Построение страниц для вставки — задача хоста. У него в том числе есть роутер, который отвечает за часть урла (до приложения) и обеспечивает связку роутинга внутри приложения с глобальным урлом (это в случае, если приложение полностраничное, а не попап какой-нибудь).

Авторизация внутри IFRAME — обычный 3-legged OAuth с Implicit Grant и prompt=none, т.е. тихий редирект, поскольку и хост и приложение ходят на один и тот же login.example.com. Веб-компоненты используют SDK, у которого авторизация глобальна.

Взаимодействие между кусочками — через общую шину (на основе postmessage в том числе) и через обычные коллбеки/пропсы которые можно передавать веб-компонентам, т.е. некая оркестрация в хосте конечно есть, но у нас довольно крупные куски.

"конфигурации конкретного тенанта нет какого-то микросервиса" можно пояснить, что это значит? Если компонент вставлен на страницу, значит он получен из реестра, а соотв. равзернут, под него есть бакенд и все необходимое в энвайронменте.

const ifCondition => (propName, valueTrue, valueFalse) =>
    props => props[propName] ? valueTrue : (valueFalse || 'inherit');

const Component = styled.div`
  color: ${ifCondition('error', 'red')};
`;