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

Предположим что у нас уже есть какой-то компонент, который мы хотим вывести на странице не Angular приложения:

Для запуска Angular нам нужно также создать модуль, объявить наш компонент в нем и указать на то, что он будет инициирован динамически:

Создав модуль, мы можем его бустрапить:

Использование фабрики компонентов

Чтобы инициировать динамически компонент, нам нужен componentFactoryResolver, который мы можем получить из сущности нашего модуля:

теперь можем получить фабрику для нашего конкретного компонента:

и с помощью полученной фабрики создать компонент:

обратите внимание, что мы произвели создание компонента прям на самом элементе (querySelector(‘hello‘)), но это не обязательно, мы бы также могли инициализировать контейнер, который содержит наш hello-элемент (например body).

Мы вывели компонент на страницу.

Но еще не все.

Подключаем механизм обнаружения изменений (Change Detection)

Чтобы представление нашего компонента реагировало на изменение состояния приложения, нам необходимо добавить hostView компонента в приложение (ApplicationRef). Для этого используем метод attachView:

 ngModuleRef.injector.get(ApplicationRef).attachView(componentRef.hostView);

Получим:

Также мы можем сделать отложенную инициализацию по таймеру (например: через 5 секунд):

Вот тут полный пример.