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

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

View the code on Gist.

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

View the code on Gist.

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

View the code on Gist.

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

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

View the code on Gist.

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

View the code on Gist.

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

View the code on Gist.

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

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

Но еще не все.

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

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

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

Получим:

View the code on Gist.

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

View the code on Gist.

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