Angular profile Change Detection

Опубликовано в Angular • 03 января 2019 г. • 1 мин. на чтение

Спрева внесите изменения в файл main.ts

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .then(ref => {
    const applicationRef = ref.injector.get(ApplicationRef);
    const appComponent = applicationRef.components[0];
    enableDebugTools(appComponent);
  })
  .catch(err => console.log(err));

Обратите внимание на функцию enableDebugTools. Она добавляет объект ng в глобальную область видимости window.

Далее следует в консоли инструментов разработчика вызываеть метод ng.profiler.timeChangeDetection(), который многократно запускает механизм change detection и подсчитывает среднее время.

Откройте консоль (CTRL+SHIFT+I) и выполните команду:

ng.profiler.timeChangeDetection();

P.S. Анализ компонента

ng.probe($0)

https://angular-guru.com/blog/angular-unknown-features 8

Похожие записи

Angular. ViewChild, ViewChildren, ContentChild и ContentChildren

@ViewChild - querySelector
@ViewChildren - querySelectorAll
@ContentChild - querySelector внутри ng-content
@ContentChildren - querySelectorAll внутри ng-content

Upload файла в Angular по клику кнопки

Создано простейшее nestjs приложение, принимающее файлы. Выбор и отправка файла по клику подразумевает, что на форме отсутствует input для файла. Отправка запроса осуществляется с отслеживанием прогресса.

Angular attribute setter

Пример задания значения булева Input свойства как директивы, на примере:

HostListener/HostBinding vs host метадата

Официальное руководство рекомендует использовать декораторы @HostListener и @HostBinding.

Angular. Functions & getters в шаблонах

На каждый цикл механизма обнаружения изменений выполняется метод из шаблона. Если этого надо избежать, то следует использовать pure pipe или результат выполнения присвоить свойству компонента

Angular. base-href через переменные окружения docker контейнера

Решение, позволяющее размещать frontend на поддомене (dci.example.com) или на префиксе маршрута (example.com/dci).