В нашем проекте есть страница, где динамически подгружаются редакторы параметров объекта — грубо говоря, разные «крутилки» и поля ввода для настройки его свойств. В процессе миграции со старого фреймворка (условно назовём его Old) на Angular родилась идея: сделать так, чтобы система могла использовать редакторы из обоих фреймворков. Это позволило бы постепенно заменять старые компоненты на новые, не ломая существующую функциональность. Как мы это реализовали на JavaScript? Вот основная схема: 1. Создаём новые компоненты редакторов на Angular. 2. Пишем Angular-сервис, который отвечает за динамическое создание контейнеров и размещение в них компонентов. 3. Внедряемся в механизм Old. Во фреймворке Old уже был свой механизм выбора и подгрузки компонентов. Чтобы его не ломать, мы создали на специальный компонент-обёртку. Для Old это выглядит как обычный, «свой» компонент, и он не знает, что внутри происходит что-то нестандартное. 4. Вся магия — в обёртке. Основная логика связи сосредоточена в этом компоненте-обёртке. Чтобы он мог создавать Angular-компоненты, мы подготовили для него контекст Angular, который даёт доступ к нужным сервисам и фабрикам Angular. Как это работает в реальном времени? В нужный момент (после выбора объекта) вызывается фабрика, которая решает: использовать старый компонент или новый. • Если выбран старый — всё работает как раньше. • Если выбран новый (наша обёртка) — она, используя переданный контекст Angular, вызывает методы для динамического создания и отрисовки соответствующего Angular-компонента. Вуаля! Система готова к постепенной миграции. Общую схему процесса можно увидеть на приложенной картинке.