Визуализация Change Detection в Angular

🚀 Запустить приложение онлайн (Live Demo)

Пет-проект, который в реальном времени демонстрирует, как работает механизм обнаружения изменений (Change Detection) в Angular, используя G6 (от AntV), Сигналы и компоненты Taiga UI.

Особенности

• Отказ от Zone.js (Zoneless): Используется provideExperimentalZonelessChangeDetection().
• Визуализатор: G6 отрисовывает дерево компонентов приложения.
• Живая телеметрия: При обходе компонента механизмом CD срабатывает хук afterRender, который отправляет событие в CdTrackerService, после чего соответствующий узел на графе подсвечивается.
• Эмуляция OnPush: Возможность переключать стратегии OnPush / Default прямо во время работы приложения и наблюдать за разницей в поведении CD.
• Различные триггеры: Инициация проверок CD через события DOM, Промисы или обновление Сигналов.

Требования

• Node.js (v18+)
• npm

Запуск проекта

1. Установите зависимости

   npm install
   # или, если возникают конфликты версий (ERESOLVE):
   npm install --legacy-peer-deps

2. Запустите приложение

   npx nx serve cd-viz

3. Откройте браузер Перейдите по адресу http://localhost:4200.

Архитектура (Nx)

• apps/cd-viz: Оболочка приложения, базовая верстка и глобальные стили/настройки (app).
• libs/data-access: Библиотека с сервисом телеметрии (CdTrackerService), который хранит поток событий в WritableSignal.
• libs/feature-graph: Обертка над G6 и интерактивный компонент узла (CdNodeComponent), инкапсулирует логику рендера графа.
• libs/ui-kit: Панель управления на базе Taiga UI для контроля симуляции.