Angular profile Change Detection

Опубликовано в Angular • 04 января 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

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

Импорты scss в angular

    "styles": [
      "src/styles.scss"
    ],
    "stylePreprocessorOptions": {

Плюрализованные сообщения в ngx-translate

Необходимо выводить:

1 сайт
2,3,4 сайта
5,6,.. сайтов

@Attribute() декоратор

Аналогично @Input() позволяет получить значение атрибута с хоста компонента/директивы, но не отслеживает дальнейшее изменение атрибута.

RxJS. Простой кэш HTTP запроса с параметром

Способ с использованием Map (ключи -параметры запроса) и rxjs операторов publishReplay(1), refCount()

Angular environment service

Использование сервиса для окружения вместо прямой ссылки на environment.ts

TS. Event bus

Создаётся providedIn: 'root' сервис событий. Затем отправляются события на шину, и если какой-либо слушатель подписан на эти события, он получает уведомления.