From 711cb416260ca11ff158fc39b372efa2cf022d36 Mon Sep 17 00:00:00 2001
From: Joey Perrott <josephperrott@gmail.com>
Date: Tue, 16 Jan 2024 21:35:47 +0000
Subject: [PATCH] refactor(devtools): migrate devtools to prettier formatting
 (#53945)

Migrate formatting to prettier for devtools from clang-format

PR Close #53945
---
 .ng-dev/format.mts                            |     2 +
 .../cypress/integration/comment-nodes.e2e.js  |     6 +-
 .../cypress/integration/item-tracking.e2e.js  |    30 +-
 .../cypress/integration/node-search.e2e.js    |     6 +-
 .../cypress/integration/node-selection.e2e.js |   126 +-
 .../cypress/integration/property-edit.e2e.js  |    52 +-
 .../integration/property-update.e2e.js        |    19 +-
 .../view-component-metadata.e2e.js            |    12 +-
 .../demo-no-zone/src/app/app.module.ts        |     3 +-
 devtools/projects/demo-no-zone/src/main.ts    |     8 +-
 .../demo-standalone/src/app/app.component.ts  |     2 +-
 .../src/app/demo-app/demo-app.component.ts    |    28 +-
 .../src/app/demo-app/heavy.component.ts       |    17 +-
 .../demo-app/todo/about/about.component.ts    |     5 +-
 .../src/app/demo-app/todo/dialog.component.ts |     6 +-
 .../app/demo-app/todo/home/todo.component.ts  |    12 +-
 .../app/demo-app/todo/home/todos.component.ts |    33 +-
 .../app/demo-app/todo/todo-app.component.ts   |    18 +-
 .../src/app/demo-app/zippy.component.ts       |    42 +-
 .../devtools-app/devtools-app.component.ts    |    36 +-
 .../src/environments/environment.ts           |     2 +-
 devtools/projects/demo-standalone/src/main.ts |     5 +-
 .../src/lib/client-event-subscribers.ts       |   384 +-
 .../component-inspector.ts                    |    22 +-
 .../src/lib/component-tree.ts                 |   163 +-
 .../src/lib/directive-forest/index.ts         |     8 +-
 .../src/lib/directive-forest/ltree.ts         |     5 +-
 .../lib/directive-forest/render-tree.spec.ts  |     2 +-
 .../src/lib/directive-forest/render-tree.ts   |    94 +-
 .../src/lib/highlighter.ts                    |    48 +-
 .../src/lib/hooks/capture.ts                  |   173 +-
 .../src/lib/hooks/hooks.ts                    |     4 +-
 .../src/lib/hooks/identity-tracker.ts         |    28 +-
 .../src/lib/hooks/index.ts                    |     4 +-
 .../src/lib/hooks/profiler/native.ts          |    43 +-
 .../src/lib/hooks/profiler/polyfill.ts        |    10 +-
 .../src/lib/hooks/profiler/shared.ts          |   135 +-
 .../ng-devtools-backend/src/lib/interfaces.ts |     4 +-
 .../src/lib/router-tree.ts                    |     2 +-
 .../src/lib/set-console-reference.ts          |    17 +-
 .../src/lib/state-serializer/object-utils.ts  |     8 +-
 .../lib/state-serializer/prop-type.spec.ts    |     9 +-
 .../serialized-descriptor-factory.ts          |   283 +-
 .../state-serializer/state-serializer.spec.ts |   312 +-
 .../lib/state-serializer/state-serializer.ts  |    65 +-
 .../ng-devtools-backend/src/lib/utils.ts      |     3 +-
 .../injector-tree-visualizer.ts               |   256 +-
 .../resolution-path.component.ts              |    33 +-
 .../devtools-tabs/devtools-tabs.component.ts  |    22 +-
 .../lib/devtools-tabs/devtools-tabs.module.ts |    17 +-
 .../lib/devtools-tabs/devtools-tabs.spec.ts   |     3 +-
 .../src/lib/devtools-tabs/diffing/index.ts    |   147 +-
 .../directive-explorer.component.ts           |   101 +-
 .../directive-explorer.module.ts              |     3 +-
 .../directive-explorer.spec.ts                |    51 +-
 .../breadcrumbs/breadcrumbs.component.ts      |    18 +-
 .../breadcrumbs/breadcrumbs.module.ts         |     3 +-
 .../component-data-source.spec.ts             |     6 +-
 .../component-data-source/index.ts            |    89 +-
 .../directive-forest-utils.ts                 |    23 +-
 .../directive-forest.component.ts             |    78 +-
 .../directive-forest.module.ts                |     3 +-
 .../directive-forest/filter/filter.module.ts  |     3 +-
 .../index-forest/index-forest.spec.ts         |   159 +-
 .../directive-forest/index-forest/index.ts    |    25 +-
 .../property-resolver/arrayify-props.ts       |    26 +-
 .../directive-property-resolver.ts            |    83 +-
 .../element-property-resolver.ts              |    17 +-
 .../property-resolver/flatten.ts              |    17 +-
 .../property-data-source.spec.ts              |    30 +-
 .../property-resolver/property-data-source.ts |    52 +-
 .../property-expanded-directive-properties.ts |    16 +-
 .../component-metadata.component.ts           |     6 +-
 .../property-tab-header.component.ts          |     2 +-
 .../property-tab/property-tab.module.ts       |    11 +-
 .../property-editor.component.ts              |    20 +-
 .../property-preview.component.ts             |     6 +-
 .../property-tab-body.component.ts            |     4 +-
 .../property-view-body.component.ts           |   105 +-
 .../property-view/property-view.component.ts  |    13 +-
 .../property-view/property-view.module.ts     |    23 +-
 .../injector-providers.component.ts           |   232 +-
 .../injector-tree/injector-tree-fns.spec.ts   | 14330 ++++++++--------
 .../injector-tree/injector-tree-fns.ts        |    52 +-
 .../injector-tree/injector-tree.component.ts  |    99 +-
 .../profiler/file-api-service.ts              |     5 +-
 .../profiler-import-dialog.component.ts       |     7 +-
 .../profiler/profiler.component.ts            |     8 +-
 .../devtools-tabs/profiler/profiler.module.ts |     3 +-
 .../profiler/timeline/filter.spec.ts          |   280 +-
 .../devtools-tabs/profiler/timeline/filter.ts |    22 +-
 .../timeline/frame-selector.component.ts      |    48 +-
 .../bargraph-formatter/bargraph-formatter.ts  |     7 +-
 .../flamegraph-formatter.spec.ts              |     7 +-
 .../flamegraph-formatter.ts                   |    18 +-
 .../timeline/record-formatter/frame-merger.ts |     4 +-
 .../record-formatter-spec-constants.ts        |    60 +-
 .../record-formatter/record-formatter.spec.ts |    24 +-
 .../record-formatter/record-formatter.ts      |    13 +-
 .../tree-map-formatter/tree-map-formatter.ts  |     7 +-
 .../timeline/recording-dialog.component.ts    |     3 +-
 .../timeline/recording-modal.component.ts     |     3 +-
 .../bar-chart.component.ts                    |    21 +-
 .../flamegraph-visualizer.component.ts        |    33 +-
 .../recording-visualizer/profile-formatter.ts |     5 +-
 .../recording-visualizer.module.ts            |    11 +-
 .../timeline-visualizer.component.ts          |     4 +-
 .../tree-map-visualizer.component.ts          |    10 +-
 .../timeline/timeline-controls.component.ts   |     2 +-
 .../profiler/timeline/timeline.component.ts   |    23 +-
 .../profiler/timeline/timeline.module.ts      |     3 +-
 .../router-tree/router-tree.component.ts      |   115 +-
 .../router-tree/router-tree.module.ts         |     3 +-
 .../ng-devtools/src/lib/devtools.component.ts |    26 +-
 .../ng-devtools/src/lib/devtools.module.ts    |     3 +-
 .../ng-devtools/src/lib/theme-service.ts      |     2 +-
 .../angular-split/lib/component/interface.ts  |     8 +-
 .../lib/component/split.component.ts          |   288 +-
 .../lib/component/split.module.ts             |     3 +-
 .../lib/component/splitArea.directive.ts      |    73 +-
 .../angular-split/lib/component/utils.ts      |    76 +-
 .../src/lib/vendor/chromium/date-utilities.ts |    10 +-
 .../src/lib/vendor/memo-decorator/index.ts    |    23 +-
 .../src/lib/vendor/webtreemap/treemap.ts      |    58 +-
 .../projects/protocol/src/lib/message-bus.ts  |     2 +-
 .../projects/protocol/src/lib/messages.ts     |    31 +-
 .../src/lib/priority-aware-message-bus.ts     |     4 +-
 .../src/lib/angular-check.spec.ts             |    16 +-
 .../shared-utils/src/lib/angular-check.ts     |     8 +-
 .../shared-utils/src/lib/shared-utils.ts      |    36 +-
 .../src/app/app.component.spec.ts             |    22 +-
 .../shell-browser/src/app/app.module.ts       |     3 +-
 .../projects/shell-browser/src/app/backend.ts |    20 +-
 .../shell-browser/src/app/background.ts       |   113 +-
 .../src/app/chrome-application-operations.ts  |    10 +-
 .../src/app/chrome-window-extensions.ts       |    21 +-
 .../shell-browser/src/app/content-script.ts   |     6 +-
 .../app/detect-angular-for-extension-icon.ts  |    24 +-
 .../projects/shell-browser/src/app/inject.ts  |     8 +-
 .../src/app/same-page-message-bus.ts          |    20 +-
 .../src/app/zone-aware-chrome-message-bus.ts  |    23 +-
 .../shell-browser/src/assets/BUILD.bazel      |     2 +-
 .../src/environments/environment.ts           |     2 +-
 devtools/projects/shell-browser/src/main.ts   |     4 +-
 devtools/src/app/app.module.ts                |     5 +-
 .../src/app/demo-app/demo-app.component.ts    |    14 +-
 devtools/src/app/demo-app/demo-app.module.ts  |     9 +-
 devtools/src/app/demo-app/heavy.component.ts  |    17 +-
 .../demo-app/sample-properties.component.ts   |     6 +-
 devtools/src/app/demo-app/sample.service.ts   |     6 +-
 .../demo-app/todo/about/about.component.ts    |     3 +-
 .../app/demo-app/todo/about/about.module.ts   |     3 +-
 .../app/demo-app/todo/app-todo.component.ts   |     5 +-
 devtools/src/app/demo-app/todo/app.module.ts  |     3 +-
 .../src/app/demo-app/todo/dialog.component.ts |     5 +-
 .../src/app/demo-app/todo/home/home.module.ts |     3 +-
 .../devtools-app/devtools-app.component.ts    |    12 +-
 .../app/devtools-app/devtools-app.module.ts   |     3 +-
 devtools/src/environments/environment.ts      |     2 +-
 devtools/src/iframe-message-bus.ts            |    30 +-
 devtools/src/main.ts                          |     4 +-
 161 files changed, 10689 insertions(+), 9615 deletions(-)

diff --git a/.ng-dev/format.mts b/.ng-dev/format.mts
index b230e0572a5..cf9ec34a0b8 100644
--- a/.ng-dev/format.mts
+++ b/.ng-dev/format.mts
@@ -7,6 +7,7 @@ export const format: FormatConfig = {
   'prettier': {
     'matchers': [
       '**/*.{yaml,yml}',
+      'devtools/**/*.{js,ts}',
       'tools/**/*.{js,ts}',
       'modules/**/*.{js,ts}',
       'scripts/**/*.{js,ts}',
@@ -38,6 +39,7 @@ export const format: FormatConfig = {
       '!adev/**',
 
       // Migrated to prettier
+      '!devtools/**/*.{js,ts}',
       '!tools/**/*.{js,ts}',
       '!modules/**/*.{js,ts}',
       '!scripts/**/*.{js,ts}',
diff --git a/devtools/cypress/integration/comment-nodes.e2e.js b/devtools/cypress/integration/comment-nodes.e2e.js
index 5dea6569a2e..39dc8a27d94 100644
--- a/devtools/cypress/integration/comment-nodes.e2e.js
+++ b/devtools/cypress/integration/comment-nodes.e2e.js
@@ -24,8 +24,8 @@ describe('Comment nodes', () => {
   it('should find comment nodes when the setting is enabled', () => {
     showComments();
     cy.get('.tree-wrapper')
-        .find('.tree-node:contains("#comment")')
-        .its('length')
-        .should('not.eq', 0);
+      .find('.tree-node:contains("#comment")')
+      .its('length')
+      .should('not.eq', 0);
   });
 });
diff --git a/devtools/cypress/integration/item-tracking.e2e.js b/devtools/cypress/integration/item-tracking.e2e.js
index d2d77a7dd4f..d7cf6740ae7 100644
--- a/devtools/cypress/integration/item-tracking.e2e.js
+++ b/devtools/cypress/integration/item-tracking.e2e.js
@@ -19,27 +19,29 @@ describe('Tracking items from application to component tree', () => {
     });
 
     cy.get('.tree-wrapper')
-        .find('.tree-node:contains("app-todo[TooltipDirective]")')
-        .its('length')
-        .should('eq', 2);
+      .find('.tree-node:contains("app-todo[TooltipDirective]")')
+      .its('length')
+      .should('eq', 2);
   });
 
   it('should be able to detect a new todo from user and add it to the tree', () => {
     cy.enter('#sample-app')
-        .then((getBody) => {
-          getBody().find('input.new-todo').type('Buy cookies{enter}');
-        })
-        .then(() => {
-          cy.enter('#sample-app').then((getBody) => {
-            getBody().find('app-todo').contains('Buy milk');
+      .then((getBody) => {
+        getBody().find('input.new-todo').type('Buy cookies{enter}');
+      })
+      .then(() => {
+        cy.enter('#sample-app').then((getBody) => {
+          getBody().find('app-todo').contains('Buy milk');
 
-            getBody().find('app-todo').contains('Build something fun!');
+          getBody().find('app-todo').contains('Build something fun!');
 
-            getBody().find('app-todo').contains('Buy cookies');
-          });
+          getBody().find('app-todo').contains('Buy cookies');
         });
+      });
 
-    cy.get('.tree-wrapper .tree-node:contains("app-todo[TooltipDirective]")')
-        .should('have.length', 3);
+    cy.get('.tree-wrapper .tree-node:contains("app-todo[TooltipDirective]")').should(
+      'have.length',
+      3,
+    );
   });
 });
diff --git a/devtools/cypress/integration/node-search.e2e.js b/devtools/cypress/integration/node-search.e2e.js
index 4a5dad89c8d..16d304024ad 100644
--- a/devtools/cypress/integration/node-search.e2e.js
+++ b/devtools/cypress/integration/node-search.e2e.js
@@ -83,9 +83,9 @@ describe('Search items in component tree', () => {
     const amountOfBreadcrumbButtons = 4;
     const amountOfScrollButtons = 2;
     cy.get('ng-breadcrumbs')
-        .find('button')
-        .its('length')
-        .should('eq', amountOfScrollButtons + amountOfBreadcrumbButtons);
+      .find('button')
+      .its('length')
+      .should('eq', amountOfScrollButtons + amountOfBreadcrumbButtons);
 
     // should display correct text in explorer panel
     checkComponentName('app-todos');
diff --git a/devtools/cypress/integration/node-selection.e2e.js b/devtools/cypress/integration/node-selection.e2e.js
index 958a4ffd89a..b8e57fc6bad 100644
--- a/devtools/cypress/integration/node-selection.e2e.js
+++ b/devtools/cypress/integration/node-selection.e2e.js
@@ -18,9 +18,9 @@ describe('node selection', () => {
       cy.get('.tree-wrapper').get('.tree-node.selected').should('not.exist');
 
       cy.get('.tree-wrapper')
-          .find('.tree-node:contains("app-todo[TooltipDirective]")')
-          .first()
-          .click({force: true});
+        .find('.tree-node:contains("app-todo[TooltipDirective]")')
+        .first()
+        .click({force: true});
 
       cy.get('.tree-wrapper').find('.tree-node.selected').its('length').should('eq', 1);
 
@@ -39,9 +39,9 @@ describe('node selection', () => {
       });
 
       cy.get('.tree-wrapper')
-          .find('.tree-node:contains("app-todo[TooltipDirective]")')
-          .last()
-          .click({force: true});
+        .find('.tree-node:contains("app-todo[TooltipDirective]")')
+        .last()
+        .click({force: true});
 
       cy.enter('#sample-app').then((getBody) => {
         getBody().find('app-todo:contains("Buy milk")').find('.destroy').click();
@@ -52,86 +52,100 @@ describe('node selection', () => {
 
     it('should select nodes with same name', () => {
       cy.get('.tree-wrapper')
-          .find('.tree-node:contains("app-todo[TooltipDirective]")')
-          .first()
-          .click({force: true});
+        .find('.tree-node:contains("app-todo[TooltipDirective]")')
+        .first()
+        .click({force: true});
 
       cy.get('.tree-wrapper')
-          .find('.tree-node:contains("app-todo[TooltipDirective]")')
-          .last()
-          .click({force: true});
+        .find('.tree-node:contains("app-todo[TooltipDirective]")')
+        .last()
+        .click({force: true});
 
       cy.get('ng-property-view').last().find('mat-tree-node:contains("todo")').click();
 
       cy.get('ng-property-view')
-          .last()
-          .find('mat-tree-node:contains("Build something fun!")')
-          .its('length')
-          .should('eq', 1);
+        .last()
+        .find('mat-tree-node:contains("Build something fun!")')
+        .its('length')
+        .should('eq', 1);
     });
   });
 
   describe('breadcrumb logic', () => {
     it('should overflow when breadcrumb list is long enough', () => {
       cy.get('.tree-wrapper')
-          .find('.tree-node:contains("div[TooltipDirective]")')
-          .last()
-          .click({force: true})
-          .then(() => {
-            cy.get('ng-breadcrumbs').find('.breadcrumbs').then((breadcrumbsContainer) => {
+        .find('.tree-node:contains("div[TooltipDirective]")')
+        .last()
+        .click({force: true})
+        .then(() => {
+          cy.get('ng-breadcrumbs')
+            .find('.breadcrumbs')
+            .then((breadcrumbsContainer) => {
               const hasOverflowX = () =>
-                  breadcrumbsContainer[0].scrollWidth > breadcrumbsContainer[0].clientWidth;
+                breadcrumbsContainer[0].scrollWidth > breadcrumbsContainer[0].clientWidth;
               expect(hasOverflowX()).to.be.true;
             });
-          });
+        });
     });
 
     it('should scroll right when right scroll button is clicked', () => {
       cy.get('.tree-wrapper')
-          .find('.tree-node:contains("div[TooltipDirective]")')
-          .last()
-          .click({force: true})
-          .then(() => {
-            cy.get('ng-breadcrumbs')
-                .find('.breadcrumbs')
-                .then((el) => {
-                  el[0].style.scrollBehavior = 'auto';
-                })
-                .then((breadcrumbsContainer) => {
-                  const scrollLeft = () => breadcrumbsContainer[0].scrollLeft;
-                  expect(scrollLeft()).to.eql(0);
+        .find('.tree-node:contains("div[TooltipDirective]")')
+        .last()
+        .click({force: true})
+        .then(() => {
+          cy.get('ng-breadcrumbs')
+            .find('.breadcrumbs')
+            .then((el) => {
+              el[0].style.scrollBehavior = 'auto';
+            })
+            .then((breadcrumbsContainer) => {
+              const scrollLeft = () => breadcrumbsContainer[0].scrollLeft;
+              expect(scrollLeft()).to.eql(0);
 
-                  cy.get('ng-breadcrumbs').find('.scroll-button').last().click().then(() => {
-                    expect(scrollLeft()).to.be.greaterThan(0);
-                  });
+              cy.get('ng-breadcrumbs')
+                .find('.scroll-button')
+                .last()
+                .click()
+                .then(() => {
+                  expect(scrollLeft()).to.be.greaterThan(0);
                 });
-          });
+            });
+        });
     });
 
     it('should scroll left when left scroll button is clicked', () => {
       cy.get('.tree-wrapper')
-          .find('.tree-node:contains("div[TooltipDirective]")')
-          .last()
-          .click({force: true})
-          .then(() => {
-            cy.get('ng-breadcrumbs')
-                .find('.breadcrumbs')
-                .then((el) => {
-                  el[0].style.scrollBehavior = 'auto';
-                })
-                .then((breadcrumbsContainer) => {
-                  const scrollLeft = () => breadcrumbsContainer[0].scrollLeft;
-                  expect(scrollLeft()).to.eql(0);
+        .find('.tree-node:contains("div[TooltipDirective]")')
+        .last()
+        .click({force: true})
+        .then(() => {
+          cy.get('ng-breadcrumbs')
+            .find('.breadcrumbs')
+            .then((el) => {
+              el[0].style.scrollBehavior = 'auto';
+            })
+            .then((breadcrumbsContainer) => {
+              const scrollLeft = () => breadcrumbsContainer[0].scrollLeft;
+              expect(scrollLeft()).to.eql(0);
 
-                  cy.get('ng-breadcrumbs').find('.scroll-button').last().click().then(() => {
-                    expect(scrollLeft()).to.be.greaterThan(0);
+              cy.get('ng-breadcrumbs')
+                .find('.scroll-button')
+                .last()
+                .click()
+                .then(() => {
+                  expect(scrollLeft()).to.be.greaterThan(0);
 
-                    cy.get('ng-breadcrumbs').find('.scroll-button').first().click().then(() => {
+                  cy.get('ng-breadcrumbs')
+                    .find('.scroll-button')
+                    .first()
+                    .click()
+                    .then(() => {
                       expect(scrollLeft()).to.eql(0);
                     });
-                  });
                 });
-          });
+            });
+        });
     });
   });
 });
diff --git a/devtools/cypress/integration/property-edit.e2e.js b/devtools/cypress/integration/property-edit.e2e.js
index 4ec7f6a6e84..d55eff77417 100644
--- a/devtools/cypress/integration/property-edit.e2e.js
+++ b/devtools/cypress/integration/property-edit.e2e.js
@@ -17,9 +17,9 @@ describe('edit properties of directive in the property view tab', () => {
     beforeEach(() => {
       // select todo node in component tree
       cy.get('.tree-wrapper')
-          .find('.tree-node:contains("app-todo[TooltipDirective]")')
-          .first()
-          .click({force: true});
+        .find('.tree-node:contains("app-todo[TooltipDirective]")')
+        .first()
+        .click({force: true});
     });
 
     it('should be able to enable editMode', () => {
@@ -28,13 +28,13 @@ describe('edit properties of directive in the property view tab', () => {
       });
 
       cy.get('.explorer-panel:contains("app-todo")')
-          .find('ng-property-view mat-tree-node:contains("editMode")')
-          .find('ng-property-editor .editor')
-          .click({force: true})
-          .find('.editor-input')
-          .clear()
-          .type('true')
-          .type('{enter}');
+        .find('ng-property-view mat-tree-node:contains("editMode")')
+        .find('ng-property-editor .editor')
+        .click({force: true})
+        .find('.editor-input')
+        .clear()
+        .type('true')
+        .type('{enter}');
 
       cy.enter('#sample-app').then((getBody) => {
         getBody().find('app-todo input.edit').should('be.visible');
@@ -45,8 +45,8 @@ describe('edit properties of directive in the property view tab', () => {
       beforeEach(() => {
         // expand todo state
         cy.get('.explorer-panel:contains("app-todo")')
-            .find('ng-property-view mat-tree-node:contains("todo")')
-            .click();
+          .find('ng-property-view mat-tree-node:contains("todo")')
+          .click();
       });
 
       it('should change todo label in app when edited', () => {
@@ -57,13 +57,13 @@ describe('edit properties of directive in the property view tab', () => {
 
         // find label variable and run through edit logic
         cy.get('.explorer-panel:contains("app-todo")')
-            .find('ng-property-view mat-tree-node:contains("label")')
-            .find('ng-property-editor .editor')
-            .click()
-            .find('.editor-input')
-            .clear()
-            .type('Buy cookies')
-            .type('{enter}');
+          .find('ng-property-view mat-tree-node:contains("label")')
+          .find('ng-property-editor .editor')
+          .click()
+          .find('.editor-input')
+          .clear()
+          .type('Buy cookies')
+          .type('{enter}');
 
         // assert that the page has been updated
         cy.enter('#sample-app').then((getBody) => {
@@ -79,13 +79,13 @@ describe('edit properties of directive in the property view tab', () => {
 
         // find completed variable and run through edit logic
         cy.get('.explorer-panel:contains("app-todo")')
-            .find('ng-property-view mat-tree-node:contains("completed")')
-            .find('ng-property-editor .editor')
-            .click()
-            .find('.editor-input')
-            .clear()
-            .type('true')
-            .type('{enter}');
+          .find('ng-property-view mat-tree-node:contains("completed")')
+          .find('ng-property-editor .editor')
+          .click()
+          .find('.editor-input')
+          .clear()
+          .type('true')
+          .type('{enter}');
 
         // assert that the page has been updated
         cy.enter('#sample-app').then((getBody) => {
diff --git a/devtools/cypress/integration/property-update.e2e.js b/devtools/cypress/integration/property-update.e2e.js
index c04b08c2518..ca5d1375169 100644
--- a/devtools/cypress/integration/property-update.e2e.js
+++ b/devtools/cypress/integration/property-update.e2e.js
@@ -21,20 +21,21 @@ describe('change of the state should reflect in property update', () => {
 
     // Select the todo item
     cy.get('.tree-wrapper')
-        .find('.tree-node:contains("app-todo[TooltipDirective]")')
-        .first()
-        .click({force: true});
+      .find('.tree-node:contains("app-todo[TooltipDirective]")')
+      .first()
+      .click({force: true});
 
     // Expand the todo in the property explorer
     cy.get('.explorer-panel:contains("app-todo")')
-        .find('ng-property-view mat-tree-node:contains("todo")')
-        .click();
+      .find('ng-property-view mat-tree-node:contains("todo")')
+      .click();
 
     // Verify its value is now completed
     cy.contains(
-        '.explorer-panel:contains("app-todo") ' +
-            'ng-property-view mat-tree-node:contains("completed") ' +
-            'ng-property-editor .editor',
-        'true');
+      '.explorer-panel:contains("app-todo") ' +
+        'ng-property-view mat-tree-node:contains("completed") ' +
+        'ng-property-editor .editor',
+      'true',
+    );
   });
 });
diff --git a/devtools/cypress/integration/view-component-metadata.e2e.js b/devtools/cypress/integration/view-component-metadata.e2e.js
index 2edc9b75b72..7143479bda0 100644
--- a/devtools/cypress/integration/view-component-metadata.e2e.js
+++ b/devtools/cypress/integration/view-component-metadata.e2e.js
@@ -17,9 +17,9 @@ describe('Viewing component metadata', () => {
   });
 
   describe('viewing TodoComponent', () => {
-    beforeEach(
-        () => prepareHeaderExpansionPanelForAssertions(
-            '.tree-node:contains("app-todo[TooltipDirective]")'));
+    beforeEach(() =>
+      prepareHeaderExpansionPanelForAssertions('.tree-node:contains("app-todo[TooltipDirective]")'),
+    );
 
     it('should display view encapsulation', () => {
       cy.contains('.meta-data-container .mat-button:first', 'View Encapsulation: Emulated');
@@ -31,9 +31,9 @@ describe('Viewing component metadata', () => {
   });
 
   describe('viewing DemoAppComponent', () => {
-    beforeEach(
-        () =>
-            prepareHeaderExpansionPanelForAssertions('.tree-node:contains("app-demo-component")'));
+    beforeEach(() =>
+      prepareHeaderExpansionPanelForAssertions('.tree-node:contains("app-demo-component")'),
+    );
 
     it('should display view encapsulation', () => {
       cy.contains('.meta-data-container .mat-button:first', 'View Encapsulation: None');
diff --git a/devtools/projects/demo-no-zone/src/app/app.module.ts b/devtools/projects/demo-no-zone/src/app/app.module.ts
index 3707851d51f..0c72c23729f 100644
--- a/devtools/projects/demo-no-zone/src/app/app.module.ts
+++ b/devtools/projects/demo-no-zone/src/app/app.module.ts
@@ -17,5 +17,4 @@ import {AppComponent} from './app.component';
   providers: [],
   bootstrap: [AppComponent],
 })
-export class AppModule {
-}
+export class AppModule {}
diff --git a/devtools/projects/demo-no-zone/src/main.ts b/devtools/projects/demo-no-zone/src/main.ts
index 8cc39f2cd03..f73e7a3ed06 100644
--- a/devtools/projects/demo-no-zone/src/main.ts
+++ b/devtools/projects/demo-no-zone/src/main.ts
@@ -11,7 +11,7 @@ import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 import {AppModule} from './app/app.module';
 
 platformBrowserDynamic()
-    .bootstrapModule(AppModule, {
-      ngZone: 'noop',
-    })
-    .catch((err) => console.error(err));
+  .bootstrapModule(AppModule, {
+    ngZone: 'noop',
+  })
+  .catch((err) => console.error(err));
diff --git a/devtools/projects/demo-standalone/src/app/app.component.ts b/devtools/projects/demo-standalone/src/app/app.component.ts
index f7724ead247..520d5291ff9 100644
--- a/devtools/projects/demo-standalone/src/app/app.component.ts
+++ b/devtools/projects/demo-standalone/src/app/app.component.ts
@@ -13,7 +13,7 @@ import {Router, RouterOutlet} from '@angular/router';
   selector: 'app-root',
   template: `<router-outlet></router-outlet>`,
   standalone: true,
-  imports: [RouterOutlet]
+  imports: [RouterOutlet],
 })
 export class AppComponent {
   constructor(public router: Router) {}
diff --git a/devtools/projects/demo-standalone/src/app/demo-app/demo-app.component.ts b/devtools/projects/demo-standalone/src/app/demo-app/demo-app.component.ts
index 05fd0d66b96..8b2fbe1a8b8 100644
--- a/devtools/projects/demo-standalone/src/app/demo-app/demo-app.component.ts
+++ b/devtools/projects/demo-standalone/src/app/demo-app/demo-app.component.ts
@@ -7,7 +7,20 @@
  */
 
 import {JsonPipe} from '@angular/common';
-import {Component, computed, CUSTOM_ELEMENTS_SCHEMA, ElementRef, EventEmitter, inject, Injector, Input, Output, signal, ViewChild, ViewEncapsulation} from '@angular/core';
+import {
+  Component,
+  computed,
+  CUSTOM_ELEMENTS_SCHEMA,
+  ElementRef,
+  EventEmitter,
+  inject,
+  Injector,
+  Input,
+  Output,
+  signal,
+  ViewChild,
+  ViewEncapsulation,
+} from '@angular/core';
 import {createCustomElement} from '@angular/elements';
 import {RouterOutlet} from '@angular/router';
 import {initializeMessageBus} from 'ng-devtools-backend';
@@ -24,7 +37,7 @@ import {ZippyComponent} from './zippy.component';
   encapsulation: ViewEncapsulation.None,
   standalone: true,
   imports: [HeavyComponent, RouterOutlet, JsonPipe],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class DemoAppComponent {
   @ViewChild(ZippyComponent) zippy!: ZippyComponent;
@@ -50,7 +63,7 @@ export class DemoAppComponent {
     customElements.define('app-zippy', el as any);
   }
 
-  getTitle(): '► Click to expand'|'▼ Click to collapse' {
+  getTitle(): '► Click to expand' | '▼ Click to collapse' {
     if (!this.zippy || !this.zippy.visible) {
       return '► Click to expand';
     }
@@ -71,5 +84,10 @@ export const ROUTES = [
   },
 ];
 
-initializeMessageBus(new ZoneUnawareIFrameMessageBus(
-    'angular-devtools-backend', 'angular-devtools', () => window.parent));
+initializeMessageBus(
+  new ZoneUnawareIFrameMessageBus(
+    'angular-devtools-backend',
+    'angular-devtools',
+    () => window.parent,
+  ),
+);
diff --git a/devtools/projects/demo-standalone/src/app/demo-app/heavy.component.ts b/devtools/projects/demo-standalone/src/app/demo-app/heavy.component.ts
index 49367eb8f3b..85f19174621 100644
--- a/devtools/projects/demo-standalone/src/app/demo-app/heavy.component.ts
+++ b/devtools/projects/demo-standalone/src/app/demo-app/heavy.component.ts
@@ -18,8 +18,7 @@ const fib = (n: number): number => {
 @Component({selector: 'app-heavy', template: `<h1>{{ calculate() }}</h1>`, standalone: true})
 export class HeavyComponent {
   @Input()
-  set foo(_: any) {
-  }
+  set foo(_: any) {}
 
   state = {
     nested: {
@@ -27,14 +26,12 @@ export class HeavyComponent {
         foo: 1,
         bar: 2,
       },
-      [Symbol(3)]():
-          number {
-            return 1.618;
-          },
-      get foo():
-          number {
-            return 42;
-          },
+      [Symbol(3)](): number {
+        return 1.618;
+      },
+      get foo(): number {
+        return 42;
+      },
     },
   };
   calculate(): number {
diff --git a/devtools/projects/demo-standalone/src/app/demo-app/todo/about/about.component.ts b/devtools/projects/demo-standalone/src/app/demo-app/todo/about/about.component.ts
index 51a288972fa..05e9d270d90 100644
--- a/devtools/projects/demo-standalone/src/app/demo-app/todo/about/about.component.ts
+++ b/devtools/projects/demo-standalone/src/app/demo-app/todo/about/about.component.ts
@@ -18,7 +18,6 @@ import {RouterLink, RouterOutlet} from '@angular/router';
     <a [routerLink]="">Home</a>
     <a [routerLink]="">Home</a>
     <a [routerLink]="">Home</a>
-  `
+  `,
 })
-export class AboutComponent {
-}
+export class AboutComponent {}
diff --git a/devtools/projects/demo-standalone/src/app/demo-app/todo/dialog.component.ts b/devtools/projects/demo-standalone/src/app/demo-app/todo/dialog.component.ts
index 690cceb2612..bf49dac15f3 100644
--- a/devtools/projects/demo-standalone/src/app/demo-app/todo/dialog.component.ts
+++ b/devtools/projects/demo-standalone/src/app/demo-app/todo/dialog.component.ts
@@ -12,7 +12,6 @@ import {FormsModule} from '@angular/forms';
 import {MAT_DIALOG_DATA, MatDialogModule, MatDialogRef} from '@angular/material/dialog';
 import {MatFormFieldModule} from '@angular/material/form-field';
 
-
 export interface DialogData {
   animal: string;
   name: string;
@@ -39,8 +38,9 @@ export interface DialogData {
 })
 export class DialogComponent {
   constructor(
-      public dialogRef: MatDialogRef<DialogComponent>,
-      @Inject(MAT_DIALOG_DATA) public data: DialogData) {}
+    public dialogRef: MatDialogRef<DialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: DialogData,
+  ) {}
 
   onNoClick(): void {
     this.dialogRef.close();
diff --git a/devtools/projects/demo-standalone/src/app/demo-app/todo/home/todo.component.ts b/devtools/projects/demo-standalone/src/app/demo-app/todo/home/todo.component.ts
index 21834b502fd..baff1ed99cc 100644
--- a/devtools/projects/demo-standalone/src/app/demo-app/todo/home/todo.component.ts
+++ b/devtools/projects/demo-standalone/src/app/demo-app/todo/home/todo.component.ts
@@ -22,17 +22,21 @@ export interface Todo {
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [TooltipDirective],
-  styles: [`
+  styles: [
+    `
       .destroy {
         cursor: pointer;
         display: unset !important;
       }
-    `],
+    `,
+  ],
   template: `
     <li [class.completed]="todo.completed">
       <div class="view" appTooltip>
         <input class="toggle" type="checkbox" [checked]="todo.completed" (change)="toggle()" />
-        <label (dblclick)="enableEditMode()" [style.display]="editMode ? 'none' : 'block'">{{ todo.label }}</label>
+        <label (dblclick)="enableEditMode()" [style.display]="editMode ? 'none' : 'block'">{{
+          todo.label
+        }}</label>
         <button class="destroy" (click)="delete.emit(todo)"></button>
       </div>
       <input
@@ -42,7 +46,7 @@ export interface Todo {
         (keydown.enter)="completeEdit($any($event.target).value)"
       />
     </li>
-  `
+  `,
 })
 export class TodoComponent {
   @Input() todo!: Todo;
diff --git a/devtools/projects/demo-standalone/src/app/demo-app/todo/home/todos.component.ts b/devtools/projects/demo-standalone/src/app/demo-app/todo/home/todos.component.ts
index 33bbee0cbd9..2575a10da12 100644
--- a/devtools/projects/demo-standalone/src/app/demo-app/todo/home/todos.component.ts
+++ b/devtools/projects/demo-standalone/src/app/demo-app/todo/home/todos.component.ts
@@ -7,7 +7,16 @@
  */
 
 import {NgForOf} from '@angular/common';
-import {ChangeDetectorRef, Component, EventEmitter, OnDestroy, OnInit, Output, Pipe, PipeTransform} from '@angular/core';
+import {
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  OnDestroy,
+  OnInit,
+  Output,
+  Pipe,
+  PipeTransform,
+} from '@angular/core';
 import {RouterLink} from '@angular/router';
 
 import {SamplePipe} from './sample.pipe';
@@ -57,19 +66,25 @@ const fib = (n: number): number => {
     <section class="todoapp">
       <header class="header">
         <h1>todos</h1>
-        <input (keydown.enter)="addTodo(input)" #input class="new-todo" placeholder="What needs to be done?" autofocus />
+        <input
+          (keydown.enter)="addTodo(input)"
+          #input
+          class="new-todo"
+          placeholder="What needs to be done?"
+          autofocus
+        />
       </header>
       <section class="main">
         <input id="toggle-all" class="toggle-all" type="checkbox" />
         <label for="toggle-all">Mark all as complete</label>
         <ul class="todo-list">
           @for (todo of todos | todosFilter: filterValue; track todo) {
-            <app-todo
-              appTooltip
-              [todo]="todo"
-              (delete)="onDelete($event)"
-              (update)="onChange($event)"
-            />
+          <app-todo
+            appTooltip
+            [todo]="todo"
+            (delete)="onDelete($event)"
+            (update)="onChange($event)"
+          />
           }
         </ul>
       </section>
@@ -80,7 +95,7 @@ const fib = (n: number): number => {
         <button class="clear-completed" (click)="clearCompleted()">Clear completed</button>
       </footer>
     </section>
-    `
+  `,
 })
 export class TodosComponent implements OnInit, OnDestroy {
   todos: Todo[] = [
diff --git a/devtools/projects/demo-standalone/src/app/demo-app/todo/todo-app.component.ts b/devtools/projects/demo-standalone/src/app/demo-app/todo/todo-app.component.ts
index af74cb9e36d..651cc540864 100644
--- a/devtools/projects/demo-standalone/src/app/demo-app/todo/todo-app.component.ts
+++ b/devtools/projects/demo-standalone/src/app/demo-app/todo/todo-app.component.ts
@@ -19,9 +19,16 @@ import {DialogComponent} from './dialog.component';
 @Component({
   selector: 'app-todo-demo',
   standalone: true,
-  imports:
-      [RouterLink, RouterOutlet, MatDialogModule, MatFormFieldModule, MatInputModule, FormsModule],
-  styles: [`
+  imports: [
+    RouterLink,
+    RouterOutlet,
+    MatDialogModule,
+    MatFormFieldModule,
+    MatInputModule,
+    FormsModule,
+  ],
+  styles: [
+    `
       nav {
         padding-top: 20px;
         padding-bottom: 10px;
@@ -37,7 +44,8 @@ import {DialogComponent} from './dialog.component';
         padding: 10px;
         margin-right: 20px;
       }
-    `],
+    `,
+  ],
   template: `
     <nav>
       <a routerLink="/demo-app/todos/app">Todos</a>
@@ -47,7 +55,7 @@ import {DialogComponent} from './dialog.component';
     <button class="dialog-open-button" (click)="openDialog()">Open dialog</button>
 
     <router-outlet></router-outlet>
-  `
+  `,
 })
 export class TodoAppComponent {
   name!: string;
diff --git a/devtools/projects/demo-standalone/src/app/demo-app/zippy.component.ts b/devtools/projects/demo-standalone/src/app/demo-app/zippy.component.ts
index 44ef01fcbaa..3cabaa7f675 100644
--- a/devtools/projects/demo-standalone/src/app/demo-app/zippy.component.ts
+++ b/devtools/projects/demo-standalone/src/app/demo-app/zippy.component.ts
@@ -11,27 +11,29 @@ import {Component, Input} from '@angular/core';
 @Component({
   selector: 'app-zippy',
   standalone: true,
-  styles: [`
-    :host {
-      user-select: none;
-    }
+  styles: [
+    `
+      :host {
+        user-select: none;
+      }
 
-    header {
-      max-width: 120px;
-      border: 1px solid #ccc;
-      padding-left: 10px;
-      padding-right: 10px;
-      cursor: pointer;
-    }
+      header {
+        max-width: 120px;
+        border: 1px solid #ccc;
+        padding-left: 10px;
+        padding-right: 10px;
+        cursor: pointer;
+      }
 
-    div {
-      max-width: 120px;
-      border-left: 1px solid #ccc;
-      border-right: 1px solid #ccc;
-      border-bottom: 1px solid #ccc;
-      padding: 10px;
-    }
-  `],
+      div {
+        max-width: 120px;
+        border-left: 1px solid #ccc;
+        border-right: 1px solid #ccc;
+        border-bottom: 1px solid #ccc;
+        padding: 10px;
+      }
+    `,
+  ],
   template: `
     <section>
       <header (click)="visible = !visible">{{ title }}</header>
@@ -39,7 +41,7 @@ import {Component, Input} from '@angular/core';
         <ng-content></ng-content>
       </div>
     </section>
-  `
+  `,
 })
 export class ZippyComponent {
   @Input() title!: string;
diff --git a/devtools/projects/demo-standalone/src/app/devtools-app/devtools-app.component.ts b/devtools/projects/demo-standalone/src/app/devtools-app/devtools-app.component.ts
index e87c840eb6c..4d5aebb3ae9 100644
--- a/devtools/projects/demo-standalone/src/app/devtools-app/devtools-app.component.ts
+++ b/devtools/projects/demo-standalone/src/app/devtools-app/devtools-app.component.ts
@@ -19,33 +19,39 @@ import {IFrameMessageBus} from '../../../../../src/iframe-message-bus';
     {
       provide: MessageBus,
       useFactory(): MessageBus<Events> {
-        return new PriorityAwareMessageBus(new IFrameMessageBus(
-            'angular-devtools', 'angular-devtools-backend',
+        return new PriorityAwareMessageBus(
+          new IFrameMessageBus(
+            'angular-devtools',
+            'angular-devtools-backend',
             // tslint:disable-next-line: no-non-null-assertion
-            () => (document.querySelector('#sample-app') as HTMLIFrameElement).contentWindow!));
+            () => (document.querySelector('#sample-app') as HTMLIFrameElement).contentWindow!,
+          ),
+        );
       },
     },
   ],
-  styles: [`
-    iframe {
-      height: 340px;
-      width: 100%;
-      border: 0;
-    }
+  styles: [
+    `
+      iframe {
+        height: 340px;
+        width: 100%;
+        border: 0;
+      }
 
-    .devtools-wrapper {
-      height: calc(100vh - 345px);
-    }
-  `],
+      .devtools-wrapper {
+        height: calc(100vh - 345px);
+      }
+    `,
+  ],
   template: `
     <iframe #ref src="demo-app/todos/app" id="sample-app"></iframe>
     <br />
     <div class="devtools-wrapper">
       <ng-devtools></ng-devtools>
     </div>
-  `
+  `,
 })
 export class DevToolsComponent {
-  messageBus: IFrameMessageBus|null = null;
+  messageBus: IFrameMessageBus | null = null;
   @ViewChild('ref') iframe!: ElementRef;
 }
diff --git a/devtools/projects/demo-standalone/src/environments/environment.ts b/devtools/projects/demo-standalone/src/environments/environment.ts
index 6830d2daa76..226d242d5ae 100644
--- a/devtools/projects/demo-standalone/src/environments/environment.ts
+++ b/devtools/projects/demo-standalone/src/environments/environment.ts
@@ -8,5 +8,5 @@
 
 export const environment = {
   production: false,
-  LATEST_SHA: 'BUILD_SCM_COMMIT_SHA',  // Stamped at build time by bazel
+  LATEST_SHA: 'BUILD_SCM_COMMIT_SHA', // Stamped at build time by bazel
 };
diff --git a/devtools/projects/demo-standalone/src/main.ts b/devtools/projects/demo-standalone/src/main.ts
index 353cacd0108..a83578e3b34 100644
--- a/devtools/projects/demo-standalone/src/main.ts
+++ b/devtools/projects/demo-standalone/src/main.ts
@@ -16,7 +16,6 @@ import {DemoApplicationOperations} from '../../../src/demo-application-operation
 
 import {AppComponent} from './app/app.component';
 
-
 bootstrapApplication(AppComponent, {
   providers: [
     provideAnimations(),
@@ -24,7 +23,7 @@ bootstrapApplication(AppComponent, {
       {
         path: '',
         loadComponent: () =>
-            import('./app/devtools-app/devtools-app.component').then((m) => m.DevToolsComponent),
+          import('./app/devtools-app/devtools-app.component').then((m) => m.DevToolsComponent),
         pathMatch: 'full',
       },
       {
@@ -40,5 +39,5 @@ bootstrapApplication(AppComponent, {
       provide: ApplicationEnvironment,
       useClass: DemoApplicationEnvironment,
     },
-  ]
+  ],
 });
diff --git a/devtools/projects/ng-devtools-backend/src/lib/client-event-subscribers.ts b/devtools/projects/ng-devtools-backend/src/lib/client-event-subscribers.ts
index d8c15ccc1fe..d4fded2b913 100644
--- a/devtools/projects/ng-devtools-backend/src/lib/client-event-subscribers.ts
+++ b/devtools/projects/ng-devtools-backend/src/lib/client-event-subscribers.ts
@@ -6,12 +6,43 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ComponentExplorerViewQuery, ComponentType, DevToolsNode, DirectivePosition, DirectiveType, ElementPosition, Events, MessageBus, ProfilerFrame, SerializedInjector, SerializedProviderRecord} from 'protocol';
+import {
+  ComponentExplorerViewQuery,
+  ComponentType,
+  DevToolsNode,
+  DirectivePosition,
+  DirectiveType,
+  ElementPosition,
+  Events,
+  MessageBus,
+  ProfilerFrame,
+  SerializedInjector,
+  SerializedProviderRecord,
+} from 'protocol';
 import {debounceTime} from 'rxjs/operators';
-import {appIsAngularInDevMode, appIsAngularIvy, appIsSupportedAngularVersion, getAngularVersion,} from 'shared-utils';
+import {
+  appIsAngularInDevMode,
+  appIsAngularIvy,
+  appIsSupportedAngularVersion,
+  getAngularVersion,
+} from 'shared-utils';
 
 import {ComponentInspector} from './component-inspector/component-inspector';
-import {getElementInjectorElement, getInjectorFromElementNode, getInjectorProviders, getInjectorResolutionPath, getLatestComponentState, idToInjector, injectorsSeen, isElementInjector, nodeInjectorToResolutionPath, queryDirectiveForest, serializeProviderRecord, serializeResolutionPath, updateState} from './component-tree';
+import {
+  getElementInjectorElement,
+  getInjectorFromElementNode,
+  getInjectorProviders,
+  getInjectorResolutionPath,
+  getLatestComponentState,
+  idToInjector,
+  injectorsSeen,
+  isElementInjector,
+  nodeInjectorToResolutionPath,
+  queryDirectiveForest,
+  serializeProviderRecord,
+  serializeResolutionPath,
+  updateState,
+} from './component-tree';
 import {unHighlight} from './highlighter';
 import {disableTimingAPI, enableTimingAPI, initializeOrGetDirectiveForestHooks} from './hooks';
 import {start as startProfiling, stop as stopProfiling} from './hooks/capture';
@@ -25,7 +56,9 @@ export const subscribeToClientEvents = (messageBus: MessageBus<Events>): void =>
   messageBus.on('shutdown', shutdownCallback(messageBus));
 
   messageBus.on(
-      'getLatestComponentExplorerView', getLatestComponentExplorerViewCallback(messageBus));
+    'getLatestComponentExplorerView',
+    getLatestComponentExplorerViewCallback(messageBus),
+  );
 
   messageBus.on('queryNgAvailability', checkForAngularCallback(messageBus));
 
@@ -54,8 +87,8 @@ export const subscribeToClientEvents = (messageBus: MessageBus<Events>): void =>
     // once every 250ms
     runOutsideAngular(() => {
       initializeOrGetDirectiveForestHooks()
-          .profiler.changeDetection$.pipe(debounceTime(250))
-          .subscribe(() => messageBus.emit('componentTreeDirty'));
+        .profiler.changeDetection$.pipe(debounceTime(250))
+        .subscribe(() => messageBus.emit('componentTreeDirty'));
     });
   }
 };
@@ -68,55 +101,58 @@ const shutdownCallback = (messageBus: MessageBus<Events>) => () => {
   messageBus.destroy();
 };
 
-const getLatestComponentExplorerViewCallback = (messageBus: MessageBus<Events>) =>
-    (query?: ComponentExplorerViewQuery) => {
-      // We want to force re-indexing of the component tree.
-      // Pressing the refresh button means the user saw stuck UI.
+const getLatestComponentExplorerViewCallback =
+  (messageBus: MessageBus<Events>) => (query?: ComponentExplorerViewQuery) => {
+    // We want to force re-indexing of the component tree.
+    // Pressing the refresh button means the user saw stuck UI.
 
-      initializeOrGetDirectiveForestHooks().indexForest();
+    initializeOrGetDirectiveForestHooks().indexForest();
 
-      const forest = prepareForestForSerialization(
-          initializeOrGetDirectiveForestHooks().getIndexedDirectiveForest(),
-          ngDebugDependencyInjectionApiIsSupported());
+    const forest = prepareForestForSerialization(
+      initializeOrGetDirectiveForestHooks().getIndexedDirectiveForest(),
+      ngDebugDependencyInjectionApiIsSupported(),
+    );
 
-      // cleanup injector id mappings
-      for (const injectorId of idToInjector.keys()) {
-        if (!injectorsSeen.has(injectorId)) {
-          const injector = idToInjector.get(injectorId)!;
-          if (isElementInjector(injector)) {
-            const element = getElementInjectorElement(injector);
-            if (element) {
-              nodeInjectorToResolutionPath.delete(element);
-            }
+    // cleanup injector id mappings
+    for (const injectorId of idToInjector.keys()) {
+      if (!injectorsSeen.has(injectorId)) {
+        const injector = idToInjector.get(injectorId)!;
+        if (isElementInjector(injector)) {
+          const element = getElementInjectorElement(injector);
+          if (element) {
+            nodeInjectorToResolutionPath.delete(element);
           }
-
-          idToInjector.delete(injectorId);
         }
-      }
-      injectorsSeen.clear();
 
-      if (!query) {
-        messageBus.emit('latestComponentExplorerView', [{forest}]);
-        return;
+        idToInjector.delete(injectorId);
       }
+    }
+    injectorsSeen.clear();
 
-      const state = getLatestComponentState(
-          query, initializeOrGetDirectiveForestHooks().getDirectiveForest());
+    if (!query) {
+      messageBus.emit('latestComponentExplorerView', [{forest}]);
+      return;
+    }
 
-      if (state) {
-        const {directiveProperties} = state;
-        messageBus.emit('latestComponentExplorerView', [{forest, properties: directiveProperties}]);
-      }
-    };
+    const state = getLatestComponentState(
+      query,
+      initializeOrGetDirectiveForestHooks().getDirectiveForest(),
+    );
+
+    if (state) {
+      const {directiveProperties} = state;
+      messageBus.emit('latestComponentExplorerView', [{forest, properties: directiveProperties}]);
+    }
+  };
 
 const checkForAngularCallback = (messageBus: MessageBus<Events>) => () =>
-    checkForAngular(messageBus);
+  checkForAngular(messageBus);
 const getRoutesCallback = (messageBus: MessageBus<Events>) => () => getRoutes(messageBus);
 
 const startProfilingCallback = (messageBus: MessageBus<Events>) => () =>
-    startProfiling((frame: ProfilerFrame) => {
-      messageBus.emit('sendProfilerChunk', [frame]);
-    });
+  startProfiling((frame: ProfilerFrame) => {
+    messageBus.emit('sendProfilerChunk', [frame]);
+  });
 
 const stopProfilingCallback = (messageBus: MessageBus<Events>) => () => {
   messageBus.emit('profilerResults', [stopProfiling()]);
@@ -124,33 +160,41 @@ const stopProfilingCallback = (messageBus: MessageBus<Events>) => () => {
 
 const selectedComponentCallback = (position: ElementPosition) => {
   const node = queryDirectiveForest(
-      position, initializeOrGetDirectiveForestHooks().getIndexedDirectiveForest());
+    position,
+    initializeOrGetDirectiveForestHooks().getIndexedDirectiveForest(),
+  );
   setConsoleReference({node, position});
 };
 
-const getNestedPropertiesCallback = (messageBus: MessageBus<Events>) => (
-    position: DirectivePosition, propPath: string[]) => {
-  const emitEmpty = () => messageBus.emit('nestedProperties', [position, {props: {}}, propPath]);
-  const node = queryDirectiveForest(
-      position.element, initializeOrGetDirectiveForestHooks().getIndexedDirectiveForest());
-  if (!node) {
-    return emitEmpty();
-  }
-  const current =
-      position.directive === undefined ? node.component : node.directives[position.directive];
-  if (!current) {
-    return emitEmpty();
-  }
-  let data = current.instance;
-  for (const prop of propPath) {
-    data = data[prop];
-    if (!data) {
-      console.error('Cannot access the properties', propPath, 'of', node);
+const getNestedPropertiesCallback =
+  (messageBus: MessageBus<Events>) => (position: DirectivePosition, propPath: string[]) => {
+    const emitEmpty = () => messageBus.emit('nestedProperties', [position, {props: {}}, propPath]);
+    const node = queryDirectiveForest(
+      position.element,
+      initializeOrGetDirectiveForestHooks().getIndexedDirectiveForest(),
+    );
+    if (!node) {
+      return emitEmpty();
     }
-  }
-  messageBus.emit('nestedProperties', [position, {props: serializeDirectiveState(data)}, propPath]);
-  return;
-};
+    const current =
+      position.directive === undefined ? node.component : node.directives[position.directive];
+    if (!current) {
+      return emitEmpty();
+    }
+    let data = current.instance;
+    for (const prop of propPath) {
+      data = data[prop];
+      if (!data) {
+        console.error('Cannot access the properties', propPath, 'of', node);
+      }
+    }
+    messageBus.emit('nestedProperties', [
+      position,
+      {props: serializeDirectiveState(data)},
+      propPath,
+    ]);
+    return;
+  };
 
 //
 // Subscribe Helpers
@@ -209,44 +253,46 @@ export interface SerializableComponentInstanceType extends ComponentType {
   id: number;
 }
 
-export interface SerializableComponentTreeNode extends
-    DevToolsNode<SerializableDirectiveInstanceType, SerializableComponentInstanceType> {
+export interface SerializableComponentTreeNode
+  extends DevToolsNode<SerializableDirectiveInstanceType, SerializableComponentInstanceType> {
   children: SerializableComponentTreeNode[];
 }
 
 // Here we drop properties to prepare the tree for serialization.
 // We don't need the component instance, so we just traverse the tree
 // and leave the component name.
-const prepareForestForSerialization = (roots: ComponentTreeNode[], includeResolutionPath = false):
-    SerializableComponentTreeNode[] => {
-      const serializedNodes: SerializableComponentTreeNode[] = [];
-      for (const node of roots) {
-        const serializedNode: SerializableComponentTreeNode = {
-          element: node.element,
-          component: node.component ? {
+const prepareForestForSerialization = (
+  roots: ComponentTreeNode[],
+  includeResolutionPath = false,
+): SerializableComponentTreeNode[] => {
+  const serializedNodes: SerializableComponentTreeNode[] = [];
+  for (const node of roots) {
+    const serializedNode: SerializableComponentTreeNode = {
+      element: node.element,
+      component: node.component
+        ? {
             name: node.component.name,
             isElement: node.component.isElement,
             id: initializeOrGetDirectiveForestHooks().getDirectiveId(node.component.instance)!,
-          } :
-                                      null,
-          directives: node.directives.map(
-              (d) => ({
-                name: d.name,
-                id: initializeOrGetDirectiveForestHooks().getDirectiveId(d.instance)!,
-              })),
-          children: prepareForestForSerialization(node.children, includeResolutionPath),
-        };
-        serializedNodes.push(serializedNode);
-
-        if (includeResolutionPath) {
-          serializedNode.resolutionPath = getNodeDIResolutionPath(node);
-        }
-      }
-
-      return serializedNodes;
+          }
+        : null,
+      directives: node.directives.map((d) => ({
+        name: d.name,
+        id: initializeOrGetDirectiveForestHooks().getDirectiveId(d.instance)!,
+      })),
+      children: prepareForestForSerialization(node.children, includeResolutionPath),
     };
+    serializedNodes.push(serializedNode);
 
-function getNodeDIResolutionPath(node: ComponentTreeNode): SerializedInjector[]|undefined {
+    if (includeResolutionPath) {
+      serializedNode.resolutionPath = getNodeDIResolutionPath(node);
+    }
+  }
+
+  return serializedNodes;
+};
+
+function getNodeDIResolutionPath(node: ComponentTreeNode): SerializedInjector[] | undefined {
   const nodeInjector = getInjectorFromElementNode(node.nativeElement!);
   if (!nodeInjector) {
     return [];
@@ -274,91 +320,95 @@ function getNodeDIResolutionPath(node: ComponentTreeNode): SerializedInjector[]|
   return serializedPath;
 }
 
-const getInjectorProvidersCallback = (messageBus: MessageBus<Events>) =>
-    (injector: SerializedInjector) => {
-      if (!idToInjector.has(injector.id)) {
-        return;
+const getInjectorProvidersCallback =
+  (messageBus: MessageBus<Events>) => (injector: SerializedInjector) => {
+    if (!idToInjector.has(injector.id)) {
+      return;
+    }
+
+    const providerRecords = getInjectorProviders(idToInjector.get(injector.id)!);
+    const allProviderRecords: SerializedProviderRecord[] = [];
+
+    const tokenToRecords: Map<any, SerializedProviderRecord[]> = new Map();
+
+    for (const [index, providerRecord] of providerRecords.entries()) {
+      const record = serializeProviderRecord(
+        providerRecord,
+        index,
+        injector.type === 'environment',
+      );
+
+      allProviderRecords.push(record);
+
+      const records = tokenToRecords.get(providerRecord.token) ?? [];
+      records.push(record);
+      tokenToRecords.set(providerRecord.token, records);
+    }
+
+    const serializedProviderRecords: SerializedProviderRecord[] = [];
+
+    for (const [token, records] of tokenToRecords.entries()) {
+      const multiRecords = records.filter((record) => record.multi);
+      const nonMultiRecords = records.filter((record) => !record.multi);
+
+      for (const record of nonMultiRecords) {
+        serializedProviderRecords.push(record);
       }
 
-      const providerRecords = getInjectorProviders(idToInjector.get(injector.id)!);
-      const allProviderRecords: SerializedProviderRecord[] = [];
-
-      const tokenToRecords: Map<any, SerializedProviderRecord[]> = new Map();
-
-      for (const [index, providerRecord] of providerRecords.entries()) {
-        const record =
-            serializeProviderRecord(providerRecord, index, injector.type === 'environment');
-
-        allProviderRecords.push(record);
-
-        const records = tokenToRecords.get(providerRecord.token) ?? [];
-        records.push(record);
-        tokenToRecords.set(providerRecord.token, records);
+      const [firstMultiRecord] = multiRecords;
+      if (firstMultiRecord !== undefined) {
+        // All multi providers will have the same token, so we can just use the first one.
+        serializedProviderRecords.push({
+          token: firstMultiRecord.token,
+          type: 'multi',
+          multi: true,
+          // todo(aleksanderbodurri): implememnt way to differentiate multi providers that
+          // provided as viewProviders
+          isViewProvider: firstMultiRecord.isViewProvider,
+          index: records.map((record) => record.index as number),
+        });
       }
+    }
 
-      const serializedProviderRecords: SerializedProviderRecord[] = [];
+    messageBus.emit('latestInjectorProviders', [injector, serializedProviderRecords]);
+  };
 
-      for (const [token, records] of tokenToRecords.entries()) {
-        const multiRecords = records.filter(record => record.multi);
-        const nonMultiRecords = records.filter(record => !record.multi);
+const logProvider = (
+  serializedInjector: SerializedInjector,
+  serializedProvider: SerializedProviderRecord,
+): void => {
+  if (!idToInjector.has(serializedInjector.id)) {
+    return;
+  }
 
-        for (const record of nonMultiRecords) {
-          serializedProviderRecords.push(record);
-        }
+  const injector = idToInjector.get(serializedInjector.id)!;
 
-        const [firstMultiRecord] = multiRecords;
-        if (firstMultiRecord !== undefined) {
-          // All multi providers will have the same token, so we can just use the first one.
-          serializedProviderRecords.push({
-            token: firstMultiRecord.token,
-            type: 'multi',
-            multi: true,
-            // todo(aleksanderbodurri): implememnt way to differentiate multi providers that
-            // provided as viewProviders
-            isViewProvider: firstMultiRecord.isViewProvider,
-            index: records.map(record => record.index as number),
-          });
-        }
-      }
+  const providerRecords = getInjectorProviders(injector);
 
-      messageBus.emit('latestInjectorProviders', [injector, serializedProviderRecords]);
-    };
+  console.group(
+    `%c${serializedInjector.name}`,
+    `color: ${
+      serializedInjector.type === 'element' ? '#a7d5a9' : '#f05057'
+    }; font-size: 1.25rem; font-weight: bold;`,
+  );
+  // tslint:disable-next-line:no-console
+  console.log('injector: ', injector);
 
-const logProvider =
-    (serializedInjector: SerializedInjector, serializedProvider: SerializedProviderRecord):
-        void => {
-          if (!idToInjector.has(serializedInjector.id)) {
-            return;
-          }
+  if (typeof serializedProvider.index === 'number') {
+    const provider = providerRecords[serializedProvider.index];
 
-          const injector = idToInjector.get(serializedInjector.id)!;
+    // tslint:disable-next-line:no-console
+    console.log('provider: ', provider);
+    // tslint:disable-next-line:no-console
+    console.log(`value: `, injector.get(provider.token, null, {optional: true}));
+  } else if (Array.isArray(serializedProvider.index)) {
+    const providers = serializedProvider.index.map((index) => providerRecords[index]);
 
-          const providerRecords = getInjectorProviders(injector);
+    // tslint:disable-next-line:no-console
+    console.log('providers: ', providers);
+    // tslint:disable-next-line:no-console
+    console.log(`value: `, injector.get(providers[0].token, null, {optional: true}));
+  }
 
-          console.group(
-              `%c${serializedInjector.name}`,
-              `color: ${
-                  serializedInjector.type === 'element' ?
-                      '#a7d5a9' :
-                      '#f05057'}; font-size: 1.25rem; font-weight: bold;`);
-          // tslint:disable-next-line:no-console
-          console.log('injector: ', injector);
-
-          if (typeof serializedProvider.index === 'number') {
-            const provider = providerRecords[serializedProvider.index];
-
-            // tslint:disable-next-line:no-console
-            console.log('provider: ', provider);
-            // tslint:disable-next-line:no-console
-            console.log(`value: `, injector.get(provider.token, null, {optional: true}));
-          } else if (Array.isArray(serializedProvider.index)) {
-            const providers = serializedProvider.index.map(index => providerRecords[index]);
-
-            // tslint:disable-next-line:no-console
-            console.log('providers: ', providers);
-            // tslint:disable-next-line:no-console
-            console.log(`value: `, injector.get(providers[0].token, null, {optional: true}));
-          }
-
-          console.groupEnd();
-        };
+  console.groupEnd();
+};
diff --git a/devtools/projects/ng-devtools-backend/src/lib/component-inspector/component-inspector.ts b/devtools/projects/ng-devtools-backend/src/lib/component-inspector/component-inspector.ts
index 02e09de685c..aff2976adec 100644
--- a/devtools/projects/ng-devtools-backend/src/lib/component-inspector/component-inspector.ts
+++ b/devtools/projects/ng-devtools-backend/src/lib/component-inspector/component-inspector.ts
@@ -14,7 +14,7 @@ import {initializeOrGetDirectiveForestHooks} from '../hooks';
 import {ComponentTreeNode} from '../interfaces';
 
 interface Type<T> extends Function {
-  new(...args: any[]): T;
+  new (...args: any[]): T;
 }
 export interface ComponentInspectorOptions {
   onComponentEnter: (id: number) => void;
@@ -28,11 +28,13 @@ export class ComponentInspector {
   private readonly _onComponentSelect;
   private readonly _onComponentLeave;
 
-  constructor(componentOptions: ComponentInspectorOptions = {
-    onComponentEnter: () => {},
-    onComponentLeave: () => {},
-    onComponentSelect: () => {},
-  }) {
+  constructor(
+    componentOptions: ComponentInspectorOptions = {
+      onComponentEnter: () => {},
+      onComponentLeave: () => {},
+      onComponentSelect: () => {},
+    },
+  ) {
     this.bindMethods();
     this._onComponentEnter = componentOptions.onComponentEnter;
     this._onComponentSelect = componentOptions.onComponentSelect;
@@ -57,7 +59,8 @@ export class ComponentInspector {
 
     if (this._selectedComponent.component && this._selectedComponent.host) {
       this._onComponentSelect(
-          initializeOrGetDirectiveForestHooks().getDirectiveId(this._selectedComponent.component)!);
+        initializeOrGetDirectiveForestHooks().getDirectiveId(this._selectedComponent.component)!,
+      );
     }
   }
 
@@ -73,7 +76,8 @@ export class ComponentInspector {
     if (this._selectedComponent.component && this._selectedComponent.host) {
       highlight(this._selectedComponent.host);
       this._onComponentEnter(
-          initializeOrGetDirectiveForestHooks().getDirectiveId(this._selectedComponent.component)!);
+        initializeOrGetDirectiveForestHooks().getDirectiveId(this._selectedComponent.component)!,
+      );
     }
   }
 
@@ -93,7 +97,7 @@ export class ComponentInspector {
 
   highlightByPosition(position: ElementPosition): void {
     const forest: ComponentTreeNode[] = initializeOrGetDirectiveForestHooks().getDirectiveForest();
-    const elementToHighlight: HTMLElement|null = findNodeInForest(position, forest);
+    const elementToHighlight: HTMLElement | null = findNodeInForest(position, forest);
     if (elementToHighlight) {
       highlight(elementToHighlight);
     }
diff --git a/devtools/projects/ng-devtools-backend/src/lib/component-tree.ts b/devtools/projects/ng-devtools-backend/src/lib/component-tree.ts
index b744ebde48b..8b65b523e42 100644
--- a/devtools/projects/ng-devtools-backend/src/lib/component-tree.ts
+++ b/devtools/projects/ng-devtools-backend/src/lib/component-tree.ts
@@ -5,11 +5,28 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import {ComponentExplorerViewQuery, DirectiveMetadata, DirectivesProperties, ElementPosition, PropertyQueryTypes, SerializedInjectedService, SerializedInjector, SerializedProviderRecord, UpdatedStateData,} from 'protocol';
+import {
+  ComponentExplorerViewQuery,
+  DirectiveMetadata,
+  DirectivesProperties,
+  ElementPosition,
+  PropertyQueryTypes,
+  SerializedInjectedService,
+  SerializedInjector,
+  SerializedProviderRecord,
+  UpdatedStateData,
+} from 'protocol';
 
 import {buildDirectiveTree, getLViewFromDirectiveOrElementInstance} from './directive-forest/index';
-import {ngDebugApiIsSupported, ngDebugClient, ngDebugDependencyInjectionApiIsSupported} from './ng-debug-api/ng-debug-api';
-import {deeplySerializeSelectedProperties, serializeDirectiveState,} from './state-serializer/state-serializer';
+import {
+  ngDebugApiIsSupported,
+  ngDebugClient,
+  ngDebugDependencyInjectionApiIsSupported,
+} from './ng-debug-api/ng-debug-api';
+import {
+  deeplySerializeSelectedProperties,
+  serializeDirectiveState,
+} from './state-serializer/state-serializer';
 
 // Need to be kept in sync with Angular framework
 // We can't directly import it from framework now
@@ -22,10 +39,21 @@ enum ChangeDetectionStrategy {
 
 import {ComponentTreeNode, DirectiveInstanceType, ComponentInstanceType} from './interfaces';
 
-import type {ClassProvider, ExistingProvider, FactoryProvider, InjectOptions, InjectionToken, Injector, Type, ValueProvider, ɵComponentDebugMetadata as ComponentDebugMetadata, ɵProviderRecord as ProviderRecord} from '@angular/core';
+import type {
+  ClassProvider,
+  ExistingProvider,
+  FactoryProvider,
+  InjectOptions,
+  InjectionToken,
+  Injector,
+  Type,
+  ValueProvider,
+  ɵComponentDebugMetadata as ComponentDebugMetadata,
+  ɵProviderRecord as ProviderRecord,
+} from '@angular/core';
 import {isSignal} from './utils';
 
-export const injectorToId = new WeakMap<Injector|HTMLElement, string>();
+export const injectorToId = new WeakMap<Injector | HTMLElement, string>();
 export const nodeInjectorToResolutionPath = new WeakMap<HTMLElement, SerializedInjector[]>();
 export const idToInjector = new Map<string, Injector>();
 export const injectorsSeen = new Set<string>();
@@ -47,12 +75,14 @@ export function getInjectorResolutionPath(injector: Injector): Injector[] {
   return ngDebugClient().ɵgetInjectorResolutionPath(injector);
 }
 
-export function getInjectorFromElementNode(element: Node): Injector|null {
+export function getInjectorFromElementNode(element: Node): Injector | null {
   return ngDebugClient().getInjector(element);
 }
 
-function getDirectivesFromElement(element: HTMLElement):
-    {component: unknown|null; directives: unknown[];} {
+function getDirectivesFromElement(element: HTMLElement): {
+  component: unknown | null;
+  directives: unknown[];
+} {
   let component = null;
   if (element instanceof Element) {
     component = ngDebugClient().getComponent(element);
@@ -65,9 +95,9 @@ function getDirectivesFromElement(element: HTMLElement):
 }
 
 export const getLatestComponentState = (
-    query: ComponentExplorerViewQuery,
-    directiveForest?: ComponentTreeNode[],
-    ): {directiveProperties: DirectivesProperties}|undefined => {
+  query: ComponentExplorerViewQuery,
+  directiveForest?: ComponentTreeNode[],
+): {directiveProperties: DirectivesProperties} | undefined => {
   // if a directive forest is passed in we don't have to build the forest again.
   directiveForest = directiveForest ?? buildDirectiveForest();
 
@@ -81,19 +111,19 @@ export const getLatestComponentState = (
   const injector = ngDebugClient().getInjector(node.nativeElement!);
 
   const injectors = getInjectorResolutionPath(injector);
-  const resolutionPathWithProviders = !ngDebugDependencyInjectionApiIsSupported() ?
-      [] :
-      injectors.map((injector) => ({
-                      injector,
-                      providers: getInjectorProviders(injector),
-                    }));
-  const populateResultSet = (dir: DirectiveInstanceType|ComponentInstanceType) => {
+  const resolutionPathWithProviders = !ngDebugDependencyInjectionApiIsSupported()
+    ? []
+    : injectors.map((injector) => ({
+        injector,
+        providers: getInjectorProviders(injector),
+      }));
+  const populateResultSet = (dir: DirectiveInstanceType | ComponentInstanceType) => {
     const {instance, name} = dir;
     const metadata = getDirectiveMetadata(instance);
     metadata.dependencies = getDependenciesForDirective(
-        injector,
-        resolutionPathWithProviders,
-        instance.constructor,
+      injector,
+      resolutionPathWithProviders,
+      instance.constructor,
     );
 
     if (query.propertyQuery.type === PropertyQueryTypes.All) {
@@ -106,9 +136,9 @@ export const getLatestComponentState = (
     if (query.propertyQuery.type === PropertyQueryTypes.Specified) {
       directiveProperties[name] = {
         props: deeplySerializeSelectedProperties(
-            instance,
-            query.propertyQuery.properties[name] || [],
-            ),
+          instance,
+          query.propertyQuery.properties[name] || [],
+        ),
         metadata,
       };
     }
@@ -124,7 +154,7 @@ export const getLatestComponentState = (
   };
 };
 
-function serializeElementInjectorWithId(injector: Injector): SerializedInjector|null {
+function serializeElementInjectorWithId(injector: Injector): SerializedInjector | null {
   let id: string;
   const element = getElementInjectorElement(injector);
 
@@ -146,7 +176,7 @@ function serializeElementInjectorWithId(injector: Injector): SerializedInjector|
   return {id, ...serializedInjector};
 }
 
-function serializeInjectorWithId(injector: Injector): SerializedInjector|null {
+function serializeInjectorWithId(injector: Injector): SerializedInjector | null {
   if (isElementInjector(injector)) {
     return serializeElementInjectorWithId(injector);
   } else {
@@ -154,7 +184,7 @@ function serializeInjectorWithId(injector: Injector): SerializedInjector|null {
   }
 }
 
-function serializeEnvironmentInjectorWithId(injector: Injector): SerializedInjector|null {
+function serializeEnvironmentInjectorWithId(injector: Injector): SerializedInjector | null {
   let id: string;
 
   if (!injectorToId.has(injector)) {
@@ -224,16 +254,16 @@ export function getInjectorProviders(injector: Injector) {
 }
 
 const getDependenciesForDirective = (
-    injector: Injector,
-    resolutionPath: {injector: Injector; providers: ProviderRecord[]}[],
-    directive: any,
-    ): SerializedInjectedService[] => {
+  injector: Injector,
+  resolutionPath: {injector: Injector; providers: ProviderRecord[]}[],
+  directive: any,
+): SerializedInjectedService[] => {
   if (!ngDebugApiIsSupported('ɵgetDependenciesFromInjectable')) {
     return [];
   }
 
   let dependencies =
-      ngDebugClient().ɵgetDependenciesFromInjectable(injector, directive)?.dependencies ?? [];
+    ngDebugClient().ɵgetDependenciesFromInjectable(injector, directive)?.dependencies ?? [];
   const serializedInjectedServices: SerializedInjectedService[] = [];
 
   let position = 0;
@@ -256,8 +286,9 @@ const getDependenciesForDirective = (
     // dependency (2)
     const dependencyResolutionPath: SerializedInjector[] = [
       // (1)
-      ...resolutionPath.slice(0, foundInjectorIndex + 1)
-          .map((node) => serializeInjectorWithId(node.injector)!),
+      ...resolutionPath
+        .slice(0, foundInjectorIndex + 1)
+        .map((node) => serializeInjectorWithId(node.injector)!),
 
       // (2)
       // We slice the import path to remove the first element because this is the same
@@ -314,7 +345,7 @@ function stripUnderscore(str: string): string {
   return str;
 }
 
-export function serializeInjector(injector: Injector): Omit<SerializedInjector, 'id'>|null {
+export function serializeInjector(injector: Injector): Omit<SerializedInjector, 'id'> | null {
   const metadata = getInjectorMetadata(injector);
 
   if (metadata === null) {
@@ -354,11 +385,11 @@ export function serializeInjector(injector: Injector): Omit<SerializedInjector,
 }
 
 export function serializeProviderRecord(
-    providerRecord: ProviderRecord,
-    index: number,
-    hasImportPath = false,
-    ): SerializedProviderRecord {
-  let type: 'type'|'class'|'value'|'factory'|'existing' = 'type';
+  providerRecord: ProviderRecord,
+  index: number,
+  hasImportPath = false,
+): SerializedProviderRecord {
+  let type: 'type' | 'class' | 'value' | 'factory' | 'existing' = 'type';
   let multi = false;
 
   if (typeof providerRecord.provider === 'object') {
@@ -378,7 +409,11 @@ export function serializeProviderRecord(
   }
 
   const serializedProvider: {
-    token: string; type: typeof type; multi: boolean; isViewProvider: boolean; index: number;
+    token: string;
+    type: typeof type;
+    multi: boolean;
+    isViewProvider: boolean;
+    index: number;
     importPath?: string[];
   } = {
     token: valueToLabel(providerRecord.token),
@@ -389,10 +424,9 @@ export function serializeProviderRecord(
   };
 
   if (hasImportPath) {
-    serializedProvider['importPath'] = (providerRecord.importPath ?? [])
-                                           .map(
-                                               (injector) => valueToLabel(injector),
-                                           );
+    serializedProvider['importPath'] = (providerRecord.importPath ?? []).map((injector) =>
+      valueToLabel(injector),
+    );
   }
 
   return serializedProvider;
@@ -401,8 +435,8 @@ export function serializeProviderRecord(
 function elementToDirectiveNames(element: HTMLElement): string[] {
   const {component, directives} = getDirectivesFromElement(element);
   return [component, ...directives]
-      .map((dir) => dir?.constructor?.name ?? '')
-      .filter((dir) => !!dir);
+    .map((dir) => dir?.constructor?.name ?? '')
+    .filter((dir) => !!dir);
 }
 
 export function getElementInjectorElement(elementInjector: Injector): HTMLElement {
@@ -413,7 +447,7 @@ export function getElementInjectorElement(elementInjector: Injector): HTMLElemen
   return getInjectorMetadata(elementInjector)!.source as HTMLElement;
 }
 
-function isInjectionToken(token: Type<unknown>|InjectionToken<unknown>): boolean {
+function isInjectionToken(token: Type<unknown> | InjectionToken<unknown>): boolean {
   return token.constructor.name === 'InjectionToken';
 }
 
@@ -447,7 +481,7 @@ const getRoots = () => {
   const roots = Array.from(document.documentElement.querySelectorAll('[ng-version]'));
 
   const isTopLevel = (element: Element) => {
-    let parent: Element|null = element;
+    let parent: Element | null = element;
 
     while (parent?.parentElement) {
       parent = parent.parentElement;
@@ -470,13 +504,13 @@ export const buildDirectiveForest = (): ComponentTreeNode[] => {
 // Based on an ElementID we return a specific component node.
 // If we can't find any, we return null.
 export const queryDirectiveForest = (
-    position: ElementPosition,
-    forest: ComponentTreeNode[],
-    ): ComponentTreeNode|null => {
+  position: ElementPosition,
+  forest: ComponentTreeNode[],
+): ComponentTreeNode | null => {
   if (!position.length) {
     return null;
   }
-  let node: null|ComponentTreeNode = null;
+  let node: null | ComponentTreeNode = null;
   for (const i of position) {
     node = forest[i];
     if (!node) {
@@ -488,16 +522,16 @@ export const queryDirectiveForest = (
 };
 
 export const findNodeInForest = (
-    position: ElementPosition,
-    forest: ComponentTreeNode[],
-    ): HTMLElement|null => {
-  const foundComponent: ComponentTreeNode|null = queryDirectiveForest(position, forest);
+  position: ElementPosition,
+  forest: ComponentTreeNode[],
+): HTMLElement | null => {
+  const foundComponent: ComponentTreeNode | null = queryDirectiveForest(position, forest);
   return foundComponent ? (foundComponent.nativeElement as HTMLElement) : null;
 };
 
 export const findNodeFromSerializedPosition = (
-    serializedPosition: string,
-    ): ComponentTreeNode|null => {
+  serializedPosition: string,
+): ComponentTreeNode | null => {
   const position: number[] = serializedPosition.split(',').map((index) => parseInt(index, 10));
   return queryDirectiveForest(position, buildDirectiveForest());
 };
@@ -507,9 +541,9 @@ export const updateState = (updatedStateData: UpdatedStateData): void => {
   const node = queryDirectiveForest(updatedStateData.directiveId.element, buildDirectiveForest());
   if (!node) {
     console.warn(
-        'Could not update the state of component',
-        updatedStateData,
-        'because the component was not found',
+      'Could not update the state of component',
+      updatedStateData,
+      'because the component was not found',
     );
     return;
   }
@@ -551,15 +585,14 @@ const mutateComponentOrDirective = (updatedStateData: UpdatedStateData, compOrDi
     } else {
       parentObjectOfValueToUpdate[valueKey] = updatedStateData.newValue;
     }
-  } catch {
-  }
+  } catch {}
 };
 
 export function serializeResolutionPath(resolutionPath: Injector[]): SerializedInjector[] {
   const serializedResolutionPath: SerializedInjector[] = [];
 
   for (const injector of resolutionPath) {
-    let serializedInjectorWithId: SerializedInjector|null = null;
+    let serializedInjectorWithId: SerializedInjector | null = null;
 
     if (isElementInjector(injector)) {
       serializedInjectorWithId = serializeElementInjectorWithId(injector);
diff --git a/devtools/projects/ng-devtools-backend/src/lib/directive-forest/index.ts b/devtools/projects/ng-devtools-backend/src/lib/directive-forest/index.ts
index e0ec86454ab..d25db061f0d 100644
--- a/devtools/projects/ng-devtools-backend/src/lib/directive-forest/index.ts
+++ b/devtools/projects/ng-devtools-backend/src/lib/directive-forest/index.ts
@@ -9,12 +9,16 @@
 import {LTreeStrategy} from './ltree';
 import {RTreeStrategy} from './render-tree';
 
-export {getDirectiveHostElement, getLViewFromDirectiveOrElementInstance, METADATA_PROPERTY_NAME} from './ltree';
+export {
+  getDirectiveHostElement,
+  getLViewFromDirectiveOrElementInstance,
+  METADATA_PROPERTY_NAME,
+} from './ltree';
 
 // The order of the strategies matters. Lower indices have higher priority.
 const strategies = [new RTreeStrategy(), new LTreeStrategy()];
 
-let strategy: null|RTreeStrategy|LTreeStrategy = null;
+let strategy: null | RTreeStrategy | LTreeStrategy = null;
 
 const selectStrategy = (element: Element) => {
   for (const s of strategies) {
diff --git a/devtools/projects/ng-devtools-backend/src/lib/directive-forest/ltree.ts b/devtools/projects/ng-devtools-backend/src/lib/directive-forest/ltree.ts
index 00e51cf6118..06aed8a3aec 100644
--- a/devtools/projects/ng-devtools-backend/src/lib/directive-forest/ltree.ts
+++ b/devtools/projects/ng-devtools-backend/src/lib/directive-forest/ltree.ts
@@ -28,7 +28,6 @@ const TYPE = 1;
 const ELEMENT = 0;
 const LVIEW_TVIEW = 1;
 
-
 // Big oversimplification of the LView structure.
 type LView = Array<any>;
 
@@ -41,7 +40,7 @@ const isLView = (value: unknown): value is LView => {
 };
 
 export const METADATA_PROPERTY_NAME = '__ngContext__';
-export function getLViewFromDirectiveOrElementInstance(dir: any): null|LView {
+export function getLViewFromDirectiveOrElementInstance(dir: any): null | LView {
   if (!dir) {
     return null;
   }
@@ -80,7 +79,7 @@ export class LTreeStrategy {
 
   private _getNode(lView: LView, data: any, idx: number): ComponentTreeNode {
     const directives: DirectiveInstanceType[] = [];
-    let component: ComponentInstanceType|null = null;
+    let component: ComponentInstanceType | null = null;
     const tNode = data[idx];
     const node = lView[idx][ELEMENT];
     const element = (node.tagName || node.nodeName).toLowerCase();
diff --git a/devtools/projects/ng-devtools-backend/src/lib/directive-forest/render-tree.spec.ts b/devtools/projects/ng-devtools-backend/src/lib/directive-forest/render-tree.spec.ts
index 87a4eefe496..a59ebd01f1b 100644
--- a/devtools/projects/ng-devtools-backend/src/lib/directive-forest/render-tree.spec.ts
+++ b/devtools/projects/ng-devtools-backend/src/lib/directive-forest/render-tree.spec.ts
@@ -19,7 +19,7 @@ describe('render tree extraction', () => {
     componentMap = new Map();
 
     (window as any).ng = {
-      getDirectiveMetadata(): void{},
+      getDirectiveMetadata(): void {},
       getComponent(element: Element): any {
         return componentMap.get(element);
       },
diff --git a/devtools/projects/ng-devtools-backend/src/lib/directive-forest/render-tree.ts b/devtools/projects/ng-devtools-backend/src/lib/directive-forest/render-tree.ts
index 72a075bc89d..37608ea7b9d 100644
--- a/devtools/projects/ng-devtools-backend/src/lib/directive-forest/render-tree.ts
+++ b/devtools/projects/ng-devtools-backend/src/lib/directive-forest/render-tree.ts
@@ -10,56 +10,60 @@ import {ComponentTreeNode} from '../interfaces';
 import {ngDebugClient} from '../ng-debug-api/ng-debug-api';
 import {isCustomElement} from '../utils';
 
-const extractViewTree =
-    (domNode: Node|Element, result: ComponentTreeNode[],
-     getComponent: (element: Element) => {} | null,
-     getDirectives: (node: Node) => {}[]): ComponentTreeNode[] => {
-      const directives = getDirectives(domNode);
-      if (!directives.length && !(domNode instanceof Element)) {
-        return result;
-      }
-      const componentTreeNode: ComponentTreeNode = {
-        children: [],
-        component: null,
-        directives: directives.map((dir) => {
-          return {
-            instance: dir,
-            name: dir.constructor.name,
-          };
-        }),
-        element: domNode.nodeName.toLowerCase(),
-        nativeElement: domNode,
+const extractViewTree = (
+  domNode: Node | Element,
+  result: ComponentTreeNode[],
+  getComponent: (element: Element) => {} | null,
+  getDirectives: (node: Node) => {}[],
+): ComponentTreeNode[] => {
+  const directives = getDirectives(domNode);
+  if (!directives.length && !(domNode instanceof Element)) {
+    return result;
+  }
+  const componentTreeNode: ComponentTreeNode = {
+    children: [],
+    component: null,
+    directives: directives.map((dir) => {
+      return {
+        instance: dir,
+        name: dir.constructor.name,
       };
-      if (!(domNode instanceof Element)) {
-        result.push(componentTreeNode);
-        return result;
-      }
-      const component = getComponent(domNode);
-      if (component) {
-        componentTreeNode.component = {
-          instance: component,
-          isElement: isCustomElement(domNode),
-          name: domNode.nodeName.toLowerCase(),
-        };
-      }
-      if (component || componentTreeNode.directives.length) {
-        result.push(componentTreeNode);
-      }
-      if (componentTreeNode.component || componentTreeNode.directives.length) {
-        domNode.childNodes.forEach(
-            (node) =>
-                extractViewTree(node, componentTreeNode.children, getComponent, getDirectives));
-      } else {
-        domNode.childNodes.forEach(
-            (node) => extractViewTree(node, result, getComponent, getDirectives));
-      }
-      return result;
+    }),
+    element: domNode.nodeName.toLowerCase(),
+    nativeElement: domNode,
+  };
+  if (!(domNode instanceof Element)) {
+    result.push(componentTreeNode);
+    return result;
+  }
+  const component = getComponent(domNode);
+  if (component) {
+    componentTreeNode.component = {
+      instance: component,
+      isElement: isCustomElement(domNode),
+      name: domNode.nodeName.toLowerCase(),
     };
+  }
+  if (component || componentTreeNode.directives.length) {
+    result.push(componentTreeNode);
+  }
+  if (componentTreeNode.component || componentTreeNode.directives.length) {
+    domNode.childNodes.forEach((node) =>
+      extractViewTree(node, componentTreeNode.children, getComponent, getDirectives),
+    );
+  } else {
+    domNode.childNodes.forEach((node) =>
+      extractViewTree(node, result, getComponent, getDirectives),
+    );
+  }
+  return result;
+};
 
 export class RTreeStrategy {
   supports(): boolean {
-    return (['getDirectiveMetadata', 'getComponent', 'getDirectives'] as const)
-        .every((method) => typeof ngDebugClient()[method] === 'function');
+    return (['getDirectiveMetadata', 'getComponent', 'getDirectives'] as const).every(
+      (method) => typeof ngDebugClient()[method] === 'function',
+    );
   }
 
   build(element: Element): ComponentTreeNode[] {
diff --git a/devtools/projects/ng-devtools-backend/src/lib/highlighter.ts b/devtools/projects/ng-devtools-backend/src/lib/highlighter.ts
index 5d9f22e9abd..ae0f1be1816 100644
--- a/devtools/projects/ng-devtools-backend/src/lib/highlighter.ts
+++ b/devtools/projects/ng-devtools-backend/src/lib/highlighter.ts
@@ -12,7 +12,7 @@ let overlayContent: HTMLElement;
 declare const ng: any;
 
 interface Type<T> extends Function {
-  new(...args: any[]): T;
+  new (...args: any[]): T;
 }
 
 const DEV_TOOLS_HIGHLIGHT_NODE_ID = '____ngDevToolsHighlight';
@@ -40,26 +40,27 @@ function init(): void {
   overlay.appendChild(overlayContent);
 }
 
-export const findComponentAndHost =
-    (el: Node|undefined): {component: any; host: HTMLElement | null} => {
-      if (!el) {
-        return {component: null, host: null};
-      }
-      while (el) {
-        const component = el instanceof HTMLElement && ng.getComponent(el);
-        if (component) {
-          return {component, host: el as HTMLElement};
-        }
-        if (!el.parentElement) {
-          break;
-        }
-        el = el.parentElement;
-      }
-      return {component: null, host: null};
-    };
+export const findComponentAndHost = (
+  el: Node | undefined,
+): {component: any; host: HTMLElement | null} => {
+  if (!el) {
+    return {component: null, host: null};
+  }
+  while (el) {
+    const component = el instanceof HTMLElement && ng.getComponent(el);
+    if (component) {
+      return {component, host: el as HTMLElement};
+    }
+    if (!el.parentElement) {
+      break;
+    }
+    el = el.parentElement;
+  }
+  return {component: null, host: null};
+};
 
 // Todo(aleksanderbodurri): this should not be part of the highlighter, move this somewhere else
-export function getDirectiveName(dir: Type<unknown>|undefined|null): string {
+export function getDirectiveName(dir: Type<unknown> | undefined | null): string {
   return dir ? dir.constructor.name : 'unknown';
 }
 
@@ -97,11 +98,12 @@ export function inDoc(node: any): boolean {
   }
   const doc = node.ownerDocument.documentElement;
   const parent = node.parentNode;
-  return doc === node || doc === parent ||
-      !!(parent && parent.nodeType === 1 && doc.contains(parent));
+  return (
+    doc === node || doc === parent || !!(parent && parent.nodeType === 1 && doc.contains(parent))
+  );
 }
 
-function getComponentRect(el: Node): DOMRect|undefined {
+function getComponentRect(el: Node): DOMRect | undefined {
   if (!(el instanceof HTMLElement)) {
     return;
   }
@@ -137,7 +139,7 @@ function positionOverlayContent(dimensions: DOMRect) {
 
   // Attempt to position the content element so that it's always in the
   // viewport along the Y axis. Prefer to position on the bottom.
-  if ((dimensions.bottom + yOffset) <= viewportHeight) {
+  if (dimensions.bottom + yOffset <= viewportHeight) {
     style.bottom = yOffsetValue;
     // If it doesn't fit on the bottom, try to position on top.
   } else if (dimensions.top - yOffset >= 0) {
diff --git a/devtools/projects/ng-devtools-backend/src/lib/hooks/capture.ts b/devtools/projects/ng-devtools-backend/src/lib/hooks/capture.ts
index ed469603904..7c4b2da290a 100644
--- a/devtools/projects/ng-devtools-backend/src/lib/hooks/capture.ts
+++ b/devtools/projects/ng-devtools-backend/src/lib/hooks/capture.ts
@@ -6,7 +6,13 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {DirectiveProfile, ElementPosition, ElementProfile, LifecycleProfile, ProfilerFrame} from 'protocol';
+import {
+  DirectiveProfile,
+  ElementPosition,
+  ElementProfile,
+  LifecycleProfile,
+  ProfilerFrame,
+} from 'protocol';
 
 import {getDirectiveName} from '../highlighter';
 import {ComponentTreeNode} from '../interfaces';
@@ -59,16 +65,20 @@ const getHooks = (onFrame: (frame: ProfilerFrame) => void): Partial<Hooks> => {
     // We flush here because it's possible the current node to overwrite
     // an existing removed node.
     onCreate(
-        directive: any, node: Node, _: number, isComponent: boolean, position: ElementPosition):
-        void {
-          eventMap.set(directive, {
-            isElement: isCustomElement(node),
-            name: getDirectiveName(directive),
-            isComponent,
-            lifecycle: {},
-            outputs: {},
-          });
-        },
+      directive: any,
+      node: Node,
+      _: number,
+      isComponent: boolean,
+      position: ElementPosition,
+    ): void {
+      eventMap.set(directive, {
+        isElement: isCustomElement(node),
+        name: getDirectiveName(directive),
+        isComponent,
+        lifecycle: {},
+        outputs: {},
+      });
+    },
     onChangeDetectionStart(component: any, node: Node): void {
       startEvent(timeStartMap, component, 'changeDetection');
       if (!inChangeDetection) {
@@ -111,22 +121,31 @@ const getHooks = (onFrame: (frame: ProfilerFrame) => void): Partial<Hooks> => {
         console.warn('Could not find profile for', component);
       }
     },
-    onDestroy(directive: any, node: Node, _: number, isComponent: boolean, __: ElementPosition):
-        void {
-          // Make sure we reflect such directives in the report.
-          if (!eventMap.has(directive)) {
-            eventMap.set(directive, {
-              isElement: isComponent && isCustomElement(node),
-              name: getDirectiveName(directive),
-              isComponent,
-              lifecycle: {},
-              outputs: {},
-            });
-          }
-        },
+    onDestroy(
+      directive: any,
+      node: Node,
+      _: number,
+      isComponent: boolean,
+      __: ElementPosition,
+    ): void {
+      // Make sure we reflect such directives in the report.
+      if (!eventMap.has(directive)) {
+        eventMap.set(directive, {
+          isElement: isComponent && isCustomElement(node),
+          name: getDirectiveName(directive),
+          isComponent,
+          lifecycle: {},
+          outputs: {},
+        });
+      }
+    },
     onLifecycleHookStart(
-        directive: any, hookName: keyof LifecycleProfile, node: Node, __: number,
-        isComponent: boolean): void {
+      directive: any,
+      hookName: keyof LifecycleProfile,
+      node: Node,
+      __: number,
+      isComponent: boolean,
+    ): void {
       startEvent(timeStartMap, directive, hookName);
       if (!eventMap.has(directive)) {
         eventMap.set(directive, {
@@ -139,7 +158,12 @@ const getHooks = (onFrame: (frame: ProfilerFrame) => void): Partial<Hooks> => {
       }
     },
     onLifecycleHookEnd(
-        directive: any, hookName: keyof LifecycleProfile, _: Node, __: number, ___: boolean): void {
+      directive: any,
+      hookName: keyof LifecycleProfile,
+      _: Node,
+      __: number,
+      ___: boolean,
+    ): void {
       const dir = eventMap.get(directive);
       const startTimestamp = getEventStart(timeStartMap, directive, hookName);
       if (startTimestamp === undefined) {
@@ -153,19 +177,23 @@ const getHooks = (onFrame: (frame: ProfilerFrame) => void): Partial<Hooks> => {
       dir.lifecycle[hookName] = (dir.lifecycle[hookName] || 0) + duration;
       frameDuration += duration;
     },
-    onOutputStart(componentOrDirective: any, outputName: string, node: Node, isComponent: boolean):
-        void {
-          startEvent(timeStartMap, componentOrDirective, outputName);
-          if (!eventMap.has(componentOrDirective)) {
-            eventMap.set(componentOrDirective, {
-              isElement: isCustomElement(node),
-              name: getDirectiveName(componentOrDirective),
-              isComponent,
-              lifecycle: {},
-              outputs: {},
-            });
-          }
-        },
+    onOutputStart(
+      componentOrDirective: any,
+      outputName: string,
+      node: Node,
+      isComponent: boolean,
+    ): void {
+      startEvent(timeStartMap, componentOrDirective, outputName);
+      if (!eventMap.has(componentOrDirective)) {
+        eventMap.set(componentOrDirective, {
+          isElement: isCustomElement(node),
+          name: getDirectiveName(componentOrDirective),
+          isComponent,
+          lifecycle: {},
+          outputs: {},
+        });
+      }
+    },
     onOutputEnd(componentOrDirective: any, outputName: string): void {
       const name = outputName;
       const entry = eventMap.get(componentOrDirective);
@@ -175,8 +203,10 @@ const getHooks = (onFrame: (frame: ProfilerFrame) => void): Partial<Hooks> => {
       }
       if (!entry) {
         console.warn(
-            'Could not find directive or component in onOutputEnd callback', componentOrDirective,
-            outputName);
+          'Could not find directive or component in onOutputEnd callback',
+          componentOrDirective,
+          outputName,
+        );
         return;
       }
       const duration = performance.now() - startTimestamp;
@@ -215,33 +245,36 @@ const insertOrMerge = (lastFrame: ElementProfile, profile: DirectiveProfile) =>
   }
 };
 
-const insertElementProfile =
-    (frames: ElementProfile[], position: ElementPosition, profile?: DirectiveProfile) => {
-      if (!profile) {
-        return;
-      }
-      const original = frames;
-      for (let i = 0; i < position.length - 1; i++) {
-        const pos = position[i];
-        if (!frames[pos]) {
-          // TODO(mgechev): consider how to ensure we don't hit this case
-          console.warn('Unable to find parent node for', profile, original);
-          return;
-        }
-        frames = frames[pos].children;
-      }
-      const lastIdx = position[position.length - 1];
-      let lastFrame: ElementProfile = {
-        children: [],
-        directives: [],
-      };
-      if (frames[lastIdx]) {
-        lastFrame = frames[lastIdx];
-      } else {
-        frames[lastIdx] = lastFrame;
-      }
-      insertOrMerge(lastFrame, profile);
-    };
+const insertElementProfile = (
+  frames: ElementProfile[],
+  position: ElementPosition,
+  profile?: DirectiveProfile,
+) => {
+  if (!profile) {
+    return;
+  }
+  const original = frames;
+  for (let i = 0; i < position.length - 1; i++) {
+    const pos = position[i];
+    if (!frames[pos]) {
+      // TODO(mgechev): consider how to ensure we don't hit this case
+      console.warn('Unable to find parent node for', profile, original);
+      return;
+    }
+    frames = frames[pos].children;
+  }
+  const lastIdx = position[position.length - 1];
+  let lastFrame: ElementProfile = {
+    children: [],
+    directives: [],
+  };
+  if (frames[lastIdx]) {
+    lastFrame = frames[lastIdx];
+  } else {
+    frames[lastIdx] = lastFrame;
+  }
+  insertOrMerge(lastFrame, profile);
+};
 
 const prepareInitialFrame = (source: string, duration: number) => {
   const frame: ProfilerFrame = {
@@ -252,7 +285,7 @@ const prepareInitialFrame = (source: string, duration: number) => {
   const directiveForestHooks = initializeOrGetDirectiveForestHooks();
   const directiveForest = directiveForestHooks.getIndexedDirectiveForest();
   const traverse = (node: ComponentTreeNode, children = frame.directives) => {
-    let position: ElementPosition|undefined;
+    let position: ElementPosition | undefined;
     if (node.component) {
       position = directiveForestHooks.getDirectivePosition(node.component.instance);
     } else {
diff --git a/devtools/projects/ng-devtools-backend/src/lib/hooks/hooks.ts b/devtools/projects/ng-devtools-backend/src/lib/hooks/hooks.ts
index 762c01cd659..5e494f055b6 100644
--- a/devtools/projects/ng-devtools-backend/src/lib/hooks/hooks.ts
+++ b/devtools/projects/ng-devtools-backend/src/lib/hooks/hooks.ts
@@ -28,7 +28,7 @@ export class DirectiveForestHooks {
 
   profiler: Profiler = selectProfilerStrategy();
 
-  getDirectivePosition(dir: any): ElementPosition|undefined {
+  getDirectivePosition(dir: any): ElementPosition | undefined {
     const result = this._tracker.getDirectivePosition(dir);
     if (result === undefined) {
       console.warn('Unable to find position of', dir);
@@ -36,7 +36,7 @@ export class DirectiveForestHooks {
     return result;
   }
 
-  getDirectiveId(dir: any): number|undefined {
+  getDirectiveId(dir: any): number | undefined {
     const result = this._tracker.getDirectiveId(dir);
     if (result === undefined) {
       console.warn('Unable to find ID of', result);
diff --git a/devtools/projects/ng-devtools-backend/src/lib/hooks/identity-tracker.ts b/devtools/projects/ng-devtools-backend/src/lib/hooks/identity-tracker.ts
index 73998ba0892..06a23ae2bed 100644
--- a/devtools/projects/ng-devtools-backend/src/lib/hooks/identity-tracker.ts
+++ b/devtools/projects/ng-devtools-backend/src/lib/hooks/identity-tracker.ts
@@ -12,7 +12,7 @@ import {buildDirectiveForest} from '../component-tree';
 import {ComponentInstanceType, ComponentTreeNode, DirectiveInstanceType} from '../interfaces';
 
 export declare interface Type<T> extends Function {
-  new(...args: any[]): T;
+  new (...args: any[]): T;
 }
 
 interface TreeNode {
@@ -22,7 +22,8 @@ interface TreeNode {
 }
 
 export type NodeArray = {
-  directive: any; isComponent: boolean;
+  directive: any;
+  isComponent: boolean;
 }[];
 
 export class IdentityTracker {
@@ -43,11 +44,11 @@ export class IdentityTracker {
     return IdentityTracker._instance;
   }
 
-  getDirectivePosition(dir: any): ElementPosition|undefined {
+  getDirectivePosition(dir: any): ElementPosition | undefined {
     return this._currentDirectivePosition.get(dir);
   }
 
-  getDirectiveId(dir: any): number|undefined {
+  getDirectiveId(dir: any): number | undefined {
     return this._currentDirectiveId.get(dir);
   }
 
@@ -56,7 +57,9 @@ export class IdentityTracker {
   }
 
   index(): {
-    newNodes: NodeArray; removedNodes: NodeArray; indexedForest: IndexedNode[];
+    newNodes: NodeArray;
+    removedNodes: NodeArray;
+    indexedForest: IndexedNode[];
     directiveForest: ComponentTreeNode[];
   } {
     const directiveForest = buildDirectiveForest();
@@ -78,8 +81,11 @@ export class IdentityTracker {
   }
 
   private _index(
-      node: IndexedNode, parent: TreeNode|null, newNodes: {directive: any; isComponent: boolean}[],
-      allNodes: Set<any>): void {
+    node: IndexedNode,
+    parent: TreeNode | null,
+    newNodes: {directive: any; isComponent: boolean}[],
+    allNodes: Set<any>,
+  ): void {
     if (node.component) {
       allNodes.add(node.component.instance);
       this.isComponent.set(node.component.instance, true);
@@ -113,7 +119,10 @@ export interface IndexedNode extends DevToolsNode<DirectiveInstanceType, Compone
 }
 
 const indexTree = <T extends DevToolsNode<DirectiveInstanceType, ComponentInstanceType>>(
-    node: T, idx: number, parentPosition: number[] = []): IndexedNode => {
+  node: T,
+  idx: number,
+  parentPosition: number[] = [],
+): IndexedNode => {
   const position = parentPosition.concat([idx]);
   return {
     position,
@@ -126,4 +135,5 @@ const indexTree = <T extends DevToolsNode<DirectiveInstanceType, ComponentInstan
 };
 
 export const indexForest = <T extends DevToolsNode<DirectiveInstanceType, ComponentInstanceType>>(
-    forest: T[]): IndexedNode[] => forest.map((n, i) => indexTree(n, i));
+  forest: T[],
+): IndexedNode[] => forest.map((n, i) => indexTree(n, i));
diff --git a/devtools/projects/ng-devtools-backend/src/lib/hooks/index.ts b/devtools/projects/ng-devtools-backend/src/lib/hooks/index.ts
index 629ee40b12f..30b04dfbcb2 100644
--- a/devtools/projects/ng-devtools-backend/src/lib/hooks/index.ts
+++ b/devtools/projects/ng-devtools-backend/src/lib/hooks/index.ts
@@ -15,9 +15,9 @@ import {DirectiveForestHooks} from './hooks';
 const markName = (s: string, method: Method) => `🅰️ ${s}#${method}`;
 
 const supportsPerformance =
-    globalThis.performance && typeof globalThis.performance.getEntriesByName === 'function';
+  globalThis.performance && typeof globalThis.performance.getEntriesByName === 'function';
 
-type Method = keyof LifecycleProfile|'changeDetection'|string;
+type Method = keyof LifecycleProfile | 'changeDetection' | string;
 
 const recordMark = (s: string, method: Method) => {
   if (supportsPerformance) {
diff --git a/devtools/projects/ng-devtools-backend/src/lib/hooks/profiler/native.ts b/devtools/projects/ng-devtools-backend/src/lib/hooks/profiler/native.ts
index 3d06cdd137f..8edee79440b 100644
--- a/devtools/projects/ng-devtools-backend/src/lib/hooks/profiler/native.ts
+++ b/devtools/projects/ng-devtools-backend/src/lib/hooks/profiler/native.ts
@@ -15,32 +15,37 @@ import {IdentityTracker, NodeArray} from '../identity-tracker';
 
 import {getLifeCycleName, Hooks, Profiler} from './shared';
 
-type ProfilerCallback = (event: ɵProfilerEvent, instanceOrLView: {}|null, hookOrListener: any) =>
-    void;
+type ProfilerCallback = (
+  event: ɵProfilerEvent,
+  instanceOrLView: {} | null,
+  hookOrListener: any,
+) => void;
 
 /** Implementation of Profiler that utilizes framework APIs fire profiler hooks. */
 export class NgProfiler extends Profiler {
   private _tracker = IdentityTracker.getInstance();
   private _callbacks: ProfilerCallback[] = [];
-  private _lastDirectiveInstance: {}|null = null;
+  private _lastDirectiveInstance: {} | null = null;
 
   constructor(config: Partial<Hooks> = {}) {
     super(config);
     this._setProfilerCallback(
-        (event: ɵProfilerEvent, instanceOrLView: {}|null, hookOrListener: any) => {
-          if (this[event] === undefined) {
-            return;
-          }
+      (event: ɵProfilerEvent, instanceOrLView: {} | null, hookOrListener: any) => {
+        if (this[event] === undefined) {
+          return;
+        }
 
-          this[event](instanceOrLView, hookOrListener);
-        });
+        this[event](instanceOrLView, hookOrListener);
+      },
+    );
     this._initialize();
   }
 
   private _initialize(): void {
     ngDebugClient().ɵsetProfiler(
-        (event: ɵProfilerEvent, instanceOrLView: {}|null, hookOrListener: any) =>
-            this._callbacks.forEach((cb) => cb(event, instanceOrLView, hookOrListener)));
+      (event: ɵProfilerEvent, instanceOrLView: {} | null, hookOrListener: any) =>
+        this._callbacks.forEach((cb) => cb(event, instanceOrLView, hookOrListener)),
+    );
   }
 
   private _setProfilerCallback(callback: ProfilerCallback): void {
@@ -106,9 +111,11 @@ export class NgProfiler extends Profiler {
     }
 
     this._onChangeDetectionStart(
-        this._lastDirectiveInstance, getDirectiveHostElement(this._lastDirectiveInstance),
-        this._tracker.getDirectiveId(this._lastDirectiveInstance),
-        this._tracker.getDirectivePosition(this._lastDirectiveInstance));
+      this._lastDirectiveInstance,
+      getDirectiveHostElement(this._lastDirectiveInstance),
+      this._tracker.getDirectiveId(this._lastDirectiveInstance),
+      this._tracker.getDirectivePosition(this._lastDirectiveInstance),
+    );
   }
 
   [ɵProfilerEvent.TemplateUpdateEnd](context: any, _hookOrListener: any): void {
@@ -121,9 +128,11 @@ export class NgProfiler extends Profiler {
     }
 
     this._onChangeDetectionEnd(
-        this._lastDirectiveInstance, getDirectiveHostElement(this._lastDirectiveInstance),
-        this._tracker.getDirectiveId(this._lastDirectiveInstance),
-        this._tracker.getDirectivePosition(this._lastDirectiveInstance));
+      this._lastDirectiveInstance,
+      getDirectiveHostElement(this._lastDirectiveInstance),
+      this._tracker.getDirectiveId(this._lastDirectiveInstance),
+      this._tracker.getDirectivePosition(this._lastDirectiveInstance),
+    );
   }
 
   [ɵProfilerEvent.LifecycleHookStart](directive: any, hook: any): void {
diff --git a/devtools/projects/ng-devtools-backend/src/lib/hooks/profiler/polyfill.ts b/devtools/projects/ng-devtools-backend/src/lib/hooks/profiler/polyfill.ts
index e5d23af36ee..03b42725aa8 100644
--- a/devtools/projects/ng-devtools-backend/src/lib/hooks/profiler/polyfill.ts
+++ b/devtools/projects/ng-devtools-backend/src/lib/hooks/profiler/polyfill.ts
@@ -6,7 +6,11 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {getDirectiveHostElement, getLViewFromDirectiveOrElementInstance, METADATA_PROPERTY_NAME,} from '../../directive-forest';
+import {
+  getDirectiveHostElement,
+  getLViewFromDirectiveOrElementInstance,
+  METADATA_PROPERTY_NAME,
+} from '../../directive-forest';
 import {runOutsideAngular} from '../../utils';
 import {IdentityTracker, NodeArray} from '../identity-tracker';
 
@@ -82,7 +86,7 @@ export class PatchingProfiler extends Profiler {
     if (original.patched) {
       return;
     }
-    declarations.tView.template = function(_: any, component: any): void {
+    declarations.tView.template = function (_: any, component: any): void {
       if (!self._inChangeDetection) {
         self._inChangeDetection = true;
         runOutsideAngular(() => {
@@ -122,7 +126,7 @@ export class PatchingProfiler extends Profiler {
         }
         if (typeof el === 'function') {
           const self = this;
-          current[idx] = function(): any {
+          current[idx] = function (): any {
             // We currently don't want to notify the consumer
             // for execution of lifecycle hooks of services and pipes.
             // These two abstractions don't have `__ngContext__`, and
diff --git a/devtools/projects/ng-devtools-backend/src/lib/hooks/profiler/shared.ts b/devtools/projects/ng-devtools-backend/src/lib/hooks/profiler/shared.ts
index 8189084128d..680ff5ab70c 100644
--- a/devtools/projects/ng-devtools-backend/src/lib/hooks/profiler/shared.ts
+++ b/devtools/projects/ng-devtools-backend/src/lib/hooks/profiler/shared.ts
@@ -11,32 +11,64 @@ import {Subject} from 'rxjs';
 
 import {NodeArray} from '../identity-tracker';
 
-type CreationHook =
-    (componentOrDirective: any, node: Node, id: number, isComponent: boolean,
-     position: ElementPosition) => void;
+type CreationHook = (
+  componentOrDirective: any,
+  node: Node,
+  id: number,
+  isComponent: boolean,
+  position: ElementPosition,
+) => void;
 
-type LifecycleStartHook =
-    (componentOrDirective: any, hook: keyof LifecycleProfile, node: Node, id: number,
-     isComponent: boolean) => void;
+type LifecycleStartHook = (
+  componentOrDirective: any,
+  hook: keyof LifecycleProfile,
+  node: Node,
+  id: number,
+  isComponent: boolean,
+) => void;
 
-type LifecycleEndHook =
-    (componentOrDirective: any, hook: keyof LifecycleProfile, node: Node, id: number,
-     isComponent: boolean) => void;
+type LifecycleEndHook = (
+  componentOrDirective: any,
+  hook: keyof LifecycleProfile,
+  node: Node,
+  id: number,
+  isComponent: boolean,
+) => void;
 
-type ChangeDetectionStartHook =
-    (component: any, node: Node, id: number, position: ElementPosition) => void;
+type ChangeDetectionStartHook = (
+  component: any,
+  node: Node,
+  id: number,
+  position: ElementPosition,
+) => void;
 
-type ChangeDetectionEndHook = (component: any, node: Node, id: number, position: ElementPosition) =>
-    void;
+type ChangeDetectionEndHook = (
+  component: any,
+  node: Node,
+  id: number,
+  position: ElementPosition,
+) => void;
 
-type DestroyHook =
-    (componentOrDirective: any, node: Node, id: number, isComponent: boolean,
-     position: ElementPosition) => void;
+type DestroyHook = (
+  componentOrDirective: any,
+  node: Node,
+  id: number,
+  isComponent: boolean,
+  position: ElementPosition,
+) => void;
 
-type OutputStartHook =
-    (componentOrDirective: any, outputName: string, node: Node, isComponent: boolean) => void;
-type OutputEndHook =
-    (componentOrDirective: any, outputName: string, node: Node, isComponent: boolean) => void;
+type OutputStartHook = (
+  componentOrDirective: any,
+  outputName: string,
+  node: Node,
+  isComponent: boolean,
+) => void;
+type OutputEndHook = (
+  componentOrDirective: any,
+  outputName: string,
+  node: Node,
+  isComponent: boolean,
+) => void;
 
 export interface Hooks {
   onCreate: CreationHook;
@@ -79,8 +111,12 @@ export abstract class Profiler {
 
   /** @internal */
   protected _onCreate(
-      _: any, __: Node, id: number|undefined, ___: boolean,
-      position: ElementPosition|undefined): void {
+    _: any,
+    __: Node,
+    id: number | undefined,
+    ___: boolean,
+    position: ElementPosition | undefined,
+  ): void {
     if (id === undefined || position === undefined) {
       return;
     }
@@ -89,8 +125,12 @@ export abstract class Profiler {
 
   /** @internal */
   protected _onDestroy(
-      _: any, __: Node, id: number|undefined, ___: boolean,
-      position: ElementPosition|undefined): void {
+    _: any,
+    __: Node,
+    id: number | undefined,
+    ___: boolean,
+    position: ElementPosition | undefined,
+  ): void {
     if (id === undefined || position === undefined) {
       return;
     }
@@ -99,7 +139,11 @@ export abstract class Profiler {
 
   /** @internal */
   protected _onChangeDetectionStart(
-      _: any, __: Node, id: number|undefined, position: ElementPosition|undefined): void {
+    _: any,
+    __: Node,
+    id: number | undefined,
+    position: ElementPosition | undefined,
+  ): void {
     if (id === undefined || position === undefined) {
       return;
     }
@@ -108,7 +152,11 @@ export abstract class Profiler {
 
   /** @internal */
   protected _onChangeDetectionEnd(
-      _: any, __: Node, id: number|undefined, position: ElementPosition|undefined): void {
+    _: any,
+    __: Node,
+    id: number | undefined,
+    position: ElementPosition | undefined,
+  ): void {
     if (id === undefined || position === undefined) {
       return;
     }
@@ -117,8 +165,12 @@ export abstract class Profiler {
 
   /** @internal */
   protected _onLifecycleHookStart(
-      _: any, __: keyof LifecycleProfile|'unknown', ___: Node, id: number|undefined,
-      ____: boolean): void {
+    _: any,
+    __: keyof LifecycleProfile | 'unknown',
+    ___: Node,
+    id: number | undefined,
+    ____: boolean,
+  ): void {
     if (id === undefined) {
       return;
     }
@@ -127,8 +179,12 @@ export abstract class Profiler {
 
   /** @internal */
   protected _onLifecycleHookEnd(
-      _: any, __: keyof LifecycleProfile|'unknown', ___: Node, id: number|undefined,
-      ____: boolean): void {
+    _: any,
+    __: keyof LifecycleProfile | 'unknown',
+    ___: Node,
+    id: number | undefined,
+    ____: boolean,
+  ): void {
     if (id === undefined) {
       return;
     }
@@ -136,8 +192,13 @@ export abstract class Profiler {
   }
 
   /** @internal */
-  protected _onOutputStart(_: any, __: string, ___: Node, id: number|undefined, ____: boolean):
-      void {
+  protected _onOutputStart(
+    _: any,
+    __: string,
+    ___: Node,
+    id: number | undefined,
+    ____: boolean,
+  ): void {
     if (id === undefined) {
       return;
     }
@@ -145,7 +206,13 @@ export abstract class Profiler {
   }
 
   /** @internal */
-  protected _onOutputEnd(_: any, __: string, ___: Node, id: number|undefined, ____: boolean): void {
+  protected _onOutputEnd(
+    _: any,
+    __: string,
+    ___: Node,
+    id: number | undefined,
+    ____: boolean,
+  ): void {
     if (id === undefined) {
       return;
     }
@@ -176,7 +243,7 @@ const hookNames = [
 
 const hookMethodNames = new Set(hookNames.map((hook) => `ng${hook}`));
 
-export const getLifeCycleName = (obj: {}, fn: any): keyof LifecycleProfile|'unknown' => {
+export const getLifeCycleName = (obj: {}, fn: any): keyof LifecycleProfile | 'unknown' => {
   const proto = Object.getPrototypeOf(obj);
   const keys = Object.getOwnPropertyNames(proto);
   for (const propName of keys) {
diff --git a/devtools/projects/ng-devtools-backend/src/lib/interfaces.ts b/devtools/projects/ng-devtools-backend/src/lib/interfaces.ts
index b99de670423..2915ba59e79 100644
--- a/devtools/projects/ng-devtools-backend/src/lib/interfaces.ts
+++ b/devtools/projects/ng-devtools-backend/src/lib/interfaces.ts
@@ -24,7 +24,7 @@ export interface ComponentInstanceType {
   isElement: boolean;
 }
 
-export interface ComponentTreeNode extends
-    DevToolsNode<DirectiveInstanceType, ComponentInstanceType> {
+export interface ComponentTreeNode
+  extends DevToolsNode<DirectiveInstanceType, ComponentInstanceType> {
   children: ComponentTreeNode[];
 }
diff --git a/devtools/projects/ng-devtools-backend/src/lib/router-tree.ts b/devtools/projects/ng-devtools-backend/src/lib/router-tree.ts
index df843a1d3a0..8c0f6044934 100644
--- a/devtools/projects/ng-devtools-backend/src/lib/router-tree.ts
+++ b/devtools/projects/ng-devtools-backend/src/lib/router-tree.ts
@@ -31,7 +31,7 @@ export function parseRoutes(router: Router): Route {
   return root;
 }
 
-function assignChildrenToParent(parentPath: string|null, children: Routes): Route[] {
+function assignChildrenToParent(parentPath: string | null, children: Routes): Route[] {
   return children.map((child: AngularRoute) => {
     const childName = childRouteName(child);
     const childDescendents: [any] = (child as any)._loadedConfig?.routes || child.children;
diff --git a/devtools/projects/ng-devtools-backend/src/lib/set-console-reference.ts b/devtools/projects/ng-devtools-backend/src/lib/set-console-reference.ts
index 543cf677b26..e1dec9b1e4e 100644
--- a/devtools/projects/ng-devtools-backend/src/lib/set-console-reference.ts
+++ b/devtools/projects/ng-devtools-backend/src/lib/set-console-reference.ts
@@ -12,7 +12,7 @@ import {arrayEquals} from 'shared-utils';
 import {ComponentTreeNode} from './interfaces';
 
 interface ConsoleReferenceNode {
-  node: ComponentTreeNode|null;
+  node: ComponentTreeNode | null;
   position: ElementPosition;
 }
 
@@ -35,8 +35,9 @@ const _setConsoleReference = (referenceNode: ConsoleReferenceNode) => {
 };
 
 const prepareCurrentReferencesForInsertion = (referenceNode: ConsoleReferenceNode) => {
-  const foundIndex = nodesForConsoleReference.findIndex(
-      (nodeToLookFor) => arrayEquals(nodeToLookFor.position, referenceNode.position));
+  const foundIndex = nodesForConsoleReference.findIndex((nodeToLookFor) =>
+    arrayEquals(nodeToLookFor.position, referenceNode.position),
+  );
   if (foundIndex !== -1) {
     nodesForConsoleReference.splice(foundIndex, 1);
   } else if (nodesForConsoleReference.length === CAPACITY) {
@@ -45,12 +46,12 @@ const prepareCurrentReferencesForInsertion = (referenceNode: ConsoleReferenceNod
 };
 
 const assignConsoleReferencesFrom = (referenceNodes: ConsoleReferenceNode[]) => {
-  referenceNodes.forEach(
-      (referenceNode, index) =>
-          setDirectiveKey(referenceNode.node, getConsoleReferenceWithIndexOf(index)));
+  referenceNodes.forEach((referenceNode, index) =>
+    setDirectiveKey(referenceNode.node, getConsoleReferenceWithIndexOf(index)),
+  );
 };
 
-const setDirectiveKey = (node: ComponentTreeNode|null, key: string) => {
+const setDirectiveKey = (node: ComponentTreeNode | null, key: string) => {
   Object.defineProperty(window, key, {
     get: () => {
       if (node?.component) {
@@ -66,4 +67,4 @@ const setDirectiveKey = (node: ComponentTreeNode|null, key: string) => {
 };
 
 const getConsoleReferenceWithIndexOf = (consoleReferenceIndex: number) =>
-    `${CONSOLE_REFERENCE_PREFIX}${consoleReferenceIndex}`;
+  `${CONSOLE_REFERENCE_PREFIX}${consoleReferenceIndex}`;
diff --git a/devtools/projects/ng-devtools-backend/src/lib/state-serializer/object-utils.ts b/devtools/projects/ng-devtools-backend/src/lib/state-serializer/object-utils.ts
index 68c2f9f0d68..b1405d3ec8c 100644
--- a/devtools/projects/ng-devtools-backend/src/lib/state-serializer/object-utils.ts
+++ b/devtools/projects/ng-devtools-backend/src/lib/state-serializer/object-utils.ts
@@ -24,7 +24,7 @@ export function getKeys(obj: {}): string[] {
   const prototypeMembers = Object.getOwnPropertyDescriptors(Object.getPrototypeOf(obj));
 
   const ignoreList = ['__proto__'];
-  const gettersAndSetters = Object.keys(prototypeMembers).filter(methodName => {
+  const gettersAndSetters = Object.keys(prototypeMembers).filter((methodName) => {
     if (ignoreList.includes(methodName)) {
       return false;
     }
@@ -42,6 +42,6 @@ export function getKeys(obj: {}): string[] {
  * @param propName The string representation of the target property name
  * @returns The Descriptor object of the property
  */
-export const getDescriptor = (instance: any, propName: string): PropertyDescriptor|undefined =>
-    Object.getOwnPropertyDescriptor(instance, propName) ||
-    Object.getOwnPropertyDescriptor(Object.getPrototypeOf(instance), propName);
+export const getDescriptor = (instance: any, propName: string): PropertyDescriptor | undefined =>
+  Object.getOwnPropertyDescriptor(instance, propName) ||
+  Object.getOwnPropertyDescriptor(Object.getPrototypeOf(instance), propName);
diff --git a/devtools/projects/ng-devtools-backend/src/lib/state-serializer/prop-type.spec.ts b/devtools/projects/ng-devtools-backend/src/lib/state-serializer/prop-type.spec.ts
index e85b1137168..f5764e64bba 100644
--- a/devtools/projects/ng-devtools-backend/src/lib/state-serializer/prop-type.spec.ts
+++ b/devtools/projects/ng-devtools-backend/src/lib/state-serializer/prop-type.spec.ts
@@ -73,11 +73,14 @@ describe('getPropType', () => {
       propTypeName: 'Set',
     },
     {
-      expression:
-          new Map<unknown, unknown>([['name', 'John'], ['age', 40], [{id: 123}, undefined]]),
+      expression: new Map<unknown, unknown>([
+        ['name', 'John'],
+        ['age', 40],
+        [{id: 123}, undefined],
+      ]),
       propType: PropType.Map,
       propTypeName: 'Map',
-    }
+    },
   ];
   for (const {expression, propType, propTypeName} of testCases) {
     it(`should determine ${String(expression)} as PropType:${propTypeName}(${propType})`, () => {
diff --git a/devtools/projects/ng-devtools-backend/src/lib/state-serializer/serialized-descriptor-factory.ts b/devtools/projects/ng-devtools-backend/src/lib/state-serializer/serialized-descriptor-factory.ts
index 61f64423a2a..67311d761a2 100644
--- a/devtools/projects/ng-devtools-backend/src/lib/state-serializer/serialized-descriptor-factory.ts
+++ b/devtools/projects/ng-devtools-backend/src/lib/state-serializer/serialized-descriptor-factory.ts
@@ -15,7 +15,7 @@ import {getDescriptor, getKeys} from './object-utils';
 // todo(aleksanderbodurri) pull this out of this file
 const METADATA_PROPERTY_NAME = '__ngContext__';
 
-type NestedType = PropType.Array|PropType.Object;
+type NestedType = PropType.Array | PropType.Object;
 
 export interface CompositeType {
   type: Extract<PropType, NestedType>;
@@ -29,7 +29,7 @@ export interface TerminalType {
   containerType: ContainerType;
 }
 
-export type PropertyData = TerminalType|CompositeType;
+export type PropertyData = TerminalType | CompositeType;
 
 export type Formatter<Result> = {
   [key in PropType]: (data: any) => Result;
@@ -73,107 +73,121 @@ const typeToDescriptorPreview: Formatter<string> = {
   [PropType.Unknown]: (_: any) => 'unknown',
 };
 
-type Key = string|number;
-type NestedSerializerFn =
-    (instance: any, propName: string|number, nodes: NestedProp[], isReadonly: boolean,
-     currentLevel: number, level?: number) => Descriptor;
+type Key = string | number;
+type NestedSerializerFn = (
+  instance: any,
+  propName: string | number,
+  nodes: NestedProp[],
+  isReadonly: boolean,
+  currentLevel: number,
+  level?: number,
+) => Descriptor;
 
 const ignoreList: Set<Key> = new Set([METADATA_PROPERTY_NAME, '__ngSimpleChanges__']);
 
-const shallowPropTypeToTreeMetaData:
-    Record<Exclude<PropType, NestedType>, {editable: boolean, expandable: boolean}> = {
-      [PropType.String]: {
-        editable: true,
-        expandable: false,
-      },
-      [PropType.BigInt]: {
-        editable: false,
-        expandable: false,
-      },
-      [PropType.Boolean]: {
-        editable: true,
-        expandable: false,
-      },
-      [PropType.Number]: {
-        editable: true,
-        expandable: false,
-      },
-      [PropType.Date]: {
-        editable: false,
-        expandable: false,
-      },
-      [PropType.Null]: {
-        editable: true,
-        expandable: false,
-      },
-      [PropType.Undefined]: {
-        editable: true,
-        expandable: false,
-      },
-      [PropType.Symbol]: {
-        editable: false,
-        expandable: false,
-      },
-      [PropType.Function]: {
-        editable: false,
-        expandable: false,
-      },
-      [PropType.HTMLNode]: {
-        editable: false,
-        expandable: false,
-      },
-      [PropType.Unknown]: {
-        editable: false,
-        expandable: false,
-      },
-      [PropType.Set]: {
-        editable: false,
-        expandable: false,
-      },
-      [PropType.Map]: {
-        editable: false,
-        expandable: false,
-      },
-    };
+const shallowPropTypeToTreeMetaData: Record<
+  Exclude<PropType, NestedType>,
+  {editable: boolean; expandable: boolean}
+> = {
+  [PropType.String]: {
+    editable: true,
+    expandable: false,
+  },
+  [PropType.BigInt]: {
+    editable: false,
+    expandable: false,
+  },
+  [PropType.Boolean]: {
+    editable: true,
+    expandable: false,
+  },
+  [PropType.Number]: {
+    editable: true,
+    expandable: false,
+  },
+  [PropType.Date]: {
+    editable: false,
+    expandable: false,
+  },
+  [PropType.Null]: {
+    editable: true,
+    expandable: false,
+  },
+  [PropType.Undefined]: {
+    editable: true,
+    expandable: false,
+  },
+  [PropType.Symbol]: {
+    editable: false,
+    expandable: false,
+  },
+  [PropType.Function]: {
+    editable: false,
+    expandable: false,
+  },
+  [PropType.HTMLNode]: {
+    editable: false,
+    expandable: false,
+  },
+  [PropType.Unknown]: {
+    editable: false,
+    expandable: false,
+  },
+  [PropType.Set]: {
+    editable: false,
+    expandable: false,
+  },
+  [PropType.Map]: {
+    editable: false,
+    expandable: false,
+  },
+};
 
-const isEditable =
-    (descriptor: PropertyDescriptor|undefined, propName: string|number, propData: TerminalType,
-     isGetterOrSetter: boolean) => {
-      if (propData.containerType === 'ReadonlySignal') {
-        return false;
-      }
+const isEditable = (
+  descriptor: PropertyDescriptor | undefined,
+  propName: string | number,
+  propData: TerminalType,
+  isGetterOrSetter: boolean,
+) => {
+  if (propData.containerType === 'ReadonlySignal') {
+    return false;
+  }
 
-      if (typeof propName === 'symbol') {
-        return false;
-      }
+  if (typeof propName === 'symbol') {
+    return false;
+  }
 
-      if (isGetterOrSetter) {
-        return false;
-      }
+  if (isGetterOrSetter) {
+    return false;
+  }
 
-      if (descriptor?.writable === false) {
-        return false;
-      }
+  if (descriptor?.writable === false) {
+    return false;
+  }
 
-      return shallowPropTypeToTreeMetaData[propData.type].editable;
-    };
+  return shallowPropTypeToTreeMetaData[propData.type].editable;
+};
 
 const isGetterOrSetter = (descriptor: any): boolean =>
-    (descriptor?.set || descriptor?.get) && !('value' in descriptor);
+  (descriptor?.set || descriptor?.get) && !('value' in descriptor);
 
-const getPreview = (propData: TerminalType|CompositeType, isGetterOrSetter: boolean) => {
+const getPreview = (propData: TerminalType | CompositeType, isGetterOrSetter: boolean) => {
   if (propData.containerType === 'ReadonlySignal') {
     return `Readonly Signal(${typeToDescriptorPreview[propData.type](propData.prop())})`;
   } else if (propData.containerType === 'WritableSignal') {
     return `Signal(${typeToDescriptorPreview[propData.type](propData.prop())})`;
   }
-  return !isGetterOrSetter ? typeToDescriptorPreview[propData.type](propData.prop) :
-                             typeToDescriptorPreview[PropType.Function]({name: ''});
+  return !isGetterOrSetter
+    ? typeToDescriptorPreview[propData.type](propData.prop)
+    : typeToDescriptorPreview[PropType.Function]({name: ''});
 };
 
 export function createShallowSerializedDescriptor(
-    instance: any, propName: string|number, propData: TerminalType,
-    isReadonly: boolean): Descriptor {
+  instance: any,
+  propName: string | number,
+  propData: TerminalType,
+  isReadonly: boolean,
+): Descriptor {
   const {type, containerType} = propData;
 
   const descriptor = getDescriptor(instance, propName as string);
@@ -195,10 +209,18 @@ export function createShallowSerializedDescriptor(
 }
 
 export function createLevelSerializedDescriptor(
-    instance: {}, propName: string|number, propData: CompositeType, levelOptions: LevelOptions,
-    continuation: (
-        instance: any, propName: string|number, isReadonly: boolean, level?: number,
-        max?: number) => Descriptor): Descriptor {
+  instance: {},
+  propName: string | number,
+  propData: CompositeType,
+  levelOptions: LevelOptions,
+  continuation: (
+    instance: any,
+    propName: string | number,
+    isReadonly: boolean,
+    level?: number,
+    max?: number,
+  ) => Descriptor,
+): Descriptor {
   const {type, prop, containerType} = propData;
 
   const descriptor = getDescriptor(instance, propName as string);
@@ -223,8 +245,13 @@ export function createLevelSerializedDescriptor(
 }
 
 export function createNestedSerializedDescriptor(
-    instance: {}, propName: string|number, propData: CompositeType, levelOptions: LevelOptions,
-    nodes: NestedProp[], nestedSerializer: NestedSerializerFn): Descriptor {
+  instance: {},
+  propName: string | number,
+  propData: CompositeType,
+  levelOptions: LevelOptions,
+  nodes: NestedProp[],
+  nestedSerializer: NestedSerializerFn,
+): Descriptor {
   const {type, prop, containerType} = propData;
 
   const descriptor = getDescriptor(instance, propName as string);
@@ -248,49 +275,75 @@ export function createNestedSerializedDescriptor(
 }
 
 function getNestedDescriptorValue(
-    propData: CompositeType, levelOptions: LevelOptions, nodes: NestedProp[],
-    nestedSerializer: NestedSerializerFn) {
+  propData: CompositeType,
+  levelOptions: LevelOptions,
+  nodes: NestedProp[],
+  nestedSerializer: NestedSerializerFn,
+) {
   const {type, prop} = propData;
   const {currentLevel} = levelOptions;
   const value = unwrapSignal(prop);
 
   switch (type) {
     case PropType.Array:
-      return nodes.map(
-          (nestedProp) => nestedSerializer(
-              value, nestedProp.name, nestedProp.children, false, currentLevel + 1));
+      return nodes.map((nestedProp) =>
+        nestedSerializer(value, nestedProp.name, nestedProp.children, false, currentLevel + 1),
+      );
     case PropType.Object:
-      return nodes.reduce((accumulator, nestedProp) => {
-        if (prop.hasOwnProperty(nestedProp.name) && !ignoreList.has(nestedProp.name)) {
-          accumulator[nestedProp.name] = nestedSerializer(
-              value, nestedProp.name, nestedProp.children, false, currentLevel + 1);
-        }
-        return accumulator;
-      }, {} as Record<string, Descriptor>);
+      return nodes.reduce(
+        (accumulator, nestedProp) => {
+          if (prop.hasOwnProperty(nestedProp.name) && !ignoreList.has(nestedProp.name)) {
+            accumulator[nestedProp.name] = nestedSerializer(
+              value,
+              nestedProp.name,
+              nestedProp.children,
+              false,
+              currentLevel + 1,
+            );
+          }
+          return accumulator;
+        },
+        {} as Record<string, Descriptor>,
+      );
   }
 }
 
 function getLevelDescriptorValue(
-    propData: CompositeType, levelOptions: LevelOptions,
-    continuation: (
-        instance: any, propName: string|number, isReadonly: boolean, level?: number,
-        max?: number) => Descriptor) {
+  propData: CompositeType,
+  levelOptions: LevelOptions,
+  continuation: (
+    instance: any,
+    propName: string | number,
+    isReadonly: boolean,
+    level?: number,
+    max?: number,
+  ) => Descriptor,
+) {
   const {type, prop} = propData;
   const {currentLevel, level} = levelOptions;
   const value = unwrapSignal(prop);
   const isReadonly = isSignal(prop);
   switch (type) {
     case PropType.Array:
-      return prop.map(
-          (_: any, idx: number) => continuation(value, idx, isReadonly, currentLevel + 1, level));
+      return prop.map((_: any, idx: number) =>
+        continuation(value, idx, isReadonly, currentLevel + 1, level),
+      );
     case PropType.Object:
-      return getKeys(prop).reduce((accumulator, propName) => {
-        if (!ignoreList.has(propName)) {
-          accumulator[propName] =
-              continuation(value, propName, isReadonly, currentLevel + 1, level);
-        }
-        return accumulator;
-      }, {} as Record<string, Descriptor>);
+      return getKeys(prop).reduce(
+        (accumulator, propName) => {
+          if (!ignoreList.has(propName)) {
+            accumulator[propName] = continuation(
+              value,
+              propName,
+              isReadonly,
+              currentLevel + 1,
+              level,
+            );
+          }
+          return accumulator;
+        },
+        {} as Record<string, Descriptor>,
+      );
   }
 }
 
diff --git a/devtools/projects/ng-devtools-backend/src/lib/state-serializer/state-serializer.spec.ts b/devtools/projects/ng-devtools-backend/src/lib/state-serializer/state-serializer.spec.ts
index 1db99aaaf34..64da4d2d41f 100644
--- a/devtools/projects/ng-devtools-backend/src/lib/state-serializer/state-serializer.spec.ts
+++ b/devtools/projects/ng-devtools-backend/src/lib/state-serializer/state-serializer.spec.ts
@@ -93,7 +93,7 @@ describe('deeplySerializeSelectedProperties', () => {
         editable: true,
         preview: '1',
         value: 1,
-        containerType: null
+        containerType: null,
       },
       nested: {
         type: PropType.Object,
@@ -106,10 +106,10 @@ describe('deeplySerializeSelectedProperties', () => {
             expandable: true,
             editable: false,
             preview: 'Array(4)',
-            containerType: null
+            containerType: null,
           },
         },
-        containerType: null
+        containerType: null,
       },
     });
   });
@@ -123,7 +123,7 @@ describe('deeplySerializeSelectedProperties', () => {
         editable: true,
         preview: '1',
         value: 1,
-        containerType: null
+        containerType: null,
       },
       nested: {
         type: PropType.Object,
@@ -155,26 +155,26 @@ describe('deeplySerializeSelectedProperties', () => {
                         editable: true,
                         preview: '1',
                         value: 1,
-                        containerType: null
+                        containerType: null,
                       },
                     },
-                    containerType: null
+                    containerType: null,
                   },
                 ],
-                containerType: null
+                containerType: null,
               },
               {
                 type: PropType.Set,
                 editable: false,
                 expandable: false,
                 preview: 'Set(2)',
-                containerType: null
+                containerType: null,
               },
             ],
-            containerType: null
+            containerType: null,
           },
         },
-        containerType: null
+        containerType: null,
       },
     });
   });
@@ -202,36 +202,37 @@ describe('deeplySerializeSelectedProperties', () => {
             editable: false,
             expandable: true,
             preview: 'Array(3)',
-            containerType: null
+            containerType: null,
           },
         },
-        containerType: null
+        containerType: null,
       },
     });
   });
 
   it('should work with getters with specified query', () => {
     const result = deeplySerializeSelectedProperties(
-        {
-          get foo(): any {
-            return {
-              baz: {
-                qux: 3,
-              },
-            };
-          },
+      {
+        get foo(): any {
+          return {
+            baz: {
+              qux: 3,
+            },
+          };
         },
-        [
-          {
-            name: 'foo',
-            children: [
-              {
-                name: 'baz',
-                children: [],
-              },
-            ],
-          },
-        ]);
+      },
+      [
+        {
+          name: 'foo',
+          children: [
+            {
+              name: 'baz',
+              children: [],
+            },
+          ],
+        },
+      ],
+    );
     expect(result).toEqual({
       foo: {
         type: PropType.Object,
@@ -244,28 +245,29 @@ describe('deeplySerializeSelectedProperties', () => {
             editable: false,
             expandable: true,
             preview: '{...}',
-            containerType: null
+            containerType: null,
           },
         },
-        containerType: null
+        containerType: null,
       },
     });
   });
 
   it('should work with getters without specified query', () => {
     const result = deeplySerializeSelectedProperties(
-        {
-          get foo(): any {
-            return {
-              baz: {
-                qux: {
-                  cos: 3,
-                },
+      {
+        get foo(): any {
+          return {
+            baz: {
+              qux: {
+                cos: 3,
               },
-            };
-          },
+            },
+          };
         },
-        []);
+      },
+      [],
+    );
     expect(result).toEqual({
       foo: {
         type: PropType.Object,
@@ -278,26 +280,27 @@ describe('deeplySerializeSelectedProperties', () => {
             editable: false,
             expandable: true,
             preview: '{...}',
-            containerType: null
+            containerType: null,
           },
         },
-        containerType: null
+        containerType: null,
       },
     });
   });
 
   it('both getters and setters should be readonly', () => {
     const result = deeplySerializeSelectedProperties(
-        {
-          get foo(): number {
-            return 42;
-          },
-          get bar(): number {
-            return 42;
-          },
-          set bar(val: number) {},
+      {
+        get foo(): number {
+          return 42;
         },
-        []);
+        get bar(): number {
+          return 42;
+        },
+        set bar(val: number) {},
+      },
+      [],
+    );
 
     // Neither getter and setter is editable
     expect(result).toEqual({
@@ -307,7 +310,7 @@ describe('deeplySerializeSelectedProperties', () => {
         editable: false,
         preview: '(...)',
         value: 42,
-        containerType: null
+        containerType: null,
       },
       bar: {
         type: PropType.Number,
@@ -315,58 +318,59 @@ describe('deeplySerializeSelectedProperties', () => {
         editable: false,
         preview: '(...)',
         value: 42,
-        containerType: null
+        containerType: null,
       },
     });
   });
 
   it('should return the precise path requested', () => {
     const result = deeplySerializeSelectedProperties(
-        {
-          state: {
-            nested: {
-              props: {
-                foo: 1,
-                bar: 2,
-              },
-              [Symbol(3)](): number {
-                return 1.618;
-              },
-              get foo(): number {
-                return 42;
-              },
+      {
+        state: {
+          nested: {
+            props: {
+              foo: 1,
+              bar: 2,
+            },
+            [Symbol(3)](): number {
+              return 1.618;
+            },
+            get foo(): number {
+              return 42;
             },
           },
         },
-        [
-          {
-            name: 'state',
-            children: [
-              {
-                name: 'nested',
-                children: [
-                  {
-                    name: 'props',
-                    children: [
-                      {
-                        name: 'foo',
-                        children: [],
-                      },
-                      {
-                        name: 'bar',
-                        children: [],
-                      },
-                    ],
-                  },
-                  {
-                    name: 'foo',
-                    children: [],
-                  },
-                ],
-              },
-            ],
-          },
-        ]);
+      },
+      [
+        {
+          name: 'state',
+          children: [
+            {
+              name: 'nested',
+              children: [
+                {
+                  name: 'props',
+                  children: [
+                    {
+                      name: 'foo',
+                      children: [],
+                    },
+                    {
+                      name: 'bar',
+                      children: [],
+                    },
+                  ],
+                },
+                {
+                  name: 'foo',
+                  children: [],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    );
     expect(result).toEqual({
       state: {
         type: PropType.Object,
@@ -392,7 +396,7 @@ describe('deeplySerializeSelectedProperties', () => {
                     editable: true,
                     preview: '1',
                     value: 1,
-                    containerType: null
+                    containerType: null,
                   },
                   bar: {
                     type: PropType.Number,
@@ -400,10 +404,10 @@ describe('deeplySerializeSelectedProperties', () => {
                     editable: true,
                     preview: '2',
                     value: 2,
-                    containerType: null
+                    containerType: null,
                   },
                 },
-                containerType: null
+                containerType: null,
               },
               foo: {
                 type: PropType.Number,
@@ -411,33 +415,34 @@ describe('deeplySerializeSelectedProperties', () => {
                 editable: false,
                 preview: '(...)',
                 value: 42,
-                containerType: null
+                containerType: null,
               },
             },
-            containerType: null
+            containerType: null,
           },
         },
-        containerType: null
+        containerType: null,
       },
     });
   });
 
   it('both setter and getter would get a (...) as preview', () => {
     const result = deeplySerializeSelectedProperties(
-        {
-          set foo(_: any) {},
-          get bar(): Object {
-            return {foo: 1};
-          },
+      {
+        set foo(_: any) {},
+        get bar(): Object {
+          return {foo: 1};
         },
-        []);
+      },
+      [],
+    );
     expect(result).toEqual({
       foo: {
         type: PropType.Undefined,
         editable: false,
         expandable: false,
         preview: '(...)',
-        containerType: null
+        containerType: null,
       },
       bar: {
         type: PropType.Object,
@@ -452,7 +457,7 @@ describe('deeplySerializeSelectedProperties', () => {
             editable: true,
             preview: '1',
             value: 1,
-            containerType: null
+            containerType: null,
           },
         },
       },
@@ -467,50 +472,49 @@ describe('deeplySerializeSelectedProperties', () => {
         editable: true,
         expandable: false,
         preview: 'undefined',
-        containerType: null
-      }
+        containerType: null,
+      },
     });
   });
 
-  it('getDescriptor should get the descriptors for both getters and setters correctly from the prototype',
-     () => {
-       const instance = {
-         __proto__: {
-           get foo(): number {
-             return 42;
-           },
-           set bar(newNum: number) {},
-           get baz(): number {
-             return 42;
-           },
-           set baz(newNum: number) {},
-         }
-       };
+  it('getDescriptor should get the descriptors for both getters and setters correctly from the prototype', () => {
+    const instance = {
+      __proto__: {
+        get foo(): number {
+          return 42;
+        },
+        set bar(newNum: number) {},
+        get baz(): number {
+          return 42;
+        },
+        set baz(newNum: number) {},
+      },
+    };
 
-       const descriptorFoo = getDescriptor(instance, 'foo');
-       expect(descriptorFoo).not.toBeNull();
-       expect(descriptorFoo!.get).not.toBeNull();
-       expect(descriptorFoo!.set).toBeUndefined();
-       expect(descriptorFoo!.value).toBeUndefined();
-       expect(descriptorFoo!.enumerable).toBe(true);
-       expect(descriptorFoo!.configurable).toBe(true);
+    const descriptorFoo = getDescriptor(instance, 'foo');
+    expect(descriptorFoo).not.toBeNull();
+    expect(descriptorFoo!.get).not.toBeNull();
+    expect(descriptorFoo!.set).toBeUndefined();
+    expect(descriptorFoo!.value).toBeUndefined();
+    expect(descriptorFoo!.enumerable).toBe(true);
+    expect(descriptorFoo!.configurable).toBe(true);
 
-       const descriptorBar = getDescriptor(instance, 'bar');
-       expect(descriptorBar).not.toBeNull();
-       expect(descriptorBar!.get).toBeUndefined();
-       expect(descriptorBar!.set).not.toBeNull();
-       expect(descriptorBar!.value).toBeUndefined();
-       expect(descriptorBar!.enumerable).toBe(true);
-       expect(descriptorBar!.configurable).toBe(true);
+    const descriptorBar = getDescriptor(instance, 'bar');
+    expect(descriptorBar).not.toBeNull();
+    expect(descriptorBar!.get).toBeUndefined();
+    expect(descriptorBar!.set).not.toBeNull();
+    expect(descriptorBar!.value).toBeUndefined();
+    expect(descriptorBar!.enumerable).toBe(true);
+    expect(descriptorBar!.configurable).toBe(true);
 
-       const descriptorBaz = getDescriptor(instance, 'baz');
-       expect(descriptorBaz).not.toBeNull();
-       expect(descriptorBaz!.get).not.toBeNull();
-       expect(descriptorBaz!.set).not.toBeNull();
-       expect(descriptorBaz!.value).toBeUndefined();
-       expect(descriptorBaz!.enumerable).toBe(true);
-       expect(descriptorBaz!.configurable).toBe(true);
-     });
+    const descriptorBaz = getDescriptor(instance, 'baz');
+    expect(descriptorBaz).not.toBeNull();
+    expect(descriptorBaz!.get).not.toBeNull();
+    expect(descriptorBaz!.set).not.toBeNull();
+    expect(descriptorBaz!.value).toBeUndefined();
+    expect(descriptorBaz!.enumerable).toBe(true);
+    expect(descriptorBaz!.configurable).toBe(true);
+  });
 
   it('getKeys should all keys including getters and setters', () => {
     const instance = {
@@ -520,8 +524,8 @@ describe('deeplySerializeSelectedProperties', () => {
           return 42;
         },
         set foo(newNum: number) {},
-        set bar(newNum: number) {}
-      }
+        set bar(newNum: number) {},
+      },
     };
 
     expect(getKeys(instance)).toEqual(['baz', 'foo', 'bar']);
@@ -534,8 +538,8 @@ describe('deeplySerializeSelectedProperties', () => {
         set __proto__(newObj: Object) {},
         get __proto__(): Object {
           return {};
-        }
-      }
+        },
+      },
     };
 
     expect(getKeys(instance)).toEqual(['baz']);
diff --git a/devtools/projects/ng-devtools-backend/src/lib/state-serializer/state-serializer.ts b/devtools/projects/ng-devtools-backend/src/lib/state-serializer/state-serializer.ts
index e39237e6230..d8793006f01 100644
--- a/devtools/projects/ng-devtools-backend/src/lib/state-serializer/state-serializer.ts
+++ b/devtools/projects/ng-devtools-backend/src/lib/state-serializer/state-serializer.ts
@@ -13,7 +13,12 @@ import {isSignal, unwrapSignal} from '../utils';
 
 import {getKeys} from './object-utils';
 import {getPropType} from './prop-type';
-import {createLevelSerializedDescriptor, createNestedSerializedDescriptor, createShallowSerializedDescriptor, PropertyData,} from './serialized-descriptor-factory';
+import {
+  createLevelSerializedDescriptor,
+  createNestedSerializedDescriptor,
+  createShallowSerializedDescriptor,
+  PropertyData,
+} from './serialized-descriptor-factory';
 
 // todo(aleksanderbodurri) pull this out of this file
 const METADATA_PROPERTY_NAME = '__ngContext__';
@@ -23,23 +28,32 @@ const ignoreList = new Set([METADATA_PROPERTY_NAME, '__ngSimpleChanges__']);
 const MAX_LEVEL = 1;
 
 function nestedSerializer(
-    instance: any, propName: string|number, nodes: NestedProp[], isReadonly: boolean,
-    currentLevel = 0, level = MAX_LEVEL): Descriptor {
+  instance: any,
+  propName: string | number,
+  nodes: NestedProp[],
+  isReadonly: boolean,
+  currentLevel = 0,
+  level = MAX_LEVEL,
+): Descriptor {
   instance = unwrapSignal(instance);
   const serializableInstance = instance[propName];
   const propData: PropertyData = {
     prop: serializableInstance,
     type: getPropType(serializableInstance),
-    containerType: getContainerType(serializableInstance)
+    containerType: getContainerType(serializableInstance),
   };
 
   if (currentLevel < level) {
-    const continuation =
-        (instance: any, propName: string|number, isReadonly: boolean, nestedLevel?: number,
-         _?: number) => {
-          const nodeChildren = nodes.find((v) => v.name === propName)?.children ?? [];
-          return nestedSerializer(instance, propName, nodeChildren, isReadonly, nestedLevel, level);
-        };
+    const continuation = (
+      instance: any,
+      propName: string | number,
+      isReadonly: boolean,
+      nestedLevel?: number,
+      _?: number,
+    ) => {
+      const nodeChildren = nodes.find((v) => v.name === propName)?.children ?? [];
+      return nestedSerializer(instance, propName, nodeChildren, isReadonly, nestedLevel, level);
+    };
 
     return levelSerializer(instance, propName, isReadonly, currentLevel, level, continuation);
   }
@@ -48,27 +62,43 @@ function nestedSerializer(
     case PropType.Array:
     case PropType.Object:
       return createNestedSerializedDescriptor(
-          instance, propName, propData, {level, currentLevel}, nodes, nestedSerializer);
+        instance,
+        propName,
+        propData,
+        {level, currentLevel},
+        nodes,
+        nestedSerializer,
+      );
     default:
       return createShallowSerializedDescriptor(instance, propName, propData, isReadonly);
   }
 }
 
 function levelSerializer(
-    instance: any, propName: string|number, isReadonly: boolean, currentLevel = 0,
-    level = MAX_LEVEL, continuation = levelSerializer): Descriptor {
+  instance: any,
+  propName: string | number,
+  isReadonly: boolean,
+  currentLevel = 0,
+  level = MAX_LEVEL,
+  continuation = levelSerializer,
+): Descriptor {
   const serializableInstance = instance[propName];
   const propData: PropertyData = {
     prop: serializableInstance,
     type: getPropType(serializableInstance),
-    containerType: getContainerType(serializableInstance)
+    containerType: getContainerType(serializableInstance),
   };
 
   switch (propData.type) {
     case PropType.Array:
     case PropType.Object:
       return createLevelSerializedDescriptor(
-          instance, propName, propData, {level, currentLevel}, continuation);
+        instance,
+        propName,
+        propData,
+        {level, currentLevel},
+        continuation,
+      );
     default:
       return createShallowSerializedDescriptor(instance, propName, propData, isReadonly);
   }
@@ -88,7 +118,9 @@ export function serializeDirectiveState(instance: object): Record<string, Descri
 }
 
 export function deeplySerializeSelectedProperties(
-    instance: object, props: NestedProp[]): Record<string, Descriptor> {
+  instance: object,
+  props: NestedProp[],
+): Record<string, Descriptor> {
   const result: Record<string, Descriptor> = {};
   const isReadonly = isSignal(instance);
   getKeys(instance).forEach((prop) => {
@@ -105,7 +137,6 @@ export function deeplySerializeSelectedProperties(
   return result;
 }
 
-
 function getContainerType(instance: unknown): ContainerType {
   if (isSignal(instance)) {
     return isWritableSignal(instance) ? 'WritableSignal' : 'ReadonlySignal';
diff --git a/devtools/projects/ng-devtools-backend/src/lib/utils.ts b/devtools/projects/ng-devtools-backend/src/lib/utils.ts
index e2efa7f17b9..b9490ebaeab 100644
--- a/devtools/projects/ng-devtools-backend/src/lib/utils.ts
+++ b/devtools/projects/ng-devtools-backend/src/lib/utils.ts
@@ -59,8 +59,7 @@ export function ngDebugApiIsSupported(api: string): boolean {
   return typeof ng[api] === 'function';
 }
 
-
-export function isSignal(prop: unknown): prop is() => unknown {
+export function isSignal(prop: unknown): prop is () => unknown {
   if (!ngDebugApiIsSupported('isSignal')) {
     return false;
   }
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/dependency-injection/injector-tree-visualizer.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/dependency-injection/injector-tree-visualizer.ts
index 0ef0b3acd7d..4ed814e180b 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/dependency-injection/injector-tree-visualizer.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/dependency-injection/injector-tree-visualizer.ts
@@ -27,18 +27,17 @@ export type InjectorTreeD3Node = d3.HierarchyPointNode<InjectorTreeNode>;
 
 export abstract class GraphRenderer<T, U> {
   abstract render(graph: T): void;
-  abstract getNodeById(id: string): U|null;
+  abstract getNodeById(id: string): U | null;
   abstract snapToNode(node: U): void;
   abstract snapToRoot(): void;
   abstract zoomScale(scale: number): void;
-  abstract root: U|null;
+  abstract root: U | null;
   abstract get graphElement(): HTMLElement;
 
   protected nodeClickListeners: ((pointerEvent: PointerEvent, node: U) => void)[] = [];
   protected nodeMouseoverListeners: ((pointerEvent: PointerEvent, node: U) => void)[] = [];
   protected nodeMouseoutListeners: ((pointerEvent: PointerEvent, node: U) => void)[] = [];
 
-
   cleanup(): void {
     this.nodeClickListeners = [];
     this.nodeMouseoverListeners = [];
@@ -59,7 +58,7 @@ export abstract class GraphRenderer<T, U> {
 }
 
 interface InjectorTreeVisualizerConfig {
-  orientation: 'horizontal'|'vertical';
+  orientation: 'horizontal' | 'vertical';
   nodeSize: [width: number, height: number];
   nodeSeparation: (nodeA: InjectorTreeD3Node, nodeB: InjectorTreeD3Node) => number;
   nodeLabelSize: [width: number, height: number];
@@ -69,14 +68,14 @@ export class InjectorTreeVisualizer extends GraphRenderer<InjectorTreeNode, Inje
   public config: InjectorTreeVisualizerConfig;
 
   constructor(
-      private _containerElement: HTMLElement,
-      private _graphElement: HTMLElement,
-      {
-        orientation = 'horizontal',
-        nodeSize = [200, 500],
-        nodeSeparation = () => 2,
-        nodeLabelSize = [250, 60],
-      }: Partial<InjectorTreeVisualizerConfig> = {},
+    private _containerElement: HTMLElement,
+    private _graphElement: HTMLElement,
+    {
+      orientation = 'horizontal',
+      nodeSize = [200, 500],
+      nodeSeparation = () => 2,
+      nodeLabelSize = [250, 60],
+    }: Partial<InjectorTreeVisualizerConfig> = {},
   ) {
     super();
 
@@ -90,13 +89,15 @@ export class InjectorTreeVisualizer extends GraphRenderer<InjectorTreeNode, Inje
 
   private d3 = d3;
 
-  override root: InjectorTreeD3Node|null = null;
-  zoomController: d3.ZoomBehavior<HTMLElement, unknown>|null = null;
+  override root: InjectorTreeD3Node | null = null;
+  zoomController: d3.ZoomBehavior<HTMLElement, unknown> | null = null;
 
   override zoomScale(scale: number) {
     if (this.zoomController) {
       this.zoomController.scaleTo(
-          this.d3.select<HTMLElement, unknown>(this._containerElement), scale);
+        this.d3.select<HTMLElement, unknown>(this._containerElement),
+        scale,
+      );
     }
   }
 
@@ -108,8 +109,8 @@ export class InjectorTreeVisualizer extends GraphRenderer<InjectorTreeNode, Inje
 
   override snapToNode(node: InjectorTreeD3Node, scale = 1): void {
     const svg = this.d3.select(this._containerElement);
-    const halfWidth = (this._containerElement.clientWidth / 2);
-    const halfHeight = (this._containerElement.clientHeight / 2);
+    const halfWidth = this._containerElement.clientWidth / 2;
+    const halfHeight = this._containerElement.clientHeight / 2;
     const t = d3.zoomIdentity.translate(halfWidth - node.y, halfHeight - node.x).scale(scale);
     svg.transition().duration(500).call(this.zoomController!.transform, t);
   }
@@ -118,9 +119,10 @@ export class InjectorTreeVisualizer extends GraphRenderer<InjectorTreeNode, Inje
     return this._graphElement;
   }
 
-  override getNodeById(id: string): InjectorTreeD3Node|null {
-    const selection = this.d3.select<HTMLElement, InjectorTreeD3Node>(this._containerElement)
-                          .select(`.node[data-id="${id}"]`);
+  override getNodeById(id: string): InjectorTreeD3Node | null {
+    const selection = this.d3
+      .select<HTMLElement, InjectorTreeD3Node>(this._containerElement)
+      .select(`.node[data-id="${id}"]`);
     if (selection.empty()) {
       return null;
     }
@@ -157,142 +159,128 @@ export class InjectorTreeVisualizer extends GraphRenderer<InjectorTreeNode, Inje
     this.root = nodes;
 
     arrowDefId++;
-    svg.append('svg:defs')
-        .selectAll('marker')
-        .data([`end${arrowDefId}`])  // Different link/path types can be defined here
-        .enter()
-        .append('svg:marker')  // This section adds in the arrows
-        .attr('id', String)
-        .attr('viewBox', '0 -5 10 10')
-        .attr('refX', 15)
-        .attr('refY', 0)
-        .attr('class', 'arrow')
-        .attr('markerWidth', 6)
-        .attr('markerHeight', 6)
-        .attr('orient', 'auto')
-        .append('svg:path')
-        .attr('d', 'M0,-5L10,0L0,5');
+    svg
+      .append('svg:defs')
+      .selectAll('marker')
+      .data([`end${arrowDefId}`]) // Different link/path types can be defined here
+      .enter()
+      .append('svg:marker') // This section adds in the arrows
+      .attr('id', String)
+      .attr('viewBox', '0 -5 10 10')
+      .attr('refX', 15)
+      .attr('refY', 0)
+      .attr('class', 'arrow')
+      .attr('markerWidth', 6)
+      .attr('markerHeight', 6)
+      .attr('orient', 'auto')
+      .append('svg:path')
+      .attr('d', 'M0,-5L10,0L0,5');
 
     g.selectAll('.link')
-        .data(nodes.descendants().slice(1))
-        .enter()
-        .append('path')
-        .attr(
-            'class',
-            (node: InjectorTreeD3Node) => {
-              const parentId = node.parent?.data?.injector?.id;
-              if (parentId === 'N/A') {
-                return 'link-hidden';
-              }
+      .data(nodes.descendants().slice(1))
+      .enter()
+      .append('path')
+      .attr('class', (node: InjectorTreeD3Node) => {
+        const parentId = node.parent?.data?.injector?.id;
+        if (parentId === 'N/A') {
+          return 'link-hidden';
+        }
 
-              return `link`;
-            })
-        .attr(
-            'data-id',
-            (node: InjectorTreeD3Node) => {
-              const from = node.data.injector.id;
-              const to = node.parent?.data?.injector?.id;
+        return `link`;
+      })
+      .attr('data-id', (node: InjectorTreeD3Node) => {
+        const from = node.data.injector.id;
+        const to = node.parent?.data?.injector?.id;
 
-              if (from && to) {
-                return `${from}-to-${to}`;
-              }
-              return '';
-            })
-        .attr('marker-end', `url(#end${arrowDefId})`)
-        .attr('d', (node: InjectorTreeD3Node) => {
-          const parent = node.parent!;
-          if (this.config.orientation === 'horizontal') {
-            return `
+        if (from && to) {
+          return `${from}-to-${to}`;
+        }
+        return '';
+      })
+      .attr('marker-end', `url(#end${arrowDefId})`)
+      .attr('d', (node: InjectorTreeD3Node) => {
+        const parent = node.parent!;
+        if (this.config.orientation === 'horizontal') {
+          return `
                     M${node.y},${node.x}
                     C${(node.y + parent.y) / 2},
                       ${node.x} ${(node.y + parent.y) / 2},
                       ${parent.x} ${parent.y},
                       ${parent.x}`;
-          }
+        }
 
-          return `
+        return `
               M${node.x},${node.y}
               C${(node.x + parent.x) / 2},
                 ${node.y} ${(node.x + parent.x) / 2},
                 ${parent.y} ${parent.x},
                 ${parent.y}`;
-        });
+      });
 
     // Declare the nodes
-    const node =
-        g.selectAll('g.node')
-            .data(nodes.descendants())
-            .enter()
-            .append('g')
-            .attr(
-                'class',
-                (node: InjectorTreeD3Node) => {
-                  if (node.data.injector.id === 'N/A') {
-                    return 'node-hidden';
-                  }
-                  return `node`;
-                })
-            .attr(
-                'data-component-id',
-                (node: InjectorTreeD3Node) => {
-                  const injector = node.data.injector;
-                  if (injector.type === 'element') {
-                    return injector.node?.component?.id ?? -1;
-                  }
-                  return -1;
-                })
-            .attr(
-                'data-id',
-                (node: InjectorTreeD3Node) => {
-                  return node.data.injector.id;
-                })
-            .on('click',
-                (pointerEvent: PointerEvent, node: InjectorTreeD3Node) => {
-                  this.nodeClickListeners.forEach(listener => listener(pointerEvent, node));
-                })
-            .on('mouseover',
-                (pointerEvent: PointerEvent, node: InjectorTreeD3Node) => {
-                  this.nodeMouseoverListeners.forEach(listener => listener(pointerEvent, node));
-                })
-            .on('mouseout',
-                (pointerEvent: PointerEvent, node: InjectorTreeD3Node) => {
-                  this.nodeMouseoutListeners.forEach(listener => listener(pointerEvent, node));
-                })
+    const node = g
+      .selectAll('g.node')
+      .data(nodes.descendants())
+      .enter()
+      .append('g')
+      .attr('class', (node: InjectorTreeD3Node) => {
+        if (node.data.injector.id === 'N/A') {
+          return 'node-hidden';
+        }
+        return `node`;
+      })
+      .attr('data-component-id', (node: InjectorTreeD3Node) => {
+        const injector = node.data.injector;
+        if (injector.type === 'element') {
+          return injector.node?.component?.id ?? -1;
+        }
+        return -1;
+      })
+      .attr('data-id', (node: InjectorTreeD3Node) => {
+        return node.data.injector.id;
+      })
+      .on('click', (pointerEvent: PointerEvent, node: InjectorTreeD3Node) => {
+        this.nodeClickListeners.forEach((listener) => listener(pointerEvent, node));
+      })
+      .on('mouseover', (pointerEvent: PointerEvent, node: InjectorTreeD3Node) => {
+        this.nodeMouseoverListeners.forEach((listener) => listener(pointerEvent, node));
+      })
+      .on('mouseout', (pointerEvent: PointerEvent, node: InjectorTreeD3Node) => {
+        this.nodeMouseoutListeners.forEach((listener) => listener(pointerEvent, node));
+      })
 
-            .attr('transform', (node: InjectorTreeD3Node) => {
-              if (this.config.orientation === 'horizontal') {
-                return `translate(${node.y},${node.x})`;
-              }
+      .attr('transform', (node: InjectorTreeD3Node) => {
+        if (this.config.orientation === 'horizontal') {
+          return `translate(${node.y},${node.x})`;
+        }
 
-              return `translate(${node.x},${node.y})`;
-            });
+        return `translate(${node.x},${node.y})`;
+      });
 
     const [width, height] = this.config.nodeLabelSize!;
 
-    node.append('foreignObject')
-        .attr('width', width)
-        .attr('height', height)
-        .attr('x', -1 * (width - 10))
-        .attr('y', -1 * (height / 2))
-        .append('xhtml:div')
-        .attr(
-            'title',
-            (node: InjectorTreeD3Node) => {
-              return node.data.injector.name;
-            })
-        .attr(
-            'class',
-            (node: InjectorTreeD3Node) => {
-              return [
-                injectorTypeToClassMap.get(node.data?.injector?.type) ?? '', 'node-container'
-              ].join(' ');
-            })
-        .html((node: InjectorTreeD3Node) => {
-          const label = node.data.injector.name;
-          const lengthLimit = 25;
-          return label.length > lengthLimit ? label.slice(0, lengthLimit - '...'.length) + '...' :
-                                              label;
-        });
+    node
+      .append('foreignObject')
+      .attr('width', width)
+      .attr('height', height)
+      .attr('x', -1 * (width - 10))
+      .attr('y', -1 * (height / 2))
+      .append('xhtml:div')
+      .attr('title', (node: InjectorTreeD3Node) => {
+        return node.data.injector.name;
+      })
+      .attr('class', (node: InjectorTreeD3Node) => {
+        return [injectorTypeToClassMap.get(node.data?.injector?.type) ?? '', 'node-container'].join(
+          ' ',
+        );
+      })
+      .html((node: InjectorTreeD3Node) => {
+        const label = node.data.injector.name;
+        const lengthLimit = 25;
+        return label.length > lengthLimit
+          ? label.slice(0, lengthLimit - '...'.length) + '...'
+          : label;
+      });
 
     svg.attr('height', '100%').attr('width', '100%');
   }
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/dependency-injection/resolution-path.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/dependency-injection/resolution-path.component.ts
index 0ac31bdc53f..b861a486d88 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/dependency-injection/resolution-path.component.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/dependency-injection/resolution-path.component.ts
@@ -14,20 +14,26 @@ import {InjectorTreeNode, InjectorTreeVisualizer} from './injector-tree-visualiz
 @Component({
   selector: 'ng-resolution-path',
   template: `
-      <section class="injector-graph">
-        <svg #svgContainer>
-            <g #mainGroup></g>
-        </svg>
-      </section>
+    <section class="injector-graph">
+      <svg #svgContainer>
+        <g #mainGroup></g>
+      </svg>
+    </section>
+  `,
+  styles: [
+    `
+      :host {
+        display: block;
+      }
     `,
-  styles: [`:host { display: block; }`],
-  standalone: true
+  ],
+  standalone: true,
 })
 export class ResolutionPathComponent implements OnDestroy, AfterViewInit {
   @ViewChild('svgContainer', {static: true}) private svgContainer!: ElementRef;
   @ViewChild('mainGroup', {static: true}) private g!: ElementRef;
 
-  @Input() orientation: 'horizontal'|'vertical' = 'horizontal';
+  @Input() orientation: 'horizontal' | 'vertical' = 'horizontal';
 
   private injectorTree!: InjectorTreeVisualizer;
   private pathNode!: InjectorTreeNode;
@@ -56,10 +62,13 @@ export class ResolutionPathComponent implements OnDestroy, AfterViewInit {
   }
 
   ngOnInit(): void {
-    this.injectorTree =
-        new InjectorTreeVisualizer(this.svgContainer.nativeElement, this.g.nativeElement, {
-          orientation: this.orientation,
-        });
+    this.injectorTree = new InjectorTreeVisualizer(
+      this.svgContainer.nativeElement,
+      this.g.nativeElement,
+      {
+        orientation: this.orientation,
+      },
+    );
 
     if (this.pathNode) {
       this.injectorTree.render(this.pathNode);
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.ts
index 01ca21e072c..f41b241ffc3 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.ts
@@ -17,7 +17,7 @@ import {Theme, ThemeService} from '../theme-service';
 import {DirectiveExplorerComponent} from './directive-explorer/directive-explorer.component';
 import {TabUpdate} from './tab-update/index';
 
-type Tabs = 'Components'|'Profiler'|'Router Tree'|'Injector Tree';
+type Tabs = 'Components' | 'Profiler' | 'Router Tree' | 'Injector Tree';
 
 @Component({
   selector: 'ng-devtools-tabs',
@@ -25,7 +25,7 @@ type Tabs = 'Components'|'Profiler'|'Router Tree'|'Injector Tree';
   styleUrls: ['./devtools-tabs.component.scss'],
 })
 export class DevToolsTabsComponent implements OnInit, AfterViewInit {
-  @Input() angularVersion: string|undefined = undefined;
+  @Input() angularVersion: string | undefined = undefined;
   @ViewChild(DirectiveExplorerComponent) directiveExplorer!: DirectiveExplorerComponent;
   @ViewChild('navBar', {static: true}) navbar!: MatTabNav;
 
@@ -41,13 +41,14 @@ export class DevToolsTabsComponent implements OnInit, AfterViewInit {
   routes: Route[] = [];
 
   constructor(
-      public tabUpdate: TabUpdate,
-      public themeService: ThemeService,
-      private _messageBus: MessageBus<Events>,
-      private _applicationEnvironment: ApplicationEnvironment,
+    public tabUpdate: TabUpdate,
+    public themeService: ThemeService,
+    private _messageBus: MessageBus<Events>,
+    private _applicationEnvironment: ApplicationEnvironment,
   ) {
-    this.themeService.currentTheme.pipe(takeUntilDestroyed())
-        .subscribe((theme) => (this.currentTheme = theme));
+    this.themeService.currentTheme
+      .pipe(takeUntilDestroyed())
+      .subscribe((theme) => (this.currentTheme = theme));
 
     this._messageBus.on('updateRouterTree', (routes) => {
       this.routes = routes || [];
@@ -99,7 +100,8 @@ export class DevToolsTabsComponent implements OnInit, AfterViewInit {
 
   toggleTimingAPI(): void {
     this.timingAPIEnabled = !this.timingAPIEnabled;
-    this.timingAPIEnabled ? this._messageBus.emit('enableTimingAPI') :
-                            this._messageBus.emit('disableTimingAPI');
+    this.timingAPIEnabled
+      ? this._messageBus.emit('enableTimingAPI')
+      : this._messageBus.emit('disableTimingAPI');
   }
 }
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.module.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.module.ts
index a4799510c5a..b70282f46e4 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.module.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.module.ts
@@ -25,12 +25,19 @@ import {TabUpdate} from './tab-update/index';
 @NgModule({
   declarations: [DevToolsTabsComponent],
   imports: [
-    MatTabsModule, MatIconModule, DirectiveExplorerModule, ProfilerModule, RouterTreeModule,
-    CommonModule, MatMenuModule, MatButtonModule, MatSlideToggleModule, MatTooltipModule,
-    InjectorTreeComponent
+    MatTabsModule,
+    MatIconModule,
+    DirectiveExplorerModule,
+    ProfilerModule,
+    RouterTreeModule,
+    CommonModule,
+    MatMenuModule,
+    MatButtonModule,
+    MatSlideToggleModule,
+    MatTooltipModule,
+    InjectorTreeComponent,
   ],
   providers: [TabUpdate],
   exports: [DevToolsTabsComponent],
 })
-export class DevToolsTabModule {
-}
+export class DevToolsTabModule {}
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.spec.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.spec.ts
index 62d4298d81c..577b33fb0de 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.spec.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.spec.ts
@@ -24,8 +24,7 @@ import {TabUpdate} from './tab-update/index';
   selector: 'ng-directive-explorer',
   template: '',
 })
-export class MockDirectiveExplorerComponent {
-}
+export class MockDirectiveExplorerComponent {}
 
 describe('DevtoolsTabsComponent', () => {
   let messageBusMock: MessageBus<Events>;
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/diffing/index.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/diffing/index.ts
index 0aaaaf36644..41a58655bd8 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/diffing/index.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/diffing/index.ts
@@ -14,79 +14,82 @@ export interface MovedRecord {
   previousIndex: number;
 }
 
-export const diff = <T>(differ: DefaultIterableDiffer<T>, a: T[], b: T[]):
-    {newItems: T[]; removedItems: T[]; movedItems: T[];} => {
-      differ.diff(a);
-      differ.diff(b);
+export const diff = <T>(
+  differ: DefaultIterableDiffer<T>,
+  a: T[],
+  b: T[],
+): {newItems: T[]; removedItems: T[]; movedItems: T[]} => {
+  differ.diff(a);
+  differ.diff(b);
 
-      const alreadySet: boolean[] = [];
-      const movedItems: T[] = [];
+  const alreadySet: boolean[] = [];
+  const movedItems: T[] = [];
 
-      // We first have to set the moved items to their correct positions.
-      // Keep in mind that the track by function may not guarantee
-      // that we haven't changed any of the items' props.
-      differ.forEachMovedItem(record => {
-        if (record.currentIndex === null) {
-          return;
-        }
-        if (record.previousIndex === null) {
-          return;
-        }
-        // We want to preserve the reference so that a default
-        // track by function used by the CDK, for instance, can
-        // recognize that this item's identity hasn't changed.
-        // At the same time, since we don't have the guarantee
-        // that we haven't already set the previousIndex while
-        // iterating, we need to check that. If we have, we assign
-        // this array item to a new object. We don't want to risk
-        // changing the properties of an object we'll use in the future.
-        if (!alreadySet[record.previousIndex]) {
-          a[record.currentIndex] = a[record.previousIndex];
-        } else {
-          a[record.currentIndex] = {} as unknown as T;
-        }
-        Object.keys(b[record.currentIndex] as unknown as {}).forEach(prop => {
-          // TypeScript's type inference didn't follow the check from above.
-          if (record.currentIndex === null) {
-            return;
-          }
-          (a[record.currentIndex] as any)[prop] = (b[record.currentIndex] as any)[prop];
-        });
-        if (!alreadySet[record.previousIndex]) {
-          // tslint:disable-next-line: no-non-null-assertion
-          a[record.previousIndex] = null!;
-        }
-        alreadySet[record.currentIndex] = true;
-        movedItems.push(a[record.currentIndex]);
-      });
-
-      // Now we can set the new items and remove the deleted ones.
-      const newItems: T[] = [];
-      const removedItems: T[] = [];
-      differ.forEachAddedItem(record => {
-        if (record.currentIndex !== null && record.previousIndex === null) {
-          a[record.currentIndex] = record.item;
-          alreadySet[record.currentIndex] = true;
-          newItems.push(record.item);
-        }
-      });
-
-      differ.forEachRemovedItem(record => {
-        if (record.previousIndex === null) {
-          return;
-        }
-        if (record.currentIndex === null && !alreadySet[record.previousIndex]) {
-          // tslint:disable-next-line: no-non-null-assertion
-          a[record.previousIndex] = null!;
-        }
-        removedItems.push(record.item);
-      });
-
-      for (let i = a.length - 1; i >= 0; i--) {
-        if (a[i] === null) {
-          a.splice(i, 1);
-        }
+  // We first have to set the moved items to their correct positions.
+  // Keep in mind that the track by function may not guarantee
+  // that we haven't changed any of the items' props.
+  differ.forEachMovedItem((record) => {
+    if (record.currentIndex === null) {
+      return;
+    }
+    if (record.previousIndex === null) {
+      return;
+    }
+    // We want to preserve the reference so that a default
+    // track by function used by the CDK, for instance, can
+    // recognize that this item's identity hasn't changed.
+    // At the same time, since we don't have the guarantee
+    // that we haven't already set the previousIndex while
+    // iterating, we need to check that. If we have, we assign
+    // this array item to a new object. We don't want to risk
+    // changing the properties of an object we'll use in the future.
+    if (!alreadySet[record.previousIndex]) {
+      a[record.currentIndex] = a[record.previousIndex];
+    } else {
+      a[record.currentIndex] = {} as unknown as T;
+    }
+    Object.keys(b[record.currentIndex] as unknown as {}).forEach((prop) => {
+      // TypeScript's type inference didn't follow the check from above.
+      if (record.currentIndex === null) {
+        return;
       }
+      (a[record.currentIndex] as any)[prop] = (b[record.currentIndex] as any)[prop];
+    });
+    if (!alreadySet[record.previousIndex]) {
+      // tslint:disable-next-line: no-non-null-assertion
+      a[record.previousIndex] = null!;
+    }
+    alreadySet[record.currentIndex] = true;
+    movedItems.push(a[record.currentIndex]);
+  });
 
-      return {newItems, removedItems, movedItems};
-    };
+  // Now we can set the new items and remove the deleted ones.
+  const newItems: T[] = [];
+  const removedItems: T[] = [];
+  differ.forEachAddedItem((record) => {
+    if (record.currentIndex !== null && record.previousIndex === null) {
+      a[record.currentIndex] = record.item;
+      alreadySet[record.currentIndex] = true;
+      newItems.push(record.item);
+    }
+  });
+
+  differ.forEachRemovedItem((record) => {
+    if (record.previousIndex === null) {
+      return;
+    }
+    if (record.currentIndex === null && !alreadySet[record.previousIndex]) {
+      // tslint:disable-next-line: no-non-null-assertion
+      a[record.previousIndex] = null!;
+    }
+    removedItems.push(record.item);
+  });
+
+  for (let i = a.length - 1; i >= 0; i--) {
+    if (a[i] === null) {
+      a.splice(i, 1);
+    }
+  }
+
+  return {newItems, removedItems, movedItems};
+};
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.component.ts
index 757468a6e88..759015d6cc1 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.component.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.component.ts
@@ -6,8 +6,29 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, NgZone, OnDestroy, OnInit, Output, ViewChild,} from '@angular/core';
-import {ComponentExplorerView, ComponentExplorerViewQuery, DevToolsNode, DirectivePosition, ElementPosition, Events, MessageBus, PropertyQuery, PropertyQueryTypes,} from 'protocol';
+import {
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  NgZone,
+  OnDestroy,
+  OnInit,
+  Output,
+  ViewChild,
+} from '@angular/core';
+import {
+  ComponentExplorerView,
+  ComponentExplorerViewQuery,
+  DevToolsNode,
+  DirectivePosition,
+  ElementPosition,
+  Events,
+  MessageBus,
+  PropertyQuery,
+  PropertyQueryTypes,
+} from 'protocol';
 
 import {SplitComponent} from '../../../lib/vendor/angular-split/public_api';
 import {ApplicationOperations} from '../../application-operations/index';
@@ -17,7 +38,10 @@ import {FlatNode} from './directive-forest/component-data-source';
 import {DirectiveForestComponent} from './directive-forest/directive-forest.component';
 import {IndexedNode} from './directive-forest/index-forest';
 import {constructPathOfKeysToPropertyValue} from './property-resolver/directive-property-resolver';
-import {ElementPropertyResolver, FlatNode as PropertyFlatNode} from './property-resolver/element-property-resolver';
+import {
+  ElementPropertyResolver,
+  FlatNode as PropertyFlatNode,
+} from './property-resolver/element-property-resolver';
 
 const sameDirectives = (a: IndexedNode, b: IndexedNode) => {
   if ((a.component && !b.component) || (!a.component && b.component)) {
@@ -56,32 +80,37 @@ export class DirectiveExplorerComponent implements OnInit, OnDestroy {
   @ViewChild('directiveForestSplitArea', {static: true, read: ElementRef})
   directiveForestSplitArea!: ElementRef;
 
-  currentSelectedElement: IndexedNode|null = null;
+  currentSelectedElement: IndexedNode | null = null;
   forest!: DevToolsNode[];
-  splitDirection: 'horizontal'|'vertical' = 'horizontal';
-  parents: FlatNode[]|null = null;
+  splitDirection: 'horizontal' | 'vertical' = 'horizontal';
+  parents: FlatNode[] | null = null;
 
-  private _resizeObserver = new ResizeObserver((entries) => this._ngZone.run(() => {
-    const resizedEntry = entries[0];
+  private _resizeObserver = new ResizeObserver((entries) =>
+    this._ngZone.run(() => {
+      const resizedEntry = entries[0];
 
-    if (resizedEntry.target === this.splitElementRef.nativeElement) {
-      this.splitDirection = resizedEntry.contentRect.width <= 500 ? 'vertical' : 'horizontal';
-    }
+      if (resizedEntry.target === this.splitElementRef.nativeElement) {
+        this.splitDirection = resizedEntry.contentRect.width <= 500 ? 'vertical' : 'horizontal';
+      }
 
-    if (!this.breadcrumbs) {
-      return;
-    }
+      if (!this.breadcrumbs) {
+        return;
+      }
 
-    this.breadcrumbs.updateScrollButtonVisibility();
-  }));
+      this.breadcrumbs.updateScrollButtonVisibility();
+    }),
+  );
 
-  private _clickedElement: IndexedNode|null = null;
-  private _refreshRetryTimeout: null|ReturnType<typeof setTimeout> = null;
+  private _clickedElement: IndexedNode | null = null;
+  private _refreshRetryTimeout: null | ReturnType<typeof setTimeout> = null;
 
   constructor(
-      private _appOperations: ApplicationOperations, private _messageBus: MessageBus<Events>,
-      private _propResolver: ElementPropertyResolver, private _cdr: ChangeDetectorRef,
-      private _ngZone: NgZone) {}
+    private _appOperations: ApplicationOperations,
+    private _messageBus: MessageBus<Events>,
+    private _propResolver: ElementPropertyResolver,
+    private _cdr: ChangeDetectorRef,
+    private _ngZone: NgZone,
+  ) {}
 
   ngOnInit(): void {
     this.subscribeToBackendEvents();
@@ -95,7 +124,7 @@ export class DirectiveExplorerComponent implements OnInit, OnDestroy {
     this._resizeObserver.unobserve(this.directiveForestSplitArea.nativeElement);
   }
 
-  handleNodeSelection(node: IndexedNode|null): void {
+  handleNodeSelection(node: IndexedNode | null): void {
     if (node) {
       // We want to guarantee that we're not reusing any of the previous properties.
       // That's possible if the user has selected an NgForOf and after that
@@ -125,8 +154,9 @@ export class DirectiveExplorerComponent implements OnInit, OnDestroy {
   }
 
   refresh(): void {
-    const success =
-        this._messageBus.emit('getLatestComponentExplorerView', [this._constructViewQuery()]);
+    const success = this._messageBus.emit('getLatestComponentExplorerView', [
+      this._constructViewQuery(),
+    ]);
     // If the event was not throttled, we no longer need to retry.
     if (success) {
       this._refreshRetryTimeout && clearTimeout(this._refreshRetryTimeout);
@@ -147,7 +177,8 @@ export class DirectiveExplorerComponent implements OnInit, OnDestroy {
     }
 
     const directiveIndex = this.currentSelectedElement.directives.findIndex(
-        directive => directive.name === directiveName);
+      (directive) => directive.name === directiveName,
+    );
 
     if (directiveIndex === -1) {
       // view the component definition
@@ -174,7 +205,7 @@ export class DirectiveExplorerComponent implements OnInit, OnDestroy {
     this._messageBus.emit('removeHighlightOverlay');
   }
 
-  private _constructViewQuery(): ComponentExplorerViewQuery|undefined {
+  private _constructViewQuery(): ComponentExplorerViewQuery | undefined {
     if (!this._clickedElement) {
       return;
     }
@@ -189,8 +220,11 @@ export class DirectiveExplorerComponent implements OnInit, OnDestroy {
     // We check if we're dealing with the same instance (i.e., if we have the same
     // set of directives and component on it), if we do, we want to get the same
     // set of properties which are already expanded.
-    if (!this._clickedElement || !this.currentSelectedElement ||
-        !sameDirectives(this._clickedElement, this.currentSelectedElement)) {
+    if (
+      !this._clickedElement ||
+      !this.currentSelectedElement ||
+      !sameDirectives(this._clickedElement, this.currentSelectedElement)
+    ) {
       return {
         type: PropertyQueryTypes.All,
       };
@@ -213,13 +247,18 @@ export class DirectiveExplorerComponent implements OnInit, OnDestroy {
     this.directiveForest.handleSelect(node);
   }
 
-  handleSetParents(parents: FlatNode[]|null): void {
+  handleSetParents(parents: FlatNode[] | null): void {
     this.parents = parents;
     this._cdr.detectChanges();
   }
 
-  inspect({node, directivePosition}:
-              {node: PropertyFlatNode; directivePosition: DirectivePosition}): void {
+  inspect({
+    node,
+    directivePosition,
+  }: {
+    node: PropertyFlatNode;
+    directivePosition: DirectivePosition;
+  }): void {
     const objectPath = constructPathOfKeysToPropertyValue(node.prop);
     this._appOperations.inspect(directivePosition, objectPath);
   }
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.module.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.module.ts
index a3cb1abb198..56fb17bfcda 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.module.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.module.ts
@@ -39,5 +39,4 @@ import {PropertyTabModule} from './property-tab/property-tab.module';
     MatTooltipModule,
   ],
 })
-export class DirectiveExplorerModule {
-}
+export class DirectiveExplorerModule {}
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.spec.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.spec.ts
index d39bdbb232e..5483851f8da 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.spec.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.spec.ts
@@ -10,9 +10,9 @@ import {PropertyQueryTypes} from 'protocol';
 
 import {DirectiveExplorerComponent} from './directive-explorer.component';
 import {IndexedNode} from './directive-forest/index-forest';
+import {ElementPropertyResolver} from './property-resolver/element-property-resolver';
 
 import SpyObj = jasmine.SpyObj;
-import {ElementPropertyResolver} from './property-resolver/element-property-resolver';
 
 describe('DirectiveExplorerComponent', () => {
   let messageBusMock: any;
@@ -22,14 +22,20 @@ describe('DirectiveExplorerComponent', () => {
   let ngZone: any;
 
   beforeEach(() => {
-    applicationOperationsSpy =
-        jasmine.createSpyObj('_appOperations', ['viewSource', 'selectDomElement']);
+    applicationOperationsSpy = jasmine.createSpyObj('_appOperations', [
+      'viewSource',
+      'selectDomElement',
+    ]);
     messageBusMock = jasmine.createSpyObj('messageBus', ['on', 'once', 'emit', 'destroy']);
     cdr = jasmine.createSpyObj('_cdr', ['detectChanges']);
     ngZone = jasmine.createSpyObj('_ngZone', ['run']);
     comp = new DirectiveExplorerComponent(
-        applicationOperationsSpy, messageBusMock, new ElementPropertyResolver(messageBusMock), cdr,
-        ngZone);
+      applicationOperationsSpy,
+      messageBusMock,
+      new ElementPropertyResolver(messageBusMock),
+      cdr,
+      ngZone,
+    );
   });
 
   it('should create instance from class', () => {
@@ -39,8 +45,10 @@ describe('DirectiveExplorerComponent', () => {
   it('subscribe to backend events', () => {
     comp.subscribeToBackendEvents();
     expect(messageBusMock.on).toHaveBeenCalledTimes(2);
-    expect(messageBusMock.on)
-        .toHaveBeenCalledWith('latestComponentExplorerView', jasmine.any(Function));
+    expect(messageBusMock.on).toHaveBeenCalledWith(
+      'latestComponentExplorerView',
+      jasmine.any(Function),
+    );
     expect(messageBusMock.on).toHaveBeenCalledWith('componentTreeDirty', jasmine.any(Function));
   });
 
@@ -53,23 +61,24 @@ describe('DirectiveExplorerComponent', () => {
     it('should emit getLatestComponentExplorerView event with null view query', () => {
       comp.refresh();
       expect(messageBusMock.emit).toHaveBeenCalledWith('getLatestComponentExplorerView', [
-        undefined
+        undefined,
       ]);
     });
 
-    it('should emit getLatestComponentExplorerView event on refresh with view query no properties',
-       () => {
-         const currentSelectedElement =
-             jasmine.createSpyObj('currentSelectedElement', ['position', 'children']);
-         currentSelectedElement.position = [0];
-         currentSelectedElement.children = [];
-         comp.currentSelectedElement = currentSelectedElement;
-         comp.refresh();
-         expect(comp.currentSelectedElement).toBeTruthy();
-         expect(messageBusMock.emit).toHaveBeenCalledWith('getLatestComponentExplorerView', [
-           undefined
-         ]);
-       });
+    it('should emit getLatestComponentExplorerView event on refresh with view query no properties', () => {
+      const currentSelectedElement = jasmine.createSpyObj('currentSelectedElement', [
+        'position',
+        'children',
+      ]);
+      currentSelectedElement.position = [0];
+      currentSelectedElement.children = [];
+      comp.currentSelectedElement = currentSelectedElement;
+      comp.refresh();
+      expect(comp.currentSelectedElement).toBeTruthy();
+      expect(messageBusMock.emit).toHaveBeenCalledWith('getLatestComponentExplorerView', [
+        undefined,
+      ]);
+    });
   });
 
   describe('node selection event', () => {
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/breadcrumbs/breadcrumbs.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/breadcrumbs/breadcrumbs.component.ts
index c8fb388b3b3..237f02a9a9c 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/breadcrumbs/breadcrumbs.component.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/breadcrumbs/breadcrumbs.component.ts
@@ -6,7 +6,18 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {AfterViewInit, Component, ElementRef, EventEmitter, HostListener, Input, OnChanges, OnInit, Output, ViewChild,} from '@angular/core';
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  EventEmitter,
+  HostListener,
+  Input,
+  OnChanges,
+  OnInit,
+  Output,
+  ViewChild,
+} from '@angular/core';
 import {Subject} from 'rxjs';
 import {debounceTime} from 'rxjs/operators';
 
@@ -31,8 +42,9 @@ export class BreadcrumbsComponent implements OnInit, AfterViewInit, OnChanges {
   updateScrollButtonVisibility$ = new Subject<void>();
 
   ngOnInit(): void {
-    this.updateScrollButtonVisibility$.pipe(debounceTime(100))
-        .subscribe(() => this.updateScrollButtonVisibility());
+    this.updateScrollButtonVisibility$
+      .pipe(debounceTime(100))
+      .subscribe(() => this.updateScrollButtonVisibility());
   }
 
   ngAfterViewInit(): void {
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/breadcrumbs/breadcrumbs.module.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/breadcrumbs/breadcrumbs.module.ts
index 011f7432d0b..a688d095193 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/breadcrumbs/breadcrumbs.module.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/breadcrumbs/breadcrumbs.module.ts
@@ -19,5 +19,4 @@ import {BreadcrumbsComponent} from './breadcrumbs.component';
   imports: [CommonModule, MatCardModule, MatButtonModule, MatIconModule],
   exports: [BreadcrumbsComponent],
 })
-export class BreadcrumbsModule {
-}
+export class BreadcrumbsModule {}
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/component-data-source/component-data-source.spec.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/component-data-source/component-data-source.spec.ts
index 89a71236be8..1fe718e6628 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/component-data-source/component-data-source.spec.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/component-data-source/component-data-source.spec.ts
@@ -183,8 +183,10 @@ const tree4: DevToolsNode = {
 
 describe('ComponentDataSource', () => {
   let dataSource: ComponentDataSource;
-  const treeControl =
-      new FlatTreeControl<FlatNode>((node) => node.level, (node) => node.expandable);
+  const treeControl = new FlatTreeControl<FlatNode>(
+    (node) => node.level,
+    (node) => node.expandable,
+  );
 
   beforeEach(() => (dataSource = new ComponentDataSource(treeControl)));
 
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/component-data-source/index.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/component-data-source/index.ts
index 7c17c454df2..37e24d8a75a 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/component-data-source/index.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/component-data-source/index.ts
@@ -32,16 +32,18 @@ export interface FlatNode {
 const expandable = (node: IndexedNode) => !!node.children && node.children.length > 0;
 
 const trackBy: TrackByFunction<FlatNode> = (_: number, item: FlatNode) =>
-    `${item.id}#${item.expandable}`;
+  `${item.id}#${item.expandable}`;
 
 const getId = (node: IndexedNode) => {
   let prefix = '';
   if (node.component) {
     prefix = node.component.id.toString();
   }
-  const dirIds = node.directives.map((d) => d.id).sort((a, b) => {
-    return a - b;
-  });
+  const dirIds = node.directives
+    .map((d) => d.id)
+    .sort((a, b) => {
+      return a - b;
+    });
   return prefix + '-' + dirIds.join('-');
 };
 
@@ -75,28 +77,28 @@ export class ComponentDataSource extends DataSource<FlatNode> {
   private _nodeToFlat = new WeakMap<IndexedNode, FlatNode>();
 
   private _treeFlattener = new MatTreeFlattener(
-      (node: IndexedNode, level: number) => {
-        if (this._nodeToFlat.has(node)) {
-          return this._nodeToFlat.get(node);
-        }
-        const flatNode: FlatNode = {
-          expandable: expandable(node),
-          id: getId(node),
-          // We can compare the nodes in the navigation functions above
-          // based on this identifier directly, since it's a reference type
-          // and the reference is preserved after transformation.
-          position: node.position,
-          name: node.component ? node.component.name : node.element,
-          directives: node.directives.map((d) => d.name).join(', '),
-          original: node,
-          level,
-        };
-        this._nodeToFlat.set(node, flatNode);
-        return flatNode;
-      },
-      (node) => (node ? node.level : -1),
-      (node) => (node ? node.expandable : false),
-      (node) => (node ? node.children : []),
+    (node: IndexedNode, level: number) => {
+      if (this._nodeToFlat.has(node)) {
+        return this._nodeToFlat.get(node);
+      }
+      const flatNode: FlatNode = {
+        expandable: expandable(node),
+        id: getId(node),
+        // We can compare the nodes in the navigation functions above
+        // based on this identifier directly, since it's a reference type
+        // and the reference is preserved after transformation.
+        position: node.position,
+        name: node.component ? node.component.name : node.element,
+        directives: node.directives.map((d) => d.name).join(', '),
+        original: node,
+        level,
+      };
+      this._nodeToFlat.set(node, flatNode);
+      return flatNode;
+    },
+    (node) => (node ? node.level : -1),
+    (node) => (node ? node.expandable : false),
+    (node) => (node ? node.children : []),
   );
 
   constructor(private _treeControl: FlatTreeControl<FlatNode>) {
@@ -111,14 +113,14 @@ export class ComponentDataSource extends DataSource<FlatNode> {
     return this._expandedData.value;
   }
 
-  getFlatNodeFromIndexedNode(indexedNode: IndexedNode): FlatNode|undefined {
+  getFlatNodeFromIndexedNode(indexedNode: IndexedNode): FlatNode | undefined {
     return this._nodeToFlat.get(indexedNode);
   }
 
   update(
-      forest: DevToolsNode[],
-      showCommentNodes: boolean,
-      ): {newItems: FlatNode[]; movedItems: FlatNode[]; removedItems: FlatNode[]} {
+    forest: DevToolsNode[],
+    showCommentNodes: boolean,
+  ): {newItems: FlatNode[]; movedItems: FlatNode[]; removedItems: FlatNode[]} {
     if (!forest) {
       return {newItems: [], movedItems: [], removedItems: []};
     }
@@ -151,9 +153,9 @@ export class ComponentDataSource extends DataSource<FlatNode> {
     });
 
     const {newItems, movedItems, removedItems} = diff<FlatNode>(
-        this._differ,
-        this.data,
-        flattenedCollection,
+      this._differ,
+      this.data,
+      flattenedCollection,
     );
     this._treeControl.dataNodes = this.data;
     this._flattenedData.next(this.data);
@@ -176,18 +178,17 @@ export class ComponentDataSource extends DataSource<FlatNode> {
       this._treeControl.expansionModel.changed,
       this._flattenedData,
     ];
-    return merge<unknown[]>(...changes)
-        .pipe(
-            map(() => {
-              this._expandedData.next(
-                  this._treeFlattener.expandFlattenedNodes(
-                      this.data,
-                      this._treeControl as FlatTreeControl<FlatNode|undefined>,
-                      ) as FlatNode[],
-              );
-              return this._expandedData.value;
-            }),
+    return merge<unknown[]>(...changes).pipe(
+      map(() => {
+        this._expandedData.next(
+          this._treeFlattener.expandFlattenedNodes(
+            this.data,
+            this._treeControl as FlatTreeControl<FlatNode | undefined>,
+          ) as FlatNode[],
         );
+        return this._expandedData.value;
+      }),
+    );
   }
 
   override disconnect(): void {}
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest-utils.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest-utils.ts
index 79f42e2e225..2186ca40651 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest-utils.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest-utils.ts
@@ -22,13 +22,16 @@ export const isChildOf = (childPosition: number[], parentPosition: number[]) =>
   return true;
 };
 
-export const parentCollapsed =
-    (nodeIdx: number, all: FlatNode[], treeControl: FlatTreeControl<FlatNode>) => {
-      const node = all[nodeIdx];
-      for (let i = nodeIdx - 1; i >= 0; i--) {
-        if (isChildOf(node.position, all[i].position) && !treeControl.isExpanded(all[i])) {
-          return true;
-        }
-      }
-      return false;
-    };
+export const parentCollapsed = (
+  nodeIdx: number,
+  all: FlatNode[],
+  treeControl: FlatTreeControl<FlatNode>,
+) => {
+  const node = all[nodeIdx];
+  for (let i = nodeIdx - 1; i >= 0; i--) {
+    if (isChildOf(node.position, all[i].position) && !treeControl.isExpanded(all[i])) {
+      return true;
+    }
+  }
+  return false;
+};
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.component.ts
index 16c7cab2142..29bd3992c34 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.component.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.component.ts
@@ -8,7 +8,18 @@
 
 import {CdkVirtualScrollViewport} from '@angular/cdk/scrolling';
 import {FlatTreeControl} from '@angular/cdk/tree';
-import {ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, HostListener, Input, OnDestroy, OnInit, Output, ViewChild,} from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  HostListener,
+  Input,
+  OnDestroy,
+  OnInit,
+  Output,
+  ViewChild,
+} from '@angular/core';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 import {DevToolsNode, ElementPosition, Events, MessageBus} from 'protocol';
 
@@ -30,7 +41,7 @@ export class DirectiveForestComponent {
     this._latestForest = forest;
     const result = this._updateForest(forest);
     const changed =
-        result.movedItems.length || result.newItems.length || result.removedItems.length;
+      result.movedItems.length || result.newItems.length || result.removedItems.length;
     if (this.currentSelectedElement && changed) {
       this._reselectNodeOnUpdate();
     }
@@ -42,9 +53,9 @@ export class DirectiveForestComponent {
     this.forest = this._latestForest;
   }
 
-  @Output() selectNode = new EventEmitter<IndexedNode|null>();
+  @Output() selectNode = new EventEmitter<IndexedNode | null>();
   @Output() selectDomElement = new EventEmitter<IndexedNode>();
-  @Output() setParents = new EventEmitter<FlatNode[]|null>();
+  @Output() setParents = new EventEmitter<FlatNode[] | null>();
   @Output() highlightComponent = new EventEmitter<ElementPosition>();
   @Output() removeComponentHighlight = new EventEmitter<void>();
   @Output() toggleInspector = new EventEmitter<void>();
@@ -54,28 +65,32 @@ export class DirectiveForestComponent {
   filterRegex = new RegExp('.^');
   currentlyMatchedIndex = -1;
 
-  selectedNode: FlatNode|null = null;
+  selectedNode: FlatNode | null = null;
   parents!: FlatNode[];
 
-  private _highlightIDinTreeFromElement: number|null = null;
+  private _highlightIDinTreeFromElement: number | null = null;
   private _showCommentNodes = false;
   private _latestForest!: DevToolsNode[];
 
-  set highlightIDinTreeFromElement(id: number|null) {
+  set highlightIDinTreeFromElement(id: number | null) {
     this._highlightIDinTreeFromElement = id;
     this._cdr.markForCheck();
   }
 
-  readonly treeControl =
-      new FlatTreeControl<FlatNode>((node) => node!.level, (node) => node.expandable);
+  readonly treeControl = new FlatTreeControl<FlatNode>(
+    (node) => node!.level,
+    (node) => node.expandable,
+  );
   readonly dataSource = new ComponentDataSource(this.treeControl);
   readonly itemHeight = 18;
 
   private _initialized = false;
 
   constructor(
-      private _tabUpdate: TabUpdate, private _messageBus: MessageBus<Events>,
-      private _cdr: ChangeDetectorRef) {
+    private _tabUpdate: TabUpdate,
+    private _messageBus: MessageBus<Events>,
+    private _cdr: ChangeDetectorRef,
+  ) {
     this.subscribeToInspectorEvents();
     this._tabUpdate.tabUpdate$.pipe(takeUntilDestroyed()).subscribe(() => {
       if (this.viewport) {
@@ -111,8 +126,9 @@ export class DirectiveForestComponent {
   }
 
   handleSelect(node: FlatNode): void {
-    this.currentlyMatchedIndex =
-        this.dataSource.data.findIndex((matchedNode) => matchedNode.id === node.id);
+    this.currentlyMatchedIndex = this.dataSource.data.findIndex(
+      (matchedNode) => matchedNode.id === node.id,
+    );
     this.selectAndEnsureVisible(node);
   }
 
@@ -156,8 +172,9 @@ export class DirectiveForestComponent {
   }
 
   private _reselectNodeOnUpdate(): void {
-    const nodeThatStillExists =
-        this.dataSource.getFlatNodeFromIndexedNode(this.currentSelectedElement);
+    const nodeThatStillExists = this.dataSource.getFlatNodeFromIndexedNode(
+      this.currentSelectedElement,
+    );
     if (nodeThatStillExists) {
       this.select(nodeThatStillExists);
     } else {
@@ -165,8 +182,11 @@ export class DirectiveForestComponent {
     }
   }
 
-  private _updateForest(forest: DevToolsNode[]):
-      {newItems: FlatNode[]; movedItems: FlatNode[]; removedItems: FlatNode[];} {
+  private _updateForest(forest: DevToolsNode[]): {
+    newItems: FlatNode[];
+    movedItems: FlatNode[];
+    removedItems: FlatNode[];
+  } {
     const result = this.dataSource.update(forest, this._showCommentNodes);
     if (!this._initialized && forest && forest.length) {
       this.treeControl.expandAll();
@@ -184,8 +204,9 @@ export class DirectiveForestComponent {
     this.parents = [];
     for (let i = 1; i <= position.length; i++) {
       const current = position.slice(0, i);
-      const selectedNode =
-          this.dataSource.data.find((item) => item.position.toString() === current.toString());
+      const selectedNode = this.dataSource.data.find(
+        (item) => item.position.toString() === current.toString(),
+      );
 
       // We might not be able to find the parent if the user has hidden the comment nodes.
       if (selectedNode) {
@@ -279,8 +300,10 @@ export class DirectiveForestComponent {
   }
 
   isMatched(node: FlatNode): boolean {
-    return this.filterRegex.test(node.name.toLowerCase()) ||
-        this.filterRegex.test(node.directives.toLowerCase());
+    return (
+      this.filterRegex.test(node.name.toLowerCase()) ||
+      this.filterRegex.test(node.directives.toLowerCase())
+    );
   }
 
   handleFilter(filterText: string): void {
@@ -324,8 +347,9 @@ export class DirectiveForestComponent {
 
   prevMatched(): void {
     const indexesOfMatchedNodes = this._findMatchedNodes();
-    this.currentlyMatchedIndex = (this.currentlyMatchedIndex - 1 + indexesOfMatchedNodes.length) %
-        indexesOfMatchedNodes.length;
+    this.currentlyMatchedIndex =
+      (this.currentlyMatchedIndex - 1 + indexesOfMatchedNodes.length) %
+      indexesOfMatchedNodes.length;
     const indexToSelect = indexesOfMatchedNodes[this.currentlyMatchedIndex];
     const nodeToSelect = this.dataSource.data[indexToSelect];
     if (indexToSelect !== undefined) {
@@ -352,11 +376,13 @@ export class DirectiveForestComponent {
   }
 
   isHighlighted(node: FlatNode): boolean {
-    return !!this._highlightIDinTreeFromElement &&
-        this._highlightIDinTreeFromElement === node.original.component?.id;
+    return (
+      !!this._highlightIDinTreeFromElement &&
+      this._highlightIDinTreeFromElement === node.original.component?.id
+    );
   }
 
-  isElement(node: FlatNode): boolean|null {
+  isElement(node: FlatNode): boolean | null {
     return node.original.component && node.original.component.isElement;
   }
 }
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.module.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.module.ts
index d2c84cee4f2..ef900f54d0b 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.module.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.module.ts
@@ -30,5 +30,4 @@ import {FilterModule} from './filter/filter.module';
   ],
   exports: [DirectiveForestComponent, BreadcrumbsModule],
 })
-export class DirectiveForestModule {
-}
+export class DirectiveForestModule {}
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter/filter.module.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter/filter.module.ts
index 023536cd24d..b00bd049b00 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter/filter.module.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter/filter.module.ts
@@ -19,5 +19,4 @@ import {FilterComponent} from './filter.component';
   imports: [CommonModule, MatCardModule, MatIconModule, MatButtonModule],
   exports: [FilterComponent],
 })
-export class FilterModule {
-}
+export class FilterModule {}
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/index-forest/index-forest.spec.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/index-forest/index-forest.spec.ts
index 16ee478a13d..5d08c22191c 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/index-forest/index-forest.spec.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/index-forest/index-forest.spec.ts
@@ -14,10 +14,83 @@ describe('indexForest', () => {
   });
 
   it('should index a forest', () => {
-    expect(indexForest([
+    expect(
+      indexForest([
+        {
+          element: 'Parent1',
+          directives: [],
+          component: {
+            isElement: false,
+            name: 'Cmp1',
+            id: 1,
+          },
+          children: [
+            {
+              element: 'Child1_1',
+              directives: [
+                {
+                  name: 'Dir1',
+                  id: 1,
+                },
+                {
+                  name: 'Dir2',
+                  id: 1,
+                },
+              ],
+              component: null,
+              children: [],
+            },
+            {
+              element: 'Child1_2',
+              directives: [],
+              component: {
+                isElement: false,
+                name: 'Cmp2',
+                id: 1,
+              },
+              children: [],
+            },
+          ],
+        },
+        {
+          element: 'Parent2',
+          directives: [],
+          component: null,
+          children: [
+            {
+              element: 'Child2_1',
+              directives: [
+                {
+                  name: 'Dir3',
+                  id: 1,
+                },
+              ],
+              component: null,
+              children: [],
+            },
+            {
+              element: 'Child2_2',
+              directives: [
+                {
+                  name: 'Dir4',
+                  id: 1,
+                },
+                {
+                  name: 'Dir5',
+                  id: 1,
+                },
+              ],
+              component: null,
+              children: [],
+            },
+          ],
+        },
+      ]),
+    ).toEqual([
       {
         element: 'Parent1',
         directives: [],
+        position: [0],
         component: {
           isElement: false,
           name: 'Cmp1',
@@ -26,6 +99,7 @@ describe('indexForest', () => {
         children: [
           {
             element: 'Child1_1',
+            position: [0, 0],
             directives: [
               {
                 name: 'Dir1',
@@ -42,6 +116,7 @@ describe('indexForest', () => {
           {
             element: 'Child1_2',
             directives: [],
+            position: [0, 1],
             component: {
               isElement: false,
               name: 'Cmp2',
@@ -55,9 +130,11 @@ describe('indexForest', () => {
         element: 'Parent2',
         directives: [],
         component: null,
+        position: [1],
         children: [
           {
             element: 'Child2_1',
+            position: [1, 0],
             directives: [
               {
                 name: 'Dir3',
@@ -69,6 +146,7 @@ describe('indexForest', () => {
           },
           {
             element: 'Child2_2',
+            position: [1, 1],
             directives: [
               {
                 name: 'Dir4',
@@ -84,83 +162,6 @@ describe('indexForest', () => {
           },
         ],
       },
-    ]))
-        .toEqual([
-          {
-            element: 'Parent1',
-            directives: [],
-            position: [0],
-            component: {
-              isElement: false,
-              name: 'Cmp1',
-              id: 1,
-            },
-            children: [
-              {
-                element: 'Child1_1',
-                position: [0, 0],
-                directives: [
-                  {
-                    name: 'Dir1',
-                    id: 1,
-                  },
-                  {
-                    name: 'Dir2',
-                    id: 1,
-                  },
-                ],
-                component: null,
-                children: [],
-              },
-              {
-                element: 'Child1_2',
-                directives: [],
-                position: [0, 1],
-                component: {
-                  isElement: false,
-                  name: 'Cmp2',
-                  id: 1,
-                },
-                children: [],
-              },
-            ],
-          },
-          {
-            element: 'Parent2',
-            directives: [],
-            component: null,
-            position: [1],
-            children: [
-              {
-                element: 'Child2_1',
-                position: [1, 0],
-                directives: [
-                  {
-                    name: 'Dir3',
-                    id: 1,
-                  },
-                ],
-                component: null,
-                children: [],
-              },
-              {
-                element: 'Child2_2',
-                position: [1, 1],
-                directives: [
-                  {
-                    name: 'Dir4',
-                    id: 1,
-                  },
-                  {
-                    name: 'Dir5',
-                    id: 1,
-                  },
-                ],
-                component: null,
-                children: [],
-              },
-            ],
-          },
-        ]);
+    ]);
   });
 });
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/index-forest/index.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/index-forest/index.ts
index b3dec3e73ed..1469e38ca92 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/index-forest/index.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/index-forest/index.ts
@@ -13,16 +13,19 @@ export interface IndexedNode extends DevToolsNode {
   children: IndexedNode[];
 }
 
-const indexTree =
-    (node: DevToolsNode, idx: number, parentPosition: ElementPosition = []): IndexedNode => {
-      const position = parentPosition.concat([idx]);
-      return {
-        position,
-        element: node.element,
-        component: node.component,
-        directives: node.directives.map((d, i) => ({name: d.name, id: d.id})),
-        children: node.children.map((n, i) => indexTree(n, i, position)),
-      } as IndexedNode;
-    };
+const indexTree = (
+  node: DevToolsNode,
+  idx: number,
+  parentPosition: ElementPosition = [],
+): IndexedNode => {
+  const position = parentPosition.concat([idx]);
+  return {
+    position,
+    element: node.element,
+    component: node.component,
+    directives: node.directives.map((d, i) => ({name: d.name, id: d.id})),
+    children: node.children.map((n, i) => indexTree(n, i, position)),
+  } as IndexedNode;
+};
 
 export const indexForest = (forest: DevToolsNode[]) => forest.map((n, i) => indexTree(n, i));
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/arrayify-props.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/arrayify-props.ts
index 1c1e96fd531..828ba0fe1f3 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/arrayify-props.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/arrayify-props.ts
@@ -10,17 +10,19 @@ import {Descriptor} from 'protocol';
 
 import {Property} from './element-property-resolver';
 
-export const arrayifyProps =
-    (props: {[prop: string]: Descriptor}|Descriptor[], parent: Property|null = null): Property[] =>
-        Object.entries(props)
-            .map(([name, val]) => ({name, descriptor: val, parent}))
-            .sort((a, b) => {
-              const parsedA = parseInt(a.name, 10);
-              const parsedB = parseInt(b.name, 10);
+export const arrayifyProps = (
+  props: {[prop: string]: Descriptor} | Descriptor[],
+  parent: Property | null = null,
+): Property[] =>
+  Object.entries(props)
+    .map(([name, val]) => ({name, descriptor: val, parent}))
+    .sort((a, b) => {
+      const parsedA = parseInt(a.name, 10);
+      const parsedB = parseInt(b.name, 10);
 
-              if (isNaN(parsedA) || isNaN(parsedB)) {
-                return a.name > b.name ? 1 : -1;
-              }
+      if (isNaN(parsedA) || isNaN(parsedB)) {
+        return a.name > b.name ? 1 : -1;
+      }
 
-              return parsedA - parsedB;
-            });
+      return parsedA - parsedB;
+    });
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/directive-property-resolver.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/directive-property-resolver.ts
index 620765fbc1d..93edf977e30 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/directive-property-resolver.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/directive-property-resolver.ts
@@ -8,7 +8,15 @@
 
 import {FlatTreeControl} from '@angular/cdk/tree';
 import {ViewEncapsulation} from '@angular/core';
-import {Descriptor, DirectiveMetadata, DirectivePosition, Events, MessageBus, NestedProp, Properties} from 'protocol';
+import {
+  Descriptor,
+  DirectiveMetadata,
+  DirectivePosition,
+  Events,
+  MessageBus,
+  NestedProp,
+  Properties,
+} from 'protocol';
 
 import {FlatNode, Property} from './element-property-resolver';
 import {getTreeFlattener} from './flatten';
@@ -20,38 +28,45 @@ export interface DirectiveTreeData {
   treeControl: FlatTreeControl<FlatNode>;
 }
 
-const getDirectiveControls = (dataSource: PropertyDataSource):
-    {dataSource: PropertyDataSource; treeControl: FlatTreeControl<FlatNode>} => {
-      const treeControl = dataSource.treeControl;
-      return {
-        dataSource,
-        treeControl,
-      };
-    };
+const getDirectiveControls = (
+  dataSource: PropertyDataSource,
+): {dataSource: PropertyDataSource; treeControl: FlatTreeControl<FlatNode>} => {
+  const treeControl = dataSource.treeControl;
+  return {
+    dataSource,
+    treeControl,
+  };
+};
 
-export const constructPathOfKeysToPropertyValue =
-    (nodePropToGetKeysFor: Property, keys: string[] = []): string[] => {
-      keys.unshift(nodePropToGetKeysFor.name);
-      const parentNodeProp = nodePropToGetKeysFor.parent;
-      if (parentNodeProp) {
-        constructPathOfKeysToPropertyValue(parentNodeProp, keys);
-      }
-      return keys;
-    };
+export const constructPathOfKeysToPropertyValue = (
+  nodePropToGetKeysFor: Property,
+  keys: string[] = [],
+): string[] => {
+  keys.unshift(nodePropToGetKeysFor.name);
+  const parentNodeProp = nodePropToGetKeysFor.parent;
+  if (parentNodeProp) {
+    constructPathOfKeysToPropertyValue(parentNodeProp, keys);
+  }
+  return keys;
+};
 
 export class DirectivePropertyResolver {
   private _treeFlattener = getTreeFlattener();
 
-  private _treeControl =
-      new FlatTreeControl<FlatNode>((node) => node.level, (node) => node.expandable);
+  private _treeControl = new FlatTreeControl<FlatNode>(
+    (node) => node.level,
+    (node) => node.expandable,
+  );
 
   private _inputsDataSource: PropertyDataSource;
   private _outputsDataSource: PropertyDataSource;
   private _stateDataSource: PropertyDataSource;
 
   constructor(
-      private _messageBus: MessageBus<Events>, private _props: Properties,
-      private _directivePosition: DirectivePosition) {
+    private _messageBus: MessageBus<Events>,
+    private _props: Properties,
+    private _directivePosition: DirectivePosition,
+  ) {
     const {inputProps, outputProps, stateProps} = this._classifyProperties();
 
     this._inputsDataSource = this._createDataSourceFromProps(inputProps);
@@ -71,7 +86,7 @@ export class DirectivePropertyResolver {
     return getDirectiveControls(this._stateDataSource);
   }
 
-  get directiveMetadata(): DirectiveMetadata|undefined {
+  get directiveMetadata(): DirectiveMetadata | undefined {
     return this._props.metadata;
   }
 
@@ -83,11 +98,11 @@ export class DirectivePropertyResolver {
     return this._directivePosition;
   }
 
-  get directiveViewEncapsulation(): ViewEncapsulation|undefined {
+  get directiveViewEncapsulation(): ViewEncapsulation | undefined {
     return this._props.metadata?.encapsulation;
   }
 
-  get directiveHasOnPushStrategy(): boolean|undefined {
+  get directiveHasOnPushStrategy(): boolean | undefined {
     return this._props.metadata?.onPush;
   }
 
@@ -117,11 +132,17 @@ export class DirectivePropertyResolver {
 
   private _createDataSourceFromProps(props: {[name: string]: Descriptor}): PropertyDataSource {
     return new PropertyDataSource(
-        props, this._treeFlattener, this._treeControl, this._directivePosition, this._messageBus);
+      props,
+      this._treeFlattener,
+      this._treeControl,
+      this._directivePosition,
+      this._messageBus,
+    );
   }
 
   private _classifyProperties(): {
-    inputProps: {[name: string]: Descriptor}; outputProps: {[name: string]: Descriptor};
+    inputProps: {[name: string]: Descriptor};
+    outputProps: {[name: string]: Descriptor};
     stateProps: {[name: string]: Descriptor};
   } {
     const inputLabels: Set<string> = new Set(Object.values(this._props.metadata?.inputs || {}));
@@ -133,9 +154,11 @@ export class DirectivePropertyResolver {
     let propPointer: {[name: string]: Descriptor};
 
     Object.keys(this.directiveProperties).forEach((propName) => {
-      propPointer = inputLabels.has(propName) ? inputProps :
-          outputLabels.has(propName)          ? outputProps :
-                                                stateProps;
+      propPointer = inputLabels.has(propName)
+        ? inputProps
+        : outputLabels.has(propName)
+        ? outputProps
+        : stateProps;
       propPointer[propName] = this.directiveProperties[propName];
     });
 
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/element-property-resolver.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/element-property-resolver.ts
index 0ebba4791a8..d270f0c305e 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/element-property-resolver.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/element-property-resolver.ts
@@ -7,7 +7,14 @@
  */
 
 import {Injectable} from '@angular/core';
-import {ComponentExplorerViewProperties, Descriptor, DirectivePosition, DirectivesProperties, Events, MessageBus,} from 'protocol';
+import {
+  ComponentExplorerViewProperties,
+  Descriptor,
+  DirectivePosition,
+  DirectivesProperties,
+  Events,
+  MessageBus,
+} from 'protocol';
 
 import {IndexedNode} from '../directive-forest/index-forest';
 
@@ -22,7 +29,7 @@ export interface FlatNode {
 export interface Property {
   name: string;
   descriptor: Descriptor;
-  parent: Property|null;
+  parent: Property | null;
 }
 
 @Injectable()
@@ -52,7 +59,9 @@ export class ElementPropertyResolver {
         position.directive = indexedNode.directives.findIndex((d) => d.name === key);
       }
       this._directivePropertiesController.set(
-          key, new DirectivePropertyResolver(this._messageBus, data[key], position));
+        key,
+        new DirectivePropertyResolver(this._messageBus, data[key], position),
+      );
     });
   }
 
@@ -79,7 +88,7 @@ export class ElementPropertyResolver {
     return result;
   }
 
-  getDirectiveController(directive: string): DirectivePropertyResolver|undefined {
+  getDirectiveController(directive: string): DirectivePropertyResolver | undefined {
     return this._directivePropertiesController.get(directive);
   }
 }
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/flatten.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/flatten.ts
index 2086102e190..120fdf1d526 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/flatten.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/flatten.ts
@@ -14,13 +14,18 @@ import {arrayifyProps} from './arrayify-props';
 import {FlatNode, Property} from './element-property-resolver';
 
 export const getTreeFlattener = () =>
-    new MatTreeFlattener((node: Property, level: number): FlatNode => {
+  new MatTreeFlattener(
+    (node: Property, level: number): FlatNode => {
       return {
         expandable: expandable(node.descriptor),
         prop: node,
         level,
       };
-    }, (node) => node.level, (node) => node.expandable, (node) => getChildren(node));
+    },
+    (node) => node.level,
+    (node) => node.expandable,
+    (node) => getChildren(node),
+  );
 
 export const expandable = (prop: Descriptor) => {
   if (!prop) {
@@ -32,10 +37,12 @@ export const expandable = (prop: Descriptor) => {
   return !(prop.type !== PropType.Object && prop.type !== PropType.Array);
 };
 
-const getChildren = (prop: Property): Property[]|undefined => {
+const getChildren = (prop: Property): Property[] | undefined => {
   const descriptor = prop.descriptor;
-  if ((descriptor.type === PropType.Object || descriptor.type === PropType.Array) &&
-      !(descriptor.value instanceof Observable)) {
+  if (
+    (descriptor.type === PropType.Object || descriptor.type === PropType.Array) &&
+    !(descriptor.value instanceof Observable)
+  ) {
     return arrayifyProps(descriptor.value || {}, prop);
   }
   console.error('Unexpected data type', descriptor, 'in property', prop);
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/property-data-source.spec.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/property-data-source.spec.ts
index bf3a3885ccb..51577f2cab3 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/property-data-source.spec.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/property-data-source.spec.ts
@@ -13,23 +13,29 @@ import {FlatNode} from './element-property-resolver';
 import {getTreeFlattener} from './flatten';
 import {PropertyDataSource} from './property-data-source';
 
-const flatTreeControl =
-    new FlatTreeControl<FlatNode>((node) => node.level, (node) => node.expandable);
+const flatTreeControl = new FlatTreeControl<FlatNode>(
+  (node) => node.level,
+  (node) => node.expandable,
+);
 
 describe('PropertyDataSource', () => {
   it('should detect changes in the collection', () => {
     const source = new PropertyDataSource(
-        {
-          foo: {
-            editable: true,
-            expandable: false,
-            preview: '42',
-            type: PropType.Number,
-            value: 42,
-            containerType: null,
-          },
+      {
+        foo: {
+          editable: true,
+          expandable: false,
+          preview: '42',
+          type: PropType.Number,
+          value: 42,
+          containerType: null,
         },
-        getTreeFlattener(), flatTreeControl, {element: [1, 2, 3]}, null as any);
+      },
+      getTreeFlattener(),
+      flatTreeControl,
+      {element: [1, 2, 3]},
+      null as any,
+    );
 
     source.update({
       foo: {
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/property-data-source.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/property-data-source.ts
index 64485768d87..bd7ccffc294 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/property-data-source.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/property-data-source.ts
@@ -20,7 +20,7 @@ import {arrayifyProps} from './arrayify-props';
 import {FlatNode, Property} from './element-property-resolver';
 
 const trackBy: TrackByFunction<FlatNode> = (_: number, item: FlatNode) =>
-    `#${item.prop.name}#${item.prop.descriptor.preview}#${item.level}`;
+  `#${item.prop.name}#${item.prop.descriptor.preview}#${item.level}`;
 
 export class PropertyDataSource extends DataSource<FlatNode> {
   private _data = new BehaviorSubject<FlatNode[]>([]);
@@ -29,10 +29,12 @@ export class PropertyDataSource extends DataSource<FlatNode> {
   private _differ = new DefaultIterableDiffer<FlatNode>(trackBy);
 
   constructor(
-      props: {[prop: string]: Descriptor},
-      private _treeFlattener: MatTreeFlattener<Property, FlatNode>,
-      private _treeControl: FlatTreeControl<FlatNode>, private _entityPosition: DirectivePosition,
-      private _messageBus: MessageBus<Events>) {
+    props: {[prop: string]: Descriptor},
+    private _treeFlattener: MatTreeFlattener<Property, FlatNode>,
+    private _treeControl: FlatTreeControl<FlatNode>,
+    private _entityPosition: DirectivePosition,
+    private _messageBus: MessageBus<Events>,
+  ) {
     super();
     this._data.next(this._treeFlattener.flattenNodes(arrayifyProps(props)));
   }
@@ -66,14 +68,20 @@ export class PropertyDataSource extends DataSource<FlatNode> {
     });
     this._subscriptions.push(s);
 
-    const changes =
-        [collectionViewer.viewChange, this._treeControl.expansionModel.changed, this._data];
+    const changes = [
+      collectionViewer.viewChange,
+      this._treeControl.expansionModel.changed,
+      this._data,
+    ];
 
-    return merge<unknown[]>(...changes).pipe(map(() => {
-      this._expandedData.next(
-          this._treeFlattener.expandFlattenedNodes(this.data, this._treeControl));
-      return this._expandedData.value;
-    }));
+    return merge<unknown[]>(...changes).pipe(
+      map(() => {
+        this._expandedData.next(
+          this._treeFlattener.expandFlattenedNodes(this.data, this._treeControl),
+        );
+        return this._expandedData.value;
+      }),
+    );
   }
 
   override disconnect(): void {
@@ -104,14 +112,16 @@ export class PropertyDataSource extends DataSource<FlatNode> {
     this._messageBus.emit('getNestedProperties', [this._entityPosition, parentPath]);
 
     this._messageBus.once(
-        'nestedProperties', (position: DirectivePosition, data: Properties, _path: string[]) => {
-          node.prop.descriptor.value = data.props;
-          this._treeControl.expand(node);
-          const props = arrayifyProps(data.props, node.prop);
-          const flatNodes = this._treeFlattener.flattenNodes(props);
-          flatNodes.forEach((f) => (f.level += node.level + 1));
-          this.data.splice(index + 1, 0, ...flatNodes);
-          this._data.next(this.data);
-        });
+      'nestedProperties',
+      (position: DirectivePosition, data: Properties, _path: string[]) => {
+        node.prop.descriptor.value = data.props;
+        this._treeControl.expand(node);
+        const props = arrayifyProps(data.props, node.prop);
+        const flatNodes = this._treeFlattener.flattenNodes(props);
+        flatNodes.forEach((f) => (f.level += node.level + 1));
+        this.data.splice(index + 1, 0, ...flatNodes);
+        this._data.next(this.data);
+      },
+    );
   }
 }
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/property-expanded-directive-properties.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/property-expanded-directive-properties.ts
index c93d45ab87a..c36782ef5fe 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/property-expanded-directive-properties.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/property-expanded-directive-properties.ts
@@ -13,14 +13,14 @@ import {FlatNode} from './element-property-resolver';
 export const getExpandedDirectiveProperties = (data: FlatNode[]): NestedProp[] => {
   const getChildren = (prop: Descriptor) => {
     if ((prop.type === PropType.Object || prop.type === PropType.Array) && prop.value) {
-      return Object.entries(prop.value).map(([k, v]: [
-                                              string, any
-                                            ]): {name: number|string, children: NestedProp[]} => {
-        return {
-          name: prop.type === PropType.Array ? parseInt(k, 10) : k,
-          children: getChildren(v),
-        };
-      });
+      return Object.entries(prop.value).map(
+        ([k, v]: [string, any]): {name: number | string; children: NestedProp[]} => {
+          return {
+            name: prop.type === PropType.Array ? parseInt(k, 10) : k,
+            children: getChildren(v),
+          };
+        },
+      );
     }
     return [];
   };
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/component-metadata.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/component-metadata.component.ts
index e6bc7d83641..9da83a58f84 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/component-metadata.component.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/component-metadata.component.ts
@@ -25,14 +25,14 @@ export class ComponentMetadataComponent {
 
   viewEncapsulationModes = ['Emulated', 'Native', 'None', 'ShadowDom'];
 
-  get controller(): DirectivePropertyResolver|undefined {
+  get controller(): DirectivePropertyResolver | undefined {
     if (!this.currentSelectedComponent) {
       return;
     }
     return this._nestedProps.getDirectiveController(this.currentSelectedComponent.name);
   }
 
-  get viewEncapsulation(): string|undefined {
+  get viewEncapsulation(): string | undefined {
     const encapsulationIndex = this?.controller?.directiveViewEncapsulation;
     if (encapsulationIndex !== undefined) {
       return this.viewEncapsulationModes[encapsulationIndex];
@@ -40,7 +40,7 @@ export class ComponentMetadataComponent {
     return undefined;
   }
 
-  get changeDetectionStrategy(): string|undefined {
+  get changeDetectionStrategy(): string | undefined {
     const onPush = this?.controller?.directiveHasOnPushStrategy;
     return onPush ? 'OnPush' : onPush !== undefined ? 'Default' : undefined;
   }
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header.component.ts
index 9f37283f2e7..6d5790862b8 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header.component.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header.component.ts
@@ -18,5 +18,5 @@ import {IndexedNode} from '../directive-forest/index-forest';
 })
 export class PropertyTabHeaderComponent {
   @Input({required: true}) currentSelectedElement!: IndexedNode;
-  @Input() currentDirectives: string[]|undefined;
+  @Input() currentDirectives: string[] | undefined;
 }
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.module.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.module.ts
index 1ae16b50ecc..68c233955dc 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.module.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.module.ts
@@ -21,10 +21,13 @@ import {PropertyViewModule} from './property-view/property-view.module';
 @NgModule({
   declarations: [PropertyTabComponent, PropertyTabHeaderComponent, ComponentMetadataComponent],
   imports: [
-    PropertyViewModule, CommonModule, MatButtonModule, MatExpansionModule, MatIconModule,
-    MatTooltipModule
+    PropertyViewModule,
+    CommonModule,
+    MatButtonModule,
+    MatExpansionModule,
+    MatIconModule,
+    MatTooltipModule,
   ],
   exports: [PropertyTabComponent],
 })
-export class PropertyTabModule {
-}
+export class PropertyTabModule {}
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-editor.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-editor.component.ts
index 32c1fc62a3c..a1f96db5c7f 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-editor.component.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-editor.component.ts
@@ -6,11 +6,20 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {AfterViewChecked, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnInit, Output,} from '@angular/core';
+import {
+  AfterViewChecked,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+} from '@angular/core';
 import {ContainerType} from 'protocol';
 
-type EditorType = string|number|boolean;
-type EditorResult = EditorType|Array<EditorType>;
+type EditorType = string | number | boolean;
+type EditorResult = EditorType | Array<EditorType>;
 
 enum PropertyEditorState {
   Read,
@@ -43,7 +52,10 @@ export class PropertyEditorComponent implements AfterViewChecked, OnInit {
   valueToSubmit!: EditorResult;
   currentPropertyState = this.readState;
 
-  constructor(private _cd: ChangeDetectorRef, private _elementRef: ElementRef) {}
+  constructor(
+    private _cd: ChangeDetectorRef,
+    private _elementRef: ElementRef,
+  ) {}
 
   ngOnInit(): void {
     this.valueToSubmit = this.initialValue;
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-preview.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-preview.component.ts
index 27349e1912a..e1c1e55ba29 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-preview.component.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-preview.component.ts
@@ -21,7 +21,9 @@ export class PropertyPreviewComponent {
   @Output() inspect = new EventEmitter<void>();
 
   get isClickableProp(): boolean {
-    return this.node.prop.descriptor.type === PropType.Function ||
-        this.node.prop.descriptor.type === PropType.HTMLNode;
+    return (
+      this.node.prop.descriptor.type === PropType.Function ||
+      this.node.prop.descriptor.type === PropType.HTMLNode
+    );
   }
 }
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-tab-body.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-tab-body.component.ts
index bbbd5615164..8eac037e174 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-tab-body.component.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-tab-body.component.ts
@@ -18,11 +18,11 @@ import {FlatNode} from '../../property-resolver/element-property-resolver';
   styleUrls: ['./property-tab-body.component.scss'],
 })
 export class PropertyTabBodyComponent {
-  @Input({required: true}) currentSelectedElement!: IndexedNode|null;
+  @Input({required: true}) currentSelectedElement!: IndexedNode | null;
   @Output() inspect = new EventEmitter<{node: FlatNode; directivePosition: DirectivePosition}>();
   @Output() viewSource = new EventEmitter<string>();
 
-  getCurrentDirectives(): string[]|undefined {
+  getCurrentDirectives(): string[] | undefined {
     if (!this.currentSelectedElement) {
       return;
     }
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body.component.ts
index 282bd20e599..5da4084ac7e 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body.component.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body.component.ts
@@ -10,7 +10,10 @@ import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';
 import {Component, EventEmitter, Input, Output} from '@angular/core';
 import {DirectivePosition, SerializedInjectedService} from 'protocol';
 
-import {DirectivePropertyResolver, DirectiveTreeData} from '../../property-resolver/directive-property-resolver';
+import {
+  DirectivePropertyResolver,
+  DirectiveTreeData,
+} from '../../property-resolver/directive-property-resolver';
 import {FlatNode} from '../../property-resolver/element-property-resolver';
 
 @Component({
@@ -29,8 +32,11 @@ export class PropertyViewBodyComponent {
   categoryOrder = [0, 1, 2];
 
   get panels(): {
-    title: string; hidden: boolean; controls: DirectiveTreeData; documentation: string,
-                                                                 class: string;
+    title: string;
+    hidden: boolean;
+    controls: DirectiveTreeData;
+    documentation: string;
+    class: string;
   }[] {
     return [
       {
@@ -58,8 +64,11 @@ export class PropertyViewBodyComponent {
   }
 
   get controlsLoaded(): boolean {
-    return !!this.directiveStateControls && !!this.directiveOutputControls &&
-        !!this.directiveInputControls;
+    return (
+      !!this.directiveStateControls &&
+      !!this.directiveOutputControls &&
+      !!this.directiveInputControls
+    );
   }
 
   updateValue({node, newValue}: {node: FlatNode; newValue: unknown}): void {
@@ -78,7 +87,6 @@ export class PropertyViewBodyComponent {
   }
 }
 
-
 @Component({
   selector: 'ng-dependency-viewer',
   template: `
@@ -87,23 +95,25 @@ export class PropertyViewBodyComponent {
         <mat-expansion-panel-header collapsedHeight="35px" expandedHeight="35px">
           <mat-panel-title>
             <mat-chip-listbox>
-              <mat-chip matTooltipPosition="left" matTooltip="Dependency injection token" (click)="$event.stopPropagation();">{{dependency.token}}</mat-chip>
+              <mat-chip
+                matTooltipPosition="left"
+                matTooltip="Dependency injection token"
+                (click)="$event.stopPropagation()"
+                >{{ dependency.token }}</mat-chip
+              >
             </mat-chip-listbox>
           </mat-panel-title>
           <mat-panel-description>
             <mat-chip-listbox>
               <div class="di-flags">
                 @if (dependency.flags?.optional) {
-                  <mat-chip [highlighted]="true" color="primary">Optional</mat-chip>
-                }
-                @if (dependency.flags?.host) {
-                  <mat-chip [highlighted]="true" color="primary">Host</mat-chip>
-                }
-                @if (dependency.flags?.self) {
-                  <mat-chip [highlighted]="true" color="primary">Self</mat-chip>
-                }
-                @if (dependency.flags?.skipSelf) {
-                  <mat-chip [highlighted]="true" color="primary">SkipSelf</mat-chip>
+                <mat-chip [highlighted]="true" color="primary">Optional</mat-chip>
+                } @if (dependency.flags?.host) {
+                <mat-chip [highlighted]="true" color="primary">Host</mat-chip>
+                } @if (dependency.flags?.self) {
+                <mat-chip [highlighted]="true" color="primary">Self</mat-chip>
+                } @if (dependency.flags?.skipSelf) {
+                <mat-chip [highlighted]="true" color="primary">SkipSelf</mat-chip>
                 }
               </div>
             </mat-chip-listbox>
@@ -112,30 +122,32 @@ export class PropertyViewBodyComponent {
         <ng-resolution-path [path]="dependency.resolutionPath"></ng-resolution-path>
       </mat-expansion-panel>
     </mat-accordion>
-    `,
-  styles: [`
-    .di-flags {
-      display: flex;
-      flex-wrap: nowrap;
-    }
-
-    :host-context(.dark-theme) ng-resolution-path {
-      background: #1a1a1a;
-    }
-
-    ng-resolution-path {
-      border-top: 1px solid black;
-      display: block;
-      overflow-x: scroll;
-      background: #f3f3f3;
-    }
-
-    :host {
-      mat-chip {
-        --mdc-chip-container-height: 18px;
+  `,
+  styles: [
+    `
+      .di-flags {
+        display: flex;
+        flex-wrap: nowrap;
       }
-    }
-    `]
+
+      :host-context(.dark-theme) ng-resolution-path {
+        background: #1a1a1a;
+      }
+
+      ng-resolution-path {
+        border-top: 1px solid black;
+        display: block;
+        overflow-x: scroll;
+        background: #f3f3f3;
+      }
+
+      :host {
+        mat-chip {
+          --mdc-chip-container-height: 18px;
+        }
+      }
+    `,
+  ],
 })
 export class DependencyViewerComponent {
   @Input({required: true}) dependency!: SerializedInjectedService;
@@ -143,16 +155,17 @@ export class DependencyViewerComponent {
 
 @Component({
   selector: 'ng-injected-services',
-  template: `
-    @for (dependency of dependencies; track dependency.position[0]) {
-      <ng-dependency-viewer [dependency]="dependency" />
-   }`,
-  styles: [`
+  template: ` @for (dependency of dependencies; track dependency.position[0]) {
+    <ng-dependency-viewer [dependency]="dependency" />
+    }`,
+  styles: [
+    `
       ng-dependency-viewer {
         border-bottom: 1px solid color-mix(in srgb, currentColor, #bdbdbd 85%);
         display: block;
       }
-    `]
+    `,
+  ],
 })
 export class InjectedServicesComponent {
   @Input({required: true}) controller!: DirectivePropertyResolver;
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view.component.ts
index 6e725373d21..503dda215b3 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view.component.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view.component.ts
@@ -9,7 +9,10 @@
 import {Component, EventEmitter, Input, Output} from '@angular/core';
 import {DirectivePosition} from 'protocol';
 
-import {DirectivePropertyResolver, DirectiveTreeData} from '../../property-resolver/directive-property-resolver';
+import {
+  DirectivePropertyResolver,
+  DirectiveTreeData,
+} from '../../property-resolver/directive-property-resolver';
 import {ElementPropertyResolver, FlatNode} from '../../property-resolver/element-property-resolver';
 
 @Component({
@@ -24,19 +27,19 @@ export class PropertyViewComponent {
 
   constructor(private _nestedProps: ElementPropertyResolver) {}
 
-  get controller(): DirectivePropertyResolver|undefined {
+  get controller(): DirectivePropertyResolver | undefined {
     return this._nestedProps.getDirectiveController(this.directive);
   }
 
-  get directiveInputControls(): DirectiveTreeData|void {
+  get directiveInputControls(): DirectiveTreeData | void {
     return this.controller?.directiveInputControls;
   }
 
-  get directiveOutputControls(): DirectiveTreeData|void {
+  get directiveOutputControls(): DirectiveTreeData | void {
     return this.controller?.directiveOutputControls;
   }
 
-  get directiveStateControls(): DirectiveTreeData|void {
+  get directiveStateControls(): DirectiveTreeData | void {
     return this.controller?.directiveStateControls;
   }
 }
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view.module.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view.module.ts
index 0919c56f4bf..b7513db983b 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view.module.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view.module.ts
@@ -23,7 +23,11 @@ import {ResolutionPathComponent} from '../../../dependency-injection/resolution-
 import {PropertyEditorComponent} from './property-editor.component';
 import {PropertyPreviewComponent} from './property-preview.component';
 import {PropertyTabBodyComponent} from './property-tab-body.component';
-import {DependencyViewerComponent, InjectedServicesComponent, PropertyViewBodyComponent} from './property-view-body.component';
+import {
+  DependencyViewerComponent,
+  InjectedServicesComponent,
+  PropertyViewBodyComponent,
+} from './property-view-body.component';
 import {PropertyViewHeaderComponent} from './property-view-header.component';
 import {PropertyViewTreeComponent} from './property-view-tree.component';
 import {PropertyViewComponent} from './property-view.component';
@@ -41,9 +45,17 @@ import {PropertyViewComponent} from './property-view.component';
     DependencyViewerComponent,
   ],
   imports: [
-    MatToolbarModule, MatButtonModule, MatIconModule, MatTreeModule, MatTooltipModule,
-    MatChipsModule, CommonModule, MatExpansionModule, DragDropModule, FormsModule,
-    ResolutionPathComponent
+    MatToolbarModule,
+    MatButtonModule,
+    MatIconModule,
+    MatTreeModule,
+    MatTooltipModule,
+    MatChipsModule,
+    CommonModule,
+    MatExpansionModule,
+    DragDropModule,
+    FormsModule,
+    ResolutionPathComponent,
   ],
   exports: [
     PropertyViewComponent,
@@ -55,5 +67,4 @@ import {PropertyViewComponent} from './property-view.component';
     PropertyEditorComponent,
   ],
 })
-export class PropertyViewModule {
-}
+export class PropertyViewModule {}
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-providers.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-providers.component.ts
index 78248f43ae3..b7740890f74 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-providers.component.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-providers.component.ts
@@ -18,126 +18,137 @@ import {Events, MessageBus, SerializedInjector, SerializedProviderRecord} from '
 @Component({
   selector: 'ng-injector-providers',
   template: `
-        <h1>
-          Providers for {{ injector?.name  }}
-        </h1>
-        @if (injector) {
-          <div class="injector-providers">
-          <mat-form-field appearance="fill" class="form-field-spacer">
-              <mat-label>Search by token</mat-label>
-              <input type="text" matInput
-                placeholder="Provider token"
-                (input)="searchToken.set($event.target.value)"
-                [value]="searchToken()"
-              />
-              <mat-icon matSuffix (click)="searchToken.set('')">close</mat-icon>
-            </mat-form-field>
-            <mat-form-field class="form-field-spacer">
-              <mat-label>Search by type</mat-label>
-              <mat-select
-                [value]="searchType()"
-                (selectionChange)="searchType.set($event.value)"
-              >
-                <mat-option>None</mat-option>
-                @for (type of providerTypes; track type) {
-                  <mat-option [value]="type">{{$any(providerTypeToLabel)[type]}}</mat-option>
-                }
-              </mat-select>
-            </mat-form-field>
-            @if (providers.length > 0) {
-              <table mat-table [dataSource]="providers" class="mat-elevation-z4">
-                <ng-container matColumnDef="token">
-                  <th mat-header-cell *matHeaderCellDef> <h3 class="column-title">Token</h3> </th>
-                  <td mat-cell *matCellDef="let provider"> {{provider.token}} </td>
-                </ng-container>
-                <ng-container matColumnDef="type">
-                  <th mat-header-cell *matHeaderCellDef> <h3 class="column-title">Type</h3> </th>
-                  <td mat-cell *matCellDef="let provider">
-                    @if (provider.type === 'multi') {
-                      multi (x{{ provider.index.length }})
-                    } @else {
-                      {{$any(providerTypeToLabel)[provider.type]}}
-                    }
-                  </td>
-                </ng-container>
-                <ng-container matColumnDef="isViewProvider">
-                  <th mat-header-cell *matHeaderCellDef> <h3 class="column-title">Is View Provider</h3> </th>
-                  <td mat-cell *matCellDef="let provider"> <mat-icon>{{provider.isViewProvider ? 'check_circle' : 'cancel'}}</mat-icon> </td>
-                </ng-container>
-                <ng-container matColumnDef="log">
-                  <th mat-header-cell *matHeaderCellDef> <h3 class="column-title"></h3> </th>
-                  <td mat-cell *matCellDef="let provider"> <mat-icon matTooltipPosition="left" matTooltip="Log provider in console" class="select" (click)="select(provider)">send</mat-icon> </td>
-                </ng-container>
-                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-                <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-              </table>
+    <h1>Providers for {{ injector?.name }}</h1>
+    @if (injector) {
+    <div class="injector-providers">
+      <mat-form-field appearance="fill" class="form-field-spacer">
+        <mat-label>Search by token</mat-label>
+        <input
+          type="text"
+          matInput
+          placeholder="Provider token"
+          (input)="searchToken.set($event.target.value)"
+          [value]="searchToken()"
+        />
+        <mat-icon matSuffix (click)="searchToken.set('')">close</mat-icon>
+      </mat-form-field>
+      <mat-form-field class="form-field-spacer">
+        <mat-label>Search by type</mat-label>
+        <mat-select [value]="searchType()" (selectionChange)="searchType.set($event.value)">
+          <mat-option>None</mat-option>
+          @for (type of providerTypes; track type) {
+          <mat-option [value]="type">{{ $any(providerTypeToLabel)[type] }}</mat-option>
+          }
+        </mat-select>
+      </mat-form-field>
+      @if (providers.length > 0) {
+      <table mat-table [dataSource]="providers" class="mat-elevation-z4">
+        <ng-container matColumnDef="token">
+          <th mat-header-cell *matHeaderCellDef><h3 class="column-title">Token</h3></th>
+          <td mat-cell *matCellDef="let provider">{{ provider.token }}</td>
+        </ng-container>
+        <ng-container matColumnDef="type">
+          <th mat-header-cell *matHeaderCellDef><h3 class="column-title">Type</h3></th>
+          <td mat-cell *matCellDef="let provider">
+            @if (provider.type === 'multi') { multi (x{{ provider.index.length }}) } @else {
+            {{ $any(providerTypeToLabel)[provider.type] }}
             }
-          </div>
-        }
-        `,
-  styles: [`
-        .select {
-          cursor: pointer;
-        }
+          </td>
+        </ng-container>
+        <ng-container matColumnDef="isViewProvider">
+          <th mat-header-cell *matHeaderCellDef><h3 class="column-title">Is View Provider</h3></th>
+          <td mat-cell *matCellDef="let provider">
+            <mat-icon>{{ provider.isViewProvider ? 'check_circle' : 'cancel' }}</mat-icon>
+          </td>
+        </ng-container>
+        <ng-container matColumnDef="log">
+          <th mat-header-cell *matHeaderCellDef><h3 class="column-title"></h3></th>
+          <td mat-cell *matCellDef="let provider">
+            <mat-icon
+              matTooltipPosition="left"
+              matTooltip="Log provider in console"
+              class="select"
+              (click)="select(provider)"
+              >send</mat-icon
+            >
+          </td>
+        </ng-container>
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+      </table>
+      }
+    </div>
+    }
+  `,
+  styles: [
+    `
+      .select {
+        cursor: pointer;
+      }
 
-        :host {
-          display: block;
-          padding: 16px;
-        }
+      :host {
+        display: block;
+        padding: 16px;
+      }
 
-        .form-field-spacer {
-          margin: 0 4px 0 4px;
-        }
+      .form-field-spacer {
+        margin: 0 4px 0 4px;
+      }
 
-        table {
-          width: 100%;
-        }
+      table {
+        width: 100%;
+      }
 
-        .column-title {
-          margin: 0;
-        }
+      .column-title {
+        margin: 0;
+      }
 
-        tr.example-detail-row {
-          height: 0;
-        }
+      tr.example-detail-row {
+        height: 0;
+      }
 
-        .example-element-row td {
-          border-bottom-width: 0;
-          cursor: pointer;
-        }
+      .example-element-row td {
+        border-bottom-width: 0;
+        cursor: pointer;
+      }
 
-        .example-element-detail {
-          overflow: hidden;
-          display: flex;
-        }
+      .example-element-detail {
+        overflow: hidden;
+        display: flex;
+      }
 
-        .example-element-diagram {
-          min-width: 80px;
-          border: 2px solid black;
-          padding: 8px;
-          font-weight: lighter;
-          margin: 8px 0;
-          height: 104px;
-        }
+      .example-element-diagram {
+        min-width: 80px;
+        border: 2px solid black;
+        padding: 8px;
+        font-weight: lighter;
+        margin: 8px 0;
+        height: 104px;
+      }
 
-        .example-element-symbol {
-          font-weight: bold;
-          font-size: 40px;
-          line-height: normal;
-        }
+      .example-element-symbol {
+        font-weight: bold;
+        font-size: 40px;
+        line-height: normal;
+      }
 
-        .example-element-description {
-          padding: 16px;
-        }
+      .example-element-description {
+        padding: 16px;
+      }
 
-        .example-element-description-attribution {
-          opacity: 0.5;
-        }
-    `],
+      .example-element-description-attribution {
+        opacity: 0.5;
+      }
+    `,
+  ],
   standalone: true,
   imports: [
-    MatTableModule, MatIconModule, MatTooltipModule, MatInputModule, MatSelectModule,
-    MatFormFieldModule
+    MatTableModule,
+    MatIconModule,
+    MatTooltipModule,
+    MatInputModule,
+    MatSelectModule,
+    MatFormFieldModule,
   ],
 })
 export class InjectorProvidersComponent {
@@ -152,11 +163,12 @@ export class InjectorProvidersComponent {
 
     const predicates: ((provider: SerializedProviderRecord) => boolean)[] = [];
     searchToken &&
-        predicates.push((provider) => provider.token.toLowerCase().includes(searchToken));
+      predicates.push((provider) => provider.token.toLowerCase().includes(searchToken));
     searchType && predicates.push((provider) => provider.type === searchType);
 
-    return this.providers.filter(
-        (provider) => predicates.every((predicate) => predicate(provider)));
+    return this.providers.filter((provider) =>
+      predicates.every((predicate) => predicate(provider)),
+    );
   });
 
   providerTypeToLabel = {
@@ -178,7 +190,7 @@ export class InjectorProvidersComponent {
         type: this.injector.type,
         name: this.injector.name,
       },
-      row
+      row,
     ]);
   }
 
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-tree-fns.spec.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-tree-fns.spec.ts
index 9d5783c0a9e..cac3a7a1755 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-tree-fns.spec.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-tree-fns.spec.ts
@@ -6,9 +6,20 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {InjectorTreeD3Node, InjectorTreeNode} from '../dependency-injection/injector-tree-visualizer';
+import {
+  InjectorTreeD3Node,
+  InjectorTreeNode,
+} from '../dependency-injection/injector-tree-visualizer';
 
-import {equalInjector, generateEdgeIdsFromNodeIds, getInjectorIdsToRootFromNode, grabInjectorPathsFromDirectiveForest, InjectorPath, splitInjectorPathsIntoElementAndEnvironmentPaths, transformInjectorResolutionPathsIntoTree} from './injector-tree-fns';
+import {
+  equalInjector,
+  generateEdgeIdsFromNodeIds,
+  getInjectorIdsToRootFromNode,
+  grabInjectorPathsFromDirectiveForest,
+  InjectorPath,
+  splitInjectorPathsIntoElementAndEnvironmentPaths,
+  transformInjectorResolutionPathsIntoTree,
+} from './injector-tree-fns';
 
 describe('getInjectorIdsToRootFromNode', () => {
   it('should be able to get ids from a node', () => {
@@ -109,8 +120,8 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                 {'id': '1', 'type': 'element', 'name': '_AppComponent'},
                 {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                 {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-              ]
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
             },
             {
               'element': 'app-demo-component',
@@ -130,8 +141,8 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                     {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                     {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                     {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                    {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                  ]
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
                 },
                 {
                   'element': 'app-todo-demo',
@@ -154,8 +165,8 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                         {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                         {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                         {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                        {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                      ]
+                        {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                      ],
                     },
                     {
                       'element': 'a',
@@ -173,8 +184,8 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                         {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                         {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                         {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                        {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                      ]
+                        {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                      ],
                     },
                     {
                       'element': 'router-outlet',
@@ -192,8 +203,8 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                         {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                         {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                         {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                        {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                      ]
+                        {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                      ],
                     },
                     {
                       'element': 'app-todos',
@@ -219,8 +230,8 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                             {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                            {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                          ]
+                            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                          ],
                         },
                         {
                           'element': 'a',
@@ -241,8 +252,8 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                             {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                            {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                          ]
+                            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                          ],
                         },
                         {
                           'element': 'a',
@@ -263,37 +274,39 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                             {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                            {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                          ]
+                            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                          ],
                         },
                         {
                           'element': 'app-todo',
                           'component': {'name': 'app-todo', 'isElement': false, 'id': 12},
                           'directives': [{'name': '_TooltipDirective', 'id': 13}],
-                          'children': [{
-                            'element': 'div',
-                            'component': null,
-                            'directives': [{'name': '_TooltipDirective', 'id': 14}],
-                            'children': [],
-                            'resolutionPath': [
-                              {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
-                              {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
-                              {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                              {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                              {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                              {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                              {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                              {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                              {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                              {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                              {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                              {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                              {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                              {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                              {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                              {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                            ]
-                          }],
+                          'children': [
+                            {
+                              'element': 'div',
+                              'component': null,
+                              'directives': [{'name': '_TooltipDirective', 'id': 14}],
+                              'children': [],
+                              'resolutionPath': [
+                                {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
+                                {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
+                                {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                                {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                                {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                                {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                              ],
+                            },
+                          ],
                           'resolutionPath': [
                             {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
                             {'id': '20', 'type': 'element', 'name': '_NgForOf'},
@@ -309,37 +322,39 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                             {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                            {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                          ]
+                            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                          ],
                         },
                         {
                           'element': 'app-todo',
                           'component': {'name': 'app-todo', 'isElement': false, 'id': 15},
                           'directives': [{'name': '_TooltipDirective', 'id': 16}],
-                          'children': [{
-                            'element': 'div',
-                            'component': null,
-                            'directives': [{'name': '_TooltipDirective', 'id': 17}],
-                            'children': [],
-                            'resolutionPath': [
-                              {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
-                              {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
-                              {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                              {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                              {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                              {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                              {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                              {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                              {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                              {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                              {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                              {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                              {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                              {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                              {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                              {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                            ]
-                          }],
+                          'children': [
+                            {
+                              'element': 'div',
+                              'component': null,
+                              'directives': [{'name': '_TooltipDirective', 'id': 17}],
+                              'children': [],
+                              'resolutionPath': [
+                                {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
+                                {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
+                                {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                                {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                                {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                                {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                              ],
+                            },
+                          ],
                           'resolutionPath': [
                             {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
                             {'id': '20', 'type': 'element', 'name': '_NgForOf'},
@@ -355,8 +370,8 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                             {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                            {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                          ]
+                            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                          ],
                         },
                         {
                           'element': '#comment',
@@ -377,9 +392,9 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                             {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                            {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                          ]
-                        }
+                            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                          ],
+                        },
                       ],
                       'resolutionPath': [
                         {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
@@ -394,9 +409,9 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                         {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                         {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                         {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                        {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                      ]
-                    }
+                        {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                      ],
+                    },
                   ],
                   'resolutionPath': [
                     {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
@@ -408,8 +423,8 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                     {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                     {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                     {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                    {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                  ]
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
                 },
                 {
                   'element': 'app-heavy',
@@ -424,9 +439,9 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                     {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                     {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                     {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                    {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                  ]
-                }
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
+                },
               ],
               'resolutionPath': [
                 {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
@@ -435,18 +450,18 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                 {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                 {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                 {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-              ]
-            }
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
+            },
           ],
           'resolutionPath': [
             {'id': '1', 'type': 'element', 'name': '_AppComponent'},
             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
             {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-            {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-          ]
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
         },
-        'path': [{'id': '1', 'type': 'element', 'name': '_AppComponent'}]
+        'path': [{'id': '1', 'type': 'element', 'name': '_AppComponent'}],
       },
       {
         'node': {
@@ -459,10 +474,10 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
             {'id': '1', 'type': 'element', 'name': '_AppComponent'},
             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
             {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-            {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-          ]
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
         },
-        'path': [{'id': '1', 'type': 'element', 'name': '_AppComponent'}]
+        'path': [{'id': '1', 'type': 'element', 'name': '_AppComponent'}],
       },
       {
         'node': {
@@ -483,8 +498,8 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                 {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                 {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                 {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-              ]
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
             },
             {
               'element': 'app-todo-demo',
@@ -507,8 +522,8 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                     {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                     {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                     {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                    {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                  ]
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
                 },
                 {
                   'element': 'a',
@@ -526,8 +541,8 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                     {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                     {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                     {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                    {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                  ]
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
                 },
                 {
                   'element': 'router-outlet',
@@ -545,8 +560,8 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                     {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                     {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                     {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                    {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                  ]
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
                 },
                 {
                   'element': 'app-todos',
@@ -572,8 +587,8 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                         {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                         {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                         {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                        {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                      ]
+                        {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                      ],
                     },
                     {
                       'element': 'a',
@@ -594,8 +609,8 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                         {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                         {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                         {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                        {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                      ]
+                        {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                      ],
                     },
                     {
                       'element': 'a',
@@ -616,37 +631,39 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                         {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                         {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                         {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                        {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                      ]
+                        {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                      ],
                     },
                     {
                       'element': 'app-todo',
                       'component': {'name': 'app-todo', 'isElement': false, 'id': 12},
                       'directives': [{'name': '_TooltipDirective', 'id': 13}],
-                      'children': [{
-                        'element': 'div',
-                        'component': null,
-                        'directives': [{'name': '_TooltipDirective', 'id': 14}],
-                        'children': [],
-                        'resolutionPath': [
-                          {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
-                          {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
-                          {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                          {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                          {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                          {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                          {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                          {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                          {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                          {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                          {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                          {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                          {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                          {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                          {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                          {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                        ]
-                      }],
+                      'children': [
+                        {
+                          'element': 'div',
+                          'component': null,
+                          'directives': [{'name': '_TooltipDirective', 'id': 14}],
+                          'children': [],
+                          'resolutionPath': [
+                            {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
+                            {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
+                            {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                            {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                            {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                            {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                          ],
+                        },
+                      ],
                       'resolutionPath': [
                         {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
                         {'id': '20', 'type': 'element', 'name': '_NgForOf'},
@@ -662,37 +679,39 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                         {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                         {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                         {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                        {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                      ]
+                        {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                      ],
                     },
                     {
                       'element': 'app-todo',
                       'component': {'name': 'app-todo', 'isElement': false, 'id': 15},
                       'directives': [{'name': '_TooltipDirective', 'id': 16}],
-                      'children': [{
-                        'element': 'div',
-                        'component': null,
-                        'directives': [{'name': '_TooltipDirective', 'id': 17}],
-                        'children': [],
-                        'resolutionPath': [
-                          {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
-                          {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
-                          {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                          {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                          {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                          {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                          {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                          {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                          {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                          {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                          {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                          {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                          {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                          {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                          {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                          {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                        ]
-                      }],
+                      'children': [
+                        {
+                          'element': 'div',
+                          'component': null,
+                          'directives': [{'name': '_TooltipDirective', 'id': 17}],
+                          'children': [],
+                          'resolutionPath': [
+                            {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
+                            {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
+                            {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                            {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                            {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                            {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                          ],
+                        },
+                      ],
                       'resolutionPath': [
                         {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
                         {'id': '20', 'type': 'element', 'name': '_NgForOf'},
@@ -708,8 +727,8 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                         {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                         {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                         {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                        {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                      ]
+                        {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                      ],
                     },
                     {
                       'element': '#comment',
@@ -730,9 +749,9 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                         {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                         {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                         {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                        {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                      ]
-                    }
+                        {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                      ],
+                    },
                   ],
                   'resolutionPath': [
                     {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
@@ -747,9 +766,9 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                     {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                     {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                     {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                    {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                  ]
-                }
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
+                },
               ],
               'resolutionPath': [
                 {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
@@ -761,8 +780,8 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                 {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                 {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                 {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-              ]
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
             },
             {
               'element': 'app-heavy',
@@ -777,9 +796,9 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                 {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                 {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                 {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-              ]
-            }
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
+            },
           ],
           'resolutionPath': [
             {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
@@ -788,13 +807,13 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
             {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-            {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-          ]
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
         },
         'path': [
           {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-          {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'}
-        ]
+          {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+        ],
       },
       {
         'node': {
@@ -810,13 +829,13 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
             {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-            {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-          ]
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
         },
         'path': [
           {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-          {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'}
-        ]
+          {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+        ],
       },
       {
         'node': {
@@ -840,8 +859,8 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                 {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                 {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                 {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-              ]
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
             },
             {
               'element': 'a',
@@ -859,8 +878,8 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                 {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                 {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                 {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-              ]
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
             },
             {
               'element': 'router-outlet',
@@ -878,8 +897,8 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                 {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                 {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                 {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-              ]
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
             },
             {
               'element': 'app-todos',
@@ -905,8 +924,8 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                     {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                     {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                     {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                    {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                  ]
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
                 },
                 {
                   'element': 'a',
@@ -927,8 +946,8 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                     {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                     {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                     {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                    {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                  ]
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
                 },
                 {
                   'element': 'a',
@@ -949,37 +968,39 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                     {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                     {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                     {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                    {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                  ]
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
                 },
                 {
                   'element': 'app-todo',
                   'component': {'name': 'app-todo', 'isElement': false, 'id': 12},
                   'directives': [{'name': '_TooltipDirective', 'id': 13}],
-                  'children': [{
-                    'element': 'div',
-                    'component': null,
-                    'directives': [{'name': '_TooltipDirective', 'id': 14}],
-                    'children': [],
-                    'resolutionPath': [
-                      {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
-                      {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
-                      {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                      {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                      {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                      {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                      {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                      {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                      {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                      {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                      {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                      {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                      {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                      {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                      {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                      {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                    ]
-                  }],
+                  'children': [
+                    {
+                      'element': 'div',
+                      'component': null,
+                      'directives': [{'name': '_TooltipDirective', 'id': 14}],
+                      'children': [],
+                      'resolutionPath': [
+                        {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
+                        {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
+                        {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                        {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                        {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                        {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                        {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                        {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                        {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                        {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                        {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                      ],
+                    },
+                  ],
                   'resolutionPath': [
                     {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
                     {'id': '20', 'type': 'element', 'name': '_NgForOf'},
@@ -995,37 +1016,39 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                     {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                     {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                     {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                    {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                  ]
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
                 },
                 {
                   'element': 'app-todo',
                   'component': {'name': 'app-todo', 'isElement': false, 'id': 15},
                   'directives': [{'name': '_TooltipDirective', 'id': 16}],
-                  'children': [{
-                    'element': 'div',
-                    'component': null,
-                    'directives': [{'name': '_TooltipDirective', 'id': 17}],
-                    'children': [],
-                    'resolutionPath': [
-                      {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
-                      {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
-                      {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                      {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                      {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                      {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                      {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                      {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                      {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                      {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                      {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                      {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                      {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                      {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                      {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                      {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                    ]
-                  }],
+                  'children': [
+                    {
+                      'element': 'div',
+                      'component': null,
+                      'directives': [{'name': '_TooltipDirective', 'id': 17}],
+                      'children': [],
+                      'resolutionPath': [
+                        {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
+                        {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
+                        {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                        {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                        {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                        {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                        {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                        {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                        {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                        {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                        {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                      ],
+                    },
+                  ],
                   'resolutionPath': [
                     {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
                     {'id': '20', 'type': 'element', 'name': '_NgForOf'},
@@ -1041,8 +1064,8 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                     {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                     {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                     {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                    {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                  ]
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
                 },
                 {
                   'element': '#comment',
@@ -1063,9 +1086,9 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                     {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                     {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                     {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                    {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                  ]
-                }
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
+                },
               ],
               'resolutionPath': [
                 {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
@@ -1080,9 +1103,9 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                 {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                 {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                 {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-              ]
-            }
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
+            },
           ],
           'resolutionPath': [
             {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
@@ -1094,14 +1117,14 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
             {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-            {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-          ]
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
         },
         'path': [
           {'id': '1', 'type': 'element', 'name': '_AppComponent'},
           {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-          {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'}
-        ]
+          {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+        ],
       },
       {
         'node': {
@@ -1120,14 +1143,14 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
             {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-            {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-          ]
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
         },
         'path': [
           {'id': '1', 'type': 'element', 'name': '_AppComponent'},
           {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-          {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'}
-        ]
+          {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+        ],
       },
       {
         'node': {
@@ -1146,14 +1169,14 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
             {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-            {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-          ]
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
         },
         'path': [
           {'id': '1', 'type': 'element', 'name': '_AppComponent'},
           {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-          {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'}
-        ]
+          {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+        ],
       },
       {
         'node': {
@@ -1172,14 +1195,14 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
             {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-            {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-          ]
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
         },
         'path': [
           {'id': '1', 'type': 'element', 'name': '_AppComponent'},
           {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-          {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'}
-        ]
+          {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+        ],
       },
       {
         'node': {
@@ -1206,8 +1229,8 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                 {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                 {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                 {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-              ]
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
             },
             {
               'element': 'a',
@@ -1228,8 +1251,8 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                 {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                 {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                 {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-              ]
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
             },
             {
               'element': 'a',
@@ -1250,37 +1273,39 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                 {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                 {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                 {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-              ]
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
             },
             {
               'element': 'app-todo',
               'component': {'name': 'app-todo', 'isElement': false, 'id': 12},
               'directives': [{'name': '_TooltipDirective', 'id': 13}],
-              'children': [{
-                'element': 'div',
-                'component': null,
-                'directives': [{'name': '_TooltipDirective', 'id': 14}],
-                'children': [],
-                'resolutionPath': [
-                  {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
-                  {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
-                  {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                  {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                  {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                  {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                  {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                  {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                  {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                  {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                  {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                  {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                  {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                  {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                  {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                  {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                ]
-              }],
+              'children': [
+                {
+                  'element': 'div',
+                  'component': null,
+                  'directives': [{'name': '_TooltipDirective', 'id': 14}],
+                  'children': [],
+                  'resolutionPath': [
+                    {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
+                    {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
+                    {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                    {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                    {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                    {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                    {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                    {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                    {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                    {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
+                },
+              ],
               'resolutionPath': [
                 {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
                 {'id': '20', 'type': 'element', 'name': '_NgForOf'},
@@ -1296,37 +1321,39 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                 {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                 {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                 {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-              ]
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
             },
             {
               'element': 'app-todo',
               'component': {'name': 'app-todo', 'isElement': false, 'id': 15},
               'directives': [{'name': '_TooltipDirective', 'id': 16}],
-              'children': [{
-                'element': 'div',
-                'component': null,
-                'directives': [{'name': '_TooltipDirective', 'id': 17}],
-                'children': [],
-                'resolutionPath': [
-                  {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
-                  {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
-                  {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                  {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                  {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                  {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                  {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                  {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                  {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                  {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                  {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                  {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                  {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                  {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                  {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                  {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                ]
-              }],
+              'children': [
+                {
+                  'element': 'div',
+                  'component': null,
+                  'directives': [{'name': '_TooltipDirective', 'id': 17}],
+                  'children': [],
+                  'resolutionPath': [
+                    {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
+                    {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
+                    {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                    {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                    {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                    {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                    {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                    {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                    {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                    {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
+                },
+              ],
               'resolutionPath': [
                 {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
                 {'id': '20', 'type': 'element', 'name': '_NgForOf'},
@@ -1342,8 +1369,8 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                 {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                 {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                 {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-              ]
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
             },
             {
               'element': '#comment',
@@ -1364,9 +1391,9 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                 {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                 {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                 {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-              ]
-            }
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
+            },
           ],
           'resolutionPath': [
             {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
@@ -1381,15 +1408,15 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
             {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-            {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-          ]
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
         },
         'path': [
           {'id': '1', 'type': 'element', 'name': '_AppComponent'},
           {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
           {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-          {'id': '14', 'type': 'element', 'name': '_TodosComponent'}
-        ]
+          {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+        ],
       },
       {
         'node': {
@@ -1411,15 +1438,15 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
             {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-            {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-          ]
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
         },
         'path': [
           {'id': '1', 'type': 'element', 'name': '_AppComponent'},
           {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
           {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-          {'id': '14', 'type': 'element', 'name': '_TodosComponent'}
-        ]
+          {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+        ],
       },
       {
         'node': {
@@ -1441,15 +1468,15 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
             {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-            {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-          ]
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
         },
         'path': [
           {'id': '1', 'type': 'element', 'name': '_AppComponent'},
           {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
           {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-          {'id': '14', 'type': 'element', 'name': '_TodosComponent'}
-        ]
+          {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+        ],
       },
       {
         'node': {
@@ -1471,45 +1498,47 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
             {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-            {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-          ]
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
         },
         'path': [
           {'id': '1', 'type': 'element', 'name': '_AppComponent'},
           {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
           {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-          {'id': '14', 'type': 'element', 'name': '_TodosComponent'}
-        ]
+          {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+        ],
       },
       {
         'node': {
           'element': 'app-todo',
           'component': {'name': 'app-todo', 'isElement': false, 'id': 12},
           'directives': [{'name': '_TooltipDirective', 'id': 13}],
-          'children': [{
-            'element': 'div',
-            'component': null,
-            'directives': [{'name': '_TooltipDirective', 'id': 14}],
-            'children': [],
-            'resolutionPath': [
-              {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
-              {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
-              {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-              {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-              {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-              {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-              {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-              {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-              {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-              {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-              {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-              {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-              {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-              {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-              {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-              {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-            ]
-          }],
+          'children': [
+            {
+              'element': 'div',
+              'component': null,
+              'directives': [{'name': '_TooltipDirective', 'id': 14}],
+              'children': [],
+              'resolutionPath': [
+                {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
+                {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
+                {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
+            },
+          ],
           'resolutionPath': [
             {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
             {'id': '20', 'type': 'element', 'name': '_NgForOf'},
@@ -1525,16 +1554,16 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
             {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-            {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-          ]
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
         },
         'path': [
           {'id': '1', 'type': 'element', 'name': '_AppComponent'},
           {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
           {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
           {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-          {'id': '19', 'type': 'element', 'name': '_TodoComponent'}
-        ]
+          {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
+        ],
       },
       {
         'node': {
@@ -1558,8 +1587,8 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
             {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-            {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-          ]
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
         },
         'path': [
           {'id': '1', 'type': 'element', 'name': '_AppComponent'},
@@ -1567,38 +1596,40 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
           {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
           {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
           {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
-          {'id': '18', 'type': 'element', 'name': '_TooltipDirective'}
-        ]
+          {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
+        ],
       },
       {
         'node': {
           'element': 'app-todo',
           'component': {'name': 'app-todo', 'isElement': false, 'id': 15},
           'directives': [{'name': '_TooltipDirective', 'id': 16}],
-          'children': [{
-            'element': 'div',
-            'component': null,
-            'directives': [{'name': '_TooltipDirective', 'id': 17}],
-            'children': [],
-            'resolutionPath': [
-              {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
-              {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
-              {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-              {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-              {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-              {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-              {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-              {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-              {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-              {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-              {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-              {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-              {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-              {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-              {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-              {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-            ]
-          }],
+          'children': [
+            {
+              'element': 'div',
+              'component': null,
+              'directives': [{'name': '_TooltipDirective', 'id': 17}],
+              'children': [],
+              'resolutionPath': [
+                {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
+                {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
+                {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
+            },
+          ],
           'resolutionPath': [
             {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
             {'id': '20', 'type': 'element', 'name': '_NgForOf'},
@@ -1614,16 +1645,16 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
             {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-            {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-          ]
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
         },
         'path': [
           {'id': '1', 'type': 'element', 'name': '_AppComponent'},
           {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
           {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
           {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-          {'id': '22', 'type': 'element', 'name': '_TodoComponent'}
-        ]
+          {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
+        ],
       },
       {
         'node': {
@@ -1647,8 +1678,8 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
             {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-            {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-          ]
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
         },
         'path': [
           {'id': '1', 'type': 'element', 'name': '_AppComponent'},
@@ -1656,8 +1687,8 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
           {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
           {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
           {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
-          {'id': '21', 'type': 'element', 'name': '_TooltipDirective'}
-        ]
+          {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
+        ],
       },
       {
         'node': {
@@ -1679,15 +1710,15 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
             {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-            {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-          ]
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
         },
         'path': [
           {'id': '1', 'type': 'element', 'name': '_AppComponent'},
           {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
           {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-          {'id': '14', 'type': 'element', 'name': '_TodosComponent'}
-        ]
+          {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+        ],
       },
       {
         'node': {
@@ -1703,201 +1734,1621 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
             {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-            {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-          ]
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
         },
         'path': [
           {'id': '1', 'type': 'element', 'name': '_AppComponent'},
           {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-          {'id': '24', 'type': 'element', 'name': '_HeavyComponent'}
-        ]
-      }
+          {'id': '24', 'type': 'element', 'name': '_HeavyComponent'},
+        ],
+      },
     ];
 
     const expected: InjectorTreeNode = {
       'injector': {'name': '', 'type': 'hidden', 'id': 'N/A'},
-      'children': [{
-        'injector': {
-          'id': '1',
-          'type': 'element',
-          'name': '_AppComponent',
-          'node': {
-            'element': 'app-root',
-            'component': {'name': 'app-root', 'isElement': false, 'id': 0},
-            'directives': [],
-            'children': [
-              {
-                'element': 'router-outlet',
-                'component': null,
-                'directives': [{'name': '_RouterOutlet', 'id': 1}],
-                'children': [],
-                'resolutionPath': [
-                  {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                  {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                  {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                  {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                  {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                ]
+      'children': [
+        {
+          'injector': {
+            'id': '1',
+            'type': 'element',
+            'name': '_AppComponent',
+            'node': {
+              'element': 'app-root',
+              'component': {'name': 'app-root', 'isElement': false, 'id': 0},
+              'directives': [],
+              'children': [
+                {
+                  'element': 'router-outlet',
+                  'component': null,
+                  'directives': [{'name': '_RouterOutlet', 'id': 1}],
+                  'children': [],
+                  'resolutionPath': [
+                    {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                    {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
+                },
+                {
+                  'element': 'app-demo-component',
+                  'component': {'name': 'app-demo-component', 'isElement': false, 'id': 2},
+                  'directives': [],
+                  'children': [
+                    {
+                      'element': 'router-outlet',
+                      'component': null,
+                      'directives': [{'name': '_RouterOutlet', 'id': 3}],
+                      'children': [],
+                      'resolutionPath': [
+                        {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                        {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                        {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                        {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                        {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                      ],
+                    },
+                    {
+                      'element': 'app-todo-demo',
+                      'component': {'name': 'app-todo-demo', 'isElement': false, 'id': 4},
+                      'directives': [],
+                      'children': [
+                        {
+                          'element': 'a',
+                          'component': null,
+                          'directives': [{'name': '_RouterLink', 'id': 5}],
+                          'children': [],
+                          'resolutionPath': [
+                            {'id': '8', 'type': 'element', 'name': '_RouterLink'},
+                            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                          ],
+                        },
+                        {
+                          'element': 'a',
+                          'component': null,
+                          'directives': [{'name': '_RouterLink', 'id': 6}],
+                          'children': [],
+                          'resolutionPath': [
+                            {'id': '11', 'type': 'element', 'name': '_RouterLink'},
+                            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                          ],
+                        },
+                        {
+                          'element': 'router-outlet',
+                          'component': null,
+                          'directives': [{'name': '_RouterOutlet', 'id': 7}],
+                          'children': [],
+                          'resolutionPath': [
+                            {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                          ],
+                        },
+                        {
+                          'element': 'app-todos',
+                          'component': {'name': 'app-todos', 'isElement': false, 'id': 8},
+                          'directives': [],
+                          'children': [
+                            {
+                              'element': 'a',
+                              'component': null,
+                              'directives': [{'name': '_RouterLink', 'id': 9}],
+                              'children': [],
+                              'resolutionPath': [
+                                {'id': '13', 'type': 'element', 'name': '_RouterLink'},
+                                {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                                {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                                {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                              ],
+                            },
+                            {
+                              'element': 'a',
+                              'component': null,
+                              'directives': [{'name': '_RouterLink', 'id': 10}],
+                              'children': [],
+                              'resolutionPath': [
+                                {'id': '16', 'type': 'element', 'name': '_RouterLink'},
+                                {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                                {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                                {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                              ],
+                            },
+                            {
+                              'element': 'a',
+                              'component': null,
+                              'directives': [{'name': '_RouterLink', 'id': 11}],
+                              'children': [],
+                              'resolutionPath': [
+                                {'id': '17', 'type': 'element', 'name': '_RouterLink'},
+                                {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                                {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                                {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                              ],
+                            },
+                            {
+                              'element': 'app-todo',
+                              'component': {'name': 'app-todo', 'isElement': false, 'id': 12},
+                              'directives': [{'name': '_TooltipDirective', 'id': 13}],
+                              'children': [
+                                {
+                                  'element': 'div',
+                                  'component': null,
+                                  'directives': [{'name': '_TooltipDirective', 'id': 14}],
+                                  'children': [],
+                                  'resolutionPath': [
+                                    {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
+                                    {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
+                                    {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                                    {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                                    {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                                    {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                                    {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                                    {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                                    {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                                    {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                                    {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                                    {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                                    {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                                    {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                                    {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                                  ],
+                                },
+                              ],
+                              'resolutionPath': [
+                                {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
+                                {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                                {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                                {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                                {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                              ],
+                            },
+                            {
+                              'element': 'app-todo',
+                              'component': {'name': 'app-todo', 'isElement': false, 'id': 15},
+                              'directives': [{'name': '_TooltipDirective', 'id': 16}],
+                              'children': [
+                                {
+                                  'element': 'div',
+                                  'component': null,
+                                  'directives': [{'name': '_TooltipDirective', 'id': 17}],
+                                  'children': [],
+                                  'resolutionPath': [
+                                    {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
+                                    {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
+                                    {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                                    {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                                    {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                                    {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                                    {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                                    {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                                    {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                                    {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                                    {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                                    {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                                    {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                                    {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                                    {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                                  ],
+                                },
+                              ],
+                              'resolutionPath': [
+                                {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
+                                {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                                {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                                {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                                {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                              ],
+                            },
+                            {
+                              'element': '#comment',
+                              'component': null,
+                              'directives': [{'name': '_NgForOf', 'id': 18}],
+                              'children': [],
+                              'resolutionPath': [
+                                {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                                {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                                {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                                {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                              ],
+                            },
+                          ],
+                          'resolutionPath': [
+                            {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                            {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                            {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                          ],
+                        },
+                      ],
+                      'resolutionPath': [
+                        {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                        {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                        {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                        {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                        {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                        {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                      ],
+                    },
+                    {
+                      'element': 'app-heavy',
+                      'component': {'name': 'app-heavy', 'isElement': false, 'id': 20},
+                      'directives': [],
+                      'children': [],
+                      'resolutionPath': [
+                        {'id': '24', 'type': 'element', 'name': '_HeavyComponent'},
+                        {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                        {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                        {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                        {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                        {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                      ],
+                    },
+                  ],
+                  'resolutionPath': [
+                    {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                    {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                    {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                    {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
+                },
+              ],
+              'resolutionPath': [
+                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
+            },
+          },
+          'children': [
+            {
+              'injector': {
+                'id': '6',
+                'type': 'element',
+                'name': '_DemoAppComponent',
+                'node': {
+                  'element': 'app-demo-component',
+                  'component': {'name': 'app-demo-component', 'isElement': false, 'id': 2},
+                  'directives': [],
+                  'children': [
+                    {
+                      'element': 'router-outlet',
+                      'component': null,
+                      'directives': [{'name': '_RouterOutlet', 'id': 3}],
+                      'children': [],
+                      'resolutionPath': [
+                        {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                        {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                        {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                        {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                        {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                      ],
+                    },
+                    {
+                      'element': 'app-todo-demo',
+                      'component': {'name': 'app-todo-demo', 'isElement': false, 'id': 4},
+                      'directives': [],
+                      'children': [
+                        {
+                          'element': 'a',
+                          'component': null,
+                          'directives': [{'name': '_RouterLink', 'id': 5}],
+                          'children': [],
+                          'resolutionPath': [
+                            {'id': '8', 'type': 'element', 'name': '_RouterLink'},
+                            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                          ],
+                        },
+                        {
+                          'element': 'a',
+                          'component': null,
+                          'directives': [{'name': '_RouterLink', 'id': 6}],
+                          'children': [],
+                          'resolutionPath': [
+                            {'id': '11', 'type': 'element', 'name': '_RouterLink'},
+                            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                          ],
+                        },
+                        {
+                          'element': 'router-outlet',
+                          'component': null,
+                          'directives': [{'name': '_RouterOutlet', 'id': 7}],
+                          'children': [],
+                          'resolutionPath': [
+                            {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                          ],
+                        },
+                        {
+                          'element': 'app-todos',
+                          'component': {'name': 'app-todos', 'isElement': false, 'id': 8},
+                          'directives': [],
+                          'children': [
+                            {
+                              'element': 'a',
+                              'component': null,
+                              'directives': [{'name': '_RouterLink', 'id': 9}],
+                              'children': [],
+                              'resolutionPath': [
+                                {'id': '13', 'type': 'element', 'name': '_RouterLink'},
+                                {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                                {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                                {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                              ],
+                            },
+                            {
+                              'element': 'a',
+                              'component': null,
+                              'directives': [{'name': '_RouterLink', 'id': 10}],
+                              'children': [],
+                              'resolutionPath': [
+                                {'id': '16', 'type': 'element', 'name': '_RouterLink'},
+                                {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                                {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                                {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                              ],
+                            },
+                            {
+                              'element': 'a',
+                              'component': null,
+                              'directives': [{'name': '_RouterLink', 'id': 11}],
+                              'children': [],
+                              'resolutionPath': [
+                                {'id': '17', 'type': 'element', 'name': '_RouterLink'},
+                                {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                                {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                                {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                              ],
+                            },
+                            {
+                              'element': 'app-todo',
+                              'component': {'name': 'app-todo', 'isElement': false, 'id': 12},
+                              'directives': [{'name': '_TooltipDirective', 'id': 13}],
+                              'children': [
+                                {
+                                  'element': 'div',
+                                  'component': null,
+                                  'directives': [{'name': '_TooltipDirective', 'id': 14}],
+                                  'children': [],
+                                  'resolutionPath': [
+                                    {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
+                                    {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
+                                    {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                                    {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                                    {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                                    {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                                    {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                                    {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                                    {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                                    {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                                    {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                                    {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                                    {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                                    {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                                    {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                                  ],
+                                },
+                              ],
+                              'resolutionPath': [
+                                {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
+                                {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                                {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                                {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                                {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                              ],
+                            },
+                            {
+                              'element': 'app-todo',
+                              'component': {'name': 'app-todo', 'isElement': false, 'id': 15},
+                              'directives': [{'name': '_TooltipDirective', 'id': 16}],
+                              'children': [
+                                {
+                                  'element': 'div',
+                                  'component': null,
+                                  'directives': [{'name': '_TooltipDirective', 'id': 17}],
+                                  'children': [],
+                                  'resolutionPath': [
+                                    {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
+                                    {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
+                                    {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                                    {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                                    {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                                    {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                                    {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                                    {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                                    {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                                    {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                                    {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                                    {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                                    {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                                    {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                                    {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                                  ],
+                                },
+                              ],
+                              'resolutionPath': [
+                                {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
+                                {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                                {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                                {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                                {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                              ],
+                            },
+                            {
+                              'element': '#comment',
+                              'component': null,
+                              'directives': [{'name': '_NgForOf', 'id': 18}],
+                              'children': [],
+                              'resolutionPath': [
+                                {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                                {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                                {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                                {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                              ],
+                            },
+                          ],
+                          'resolutionPath': [
+                            {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                            {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                            {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                          ],
+                        },
+                      ],
+                      'resolutionPath': [
+                        {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                        {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                        {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                        {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                        {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                        {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                      ],
+                    },
+                    {
+                      'element': 'app-heavy',
+                      'component': {'name': 'app-heavy', 'isElement': false, 'id': 20},
+                      'directives': [],
+                      'children': [],
+                      'resolutionPath': [
+                        {'id': '24', 'type': 'element', 'name': '_HeavyComponent'},
+                        {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                        {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                        {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                        {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                        {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                      ],
+                    },
+                  ],
+                  'resolutionPath': [
+                    {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                    {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                    {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                    {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
+                },
               },
-              {
-                'element': 'app-demo-component',
-                'component': {'name': 'app-demo-component', 'isElement': false, 'id': 2},
-                'directives': [],
-                'children': [
-                  {
-                    'element': 'router-outlet',
-                    'component': null,
-                    'directives': [{'name': '_RouterOutlet', 'id': 3}],
-                    'children': [],
-                    'resolutionPath': [
-                      {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                      {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                      {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                      {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                      {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                      {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                      {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                      {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                    ]
+              'children': [
+                {
+                  'injector': {
+                    'id': '9',
+                    'type': 'element',
+                    'name': '_AppTodoComponent',
+                    'node': {
+                      'element': 'app-todo-demo',
+                      'component': {'name': 'app-todo-demo', 'isElement': false, 'id': 4},
+                      'directives': [],
+                      'children': [
+                        {
+                          'element': 'a',
+                          'component': null,
+                          'directives': [{'name': '_RouterLink', 'id': 5}],
+                          'children': [],
+                          'resolutionPath': [
+                            {'id': '8', 'type': 'element', 'name': '_RouterLink'},
+                            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                          ],
+                        },
+                        {
+                          'element': 'a',
+                          'component': null,
+                          'directives': [{'name': '_RouterLink', 'id': 6}],
+                          'children': [],
+                          'resolutionPath': [
+                            {'id': '11', 'type': 'element', 'name': '_RouterLink'},
+                            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                          ],
+                        },
+                        {
+                          'element': 'router-outlet',
+                          'component': null,
+                          'directives': [{'name': '_RouterOutlet', 'id': 7}],
+                          'children': [],
+                          'resolutionPath': [
+                            {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                          ],
+                        },
+                        {
+                          'element': 'app-todos',
+                          'component': {'name': 'app-todos', 'isElement': false, 'id': 8},
+                          'directives': [],
+                          'children': [
+                            {
+                              'element': 'a',
+                              'component': null,
+                              'directives': [{'name': '_RouterLink', 'id': 9}],
+                              'children': [],
+                              'resolutionPath': [
+                                {'id': '13', 'type': 'element', 'name': '_RouterLink'},
+                                {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                                {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                                {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                              ],
+                            },
+                            {
+                              'element': 'a',
+                              'component': null,
+                              'directives': [{'name': '_RouterLink', 'id': 10}],
+                              'children': [],
+                              'resolutionPath': [
+                                {'id': '16', 'type': 'element', 'name': '_RouterLink'},
+                                {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                                {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                                {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                              ],
+                            },
+                            {
+                              'element': 'a',
+                              'component': null,
+                              'directives': [{'name': '_RouterLink', 'id': 11}],
+                              'children': [],
+                              'resolutionPath': [
+                                {'id': '17', 'type': 'element', 'name': '_RouterLink'},
+                                {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                                {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                                {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                              ],
+                            },
+                            {
+                              'element': 'app-todo',
+                              'component': {'name': 'app-todo', 'isElement': false, 'id': 12},
+                              'directives': [{'name': '_TooltipDirective', 'id': 13}],
+                              'children': [
+                                {
+                                  'element': 'div',
+                                  'component': null,
+                                  'directives': [{'name': '_TooltipDirective', 'id': 14}],
+                                  'children': [],
+                                  'resolutionPath': [
+                                    {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
+                                    {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
+                                    {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                                    {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                                    {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                                    {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                                    {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                                    {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                                    {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                                    {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                                    {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                                    {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                                    {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                                    {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                                    {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                                  ],
+                                },
+                              ],
+                              'resolutionPath': [
+                                {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
+                                {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                                {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                                {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                                {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                              ],
+                            },
+                            {
+                              'element': 'app-todo',
+                              'component': {'name': 'app-todo', 'isElement': false, 'id': 15},
+                              'directives': [{'name': '_TooltipDirective', 'id': 16}],
+                              'children': [
+                                {
+                                  'element': 'div',
+                                  'component': null,
+                                  'directives': [{'name': '_TooltipDirective', 'id': 17}],
+                                  'children': [],
+                                  'resolutionPath': [
+                                    {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
+                                    {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
+                                    {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                                    {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                                    {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                                    {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                                    {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                                    {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                                    {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                                    {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                                    {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                                    {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                                    {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                                    {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                                    {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                                  ],
+                                },
+                              ],
+                              'resolutionPath': [
+                                {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
+                                {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                                {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                                {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                                {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                              ],
+                            },
+                            {
+                              'element': '#comment',
+                              'component': null,
+                              'directives': [{'name': '_NgForOf', 'id': 18}],
+                              'children': [],
+                              'resolutionPath': [
+                                {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                                {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                                {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                                {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                              ],
+                            },
+                          ],
+                          'resolutionPath': [
+                            {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                            {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                            {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                          ],
+                        },
+                      ],
+                      'resolutionPath': [
+                        {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                        {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                        {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                        {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                        {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                        {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                      ],
+                    },
                   },
-                  {
-                    'element': 'app-todo-demo',
-                    'component': {'name': 'app-todo-demo', 'isElement': false, 'id': 4},
-                    'directives': [],
-                    'children': [
-                      {
-                        'element': 'a',
-                        'component': null,
-                        'directives': [{'name': '_RouterLink', 'id': 5}],
-                        'children': [],
-                        'resolutionPath': [
-                          {'id': '8', 'type': 'element', 'name': '_RouterLink'},
-                          {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                          {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                          {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                          {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                          {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                          {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                          {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                          {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                          {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                          {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                        ]
+                  'children': [
+                    {
+                      'injector': {
+                        'id': '14',
+                        'type': 'element',
+                        'name': '_TodosComponent',
+                        'node': {
+                          'element': 'app-todos',
+                          'component': {'name': 'app-todos', 'isElement': false, 'id': 8},
+                          'directives': [],
+                          'children': [
+                            {
+                              'element': 'a',
+                              'component': null,
+                              'directives': [{'name': '_RouterLink', 'id': 9}],
+                              'children': [],
+                              'resolutionPath': [
+                                {'id': '13', 'type': 'element', 'name': '_RouterLink'},
+                                {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                                {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                                {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                              ],
+                            },
+                            {
+                              'element': 'a',
+                              'component': null,
+                              'directives': [{'name': '_RouterLink', 'id': 10}],
+                              'children': [],
+                              'resolutionPath': [
+                                {'id': '16', 'type': 'element', 'name': '_RouterLink'},
+                                {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                                {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                                {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                              ],
+                            },
+                            {
+                              'element': 'a',
+                              'component': null,
+                              'directives': [{'name': '_RouterLink', 'id': 11}],
+                              'children': [],
+                              'resolutionPath': [
+                                {'id': '17', 'type': 'element', 'name': '_RouterLink'},
+                                {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                                {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                                {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                              ],
+                            },
+                            {
+                              'element': 'app-todo',
+                              'component': {'name': 'app-todo', 'isElement': false, 'id': 12},
+                              'directives': [{'name': '_TooltipDirective', 'id': 13}],
+                              'children': [
+                                {
+                                  'element': 'div',
+                                  'component': null,
+                                  'directives': [{'name': '_TooltipDirective', 'id': 14}],
+                                  'children': [],
+                                  'resolutionPath': [
+                                    {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
+                                    {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
+                                    {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                                    {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                                    {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                                    {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                                    {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                                    {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                                    {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                                    {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                                    {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                                    {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                                    {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                                    {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                                    {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                                  ],
+                                },
+                              ],
+                              'resolutionPath': [
+                                {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
+                                {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                                {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                                {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                                {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                              ],
+                            },
+                            {
+                              'element': 'app-todo',
+                              'component': {'name': 'app-todo', 'isElement': false, 'id': 15},
+                              'directives': [{'name': '_TooltipDirective', 'id': 16}],
+                              'children': [
+                                {
+                                  'element': 'div',
+                                  'component': null,
+                                  'directives': [{'name': '_TooltipDirective', 'id': 17}],
+                                  'children': [],
+                                  'resolutionPath': [
+                                    {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
+                                    {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
+                                    {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                                    {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                                    {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                                    {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                                    {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                                    {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                                    {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                                    {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                                    {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                                    {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                                    {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                                    {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                                    {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                                  ],
+                                },
+                              ],
+                              'resolutionPath': [
+                                {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
+                                {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                                {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                                {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                                {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                              ],
+                            },
+                            {
+                              'element': '#comment',
+                              'component': null,
+                              'directives': [{'name': '_NgForOf', 'id': 18}],
+                              'children': [],
+                              'resolutionPath': [
+                                {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                                {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                                {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                                {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                              ],
+                            },
+                          ],
+                          'resolutionPath': [
+                            {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                            {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                            {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                          ],
+                        },
                       },
-                      {
-                        'element': 'a',
-                        'component': null,
-                        'directives': [{'name': '_RouterLink', 'id': 6}],
-                        'children': [],
-                        'resolutionPath': [
-                          {'id': '11', 'type': 'element', 'name': '_RouterLink'},
-                          {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                          {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                          {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                          {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                          {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                          {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                          {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                          {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                          {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                          {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                        ]
-                      },
-                      {
-                        'element': 'router-outlet',
-                        'component': null,
-                        'directives': [{'name': '_RouterOutlet', 'id': 7}],
-                        'children': [],
-                        'resolutionPath': [
-                          {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                          {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                          {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                          {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                          {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                          {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                          {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                          {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                          {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                          {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                          {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                        ]
-                      },
-                      {
-                        'element': 'app-todos',
-                        'component': {'name': 'app-todos', 'isElement': false, 'id': 8},
-                        'directives': [],
-                        'children': [
-                          {
-                            'element': 'a',
-                            'component': null,
-                            'directives': [{'name': '_RouterLink', 'id': 9}],
-                            'children': [],
-                            'resolutionPath': [
-                              {'id': '13', 'type': 'element', 'name': '_RouterLink'},
-                              {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                              {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                              {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                              {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                              {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                              {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                              {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                              {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                              {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                              {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                              {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                              {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                              {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                            ]
+                      'children': [
+                        {
+                          'injector': {
+                            'id': '19',
+                            'type': 'element',
+                            'name': '_TodoComponent',
+                            'node': {
+                              'element': 'app-todo',
+                              'component': {'name': 'app-todo', 'isElement': false, 'id': 12},
+                              'directives': [{'name': '_TooltipDirective', 'id': 13}],
+                              'children': [
+                                {
+                                  'element': 'div',
+                                  'component': null,
+                                  'directives': [{'name': '_TooltipDirective', 'id': 14}],
+                                  'children': [],
+                                  'resolutionPath': [
+                                    {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
+                                    {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
+                                    {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                                    {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                                    {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                                    {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                                    {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                                    {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                                    {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                                    {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                                    {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                                    {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                                    {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                                    {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                                    {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                                  ],
+                                },
+                              ],
+                              'resolutionPath': [
+                                {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
+                                {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                                {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                                {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                                {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                              ],
+                            },
                           },
-                          {
-                            'element': 'a',
-                            'component': null,
-                            'directives': [{'name': '_RouterLink', 'id': 10}],
-                            'children': [],
-                            'resolutionPath': [
-                              {'id': '16', 'type': 'element', 'name': '_RouterLink'},
-                              {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                              {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                              {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                              {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                              {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                              {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                              {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                              {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                              {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                              {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                              {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                              {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                              {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                            ]
+                          'children': [
+                            {
+                              'injector': {
+                                'id': '18',
+                                'type': 'element',
+                                'name': '_TooltipDirective',
+                                'node': {
+                                  'element': 'div',
+                                  'component': null,
+                                  'directives': [{'name': '_TooltipDirective', 'id': 14}],
+                                  'children': [],
+                                  'resolutionPath': [
+                                    {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
+                                    {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
+                                    {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                                    {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                                    {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                                    {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                                    {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                                    {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                                    {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                                    {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                                    {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                                    {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                                    {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                                    {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                                    {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                                  ],
+                                },
+                              },
+                              'children': [],
+                            },
+                          ],
+                        },
+                        {
+                          'injector': {
+                            'id': '22',
+                            'type': 'element',
+                            'name': '_TodoComponent',
+                            'node': {
+                              'element': 'app-todo',
+                              'component': {'name': 'app-todo', 'isElement': false, 'id': 15},
+                              'directives': [{'name': '_TooltipDirective', 'id': 16}],
+                              'children': [
+                                {
+                                  'element': 'div',
+                                  'component': null,
+                                  'directives': [{'name': '_TooltipDirective', 'id': 17}],
+                                  'children': [],
+                                  'resolutionPath': [
+                                    {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
+                                    {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
+                                    {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                                    {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                                    {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                                    {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                                    {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                                    {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                                    {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                                    {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                                    {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                                    {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                                    {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                                    {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                                    {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                                  ],
+                                },
+                              ],
+                              'resolutionPath': [
+                                {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
+                                {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                                {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                                {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                                {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                              ],
+                            },
                           },
-                          {
-                            'element': 'a',
-                            'component': null,
-                            'directives': [{'name': '_RouterLink', 'id': 11}],
-                            'children': [],
-                            'resolutionPath': [
-                              {'id': '17', 'type': 'element', 'name': '_RouterLink'},
-                              {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                              {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                              {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                              {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                              {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                              {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                              {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                              {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                              {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                              {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                              {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                              {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                              {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                            ]
-                          },
-                          {
-                            'element': 'app-todo',
-                            'component': {'name': 'app-todo', 'isElement': false, 'id': 12},
-                            'directives': [{'name': '_TooltipDirective', 'id': 13}],
-                            'children': [{
+                          'children': [
+                            {
+                              'injector': {
+                                'id': '21',
+                                'type': 'element',
+                                'name': '_TooltipDirective',
+                                'node': {
+                                  'element': 'div',
+                                  'component': null,
+                                  'directives': [{'name': '_TooltipDirective', 'id': 17}],
+                                  'children': [],
+                                  'resolutionPath': [
+                                    {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
+                                    {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
+                                    {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                                    {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                                    {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                                    {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                                    {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                                    {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                                    {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                                    {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                                    {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                                    {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                                    {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                                    {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                                    {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                                  ],
+                                },
+                              },
+                              'children': [],
+                            },
+                          ],
+                        },
+                      ],
+                    },
+                  ],
+                },
+                {
+                  'injector': {
+                    'id': '24',
+                    'type': 'element',
+                    'name': '_HeavyComponent',
+                    'node': {
+                      'element': 'app-heavy',
+                      'component': {'name': 'app-heavy', 'isElement': false, 'id': 20},
+                      'directives': [],
+                      'children': [],
+                      'resolutionPath': [
+                        {'id': '24', 'type': 'element', 'name': '_HeavyComponent'},
+                        {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                        {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                        {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                        {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                        {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                      ],
+                    },
+                  },
+                  'children': [],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    };
+
+    expect(transformInjectorResolutionPathsIntoTree(injectorPaths)).toEqual(expected);
+  });
+});
+
+describe('splitInjectorPathsIntoElementAndEnvironmentPaths', () => {
+  it("should be able to split injector paths into element and environment paths, and expose the mapping from each element to it's environment path", () => {
+    const injectorPaths = [
+      {
+        'node': {
+          'element': 'app-root',
+          'component': {'name': 'app-root', 'isElement': false, 'id': 0},
+          'directives': [],
+          'children': [
+            {
+              'element': 'router-outlet',
+              'component': null,
+              'directives': [{'name': '_RouterOutlet', 'id': 1}],
+              'children': [],
+              'resolutionPath': [
+                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
+            },
+            {
+              'element': 'app-demo-component',
+              'component': {'name': 'app-demo-component', 'isElement': false, 'id': 2},
+              'directives': [],
+              'children': [
+                {
+                  'element': 'router-outlet',
+                  'component': null,
+                  'directives': [{'name': '_RouterOutlet', 'id': 3}],
+                  'children': [],
+                  'resolutionPath': [
+                    {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                    {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                    {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                    {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
+                },
+                {
+                  'element': 'app-todo-demo',
+                  'component': {'name': 'app-todo-demo', 'isElement': false, 'id': 4},
+                  'directives': [],
+                  'children': [
+                    {
+                      'element': 'a',
+                      'component': null,
+                      'directives': [{'name': '_RouterLink', 'id': 5}],
+                      'children': [],
+                      'resolutionPath': [
+                        {'id': '8', 'type': 'element', 'name': '_RouterLink'},
+                        {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                        {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                        {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                        {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                        {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                        {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                      ],
+                    },
+                    {
+                      'element': 'a',
+                      'component': null,
+                      'directives': [{'name': '_RouterLink', 'id': 6}],
+                      'children': [],
+                      'resolutionPath': [
+                        {'id': '11', 'type': 'element', 'name': '_RouterLink'},
+                        {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                        {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                        {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                        {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                        {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                        {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                      ],
+                    },
+                    {
+                      'element': 'router-outlet',
+                      'component': null,
+                      'directives': [{'name': '_RouterOutlet', 'id': 7}],
+                      'children': [],
+                      'resolutionPath': [
+                        {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                        {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                        {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                        {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                        {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                        {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                      ],
+                    },
+                    {
+                      'element': 'app-todos',
+                      'component': {'name': 'app-todos', 'isElement': false, 'id': 8},
+                      'directives': [],
+                      'children': [
+                        {
+                          'element': 'a',
+                          'component': null,
+                          'directives': [{'name': '_RouterLink', 'id': 9}],
+                          'children': [],
+                          'resolutionPath': [
+                            {'id': '13', 'type': 'element', 'name': '_RouterLink'},
+                            {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                            {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                            {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                          ],
+                        },
+                        {
+                          'element': 'a',
+                          'component': null,
+                          'directives': [{'name': '_RouterLink', 'id': 10}],
+                          'children': [],
+                          'resolutionPath': [
+                            {'id': '16', 'type': 'element', 'name': '_RouterLink'},
+                            {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                            {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                            {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                          ],
+                        },
+                        {
+                          'element': 'a',
+                          'component': null,
+                          'directives': [{'name': '_RouterLink', 'id': 11}],
+                          'children': [],
+                          'resolutionPath': [
+                            {'id': '17', 'type': 'element', 'name': '_RouterLink'},
+                            {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                            {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                            {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                          ],
+                        },
+                        {
+                          'element': 'app-todo',
+                          'component': {'name': 'app-todo', 'isElement': false, 'id': 12},
+                          'directives': [{'name': '_TooltipDirective', 'id': 13}],
+                          'children': [
+                            {
                               'element': 'div',
                               'component': null,
                               'directives': [{'name': '_TooltipDirective', 'id': 14}],
@@ -1918,32 +3369,34 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                                 {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                                 {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                                 {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                                {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                              ]
-                            }],
-                            'resolutionPath': [
-                              {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
-                              {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                              {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                              {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                              {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                              {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                              {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                              {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                              {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                              {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                              {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                              {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                              {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                              {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                              {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                            ]
-                          },
-                          {
-                            'element': 'app-todo',
-                            'component': {'name': 'app-todo', 'isElement': false, 'id': 15},
-                            'directives': [{'name': '_TooltipDirective', 'id': 16}],
-                            'children': [{
+                                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                              ],
+                            },
+                          ],
+                          'resolutionPath': [
+                            {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
+                            {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                            {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                            {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                            {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                          ],
+                        },
+                        {
+                          'element': 'app-todo',
+                          'component': {'name': 'app-todo', 'isElement': false, 'id': 15},
+                          'directives': [{'name': '_TooltipDirective', 'id': 16}],
+                          'children': [
+                            {
                               'element': 'div',
                               'component': null,
                               'directives': [{'name': '_TooltipDirective', 'id': 17}],
@@ -1964,122 +3417,1527 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                                 {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                                 {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                                 {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                                {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                              ]
-                            }],
-                            'resolutionPath': [
-                              {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
-                              {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                              {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                              {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                              {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                              {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                              {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                              {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                              {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                              {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                              {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                              {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                              {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                              {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                              {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                            ]
-                          },
-                          {
-                            'element': '#comment',
-                            'component': null,
-                            'directives': [{'name': '_NgForOf', 'id': 18}],
-                            'children': [],
-                            'resolutionPath': [
-                              {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                              {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                              {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                              {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                              {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                              {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                              {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                              {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                              {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                              {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                              {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                              {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                              {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                              {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                            ]
-                          }
-                        ],
-                        'resolutionPath': [
-                          {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                          {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                          {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                          {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                          {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                          {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                          {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                          {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                          {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                          {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                          {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                          {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                          {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                        ]
-                      }
-                    ],
-                    'resolutionPath': [
-                      {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                      {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                      {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                      {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                      {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                      {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                      {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                      {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                      {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                      {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                    ]
-                  },
-                  {
-                    'element': 'app-heavy',
-                    'component': {'name': 'app-heavy', 'isElement': false, 'id': 20},
-                    'directives': [],
-                    'children': [],
-                    'resolutionPath': [
-                      {'id': '24', 'type': 'element', 'name': '_HeavyComponent'},
-                      {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                      {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                      {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                      {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                      {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                      {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                      {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                    ]
-                  }
-                ],
-                'resolutionPath': [
-                  {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                  {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                  {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                  {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                  {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                  {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                  {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                ]
-              }
-            ],
-            'resolutionPath': [
-              {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-              {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-              {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-              {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-            ]
-          }
+                                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                              ],
+                            },
+                          ],
+                          'resolutionPath': [
+                            {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
+                            {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                            {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                            {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                            {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                          ],
+                        },
+                        {
+                          'element': '#comment',
+                          'component': null,
+                          'directives': [{'name': '_NgForOf', 'id': 18}],
+                          'children': [],
+                          'resolutionPath': [
+                            {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                            {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                            {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                            {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                          ],
+                        },
+                      ],
+                      'resolutionPath': [
+                        {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                        {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                        {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                        {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                        {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                        {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                        {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                        {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                      ],
+                    },
+                  ],
+                  'resolutionPath': [
+                    {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                    {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                    {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                    {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                    {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
+                },
+                {
+                  'element': 'app-zippy',
+                  'component': {'name': 'app-zippy', 'isElement': true, 'id': 19},
+                  'directives': [],
+                  'children': [],
+                  'resolutionPath': [
+                    {'id': '23', 'type': 'element', 'name': '_ZippyComponent'},
+                    {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                    {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
+                },
+                {
+                  'element': 'app-heavy',
+                  'component': {'name': 'app-heavy', 'isElement': false, 'id': 20},
+                  'directives': [],
+                  'children': [],
+                  'resolutionPath': [
+                    {'id': '24', 'type': 'element', 'name': '_HeavyComponent'},
+                    {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                    {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                    {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                    {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
+                },
+              ],
+              'resolutionPath': [
+                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
+            },
+          ],
+          'resolutionPath': [
+            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
         },
-        'children': [{
-          'injector': {
-            'id': '6',
-            'type': 'element',
-            'name': '_DemoAppComponent',
-            'node': {
+        'path': [
+          {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+          {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+        ],
+      },
+      {
+        'node': {
+          'element': 'router-outlet',
+          'component': null,
+          'directives': [{'name': '_RouterOutlet', 'id': 1}],
+          'children': [],
+          'resolutionPath': [
+            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
+        },
+        'path': [
+          {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+          {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+        ],
+      },
+      {
+        'node': {
+          'element': 'app-demo-component',
+          'component': {'name': 'app-demo-component', 'isElement': false, 'id': 2},
+          'directives': [],
+          'children': [
+            {
+              'element': 'router-outlet',
+              'component': null,
+              'directives': [{'name': '_RouterOutlet', 'id': 3}],
+              'children': [],
+              'resolutionPath': [
+                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
+            },
+            {
+              'element': 'app-todo-demo',
+              'component': {'name': 'app-todo-demo', 'isElement': false, 'id': 4},
+              'directives': [],
+              'children': [
+                {
+                  'element': 'a',
+                  'component': null,
+                  'directives': [{'name': '_RouterLink', 'id': 5}],
+                  'children': [],
+                  'resolutionPath': [
+                    {'id': '8', 'type': 'element', 'name': '_RouterLink'},
+                    {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                    {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                    {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                    {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                    {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
+                },
+                {
+                  'element': 'a',
+                  'component': null,
+                  'directives': [{'name': '_RouterLink', 'id': 6}],
+                  'children': [],
+                  'resolutionPath': [
+                    {'id': '11', 'type': 'element', 'name': '_RouterLink'},
+                    {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                    {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                    {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                    {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                    {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
+                },
+                {
+                  'element': 'router-outlet',
+                  'component': null,
+                  'directives': [{'name': '_RouterOutlet', 'id': 7}],
+                  'children': [],
+                  'resolutionPath': [
+                    {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                    {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                    {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                    {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                    {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
+                },
+                {
+                  'element': 'app-todos',
+                  'component': {'name': 'app-todos', 'isElement': false, 'id': 8},
+                  'directives': [],
+                  'children': [
+                    {
+                      'element': 'a',
+                      'component': null,
+                      'directives': [{'name': '_RouterLink', 'id': 9}],
+                      'children': [],
+                      'resolutionPath': [
+                        {'id': '13', 'type': 'element', 'name': '_RouterLink'},
+                        {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                        {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                        {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                        {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                        {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                        {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                        {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                        {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                      ],
+                    },
+                    {
+                      'element': 'a',
+                      'component': null,
+                      'directives': [{'name': '_RouterLink', 'id': 10}],
+                      'children': [],
+                      'resolutionPath': [
+                        {'id': '16', 'type': 'element', 'name': '_RouterLink'},
+                        {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                        {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                        {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                        {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                        {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                        {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                        {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                        {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                      ],
+                    },
+                    {
+                      'element': 'a',
+                      'component': null,
+                      'directives': [{'name': '_RouterLink', 'id': 11}],
+                      'children': [],
+                      'resolutionPath': [
+                        {'id': '17', 'type': 'element', 'name': '_RouterLink'},
+                        {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                        {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                        {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                        {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                        {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                        {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                        {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                        {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                      ],
+                    },
+                    {
+                      'element': 'app-todo',
+                      'component': {'name': 'app-todo', 'isElement': false, 'id': 12},
+                      'directives': [{'name': '_TooltipDirective', 'id': 13}],
+                      'children': [
+                        {
+                          'element': 'div',
+                          'component': null,
+                          'directives': [{'name': '_TooltipDirective', 'id': 14}],
+                          'children': [],
+                          'resolutionPath': [
+                            {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
+                            {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
+                            {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                            {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                            {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                            {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                          ],
+                        },
+                      ],
+                      'resolutionPath': [
+                        {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
+                        {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                        {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                        {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                        {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                        {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                        {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                        {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                        {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                        {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                      ],
+                    },
+                    {
+                      'element': 'app-todo',
+                      'component': {'name': 'app-todo', 'isElement': false, 'id': 15},
+                      'directives': [{'name': '_TooltipDirective', 'id': 16}],
+                      'children': [
+                        {
+                          'element': 'div',
+                          'component': null,
+                          'directives': [{'name': '_TooltipDirective', 'id': 17}],
+                          'children': [],
+                          'resolutionPath': [
+                            {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
+                            {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
+                            {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                            {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                            {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                            {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                          ],
+                        },
+                      ],
+                      'resolutionPath': [
+                        {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
+                        {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                        {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                        {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                        {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                        {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                        {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                        {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                        {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                        {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                      ],
+                    },
+                    {
+                      'element': '#comment',
+                      'component': null,
+                      'directives': [{'name': '_NgForOf', 'id': 18}],
+                      'children': [],
+                      'resolutionPath': [
+                        {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                        {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                        {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                        {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                        {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                        {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                        {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                        {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                        {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                      ],
+                    },
+                  ],
+                  'resolutionPath': [
+                    {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                    {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                    {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                    {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                    {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                    {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                    {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
+                },
+              ],
+              'resolutionPath': [
+                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
+            },
+            {
+              'element': 'app-zippy',
+              'component': {'name': 'app-zippy', 'isElement': true, 'id': 19},
+              'directives': [],
+              'children': [],
+              'resolutionPath': [
+                {'id': '23', 'type': 'element', 'name': '_ZippyComponent'},
+                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
+            },
+            {
+              'element': 'app-heavy',
+              'component': {'name': 'app-heavy', 'isElement': false, 'id': 20},
+              'directives': [],
+              'children': [],
+              'resolutionPath': [
+                {'id': '24', 'type': 'element', 'name': '_HeavyComponent'},
+                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
+            },
+          ],
+          'resolutionPath': [
+            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
+        },
+        'path': [
+          {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+          {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+          {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+          {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+        ],
+      },
+      {
+        'node': {
+          'element': 'router-outlet',
+          'component': null,
+          'directives': [{'name': '_RouterOutlet', 'id': 3}],
+          'children': [],
+          'resolutionPath': [
+            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
+        },
+        'path': [
+          {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+          {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+          {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+          {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+        ],
+      },
+      {
+        'node': {
+          'element': 'app-todo-demo',
+          'component': {'name': 'app-todo-demo', 'isElement': false, 'id': 4},
+          'directives': [],
+          'children': [
+            {
+              'element': 'a',
+              'component': null,
+              'directives': [{'name': '_RouterLink', 'id': 5}],
+              'children': [],
+              'resolutionPath': [
+                {'id': '8', 'type': 'element', 'name': '_RouterLink'},
+                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
+            },
+            {
+              'element': 'a',
+              'component': null,
+              'directives': [{'name': '_RouterLink', 'id': 6}],
+              'children': [],
+              'resolutionPath': [
+                {'id': '11', 'type': 'element', 'name': '_RouterLink'},
+                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
+            },
+            {
+              'element': 'router-outlet',
+              'component': null,
+              'directives': [{'name': '_RouterOutlet', 'id': 7}],
+              'children': [],
+              'resolutionPath': [
+                {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
+            },
+            {
+              'element': 'app-todos',
+              'component': {'name': 'app-todos', 'isElement': false, 'id': 8},
+              'directives': [],
+              'children': [
+                {
+                  'element': 'a',
+                  'component': null,
+                  'directives': [{'name': '_RouterLink', 'id': 9}],
+                  'children': [],
+                  'resolutionPath': [
+                    {'id': '13', 'type': 'element', 'name': '_RouterLink'},
+                    {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                    {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                    {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                    {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                    {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                    {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                    {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
+                },
+                {
+                  'element': 'a',
+                  'component': null,
+                  'directives': [{'name': '_RouterLink', 'id': 10}],
+                  'children': [],
+                  'resolutionPath': [
+                    {'id': '16', 'type': 'element', 'name': '_RouterLink'},
+                    {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                    {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                    {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                    {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                    {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                    {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                    {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
+                },
+                {
+                  'element': 'a',
+                  'component': null,
+                  'directives': [{'name': '_RouterLink', 'id': 11}],
+                  'children': [],
+                  'resolutionPath': [
+                    {'id': '17', 'type': 'element', 'name': '_RouterLink'},
+                    {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                    {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                    {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                    {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                    {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                    {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                    {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
+                },
+                {
+                  'element': 'app-todo',
+                  'component': {'name': 'app-todo', 'isElement': false, 'id': 12},
+                  'directives': [{'name': '_TooltipDirective', 'id': 13}],
+                  'children': [
+                    {
+                      'element': 'div',
+                      'component': null,
+                      'directives': [{'name': '_TooltipDirective', 'id': 14}],
+                      'children': [],
+                      'resolutionPath': [
+                        {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
+                        {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
+                        {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                        {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                        {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                        {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                        {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                        {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                        {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                        {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                        {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                      ],
+                    },
+                  ],
+                  'resolutionPath': [
+                    {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
+                    {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                    {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                    {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                    {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                    {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                    {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                    {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                    {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
+                },
+                {
+                  'element': 'app-todo',
+                  'component': {'name': 'app-todo', 'isElement': false, 'id': 15},
+                  'directives': [{'name': '_TooltipDirective', 'id': 16}],
+                  'children': [
+                    {
+                      'element': 'div',
+                      'component': null,
+                      'directives': [{'name': '_TooltipDirective', 'id': 17}],
+                      'children': [],
+                      'resolutionPath': [
+                        {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
+                        {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
+                        {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                        {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                        {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                        {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                        {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                        {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                        {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                        {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                        {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                      ],
+                    },
+                  ],
+                  'resolutionPath': [
+                    {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
+                    {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                    {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                    {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                    {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                    {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                    {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                    {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                    {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
+                },
+                {
+                  'element': '#comment',
+                  'component': null,
+                  'directives': [{'name': '_NgForOf', 'id': 18}],
+                  'children': [],
+                  'resolutionPath': [
+                    {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                    {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                    {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                    {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                    {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                    {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                    {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                    {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
+                },
+              ],
+              'resolutionPath': [
+                {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
+            },
+          ],
+          'resolutionPath': [
+            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
+        },
+        'path': [
+          {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+          {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+          {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+          {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+          {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+          {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+        ],
+      },
+      {
+        'node': {
+          'element': 'a',
+          'component': null,
+          'directives': [{'name': '_RouterLink', 'id': 5}],
+          'children': [],
+          'resolutionPath': [
+            {'id': '8', 'type': 'element', 'name': '_RouterLink'},
+            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
+        },
+        'path': [
+          {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+          {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+          {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+          {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+          {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+          {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+        ],
+      },
+      {
+        'node': {
+          'element': 'a',
+          'component': null,
+          'directives': [{'name': '_RouterLink', 'id': 6}],
+          'children': [],
+          'resolutionPath': [
+            {'id': '11', 'type': 'element', 'name': '_RouterLink'},
+            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
+        },
+        'path': [
+          {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+          {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+          {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+          {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+          {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+          {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+        ],
+      },
+      {
+        'node': {
+          'element': 'router-outlet',
+          'component': null,
+          'directives': [{'name': '_RouterOutlet', 'id': 7}],
+          'children': [],
+          'resolutionPath': [
+            {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
+        },
+        'path': [
+          {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+          {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+          {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+          {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+          {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+          {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+        ],
+      },
+      {
+        'node': {
+          'element': 'app-todos',
+          'component': {'name': 'app-todos', 'isElement': false, 'id': 8},
+          'directives': [],
+          'children': [
+            {
+              'element': 'a',
+              'component': null,
+              'directives': [{'name': '_RouterLink', 'id': 9}],
+              'children': [],
+              'resolutionPath': [
+                {'id': '13', 'type': 'element', 'name': '_RouterLink'},
+                {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
+            },
+            {
+              'element': 'a',
+              'component': null,
+              'directives': [{'name': '_RouterLink', 'id': 10}],
+              'children': [],
+              'resolutionPath': [
+                {'id': '16', 'type': 'element', 'name': '_RouterLink'},
+                {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
+            },
+            {
+              'element': 'a',
+              'component': null,
+              'directives': [{'name': '_RouterLink', 'id': 11}],
+              'children': [],
+              'resolutionPath': [
+                {'id': '17', 'type': 'element', 'name': '_RouterLink'},
+                {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
+            },
+            {
+              'element': 'app-todo',
+              'component': {'name': 'app-todo', 'isElement': false, 'id': 12},
+              'directives': [{'name': '_TooltipDirective', 'id': 13}],
+              'children': [
+                {
+                  'element': 'div',
+                  'component': null,
+                  'directives': [{'name': '_TooltipDirective', 'id': 14}],
+                  'children': [],
+                  'resolutionPath': [
+                    {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
+                    {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
+                    {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                    {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                    {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                    {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                    {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                    {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                    {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                    {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
+                },
+              ],
+              'resolutionPath': [
+                {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
+                {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
+            },
+            {
+              'element': 'app-todo',
+              'component': {'name': 'app-todo', 'isElement': false, 'id': 15},
+              'directives': [{'name': '_TooltipDirective', 'id': 16}],
+              'children': [
+                {
+                  'element': 'div',
+                  'component': null,
+                  'directives': [{'name': '_TooltipDirective', 'id': 17}],
+                  'children': [],
+                  'resolutionPath': [
+                    {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
+                    {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
+                    {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                    {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                    {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                    {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                    {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                    {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                    {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                    {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
+                },
+              ],
+              'resolutionPath': [
+                {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
+                {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
+            },
+            {
+              'element': '#comment',
+              'component': null,
+              'directives': [{'name': '_NgForOf', 'id': 18}],
+              'children': [],
+              'resolutionPath': [
+                {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
+            },
+          ],
+          'resolutionPath': [
+            {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+            {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+            {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
+        },
+        'path': [
+          {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+          {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+          {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+          {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+          {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+          {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+          {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+          {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+        ],
+      },
+      {
+        'node': {
+          'element': 'a',
+          'component': null,
+          'directives': [{'name': '_RouterLink', 'id': 9}],
+          'children': [],
+          'resolutionPath': [
+            {'id': '13', 'type': 'element', 'name': '_RouterLink'},
+            {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+            {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+            {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
+        },
+        'path': [
+          {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+          {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+          {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+          {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+          {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+          {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+          {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+          {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+        ],
+      },
+      {
+        'node': {
+          'element': 'a',
+          'component': null,
+          'directives': [{'name': '_RouterLink', 'id': 10}],
+          'children': [],
+          'resolutionPath': [
+            {'id': '16', 'type': 'element', 'name': '_RouterLink'},
+            {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+            {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+            {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
+        },
+        'path': [
+          {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+          {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+          {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+          {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+          {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+          {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+          {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+          {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+        ],
+      },
+      {
+        'node': {
+          'element': 'a',
+          'component': null,
+          'directives': [{'name': '_RouterLink', 'id': 11}],
+          'children': [],
+          'resolutionPath': [
+            {'id': '17', 'type': 'element', 'name': '_RouterLink'},
+            {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+            {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+            {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
+        },
+        'path': [
+          {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+          {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+          {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+          {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+          {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+          {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+          {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+          {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+        ],
+      },
+      {
+        'node': {
+          'element': 'app-todo',
+          'component': {'name': 'app-todo', 'isElement': false, 'id': 12},
+          'directives': [{'name': '_TooltipDirective', 'id': 13}],
+          'children': [
+            {
+              'element': 'div',
+              'component': null,
+              'directives': [{'name': '_TooltipDirective', 'id': 14}],
+              'children': [],
+              'resolutionPath': [
+                {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
+                {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
+                {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
+            },
+          ],
+          'resolutionPath': [
+            {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
+            {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+            {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+            {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+            {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
+        },
+        'path': [
+          {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+          {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+          {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+          {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+          {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+          {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+          {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+          {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+          {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
+        ],
+      },
+      {
+        'node': {
+          'element': 'div',
+          'component': null,
+          'directives': [{'name': '_TooltipDirective', 'id': 14}],
+          'children': [],
+          'resolutionPath': [
+            {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
+            {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
+            {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+            {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+            {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+            {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
+        },
+        'path': [
+          {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+          {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+          {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+          {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+          {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+          {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+          {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+          {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+          {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
+          {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
+        ],
+      },
+      {
+        'node': {
+          'element': 'app-todo',
+          'component': {'name': 'app-todo', 'isElement': false, 'id': 15},
+          'directives': [{'name': '_TooltipDirective', 'id': 16}],
+          'children': [
+            {
+              'element': 'div',
+              'component': null,
+              'directives': [{'name': '_TooltipDirective', 'id': 17}],
+              'children': [],
+              'resolutionPath': [
+                {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
+                {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
+                {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
+            },
+          ],
+          'resolutionPath': [
+            {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
+            {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+            {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+            {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+            {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
+        },
+        'path': [
+          {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+          {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+          {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+          {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+          {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+          {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+          {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+          {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+          {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
+        ],
+      },
+      {
+        'node': {
+          'element': 'div',
+          'component': null,
+          'directives': [{'name': '_TooltipDirective', 'id': 17}],
+          'children': [],
+          'resolutionPath': [
+            {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
+            {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
+            {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+            {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+            {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+            {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
+        },
+        'path': [
+          {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+          {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+          {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+          {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+          {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+          {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+          {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+          {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+          {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
+          {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
+        ],
+      },
+      {
+        'node': {
+          'element': '#comment',
+          'component': null,
+          'directives': [{'name': '_NgForOf', 'id': 18}],
+          'children': [],
+          'resolutionPath': [
+            {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+            {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+            {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+            {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
+        },
+        'path': [
+          {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+          {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+          {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+          {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+          {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+          {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+          {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+          {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+        ],
+      },
+      {
+        'node': {
+          'element': 'app-zippy',
+          'component': {'name': 'app-zippy', 'isElement': true, 'id': 19},
+          'directives': [],
+          'children': [],
+          'resolutionPath': [
+            {'id': '23', 'type': 'element', 'name': '_ZippyComponent'},
+            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
+        },
+        'path': [
+          {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+          {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+          {'id': '23', 'type': 'element', 'name': '_ZippyComponent'},
+        ],
+      },
+      {
+        'node': {
+          'element': 'app-heavy',
+          'component': {'name': 'app-heavy', 'isElement': false, 'id': 20},
+          'directives': [],
+          'children': [],
+          'resolutionPath': [
+            {'id': '24', 'type': 'element', 'name': '_HeavyComponent'},
+            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
+        },
+        'path': [
+          {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+          {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+          {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+          {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+          {'id': '24', 'type': 'element', 'name': '_HeavyComponent'},
+        ],
+      },
+    ];
+
+    const expectedElementPaths = [
+      {
+        'node': {
+          'element': 'app-root',
+          'component': {'name': 'app-root', 'isElement': false, 'id': 0},
+          'directives': [],
+          'children': [
+            {
+              'element': 'router-outlet',
+              'component': null,
+              'directives': [{'name': '_RouterOutlet', 'id': 1}],
+              'children': [],
+              'resolutionPath': [
+                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
+            },
+            {
               'element': 'app-demo-component',
               'component': {'name': 'app-demo-component', 'isElement': false, 'id': 2},
               'directives': [],
@@ -2097,8 +4955,8 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                     {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                     {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                     {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                    {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                  ]
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
                 },
                 {
                   'element': 'app-todo-demo',
@@ -2121,8 +4979,8 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                         {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                         {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                         {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                        {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                      ]
+                        {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                      ],
                     },
                     {
                       'element': 'a',
@@ -2140,8 +4998,8 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                         {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                         {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                         {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                        {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                      ]
+                        {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                      ],
                     },
                     {
                       'element': 'router-outlet',
@@ -2159,8 +5017,8 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                         {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                         {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                         {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                        {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                      ]
+                        {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                      ],
                     },
                     {
                       'element': 'app-todos',
@@ -2186,8 +5044,8 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                             {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                            {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                          ]
+                            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                          ],
                         },
                         {
                           'element': 'a',
@@ -2208,8 +5066,8 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                             {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                            {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                          ]
+                            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                          ],
                         },
                         {
                           'element': 'a',
@@ -2230,37 +5088,39 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                             {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                            {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                          ]
+                            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                          ],
                         },
                         {
                           'element': 'app-todo',
                           'component': {'name': 'app-todo', 'isElement': false, 'id': 12},
                           'directives': [{'name': '_TooltipDirective', 'id': 13}],
-                          'children': [{
-                            'element': 'div',
-                            'component': null,
-                            'directives': [{'name': '_TooltipDirective', 'id': 14}],
-                            'children': [],
-                            'resolutionPath': [
-                              {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
-                              {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
-                              {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                              {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                              {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                              {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                              {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                              {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                              {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                              {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                              {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                              {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                              {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                              {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                              {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                              {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                            ]
-                          }],
+                          'children': [
+                            {
+                              'element': 'div',
+                              'component': null,
+                              'directives': [{'name': '_TooltipDirective', 'id': 14}],
+                              'children': [],
+                              'resolutionPath': [
+                                {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
+                                {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
+                                {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                                {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                                {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                                {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                              ],
+                            },
+                          ],
                           'resolutionPath': [
                             {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
                             {'id': '20', 'type': 'element', 'name': '_NgForOf'},
@@ -2276,37 +5136,39 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                             {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                            {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                          ]
+                            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                          ],
                         },
                         {
                           'element': 'app-todo',
                           'component': {'name': 'app-todo', 'isElement': false, 'id': 15},
                           'directives': [{'name': '_TooltipDirective', 'id': 16}],
-                          'children': [{
-                            'element': 'div',
-                            'component': null,
-                            'directives': [{'name': '_TooltipDirective', 'id': 17}],
-                            'children': [],
-                            'resolutionPath': [
-                              {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
-                              {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
-                              {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                              {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                              {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                              {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                              {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                              {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                              {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                              {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                              {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                              {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                              {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                              {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                              {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                              {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                            ]
-                          }],
+                          'children': [
+                            {
+                              'element': 'div',
+                              'component': null,
+                              'directives': [{'name': '_TooltipDirective', 'id': 17}],
+                              'children': [],
+                              'resolutionPath': [
+                                {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
+                                {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
+                                {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                                {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                                {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                                {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                              ],
+                            },
+                          ],
                           'resolutionPath': [
                             {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
                             {'id': '20', 'type': 'element', 'name': '_NgForOf'},
@@ -2322,8 +5184,8 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                             {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                            {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                          ]
+                            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                          ],
                         },
                         {
                           'element': '#comment',
@@ -2344,9 +5206,9 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                             {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                            {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                          ]
-                        }
+                            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                          ],
+                        },
                       ],
                       'resolutionPath': [
                         {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
@@ -2361,9 +5223,9 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                         {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                         {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                         {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                        {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                      ]
-                    }
+                        {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                      ],
+                    },
                   ],
                   'resolutionPath': [
                     {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
@@ -2375,8 +5237,21 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                     {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                     {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                     {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                    {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                  ]
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
+                },
+                {
+                  'element': 'app-zippy',
+                  'component': {'name': 'app-zippy', 'isElement': true, 'id': 19},
+                  'directives': [],
+                  'children': [],
+                  'resolutionPath': [
+                    {'id': '23', 'type': 'element', 'name': '_ZippyComponent'},
+                    {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                    {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
                 },
                 {
                   'element': 'app-heavy',
@@ -2391,9 +5266,9 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                     {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                     {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                     {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                    {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                  ]
-                }
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
+                },
               ],
               'resolutionPath': [
                 {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
@@ -2402,17 +5277,1372 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                 {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                 {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                 {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-              ]
-            }
-          },
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
+            },
+          ],
+          'resolutionPath': [
+            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
+        },
+        'path': [{'id': '1', 'type': 'element', 'name': '_AppComponent'}],
+      },
+      {
+        'node': {
+          'element': 'router-outlet',
+          'component': null,
+          'directives': [{'name': '_RouterOutlet', 'id': 1}],
+          'children': [],
+          'resolutionPath': [
+            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
+        },
+        'path': [{'id': '1', 'type': 'element', 'name': '_AppComponent'}],
+      },
+      {
+        'node': {
+          'element': 'app-demo-component',
+          'component': {'name': 'app-demo-component', 'isElement': false, 'id': 2},
+          'directives': [],
           'children': [
             {
-              'injector': {
-                'id': '9',
-                'type': 'element',
-                'name': '_AppTodoComponent',
-                'node': {
+              'element': 'router-outlet',
+              'component': null,
+              'directives': [{'name': '_RouterOutlet', 'id': 3}],
+              'children': [],
+              'resolutionPath': [
+                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
+            },
+            {
+              'element': 'app-todo-demo',
+              'component': {'name': 'app-todo-demo', 'isElement': false, 'id': 4},
+              'directives': [],
+              'children': [
+                {
+                  'element': 'a',
+                  'component': null,
+                  'directives': [{'name': '_RouterLink', 'id': 5}],
+                  'children': [],
+                  'resolutionPath': [
+                    {'id': '8', 'type': 'element', 'name': '_RouterLink'},
+                    {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                    {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                    {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                    {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                    {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
+                },
+                {
+                  'element': 'a',
+                  'component': null,
+                  'directives': [{'name': '_RouterLink', 'id': 6}],
+                  'children': [],
+                  'resolutionPath': [
+                    {'id': '11', 'type': 'element', 'name': '_RouterLink'},
+                    {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                    {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                    {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                    {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                    {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
+                },
+                {
+                  'element': 'router-outlet',
+                  'component': null,
+                  'directives': [{'name': '_RouterOutlet', 'id': 7}],
+                  'children': [],
+                  'resolutionPath': [
+                    {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                    {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                    {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                    {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                    {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
+                },
+                {
+                  'element': 'app-todos',
+                  'component': {'name': 'app-todos', 'isElement': false, 'id': 8},
+                  'directives': [],
+                  'children': [
+                    {
+                      'element': 'a',
+                      'component': null,
+                      'directives': [{'name': '_RouterLink', 'id': 9}],
+                      'children': [],
+                      'resolutionPath': [
+                        {'id': '13', 'type': 'element', 'name': '_RouterLink'},
+                        {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                        {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                        {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                        {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                        {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                        {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                        {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                        {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                      ],
+                    },
+                    {
+                      'element': 'a',
+                      'component': null,
+                      'directives': [{'name': '_RouterLink', 'id': 10}],
+                      'children': [],
+                      'resolutionPath': [
+                        {'id': '16', 'type': 'element', 'name': '_RouterLink'},
+                        {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                        {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                        {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                        {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                        {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                        {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                        {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                        {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                      ],
+                    },
+                    {
+                      'element': 'a',
+                      'component': null,
+                      'directives': [{'name': '_RouterLink', 'id': 11}],
+                      'children': [],
+                      'resolutionPath': [
+                        {'id': '17', 'type': 'element', 'name': '_RouterLink'},
+                        {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                        {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                        {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                        {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                        {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                        {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                        {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                        {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                      ],
+                    },
+                    {
+                      'element': 'app-todo',
+                      'component': {'name': 'app-todo', 'isElement': false, 'id': 12},
+                      'directives': [{'name': '_TooltipDirective', 'id': 13}],
+                      'children': [
+                        {
+                          'element': 'div',
+                          'component': null,
+                          'directives': [{'name': '_TooltipDirective', 'id': 14}],
+                          'children': [],
+                          'resolutionPath': [
+                            {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
+                            {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
+                            {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                            {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                            {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                            {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                          ],
+                        },
+                      ],
+                      'resolutionPath': [
+                        {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
+                        {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                        {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                        {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                        {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                        {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                        {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                        {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                        {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                        {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                      ],
+                    },
+                    {
+                      'element': 'app-todo',
+                      'component': {'name': 'app-todo', 'isElement': false, 'id': 15},
+                      'directives': [{'name': '_TooltipDirective', 'id': 16}],
+                      'children': [
+                        {
+                          'element': 'div',
+                          'component': null,
+                          'directives': [{'name': '_TooltipDirective', 'id': 17}],
+                          'children': [],
+                          'resolutionPath': [
+                            {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
+                            {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
+                            {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                            {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                            {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                            {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                          ],
+                        },
+                      ],
+                      'resolutionPath': [
+                        {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
+                        {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                        {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                        {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                        {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                        {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                        {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                        {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                        {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                        {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                      ],
+                    },
+                    {
+                      'element': '#comment',
+                      'component': null,
+                      'directives': [{'name': '_NgForOf', 'id': 18}],
+                      'children': [],
+                      'resolutionPath': [
+                        {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                        {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                        {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                        {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                        {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                        {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                        {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                        {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                        {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                      ],
+                    },
+                  ],
+                  'resolutionPath': [
+                    {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                    {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                    {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                    {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                    {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                    {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                    {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
+                },
+              ],
+              'resolutionPath': [
+                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
+            },
+            {
+              'element': 'app-zippy',
+              'component': {'name': 'app-zippy', 'isElement': true, 'id': 19},
+              'directives': [],
+              'children': [],
+              'resolutionPath': [
+                {'id': '23', 'type': 'element', 'name': '_ZippyComponent'},
+                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
+            },
+            {
+              'element': 'app-heavy',
+              'component': {'name': 'app-heavy', 'isElement': false, 'id': 20},
+              'directives': [],
+              'children': [],
+              'resolutionPath': [
+                {'id': '24', 'type': 'element', 'name': '_HeavyComponent'},
+                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
+            },
+          ],
+          'resolutionPath': [
+            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
+        },
+        'path': [
+          {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+          {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+        ],
+      },
+      {
+        'node': {
+          'element': 'router-outlet',
+          'component': null,
+          'directives': [{'name': '_RouterOutlet', 'id': 3}],
+          'children': [],
+          'resolutionPath': [
+            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
+        },
+        'path': [
+          {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+          {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+        ],
+      },
+      {
+        'node': {
+          'element': 'app-todo-demo',
+          'component': {'name': 'app-todo-demo', 'isElement': false, 'id': 4},
+          'directives': [],
+          'children': [
+            {
+              'element': 'a',
+              'component': null,
+              'directives': [{'name': '_RouterLink', 'id': 5}],
+              'children': [],
+              'resolutionPath': [
+                {'id': '8', 'type': 'element', 'name': '_RouterLink'},
+                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
+            },
+            {
+              'element': 'a',
+              'component': null,
+              'directives': [{'name': '_RouterLink', 'id': 6}],
+              'children': [],
+              'resolutionPath': [
+                {'id': '11', 'type': 'element', 'name': '_RouterLink'},
+                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
+            },
+            {
+              'element': 'router-outlet',
+              'component': null,
+              'directives': [{'name': '_RouterOutlet', 'id': 7}],
+              'children': [],
+              'resolutionPath': [
+                {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
+            },
+            {
+              'element': 'app-todos',
+              'component': {'name': 'app-todos', 'isElement': false, 'id': 8},
+              'directives': [],
+              'children': [
+                {
+                  'element': 'a',
+                  'component': null,
+                  'directives': [{'name': '_RouterLink', 'id': 9}],
+                  'children': [],
+                  'resolutionPath': [
+                    {'id': '13', 'type': 'element', 'name': '_RouterLink'},
+                    {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                    {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                    {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                    {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                    {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                    {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                    {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
+                },
+                {
+                  'element': 'a',
+                  'component': null,
+                  'directives': [{'name': '_RouterLink', 'id': 10}],
+                  'children': [],
+                  'resolutionPath': [
+                    {'id': '16', 'type': 'element', 'name': '_RouterLink'},
+                    {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                    {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                    {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                    {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                    {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                    {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                    {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
+                },
+                {
+                  'element': 'a',
+                  'component': null,
+                  'directives': [{'name': '_RouterLink', 'id': 11}],
+                  'children': [],
+                  'resolutionPath': [
+                    {'id': '17', 'type': 'element', 'name': '_RouterLink'},
+                    {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                    {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                    {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                    {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                    {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                    {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                    {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
+                },
+                {
+                  'element': 'app-todo',
+                  'component': {'name': 'app-todo', 'isElement': false, 'id': 12},
+                  'directives': [{'name': '_TooltipDirective', 'id': 13}],
+                  'children': [
+                    {
+                      'element': 'div',
+                      'component': null,
+                      'directives': [{'name': '_TooltipDirective', 'id': 14}],
+                      'children': [],
+                      'resolutionPath': [
+                        {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
+                        {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
+                        {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                        {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                        {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                        {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                        {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                        {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                        {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                        {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                        {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                      ],
+                    },
+                  ],
+                  'resolutionPath': [
+                    {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
+                    {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                    {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                    {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                    {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                    {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                    {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                    {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                    {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
+                },
+                {
+                  'element': 'app-todo',
+                  'component': {'name': 'app-todo', 'isElement': false, 'id': 15},
+                  'directives': [{'name': '_TooltipDirective', 'id': 16}],
+                  'children': [
+                    {
+                      'element': 'div',
+                      'component': null,
+                      'directives': [{'name': '_TooltipDirective', 'id': 17}],
+                      'children': [],
+                      'resolutionPath': [
+                        {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
+                        {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
+                        {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                        {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                        {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                        {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                        {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                        {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                        {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                        {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                        {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                      ],
+                    },
+                  ],
+                  'resolutionPath': [
+                    {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
+                    {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                    {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                    {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                    {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                    {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                    {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                    {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                    {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
+                },
+                {
+                  'element': '#comment',
+                  'component': null,
+                  'directives': [{'name': '_NgForOf', 'id': 18}],
+                  'children': [],
+                  'resolutionPath': [
+                    {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                    {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                    {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                    {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                    {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                    {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                    {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                    {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
+                },
+              ],
+              'resolutionPath': [
+                {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
+            },
+          ],
+          'resolutionPath': [
+            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
+        },
+        'path': [
+          {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+          {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+          {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+        ],
+      },
+      {
+        'node': {
+          'element': 'a',
+          'component': null,
+          'directives': [{'name': '_RouterLink', 'id': 5}],
+          'children': [],
+          'resolutionPath': [
+            {'id': '8', 'type': 'element', 'name': '_RouterLink'},
+            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
+        },
+        'path': [
+          {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+          {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+          {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+        ],
+      },
+      {
+        'node': {
+          'element': 'a',
+          'component': null,
+          'directives': [{'name': '_RouterLink', 'id': 6}],
+          'children': [],
+          'resolutionPath': [
+            {'id': '11', 'type': 'element', 'name': '_RouterLink'},
+            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
+        },
+        'path': [
+          {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+          {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+          {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+        ],
+      },
+      {
+        'node': {
+          'element': 'router-outlet',
+          'component': null,
+          'directives': [{'name': '_RouterOutlet', 'id': 7}],
+          'children': [],
+          'resolutionPath': [
+            {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
+        },
+        'path': [
+          {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+          {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+          {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+        ],
+      },
+      {
+        'node': {
+          'element': 'app-todos',
+          'component': {'name': 'app-todos', 'isElement': false, 'id': 8},
+          'directives': [],
+          'children': [
+            {
+              'element': 'a',
+              'component': null,
+              'directives': [{'name': '_RouterLink', 'id': 9}],
+              'children': [],
+              'resolutionPath': [
+                {'id': '13', 'type': 'element', 'name': '_RouterLink'},
+                {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
+            },
+            {
+              'element': 'a',
+              'component': null,
+              'directives': [{'name': '_RouterLink', 'id': 10}],
+              'children': [],
+              'resolutionPath': [
+                {'id': '16', 'type': 'element', 'name': '_RouterLink'},
+                {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
+            },
+            {
+              'element': 'a',
+              'component': null,
+              'directives': [{'name': '_RouterLink', 'id': 11}],
+              'children': [],
+              'resolutionPath': [
+                {'id': '17', 'type': 'element', 'name': '_RouterLink'},
+                {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
+            },
+            {
+              'element': 'app-todo',
+              'component': {'name': 'app-todo', 'isElement': false, 'id': 12},
+              'directives': [{'name': '_TooltipDirective', 'id': 13}],
+              'children': [
+                {
+                  'element': 'div',
+                  'component': null,
+                  'directives': [{'name': '_TooltipDirective', 'id': 14}],
+                  'children': [],
+                  'resolutionPath': [
+                    {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
+                    {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
+                    {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                    {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                    {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                    {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                    {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                    {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                    {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                    {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
+                },
+              ],
+              'resolutionPath': [
+                {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
+                {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
+            },
+            {
+              'element': 'app-todo',
+              'component': {'name': 'app-todo', 'isElement': false, 'id': 15},
+              'directives': [{'name': '_TooltipDirective', 'id': 16}],
+              'children': [
+                {
+                  'element': 'div',
+                  'component': null,
+                  'directives': [{'name': '_TooltipDirective', 'id': 17}],
+                  'children': [],
+                  'resolutionPath': [
+                    {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
+                    {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
+                    {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                    {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                    {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                    {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                    {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                    {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                    {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                    {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
+                },
+              ],
+              'resolutionPath': [
+                {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
+                {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
+            },
+            {
+              'element': '#comment',
+              'component': null,
+              'directives': [{'name': '_NgForOf', 'id': 18}],
+              'children': [],
+              'resolutionPath': [
+                {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
+            },
+          ],
+          'resolutionPath': [
+            {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+            {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+            {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
+        },
+        'path': [
+          {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+          {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+          {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+          {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+        ],
+      },
+      {
+        'node': {
+          'element': 'a',
+          'component': null,
+          'directives': [{'name': '_RouterLink', 'id': 9}],
+          'children': [],
+          'resolutionPath': [
+            {'id': '13', 'type': 'element', 'name': '_RouterLink'},
+            {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+            {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+            {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
+        },
+        'path': [
+          {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+          {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+          {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+          {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+        ],
+      },
+      {
+        'node': {
+          'element': 'a',
+          'component': null,
+          'directives': [{'name': '_RouterLink', 'id': 10}],
+          'children': [],
+          'resolutionPath': [
+            {'id': '16', 'type': 'element', 'name': '_RouterLink'},
+            {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+            {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+            {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
+        },
+        'path': [
+          {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+          {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+          {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+          {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+        ],
+      },
+      {
+        'node': {
+          'element': 'a',
+          'component': null,
+          'directives': [{'name': '_RouterLink', 'id': 11}],
+          'children': [],
+          'resolutionPath': [
+            {'id': '17', 'type': 'element', 'name': '_RouterLink'},
+            {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+            {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+            {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
+        },
+        'path': [
+          {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+          {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+          {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+          {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+        ],
+      },
+      {
+        'node': {
+          'element': 'app-todo',
+          'component': {'name': 'app-todo', 'isElement': false, 'id': 12},
+          'directives': [{'name': '_TooltipDirective', 'id': 13}],
+          'children': [
+            {
+              'element': 'div',
+              'component': null,
+              'directives': [{'name': '_TooltipDirective', 'id': 14}],
+              'children': [],
+              'resolutionPath': [
+                {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
+                {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
+                {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
+            },
+          ],
+          'resolutionPath': [
+            {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
+            {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+            {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+            {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+            {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
+        },
+        'path': [
+          {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+          {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+          {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+          {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+          {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
+        ],
+      },
+      {
+        'node': {
+          'element': 'div',
+          'component': null,
+          'directives': [{'name': '_TooltipDirective', 'id': 14}],
+          'children': [],
+          'resolutionPath': [
+            {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
+            {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
+            {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+            {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+            {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+            {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
+        },
+        'path': [
+          {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+          {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+          {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+          {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+          {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
+          {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
+        ],
+      },
+      {
+        'node': {
+          'element': 'app-todo',
+          'component': {'name': 'app-todo', 'isElement': false, 'id': 15},
+          'directives': [{'name': '_TooltipDirective', 'id': 16}],
+          'children': [
+            {
+              'element': 'div',
+              'component': null,
+              'directives': [{'name': '_TooltipDirective', 'id': 17}],
+              'children': [],
+              'resolutionPath': [
+                {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
+                {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
+                {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
+            },
+          ],
+          'resolutionPath': [
+            {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
+            {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+            {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+            {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+            {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
+        },
+        'path': [
+          {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+          {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+          {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+          {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+          {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
+        ],
+      },
+      {
+        'node': {
+          'element': 'div',
+          'component': null,
+          'directives': [{'name': '_TooltipDirective', 'id': 17}],
+          'children': [],
+          'resolutionPath': [
+            {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
+            {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
+            {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+            {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+            {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+            {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
+        },
+        'path': [
+          {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+          {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+          {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+          {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+          {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
+          {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
+        ],
+      },
+      {
+        'node': {
+          'element': '#comment',
+          'component': null,
+          'directives': [{'name': '_NgForOf', 'id': 18}],
+          'children': [],
+          'resolutionPath': [
+            {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+            {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+            {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+            {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
+        },
+        'path': [
+          {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+          {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+          {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+          {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+        ],
+      },
+      {
+        'node': {
+          'element': 'app-zippy',
+          'component': {'name': 'app-zippy', 'isElement': true, 'id': 19},
+          'directives': [],
+          'children': [],
+          'resolutionPath': [
+            {'id': '23', 'type': 'element', 'name': '_ZippyComponent'},
+            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
+        },
+        'path': [{'id': '23', 'type': 'element', 'name': '_ZippyComponent'}],
+      },
+      {
+        'node': {
+          'element': 'app-heavy',
+          'component': {'name': 'app-heavy', 'isElement': false, 'id': 20},
+          'directives': [],
+          'children': [],
+          'resolutionPath': [
+            {'id': '24', 'type': 'element', 'name': '_HeavyComponent'},
+            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
+        },
+        'path': [
+          {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+          {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+          {'id': '24', 'type': 'element', 'name': '_HeavyComponent'},
+        ],
+      },
+    ];
+
+    const expectedEnvironmentPaths = [
+      {
+        'node': {
+          'element': 'app-root',
+          'component': {'name': 'app-root', 'isElement': false, 'id': 0},
+          'directives': [],
+          'children': [
+            {
+              'element': 'router-outlet',
+              'component': null,
+              'directives': [{'name': '_RouterOutlet', 'id': 1}],
+              'children': [],
+              'resolutionPath': [
+                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
+            },
+            {
+              'element': 'app-demo-component',
+              'component': {'name': 'app-demo-component', 'isElement': false, 'id': 2},
+              'directives': [],
+              'children': [
+                {
+                  'element': 'router-outlet',
+                  'component': null,
+                  'directives': [{'name': '_RouterOutlet', 'id': 3}],
+                  'children': [],
+                  'resolutionPath': [
+                    {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                    {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                    {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                    {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
+                },
+                {
                   'element': 'app-todo-demo',
                   'component': {'name': 'app-todo-demo', 'isElement': false, 'id': 4},
                   'directives': [],
@@ -2433,8 +6663,8 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                         {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                         {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                         {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                        {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                      ]
+                        {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                      ],
                     },
                     {
                       'element': 'a',
@@ -2452,8 +6682,8 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                         {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                         {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                         {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                        {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                      ]
+                        {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                      ],
                     },
                     {
                       'element': 'router-outlet',
@@ -2471,8 +6701,8 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                         {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                         {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                         {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                        {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                      ]
+                        {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                      ],
                     },
                     {
                       'element': 'app-todos',
@@ -2498,8 +6728,8 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                             {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                            {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                          ]
+                            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                          ],
                         },
                         {
                           'element': 'a',
@@ -2520,8 +6750,8 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                             {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                            {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                          ]
+                            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                          ],
                         },
                         {
                           'element': 'a',
@@ -2542,37 +6772,39 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                             {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                            {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                          ]
+                            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                          ],
                         },
                         {
                           'element': 'app-todo',
                           'component': {'name': 'app-todo', 'isElement': false, 'id': 12},
                           'directives': [{'name': '_TooltipDirective', 'id': 13}],
-                          'children': [{
-                            'element': 'div',
-                            'component': null,
-                            'directives': [{'name': '_TooltipDirective', 'id': 14}],
-                            'children': [],
-                            'resolutionPath': [
-                              {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
-                              {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
-                              {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                              {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                              {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                              {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                              {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                              {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                              {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                              {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                              {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                              {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                              {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                              {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                              {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                              {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                            ]
-                          }],
+                          'children': [
+                            {
+                              'element': 'div',
+                              'component': null,
+                              'directives': [{'name': '_TooltipDirective', 'id': 14}],
+                              'children': [],
+                              'resolutionPath': [
+                                {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
+                                {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
+                                {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                                {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                                {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                                {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                              ],
+                            },
+                          ],
                           'resolutionPath': [
                             {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
                             {'id': '20', 'type': 'element', 'name': '_NgForOf'},
@@ -2588,37 +6820,39 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                             {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                            {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                          ]
+                            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                          ],
                         },
                         {
                           'element': 'app-todo',
                           'component': {'name': 'app-todo', 'isElement': false, 'id': 15},
                           'directives': [{'name': '_TooltipDirective', 'id': 16}],
-                          'children': [{
-                            'element': 'div',
-                            'component': null,
-                            'directives': [{'name': '_TooltipDirective', 'id': 17}],
-                            'children': [],
-                            'resolutionPath': [
-                              {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
-                              {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
-                              {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                              {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                              {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                              {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                              {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                              {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                              {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                              {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                              {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                              {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                              {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                              {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                              {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                              {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                            ]
-                          }],
+                          'children': [
+                            {
+                              'element': 'div',
+                              'component': null,
+                              'directives': [{'name': '_TooltipDirective', 'id': 17}],
+                              'children': [],
+                              'resolutionPath': [
+                                {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
+                                {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
+                                {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                                {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                                {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                                {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                              ],
+                            },
+                          ],
                           'resolutionPath': [
                             {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
                             {'id': '20', 'type': 'element', 'name': '_NgForOf'},
@@ -2634,8 +6868,8 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                             {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                            {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                          ]
+                            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                          ],
                         },
                         {
                           'element': '#comment',
@@ -2656,9 +6890,9 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                             {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                            {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                          ]
-                        }
+                            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                          ],
+                        },
                       ],
                       'resolutionPath': [
                         {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
@@ -2673,9 +6907,9 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                         {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                         {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                         {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                        {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                      ]
-                    }
+                        {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                      ],
+                    },
                   ],
                   'resolutionPath': [
                     {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
@@ -2687,16 +6921,1558 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                     {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                     {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                     {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                    {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                  ]
-                }
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
+                },
+                {
+                  'element': 'app-zippy',
+                  'component': {'name': 'app-zippy', 'isElement': true, 'id': 19},
+                  'directives': [],
+                  'children': [],
+                  'resolutionPath': [
+                    {'id': '23', 'type': 'element', 'name': '_ZippyComponent'},
+                    {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                    {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
+                },
+                {
+                  'element': 'app-heavy',
+                  'component': {'name': 'app-heavy', 'isElement': false, 'id': 20},
+                  'directives': [],
+                  'children': [],
+                  'resolutionPath': [
+                    {'id': '24', 'type': 'element', 'name': '_HeavyComponent'},
+                    {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                    {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                    {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                    {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
+                },
+              ],
+              'resolutionPath': [
+                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
+            },
+          ],
+          'resolutionPath': [
+            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
+        },
+        'path': [{'id': '2', 'type': 'environment', 'name': '_AppModule'}],
+      },
+      {
+        'node': {
+          'element': 'router-outlet',
+          'component': null,
+          'directives': [{'name': '_RouterOutlet', 'id': 1}],
+          'children': [],
+          'resolutionPath': [
+            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
+        },
+        'path': [{'id': '2', 'type': 'environment', 'name': '_AppModule'}],
+      },
+      {
+        'node': {
+          'element': 'app-demo-component',
+          'component': {'name': 'app-demo-component', 'isElement': false, 'id': 2},
+          'directives': [],
+          'children': [
+            {
+              'element': 'router-outlet',
+              'component': null,
+              'directives': [{'name': '_RouterOutlet', 'id': 3}],
+              'children': [],
+              'resolutionPath': [
+                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
+            },
+            {
+              'element': 'app-todo-demo',
+              'component': {'name': 'app-todo-demo', 'isElement': false, 'id': 4},
+              'directives': [],
+              'children': [
+                {
+                  'element': 'a',
+                  'component': null,
+                  'directives': [{'name': '_RouterLink', 'id': 5}],
+                  'children': [],
+                  'resolutionPath': [
+                    {'id': '8', 'type': 'element', 'name': '_RouterLink'},
+                    {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                    {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                    {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                    {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                    {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
+                },
+                {
+                  'element': 'a',
+                  'component': null,
+                  'directives': [{'name': '_RouterLink', 'id': 6}],
+                  'children': [],
+                  'resolutionPath': [
+                    {'id': '11', 'type': 'element', 'name': '_RouterLink'},
+                    {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                    {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                    {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                    {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                    {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
+                },
+                {
+                  'element': 'router-outlet',
+                  'component': null,
+                  'directives': [{'name': '_RouterOutlet', 'id': 7}],
+                  'children': [],
+                  'resolutionPath': [
+                    {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                    {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                    {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                    {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                    {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
+                },
+                {
+                  'element': 'app-todos',
+                  'component': {'name': 'app-todos', 'isElement': false, 'id': 8},
+                  'directives': [],
+                  'children': [
+                    {
+                      'element': 'a',
+                      'component': null,
+                      'directives': [{'name': '_RouterLink', 'id': 9}],
+                      'children': [],
+                      'resolutionPath': [
+                        {'id': '13', 'type': 'element', 'name': '_RouterLink'},
+                        {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                        {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                        {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                        {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                        {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                        {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                        {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                        {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                      ],
+                    },
+                    {
+                      'element': 'a',
+                      'component': null,
+                      'directives': [{'name': '_RouterLink', 'id': 10}],
+                      'children': [],
+                      'resolutionPath': [
+                        {'id': '16', 'type': 'element', 'name': '_RouterLink'},
+                        {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                        {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                        {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                        {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                        {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                        {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                        {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                        {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                      ],
+                    },
+                    {
+                      'element': 'a',
+                      'component': null,
+                      'directives': [{'name': '_RouterLink', 'id': 11}],
+                      'children': [],
+                      'resolutionPath': [
+                        {'id': '17', 'type': 'element', 'name': '_RouterLink'},
+                        {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                        {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                        {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                        {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                        {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                        {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                        {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                        {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                      ],
+                    },
+                    {
+                      'element': 'app-todo',
+                      'component': {'name': 'app-todo', 'isElement': false, 'id': 12},
+                      'directives': [{'name': '_TooltipDirective', 'id': 13}],
+                      'children': [
+                        {
+                          'element': 'div',
+                          'component': null,
+                          'directives': [{'name': '_TooltipDirective', 'id': 14}],
+                          'children': [],
+                          'resolutionPath': [
+                            {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
+                            {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
+                            {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                            {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                            {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                            {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                          ],
+                        },
+                      ],
+                      'resolutionPath': [
+                        {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
+                        {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                        {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                        {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                        {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                        {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                        {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                        {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                        {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                        {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                      ],
+                    },
+                    {
+                      'element': 'app-todo',
+                      'component': {'name': 'app-todo', 'isElement': false, 'id': 15},
+                      'directives': [{'name': '_TooltipDirective', 'id': 16}],
+                      'children': [
+                        {
+                          'element': 'div',
+                          'component': null,
+                          'directives': [{'name': '_TooltipDirective', 'id': 17}],
+                          'children': [],
+                          'resolutionPath': [
+                            {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
+                            {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
+                            {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                            {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                            {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                            {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                          ],
+                        },
+                      ],
+                      'resolutionPath': [
+                        {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
+                        {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                        {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                        {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                        {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                        {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                        {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                        {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                        {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                        {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                      ],
+                    },
+                    {
+                      'element': '#comment',
+                      'component': null,
+                      'directives': [{'name': '_NgForOf', 'id': 18}],
+                      'children': [],
+                      'resolutionPath': [
+                        {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                        {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                        {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                        {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                        {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                        {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                        {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                        {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                        {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                      ],
+                    },
+                  ],
+                  'resolutionPath': [
+                    {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                    {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                    {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                    {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                    {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                    {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                    {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
+                },
+              ],
+              'resolutionPath': [
+                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
+            },
+            {
+              'element': 'app-zippy',
+              'component': {'name': 'app-zippy', 'isElement': true, 'id': 19},
+              'directives': [],
+              'children': [],
+              'resolutionPath': [
+                {'id': '23', 'type': 'element', 'name': '_ZippyComponent'},
+                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
+            },
+            {
+              'element': 'app-heavy',
+              'component': {'name': 'app-heavy', 'isElement': false, 'id': 20},
+              'directives': [],
+              'children': [],
+              'resolutionPath': [
+                {'id': '24', 'type': 'element', 'name': '_HeavyComponent'},
+                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
+            },
+          ],
+          'resolutionPath': [
+            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
+        },
+        'path': [
+          {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+          {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+        ],
+      },
+      {
+        'node': {
+          'element': 'router-outlet',
+          'component': null,
+          'directives': [{'name': '_RouterOutlet', 'id': 3}],
+          'children': [],
+          'resolutionPath': [
+            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
+        },
+        'path': [
+          {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+          {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+        ],
+      },
+      {
+        'node': {
+          'element': 'app-todo-demo',
+          'component': {'name': 'app-todo-demo', 'isElement': false, 'id': 4},
+          'directives': [],
+          'children': [
+            {
+              'element': 'a',
+              'component': null,
+              'directives': [{'name': '_RouterLink', 'id': 5}],
+              'children': [],
+              'resolutionPath': [
+                {'id': '8', 'type': 'element', 'name': '_RouterLink'},
+                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
+            },
+            {
+              'element': 'a',
+              'component': null,
+              'directives': [{'name': '_RouterLink', 'id': 6}],
+              'children': [],
+              'resolutionPath': [
+                {'id': '11', 'type': 'element', 'name': '_RouterLink'},
+                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
+            },
+            {
+              'element': 'router-outlet',
+              'component': null,
+              'directives': [{'name': '_RouterOutlet', 'id': 7}],
+              'children': [],
+              'resolutionPath': [
+                {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
+            },
+            {
+              'element': 'app-todos',
+              'component': {'name': 'app-todos', 'isElement': false, 'id': 8},
+              'directives': [],
+              'children': [
+                {
+                  'element': 'a',
+                  'component': null,
+                  'directives': [{'name': '_RouterLink', 'id': 9}],
+                  'children': [],
+                  'resolutionPath': [
+                    {'id': '13', 'type': 'element', 'name': '_RouterLink'},
+                    {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                    {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                    {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                    {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                    {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                    {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                    {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
+                },
+                {
+                  'element': 'a',
+                  'component': null,
+                  'directives': [{'name': '_RouterLink', 'id': 10}],
+                  'children': [],
+                  'resolutionPath': [
+                    {'id': '16', 'type': 'element', 'name': '_RouterLink'},
+                    {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                    {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                    {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                    {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                    {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                    {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                    {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
+                },
+                {
+                  'element': 'a',
+                  'component': null,
+                  'directives': [{'name': '_RouterLink', 'id': 11}],
+                  'children': [],
+                  'resolutionPath': [
+                    {'id': '17', 'type': 'element', 'name': '_RouterLink'},
+                    {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                    {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                    {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                    {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                    {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                    {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                    {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
+                },
+                {
+                  'element': 'app-todo',
+                  'component': {'name': 'app-todo', 'isElement': false, 'id': 12},
+                  'directives': [{'name': '_TooltipDirective', 'id': 13}],
+                  'children': [
+                    {
+                      'element': 'div',
+                      'component': null,
+                      'directives': [{'name': '_TooltipDirective', 'id': 14}],
+                      'children': [],
+                      'resolutionPath': [
+                        {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
+                        {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
+                        {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                        {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                        {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                        {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                        {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                        {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                        {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                        {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                        {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                      ],
+                    },
+                  ],
+                  'resolutionPath': [
+                    {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
+                    {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                    {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                    {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                    {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                    {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                    {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                    {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                    {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
+                },
+                {
+                  'element': 'app-todo',
+                  'component': {'name': 'app-todo', 'isElement': false, 'id': 15},
+                  'directives': [{'name': '_TooltipDirective', 'id': 16}],
+                  'children': [
+                    {
+                      'element': 'div',
+                      'component': null,
+                      'directives': [{'name': '_TooltipDirective', 'id': 17}],
+                      'children': [],
+                      'resolutionPath': [
+                        {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
+                        {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
+                        {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                        {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                        {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                        {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                        {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                        {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                        {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                        {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                        {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                      ],
+                    },
+                  ],
+                  'resolutionPath': [
+                    {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
+                    {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                    {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                    {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                    {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                    {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                    {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                    {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                    {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
+                },
+                {
+                  'element': '#comment',
+                  'component': null,
+                  'directives': [{'name': '_NgForOf', 'id': 18}],
+                  'children': [],
+                  'resolutionPath': [
+                    {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                    {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                    {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                    {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                    {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                    {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                    {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                    {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
+                },
+              ],
+              'resolutionPath': [
+                {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
+            },
+          ],
+          'resolutionPath': [
+            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
+        },
+        'path': [
+          {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+          {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+          {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+        ],
+      },
+      {
+        'node': {
+          'element': 'a',
+          'component': null,
+          'directives': [{'name': '_RouterLink', 'id': 5}],
+          'children': [],
+          'resolutionPath': [
+            {'id': '8', 'type': 'element', 'name': '_RouterLink'},
+            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
+        },
+        'path': [
+          {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+          {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+          {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+        ],
+      },
+      {
+        'node': {
+          'element': 'a',
+          'component': null,
+          'directives': [{'name': '_RouterLink', 'id': 6}],
+          'children': [],
+          'resolutionPath': [
+            {'id': '11', 'type': 'element', 'name': '_RouterLink'},
+            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
+        },
+        'path': [
+          {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+          {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+          {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+        ],
+      },
+      {
+        'node': {
+          'element': 'router-outlet',
+          'component': null,
+          'directives': [{'name': '_RouterOutlet', 'id': 7}],
+          'children': [],
+          'resolutionPath': [
+            {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
+        },
+        'path': [
+          {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+          {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+          {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+        ],
+      },
+      {
+        'node': {
+          'element': 'app-todos',
+          'component': {'name': 'app-todos', 'isElement': false, 'id': 8},
+          'directives': [],
+          'children': [
+            {
+              'element': 'a',
+              'component': null,
+              'directives': [{'name': '_RouterLink', 'id': 9}],
+              'children': [],
+              'resolutionPath': [
+                {'id': '13', 'type': 'element', 'name': '_RouterLink'},
+                {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
+            },
+            {
+              'element': 'a',
+              'component': null,
+              'directives': [{'name': '_RouterLink', 'id': 10}],
+              'children': [],
+              'resolutionPath': [
+                {'id': '16', 'type': 'element', 'name': '_RouterLink'},
+                {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
+            },
+            {
+              'element': 'a',
+              'component': null,
+              'directives': [{'name': '_RouterLink', 'id': 11}],
+              'children': [],
+              'resolutionPath': [
+                {'id': '17', 'type': 'element', 'name': '_RouterLink'},
+                {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
+            },
+            {
+              'element': 'app-todo',
+              'component': {'name': 'app-todo', 'isElement': false, 'id': 12},
+              'directives': [{'name': '_TooltipDirective', 'id': 13}],
+              'children': [
+                {
+                  'element': 'div',
+                  'component': null,
+                  'directives': [{'name': '_TooltipDirective', 'id': 14}],
+                  'children': [],
+                  'resolutionPath': [
+                    {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
+                    {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
+                    {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                    {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                    {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                    {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                    {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                    {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                    {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                    {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
+                },
+              ],
+              'resolutionPath': [
+                {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
+                {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
+            },
+            {
+              'element': 'app-todo',
+              'component': {'name': 'app-todo', 'isElement': false, 'id': 15},
+              'directives': [{'name': '_TooltipDirective', 'id': 16}],
+              'children': [
+                {
+                  'element': 'div',
+                  'component': null,
+                  'directives': [{'name': '_TooltipDirective', 'id': 17}],
+                  'children': [],
+                  'resolutionPath': [
+                    {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
+                    {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
+                    {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                    {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                    {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                    {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                    {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                    {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                    {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                    {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
+                },
+              ],
+              'resolutionPath': [
+                {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
+                {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
+            },
+            {
+              'element': '#comment',
+              'component': null,
+              'directives': [{'name': '_NgForOf', 'id': 18}],
+              'children': [],
+              'resolutionPath': [
+                {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
+            },
+          ],
+          'resolutionPath': [
+            {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+            {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+            {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
+        },
+        'path': [
+          {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+          {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+          {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+          {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+        ],
+      },
+      {
+        'node': {
+          'element': 'a',
+          'component': null,
+          'directives': [{'name': '_RouterLink', 'id': 9}],
+          'children': [],
+          'resolutionPath': [
+            {'id': '13', 'type': 'element', 'name': '_RouterLink'},
+            {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+            {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+            {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
+        },
+        'path': [
+          {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+          {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+          {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+          {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+        ],
+      },
+      {
+        'node': {
+          'element': 'a',
+          'component': null,
+          'directives': [{'name': '_RouterLink', 'id': 10}],
+          'children': [],
+          'resolutionPath': [
+            {'id': '16', 'type': 'element', 'name': '_RouterLink'},
+            {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+            {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+            {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
+        },
+        'path': [
+          {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+          {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+          {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+          {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+        ],
+      },
+      {
+        'node': {
+          'element': 'a',
+          'component': null,
+          'directives': [{'name': '_RouterLink', 'id': 11}],
+          'children': [],
+          'resolutionPath': [
+            {'id': '17', 'type': 'element', 'name': '_RouterLink'},
+            {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+            {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+            {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
+        },
+        'path': [
+          {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+          {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+          {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+          {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+        ],
+      },
+      {
+        'node': {
+          'element': 'app-todo',
+          'component': {'name': 'app-todo', 'isElement': false, 'id': 12},
+          'directives': [{'name': '_TooltipDirective', 'id': 13}],
+          'children': [
+            {
+              'element': 'div',
+              'component': null,
+              'directives': [{'name': '_TooltipDirective', 'id': 14}],
+              'children': [],
+              'resolutionPath': [
+                {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
+                {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
+                {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
+            },
+          ],
+          'resolutionPath': [
+            {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
+            {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+            {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+            {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+            {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
+        },
+        'path': [
+          {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+          {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+          {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+          {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+        ],
+      },
+      {
+        'node': {
+          'element': 'div',
+          'component': null,
+          'directives': [{'name': '_TooltipDirective', 'id': 14}],
+          'children': [],
+          'resolutionPath': [
+            {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
+            {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
+            {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+            {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+            {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+            {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
+        },
+        'path': [
+          {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+          {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+          {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+          {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+        ],
+      },
+      {
+        'node': {
+          'element': 'app-todo',
+          'component': {'name': 'app-todo', 'isElement': false, 'id': 15},
+          'directives': [{'name': '_TooltipDirective', 'id': 16}],
+          'children': [
+            {
+              'element': 'div',
+              'component': null,
+              'directives': [{'name': '_TooltipDirective', 'id': 17}],
+              'children': [],
+              'resolutionPath': [
+                {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
+                {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
+                {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
+            },
+          ],
+          'resolutionPath': [
+            {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
+            {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+            {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+            {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+            {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
+        },
+        'path': [
+          {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+          {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+          {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+          {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+        ],
+      },
+      {
+        'node': {
+          'element': 'div',
+          'component': null,
+          'directives': [{'name': '_TooltipDirective', 'id': 17}],
+          'children': [],
+          'resolutionPath': [
+            {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
+            {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
+            {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+            {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+            {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+            {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
+        },
+        'path': [
+          {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+          {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+          {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+          {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+        ],
+      },
+      {
+        'node': {
+          'element': '#comment',
+          'component': null,
+          'directives': [{'name': '_NgForOf', 'id': 18}],
+          'children': [],
+          'resolutionPath': [
+            {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+            {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+            {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+            {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
+        },
+        'path': [
+          {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+          {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+          {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+          {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+        ],
+      },
+      {
+        'node': {
+          'element': 'app-zippy',
+          'component': {'name': 'app-zippy', 'isElement': true, 'id': 19},
+          'directives': [],
+          'children': [],
+          'resolutionPath': [
+            {'id': '23', 'type': 'element', 'name': '_ZippyComponent'},
+            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
+        },
+        'path': [
+          {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+          {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+        ],
+      },
+      {
+        'node': {
+          'element': 'app-heavy',
+          'component': {'name': 'app-heavy', 'isElement': false, 'id': 20},
+          'directives': [],
+          'children': [],
+          'resolutionPath': [
+            {'id': '24', 'type': 'element', 'name': '_HeavyComponent'},
+            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
+        },
+        'path': [
+          {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+          {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+        ],
+      },
+    ];
+
+    const expectedStartingElementToEnvironmentPath = new Map([
+      ['1', [{'id': '2', 'type': 'environment', 'name': '_AppModule'}]],
+      [
+        '6',
+        [
+          {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+          {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+        ],
+      ],
+      [
+        '9',
+        [
+          {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+          {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+          {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+        ],
+      ],
+      [
+        '14',
+        [
+          {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+          {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+          {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+          {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+        ],
+      ],
+      [
+        '19',
+        [
+          {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+          {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+          {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+          {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+        ],
+      ],
+      [
+        '18',
+        [
+          {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+          {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+          {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+          {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+        ],
+      ],
+      [
+        '22',
+        [
+          {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+          {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+          {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+          {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+        ],
+      ],
+      [
+        '21',
+        [
+          {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+          {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+          {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+          {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+        ],
+      ],
+      [
+        '23',
+        [
+          {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+          {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+        ],
+      ],
+      [
+        '24',
+        [
+          {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+          {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+        ],
+      ],
+    ]);
+
+    const {elementPaths, environmentPaths, startingElementToEnvironmentPath} =
+      splitInjectorPathsIntoElementAndEnvironmentPaths(injectorPaths);
+
+    expect(elementPaths).toEqual(expectedElementPaths);
+    expect(environmentPaths).toEqual(expectedEnvironmentPaths);
+    expect(startingElementToEnvironmentPath).toEqual(expectedStartingElementToEnvironmentPath);
+  });
+});
+
+describe('grabInjectorPathsFromDirectiveForest', () => {
+  it('should be able to get a list of injector paths from a directive forest', () => {
+    const directiveForest = [
+      {
+        'element': 'app-root',
+        'component': {'name': 'app-root', 'isElement': false, 'id': 0},
+        'directives': [],
+        'children': [
+          {
+            'element': 'router-outlet',
+            'component': null,
+            'directives': [{'name': '_RouterOutlet', 'id': 1}],
+            'children': [],
+            'resolutionPath': [
+              {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+              {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+              {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+              {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+              {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+            ],
+          },
+          {
+            'element': 'app-demo-component',
+            'component': {'name': 'app-demo-component', 'isElement': false, 'id': 2},
+            'directives': [],
+            'children': [
+              {
+                'element': 'router-outlet',
+                'component': null,
+                'directives': [{'name': '_RouterOutlet', 'id': 3}],
+                'children': [],
+                'resolutionPath': [
+                  {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                  {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                  {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                  {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                  {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                  {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                  {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                  {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                ],
               },
-              'children': [{
-                'injector': {
-                  'id': '14',
-                  'type': 'element',
-                  'name': '_TodosComponent',
-                  'node': {
+              {
+                'element': 'app-todo-demo',
+                'component': {'name': 'app-todo-demo', 'isElement': false, 'id': 4},
+                'directives': [],
+                'children': [
+                  {
+                    'element': 'a',
+                    'component': null,
+                    'directives': [{'name': '_RouterLink', 'id': 5}],
+                    'children': [],
+                    'resolutionPath': [
+                      {'id': '8', 'type': 'element', 'name': '_RouterLink'},
+                      {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                      {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                      {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                      {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                      {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                      {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                      {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                      {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                      {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                      {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                    ],
+                  },
+                  {
+                    'element': 'a',
+                    'component': null,
+                    'directives': [{'name': '_RouterLink', 'id': 6}],
+                    'children': [],
+                    'resolutionPath': [
+                      {'id': '11', 'type': 'element', 'name': '_RouterLink'},
+                      {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                      {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                      {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                      {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                      {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                      {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                      {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                      {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                      {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                      {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                    ],
+                  },
+                  {
+                    'element': 'router-outlet',
+                    'component': null,
+                    'directives': [{'name': '_RouterOutlet', 'id': 7}],
+                    'children': [],
+                    'resolutionPath': [
+                      {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                      {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                      {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                      {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                      {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                      {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                      {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                      {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                      {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                      {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                      {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                    ],
+                  },
+                  {
                     'element': 'app-todos',
                     'component': {'name': 'app-todos', 'isElement': false, 'id': 8},
                     'directives': [],
@@ -2720,8 +8496,8 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                           {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                           {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                           {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                          {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                        ]
+                          {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                        ],
                       },
                       {
                         'element': 'a',
@@ -2742,8 +8518,8 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                           {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                           {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                           {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                          {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                        ]
+                          {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                        ],
                       },
                       {
                         'element': 'a',
@@ -2764,37 +8540,39 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                           {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                           {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                           {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                          {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                        ]
+                          {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                        ],
                       },
                       {
                         'element': 'app-todo',
                         'component': {'name': 'app-todo', 'isElement': false, 'id': 12},
                         'directives': [{'name': '_TooltipDirective', 'id': 13}],
-                        'children': [{
-                          'element': 'div',
-                          'component': null,
-                          'directives': [{'name': '_TooltipDirective', 'id': 14}],
-                          'children': [],
-                          'resolutionPath': [
-                            {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
-                            {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
-                            {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                            {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                            {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                            {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                            {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                          ]
-                        }],
+                        'children': [
+                          {
+                            'element': 'div',
+                            'component': null,
+                            'directives': [{'name': '_TooltipDirective', 'id': 14}],
+                            'children': [],
+                            'resolutionPath': [
+                              {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
+                              {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
+                              {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                              {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                              {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                              {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                              {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                              {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                              {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                              {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                              {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                              {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                              {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                              {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                              {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                              {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                            ],
+                          },
+                        ],
                         'resolutionPath': [
                           {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
                           {'id': '20', 'type': 'element', 'name': '_NgForOf'},
@@ -2810,37 +8588,39 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                           {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                           {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                           {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                          {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                        ]
+                          {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                        ],
                       },
                       {
                         'element': 'app-todo',
                         'component': {'name': 'app-todo', 'isElement': false, 'id': 15},
                         'directives': [{'name': '_TooltipDirective', 'id': 16}],
-                        'children': [{
-                          'element': 'div',
-                          'component': null,
-                          'directives': [{'name': '_TooltipDirective', 'id': 17}],
-                          'children': [],
-                          'resolutionPath': [
-                            {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
-                            {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
-                            {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                            {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                            {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                            {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                            {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                          ]
-                        }],
+                        'children': [
+                          {
+                            'element': 'div',
+                            'component': null,
+                            'directives': [{'name': '_TooltipDirective', 'id': 17}],
+                            'children': [],
+                            'resolutionPath': [
+                              {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
+                              {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
+                              {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                              {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                              {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                              {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                              {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                              {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                              {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                              {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                              {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                              {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                              {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                              {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                              {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                              {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                            ],
+                          },
+                        ],
                         'resolutionPath': [
                           {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
                           {'id': '20', 'type': 'element', 'name': '_NgForOf'},
@@ -2856,8 +8636,8 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                           {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                           {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                           {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                          {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                        ]
+                          {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                        ],
                       },
                       {
                         'element': '#comment',
@@ -2878,9 +8658,9 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                           {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                           {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                           {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                          {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                        ]
-                      }
+                          {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                        ],
+                      },
                     ],
                     'resolutionPath': [
                       {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
@@ -2895,5726 +8675,72 @@ describe('transformInjectorResolutionPathsIntoTree', () => {
                       {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                       {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                       {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                      {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                    ]
-                  }
-                },
-                'children': [
-                  {
-                    'injector': {
-                      'id': '19',
-                      'type': 'element',
-                      'name': '_TodoComponent',
-                      'node': {
-                        'element': 'app-todo',
-                        'component': {'name': 'app-todo', 'isElement': false, 'id': 12},
-                        'directives': [{'name': '_TooltipDirective', 'id': 13}],
-                        'children': [{
-                          'element': 'div',
-                          'component': null,
-                          'directives': [{'name': '_TooltipDirective', 'id': 14}],
-                          'children': [],
-                          'resolutionPath': [
-                            {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
-                            {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
-                            {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                            {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                            {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                            {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                            {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                          ]
-                        }],
-                        'resolutionPath': [
-                          {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
-                          {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                          {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                          {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                          {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                          {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                          {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                          {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                          {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                          {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                          {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                          {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                          {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                          {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                          {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                        ]
-                      }
-                    },
-                    'children': [{
-                      'injector': {
-                        'id': '18',
-                        'type': 'element',
-                        'name': '_TooltipDirective',
-                        'node': {
-                          'element': 'div',
-                          'component': null,
-                          'directives': [{'name': '_TooltipDirective', 'id': 14}],
-                          'children': [],
-                          'resolutionPath': [
-                            {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
-                            {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
-                            {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                            {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                            {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                            {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                            {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                          ]
-                        }
-                      },
-                      'children': []
-                    }]
+                      {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                    ],
                   },
-                  {
-                    'injector': {
-                      'id': '22',
-                      'type': 'element',
-                      'name': '_TodoComponent',
-                      'node': {
-                        'element': 'app-todo',
-                        'component': {'name': 'app-todo', 'isElement': false, 'id': 15},
-                        'directives': [{'name': '_TooltipDirective', 'id': 16}],
-                        'children': [{
-                          'element': 'div',
-                          'component': null,
-                          'directives': [{'name': '_TooltipDirective', 'id': 17}],
-                          'children': [],
-                          'resolutionPath': [
-                            {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
-                            {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
-                            {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                            {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                            {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                            {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                            {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                          ]
-                        }],
-                        'resolutionPath': [
-                          {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
-                          {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                          {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                          {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                          {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                          {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                          {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                          {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                          {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                          {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                          {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                          {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                          {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                          {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                          {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                        ]
-                      }
-                    },
-                    'children': [{
-                      'injector': {
-                        'id': '21',
-                        'type': 'element',
-                        'name': '_TooltipDirective',
-                        'node': {
-                          'element': 'div',
-                          'component': null,
-                          'directives': [{'name': '_TooltipDirective', 'id': 17}],
-                          'children': [],
-                          'resolutionPath': [
-                            {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
-                            {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
-                            {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                            {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                            {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                            {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                            {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                          ]
-                        }
-                      },
-                      'children': []
-                    }]
-                  }
-                ]
-              }]
-            },
-            {
-              'injector': {
-                'id': '24',
-                'type': 'element',
-                'name': '_HeavyComponent',
-                'node': {
-                  'element': 'app-heavy',
-                  'component': {'name': 'app-heavy', 'isElement': false, 'id': 20},
-                  'directives': [],
-                  'children': [],
-                  'resolutionPath': [
-                    {'id': '24', 'type': 'element', 'name': '_HeavyComponent'},
-                    {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                    {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                    {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                    {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                    {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                    {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                    {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                  ]
-                }
+                ],
+                'resolutionPath': [
+                  {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                  {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                  {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                  {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                  {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                  {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                  {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                  {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                  {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                  {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                ],
               },
-              'children': []
-            }
-          ]
-        }]
-      }]
-    };
-
-    expect(transformInjectorResolutionPathsIntoTree(injectorPaths)).toEqual(expected);
-  });
-});
-
-describe('splitInjectorPathsIntoElementAndEnvironmentPaths', () => {
-  it('should be able to split injector paths into element and environment paths, and expose the mapping from each element to it\'s environment path',
-     () => {
-       const injectorPaths = [
-         {
-           'node': {
-             'element': 'app-root',
-             'component': {'name': 'app-root', 'isElement': false, 'id': 0},
-             'directives': [],
-             'children': [
-               {
-                 'element': 'router-outlet',
-                 'component': null,
-                 'directives': [{'name': '_RouterOutlet', 'id': 1}],
-                 'children': [],
-                 'resolutionPath': [
-                   {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                   {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                   {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                 ]
-               },
-               {
-                 'element': 'app-demo-component',
-                 'component': {'name': 'app-demo-component', 'isElement': false, 'id': 2},
-                 'directives': [],
-                 'children': [
-                   {
-                     'element': 'router-outlet',
-                     'component': null,
-                     'directives': [{'name': '_RouterOutlet', 'id': 3}],
-                     'children': [],
-                     'resolutionPath': [
-                       {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                       {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                       {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                       {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                       {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                     ]
-                   },
-                   {
-                     'element': 'app-todo-demo',
-                     'component': {'name': 'app-todo-demo', 'isElement': false, 'id': 4},
-                     'directives': [],
-                     'children': [
-                       {
-                         'element': 'a',
-                         'component': null,
-                         'directives': [{'name': '_RouterLink', 'id': 5}],
-                         'children': [],
-                         'resolutionPath': [
-                           {'id': '8', 'type': 'element', 'name': '_RouterLink'},
-                           {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                           {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                           {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                           {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                           {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                           {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                           {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                           {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                         ]
-                       },
-                       {
-                         'element': 'a',
-                         'component': null,
-                         'directives': [{'name': '_RouterLink', 'id': 6}],
-                         'children': [],
-                         'resolutionPath': [
-                           {'id': '11', 'type': 'element', 'name': '_RouterLink'},
-                           {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                           {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                           {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                           {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                           {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                           {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                           {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                           {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                         ]
-                       },
-                       {
-                         'element': 'router-outlet',
-                         'component': null,
-                         'directives': [{'name': '_RouterOutlet', 'id': 7}],
-                         'children': [],
-                         'resolutionPath': [
-                           {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                           {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                           {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                           {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                           {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                           {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                           {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                           {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                         ]
-                       },
-                       {
-                         'element': 'app-todos',
-                         'component': {'name': 'app-todos', 'isElement': false, 'id': 8},
-                         'directives': [],
-                         'children': [
-                           {
-                             'element': 'a',
-                             'component': null,
-                             'directives': [{'name': '_RouterLink', 'id': 9}],
-                             'children': [],
-                             'resolutionPath': [
-                               {'id': '13', 'type': 'element', 'name': '_RouterLink'},
-                               {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                               {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                               {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                               {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                               {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                               {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                               {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                               {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                               {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                             ]
-                           },
-                           {
-                             'element': 'a',
-                             'component': null,
-                             'directives': [{'name': '_RouterLink', 'id': 10}],
-                             'children': [],
-                             'resolutionPath': [
-                               {'id': '16', 'type': 'element', 'name': '_RouterLink'},
-                               {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                               {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                               {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                               {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                               {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                               {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                               {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                               {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                               {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                             ]
-                           },
-                           {
-                             'element': 'a',
-                             'component': null,
-                             'directives': [{'name': '_RouterLink', 'id': 11}],
-                             'children': [],
-                             'resolutionPath': [
-                               {'id': '17', 'type': 'element', 'name': '_RouterLink'},
-                               {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                               {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                               {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                               {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                               {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                               {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                               {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                               {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                               {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                             ]
-                           },
-                           {
-                             'element': 'app-todo',
-                             'component': {'name': 'app-todo', 'isElement': false, 'id': 12},
-                             'directives': [{'name': '_TooltipDirective', 'id': 13}],
-                             'children': [{
-                               'element': 'div',
-                               'component': null,
-                               'directives': [{'name': '_TooltipDirective', 'id': 14}],
-                               'children': [],
-                               'resolutionPath': [
-                                 {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
-                                 {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
-                                 {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                                 {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                                 {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                                 {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                                 {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                                 {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                                 {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                                 {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                                 {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                                 {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                                 {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                                 {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                                 {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                                 {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                               ]
-                             }],
-                             'resolutionPath': [
-                               {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
-                               {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                               {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                               {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                               {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                               {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                               {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                               {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                               {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                               {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                               {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                             ]
-                           },
-                           {
-                             'element': 'app-todo',
-                             'component': {'name': 'app-todo', 'isElement': false, 'id': 15},
-                             'directives': [{'name': '_TooltipDirective', 'id': 16}],
-                             'children': [{
-                               'element': 'div',
-                               'component': null,
-                               'directives': [{'name': '_TooltipDirective', 'id': 17}],
-                               'children': [],
-                               'resolutionPath': [
-                                 {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
-                                 {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
-                                 {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                                 {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                                 {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                                 {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                                 {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                                 {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                                 {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                                 {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                                 {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                                 {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                                 {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                                 {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                                 {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                                 {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                               ]
-                             }],
-                             'resolutionPath': [
-                               {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
-                               {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                               {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                               {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                               {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                               {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                               {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                               {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                               {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                               {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                               {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                             ]
-                           },
-                           {
-                             'element': '#comment',
-                             'component': null,
-                             'directives': [{'name': '_NgForOf', 'id': 18}],
-                             'children': [],
-                             'resolutionPath': [
-                               {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                               {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                               {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                               {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                               {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                               {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                               {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                               {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                               {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                               {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                             ]
-                           }
-                         ],
-                         'resolutionPath': [
-                           {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                           {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                           {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                           {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                           {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                           {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                           {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                           {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                           {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                           {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                         ]
-                       }
-                     ],
-                     'resolutionPath': [
-                       {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                       {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                       {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                       {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                       {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                       {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                     ]
-                   },
-                   {
-                     'element': 'app-zippy',
-                     'component': {'name': 'app-zippy', 'isElement': true, 'id': 19},
-                     'directives': [],
-                     'children': [],
-                     'resolutionPath': [
-                       {'id': '23', 'type': 'element', 'name': '_ZippyComponent'},
-                       {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                       {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                       {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                     ]
-                   },
-                   {
-                     'element': 'app-heavy',
-                     'component': {'name': 'app-heavy', 'isElement': false, 'id': 20},
-                     'directives': [],
-                     'children': [],
-                     'resolutionPath': [
-                       {'id': '24', 'type': 'element', 'name': '_HeavyComponent'},
-                       {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                       {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                       {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                       {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                       {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                     ]
-                   }
-                 ],
-                 'resolutionPath': [
-                   {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                   {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                   {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                   {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                   {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                 ]
-               }
-             ],
-             'resolutionPath': [
-               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-             ]
-           },
-           'path': [
-             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-             {'id': '1', 'type': 'element', 'name': '_AppComponent'}
-           ]
-         },
-         {
-           'node': {
-             'element': 'router-outlet',
-             'component': null,
-             'directives': [{'name': '_RouterOutlet', 'id': 1}],
-             'children': [],
-             'resolutionPath': [
-               {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-             ]
-           },
-           'path': [
-             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-             {'id': '1', 'type': 'element', 'name': '_AppComponent'}
-           ]
-         },
-         {
-           'node': {
-             'element': 'app-demo-component',
-             'component': {'name': 'app-demo-component', 'isElement': false, 'id': 2},
-             'directives': [],
-             'children': [
-               {
-                 'element': 'router-outlet',
-                 'component': null,
-                 'directives': [{'name': '_RouterOutlet', 'id': 3}],
-                 'children': [],
-                 'resolutionPath': [
-                   {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                   {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                   {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                   {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                   {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                 ]
-               },
-               {
-                 'element': 'app-todo-demo',
-                 'component': {'name': 'app-todo-demo', 'isElement': false, 'id': 4},
-                 'directives': [],
-                 'children': [
-                   {
-                     'element': 'a',
-                     'component': null,
-                     'directives': [{'name': '_RouterLink', 'id': 5}],
-                     'children': [],
-                     'resolutionPath': [
-                       {'id': '8', 'type': 'element', 'name': '_RouterLink'},
-                       {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                       {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                       {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                       {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                       {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                       {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                     ]
-                   },
-                   {
-                     'element': 'a',
-                     'component': null,
-                     'directives': [{'name': '_RouterLink', 'id': 6}],
-                     'children': [],
-                     'resolutionPath': [
-                       {'id': '11', 'type': 'element', 'name': '_RouterLink'},
-                       {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                       {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                       {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                       {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                       {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                       {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                     ]
-                   },
-                   {
-                     'element': 'router-outlet',
-                     'component': null,
-                     'directives': [{'name': '_RouterOutlet', 'id': 7}],
-                     'children': [],
-                     'resolutionPath': [
-                       {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                       {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                       {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                       {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                       {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                       {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                     ]
-                   },
-                   {
-                     'element': 'app-todos',
-                     'component': {'name': 'app-todos', 'isElement': false, 'id': 8},
-                     'directives': [],
-                     'children': [
-                       {
-                         'element': 'a',
-                         'component': null,
-                         'directives': [{'name': '_RouterLink', 'id': 9}],
-                         'children': [],
-                         'resolutionPath': [
-                           {'id': '13', 'type': 'element', 'name': '_RouterLink'},
-                           {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                           {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                           {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                           {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                           {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                           {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                           {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                           {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                           {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                           {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                         ]
-                       },
-                       {
-                         'element': 'a',
-                         'component': null,
-                         'directives': [{'name': '_RouterLink', 'id': 10}],
-                         'children': [],
-                         'resolutionPath': [
-                           {'id': '16', 'type': 'element', 'name': '_RouterLink'},
-                           {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                           {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                           {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                           {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                           {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                           {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                           {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                           {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                           {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                           {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                         ]
-                       },
-                       {
-                         'element': 'a',
-                         'component': null,
-                         'directives': [{'name': '_RouterLink', 'id': 11}],
-                         'children': [],
-                         'resolutionPath': [
-                           {'id': '17', 'type': 'element', 'name': '_RouterLink'},
-                           {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                           {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                           {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                           {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                           {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                           {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                           {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                           {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                           {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                           {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                         ]
-                       },
-                       {
-                         'element': 'app-todo',
-                         'component': {'name': 'app-todo', 'isElement': false, 'id': 12},
-                         'directives': [{'name': '_TooltipDirective', 'id': 13}],
-                         'children': [{
-                           'element': 'div',
-                           'component': null,
-                           'directives': [{'name': '_TooltipDirective', 'id': 14}],
-                           'children': [],
-                           'resolutionPath': [
-                             {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
-                             {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
-                             {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                             {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                             {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                             {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                             {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                             {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                             {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                             {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                             {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                             {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                             {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                             {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                           ]
-                         }],
-                         'resolutionPath': [
-                           {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
-                           {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                           {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                           {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                           {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                           {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                           {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                           {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                           {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                           {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                           {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                           {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                         ]
-                       },
-                       {
-                         'element': 'app-todo',
-                         'component': {'name': 'app-todo', 'isElement': false, 'id': 15},
-                         'directives': [{'name': '_TooltipDirective', 'id': 16}],
-                         'children': [{
-                           'element': 'div',
-                           'component': null,
-                           'directives': [{'name': '_TooltipDirective', 'id': 17}],
-                           'children': [],
-                           'resolutionPath': [
-                             {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
-                             {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
-                             {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                             {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                             {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                             {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                             {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                             {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                             {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                             {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                             {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                             {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                             {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                             {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                           ]
-                         }],
-                         'resolutionPath': [
-                           {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
-                           {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                           {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                           {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                           {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                           {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                           {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                           {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                           {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                           {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                           {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                           {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                         ]
-                       },
-                       {
-                         'element': '#comment',
-                         'component': null,
-                         'directives': [{'name': '_NgForOf', 'id': 18}],
-                         'children': [],
-                         'resolutionPath': [
-                           {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                           {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                           {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                           {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                           {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                           {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                           {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                           {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                           {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                           {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                           {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                         ]
-                       }
-                     ],
-                     'resolutionPath': [
-                       {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                       {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                       {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                       {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                       {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                       {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                       {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                       {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                     ]
-                   }
-                 ],
-                 'resolutionPath': [
-                   {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                   {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                   {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                   {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                   {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                   {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                 ]
-               },
-               {
-                 'element': 'app-zippy',
-                 'component': {'name': 'app-zippy', 'isElement': true, 'id': 19},
-                 'directives': [],
-                 'children': [],
-                 'resolutionPath': [
-                   {'id': '23', 'type': 'element', 'name': '_ZippyComponent'},
-                   {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                   {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                   {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                 ]
-               },
-               {
-                 'element': 'app-heavy',
-                 'component': {'name': 'app-heavy', 'isElement': false, 'id': 20},
-                 'directives': [],
-                 'children': [],
-                 'resolutionPath': [
-                   {'id': '24', 'type': 'element', 'name': '_HeavyComponent'},
-                   {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                   {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                   {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                   {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                   {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                 ]
-               }
-             ],
-             'resolutionPath': [
-               {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-               {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-               {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-             ]
-           },
-           'path': [
-             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-             {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-             {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'}
-           ]
-         },
-         {
-           'node': {
-             'element': 'router-outlet',
-             'component': null,
-             'directives': [{'name': '_RouterOutlet', 'id': 3}],
-             'children': [],
-             'resolutionPath': [
-               {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-               {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-               {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-             ]
-           },
-           'path': [
-             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-             {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-             {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'}
-           ]
-         },
-         {
-           'node': {
-             'element': 'app-todo-demo',
-             'component': {'name': 'app-todo-demo', 'isElement': false, 'id': 4},
-             'directives': [],
-             'children': [
-               {
-                 'element': 'a',
-                 'component': null,
-                 'directives': [{'name': '_RouterLink', 'id': 5}],
-                 'children': [],
-                 'resolutionPath': [
-                   {'id': '8', 'type': 'element', 'name': '_RouterLink'},
-                   {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                   {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                   {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                   {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                   {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                   {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                 ]
-               },
-               {
-                 'element': 'a',
-                 'component': null,
-                 'directives': [{'name': '_RouterLink', 'id': 6}],
-                 'children': [],
-                 'resolutionPath': [
-                   {'id': '11', 'type': 'element', 'name': '_RouterLink'},
-                   {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                   {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                   {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                   {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                   {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                   {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                 ]
-               },
-               {
-                 'element': 'router-outlet',
-                 'component': null,
-                 'directives': [{'name': '_RouterOutlet', 'id': 7}],
-                 'children': [],
-                 'resolutionPath': [
-                   {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                   {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                   {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                   {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                   {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                   {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                 ]
-               },
-               {
-                 'element': 'app-todos',
-                 'component': {'name': 'app-todos', 'isElement': false, 'id': 8},
-                 'directives': [],
-                 'children': [
-                   {
-                     'element': 'a',
-                     'component': null,
-                     'directives': [{'name': '_RouterLink', 'id': 9}],
-                     'children': [],
-                     'resolutionPath': [
-                       {'id': '13', 'type': 'element', 'name': '_RouterLink'},
-                       {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                       {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                       {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                       {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                       {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                       {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                       {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                       {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                     ]
-                   },
-                   {
-                     'element': 'a',
-                     'component': null,
-                     'directives': [{'name': '_RouterLink', 'id': 10}],
-                     'children': [],
-                     'resolutionPath': [
-                       {'id': '16', 'type': 'element', 'name': '_RouterLink'},
-                       {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                       {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                       {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                       {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                       {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                       {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                       {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                       {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                     ]
-                   },
-                   {
-                     'element': 'a',
-                     'component': null,
-                     'directives': [{'name': '_RouterLink', 'id': 11}],
-                     'children': [],
-                     'resolutionPath': [
-                       {'id': '17', 'type': 'element', 'name': '_RouterLink'},
-                       {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                       {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                       {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                       {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                       {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                       {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                       {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                       {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                     ]
-                   },
-                   {
-                     'element': 'app-todo',
-                     'component': {'name': 'app-todo', 'isElement': false, 'id': 12},
-                     'directives': [{'name': '_TooltipDirective', 'id': 13}],
-                     'children': [{
-                       'element': 'div',
-                       'component': null,
-                       'directives': [{'name': '_TooltipDirective', 'id': 14}],
-                       'children': [],
-                       'resolutionPath': [
-                         {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
-                         {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
-                         {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                         {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                         {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                         {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                         {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                         {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                         {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                         {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                         {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                         {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                         {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                         {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                         {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                         {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                       ]
-                     }],
-                     'resolutionPath': [
-                       {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
-                       {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                       {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                       {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                       {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                       {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                       {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                       {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                       {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                       {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                     ]
-                   },
-                   {
-                     'element': 'app-todo',
-                     'component': {'name': 'app-todo', 'isElement': false, 'id': 15},
-                     'directives': [{'name': '_TooltipDirective', 'id': 16}],
-                     'children': [{
-                       'element': 'div',
-                       'component': null,
-                       'directives': [{'name': '_TooltipDirective', 'id': 17}],
-                       'children': [],
-                       'resolutionPath': [
-                         {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
-                         {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
-                         {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                         {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                         {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                         {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                         {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                         {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                         {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                         {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                         {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                         {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                         {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                         {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                         {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                         {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                       ]
-                     }],
-                     'resolutionPath': [
-                       {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
-                       {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                       {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                       {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                       {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                       {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                       {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                       {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                       {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                       {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                     ]
-                   },
-                   {
-                     'element': '#comment',
-                     'component': null,
-                     'directives': [{'name': '_NgForOf', 'id': 18}],
-                     'children': [],
-                     'resolutionPath': [
-                       {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                       {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                       {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                       {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                       {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                       {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                       {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                       {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                       {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                     ]
-                   }
-                 ],
-                 'resolutionPath': [
-                   {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                   {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                   {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                   {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                   {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                   {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                   {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                   {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                 ]
-               }
-             ],
-             'resolutionPath': [
-               {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-               {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-               {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-               {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-             ]
-           },
-           'path': [
-             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-             {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-             {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-             {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-             {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'}
-           ]
-         },
-         {
-           'node': {
-             'element': 'a',
-             'component': null,
-             'directives': [{'name': '_RouterLink', 'id': 5}],
-             'children': [],
-             'resolutionPath': [
-               {'id': '8', 'type': 'element', 'name': '_RouterLink'},
-               {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-               {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-               {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-               {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-             ]
-           },
-           'path': [
-             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-             {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-             {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-             {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-             {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'}
-           ]
-         },
-         {
-           'node': {
-             'element': 'a',
-             'component': null,
-             'directives': [{'name': '_RouterLink', 'id': 6}],
-             'children': [],
-             'resolutionPath': [
-               {'id': '11', 'type': 'element', 'name': '_RouterLink'},
-               {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-               {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-               {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-               {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-             ]
-           },
-           'path': [
-             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-             {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-             {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-             {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-             {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'}
-           ]
-         },
-         {
-           'node': {
-             'element': 'router-outlet',
-             'component': null,
-             'directives': [{'name': '_RouterOutlet', 'id': 7}],
-             'children': [],
-             'resolutionPath': [
-               {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-               {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-               {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-               {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-             ]
-           },
-           'path': [
-             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-             {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-             {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-             {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-             {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'}
-           ]
-         },
-         {
-           'node': {
-             'element': 'app-todos',
-             'component': {'name': 'app-todos', 'isElement': false, 'id': 8},
-             'directives': [],
-             'children': [
-               {
-                 'element': 'a',
-                 'component': null,
-                 'directives': [{'name': '_RouterLink', 'id': 9}],
-                 'children': [],
-                 'resolutionPath': [
-                   {'id': '13', 'type': 'element', 'name': '_RouterLink'},
-                   {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                   {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                   {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                   {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                   {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                   {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                   {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                   {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                 ]
-               },
-               {
-                 'element': 'a',
-                 'component': null,
-                 'directives': [{'name': '_RouterLink', 'id': 10}],
-                 'children': [],
-                 'resolutionPath': [
-                   {'id': '16', 'type': 'element', 'name': '_RouterLink'},
-                   {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                   {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                   {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                   {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                   {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                   {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                   {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                   {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                 ]
-               },
-               {
-                 'element': 'a',
-                 'component': null,
-                 'directives': [{'name': '_RouterLink', 'id': 11}],
-                 'children': [],
-                 'resolutionPath': [
-                   {'id': '17', 'type': 'element', 'name': '_RouterLink'},
-                   {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                   {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                   {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                   {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                   {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                   {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                   {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                   {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                 ]
-               },
-               {
-                 'element': 'app-todo',
-                 'component': {'name': 'app-todo', 'isElement': false, 'id': 12},
-                 'directives': [{'name': '_TooltipDirective', 'id': 13}],
-                 'children': [{
-                   'element': 'div',
-                   'component': null,
-                   'directives': [{'name': '_TooltipDirective', 'id': 14}],
-                   'children': [],
-                   'resolutionPath': [
-                     {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
-                     {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
-                     {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                     {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                     {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                     {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                     {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                     {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                     {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                     {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                     {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                     {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                     {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                     {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                     {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                     {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                   ]
-                 }],
-                 'resolutionPath': [
-                   {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
-                   {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                   {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                   {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                   {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                   {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                   {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                   {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                   {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                   {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                 ]
-               },
-               {
-                 'element': 'app-todo',
-                 'component': {'name': 'app-todo', 'isElement': false, 'id': 15},
-                 'directives': [{'name': '_TooltipDirective', 'id': 16}],
-                 'children': [{
-                   'element': 'div',
-                   'component': null,
-                   'directives': [{'name': '_TooltipDirective', 'id': 17}],
-                   'children': [],
-                   'resolutionPath': [
-                     {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
-                     {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
-                     {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                     {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                     {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                     {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                     {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                     {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                     {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                     {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                     {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                     {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                     {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                     {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                     {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                     {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                   ]
-                 }],
-                 'resolutionPath': [
-                   {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
-                   {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                   {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                   {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                   {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                   {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                   {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                   {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                   {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                   {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                 ]
-               },
-               {
-                 'element': '#comment',
-                 'component': null,
-                 'directives': [{'name': '_NgForOf', 'id': 18}],
-                 'children': [],
-                 'resolutionPath': [
-                   {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                   {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                   {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                   {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                   {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                   {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                   {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                   {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                   {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                 ]
-               }
-             ],
-             'resolutionPath': [
-               {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-               {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-               {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-               {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-               {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-               {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-             ]
-           },
-           'path': [
-             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-             {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-             {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-             {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-             {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-             {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-             {'id': '14', 'type': 'element', 'name': '_TodosComponent'}
-           ]
-         },
-         {
-           'node': {
-             'element': 'a',
-             'component': null,
-             'directives': [{'name': '_RouterLink', 'id': 9}],
-             'children': [],
-             'resolutionPath': [
-               {'id': '13', 'type': 'element', 'name': '_RouterLink'},
-               {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-               {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-               {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-               {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-               {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-               {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-             ]
-           },
-           'path': [
-             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-             {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-             {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-             {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-             {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-             {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-             {'id': '14', 'type': 'element', 'name': '_TodosComponent'}
-           ]
-         },
-         {
-           'node': {
-             'element': 'a',
-             'component': null,
-             'directives': [{'name': '_RouterLink', 'id': 10}],
-             'children': [],
-             'resolutionPath': [
-               {'id': '16', 'type': 'element', 'name': '_RouterLink'},
-               {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-               {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-               {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-               {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-               {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-               {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-             ]
-           },
-           'path': [
-             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-             {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-             {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-             {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-             {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-             {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-             {'id': '14', 'type': 'element', 'name': '_TodosComponent'}
-           ]
-         },
-         {
-           'node': {
-             'element': 'a',
-             'component': null,
-             'directives': [{'name': '_RouterLink', 'id': 11}],
-             'children': [],
-             'resolutionPath': [
-               {'id': '17', 'type': 'element', 'name': '_RouterLink'},
-               {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-               {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-               {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-               {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-               {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-               {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-             ]
-           },
-           'path': [
-             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-             {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-             {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-             {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-             {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-             {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-             {'id': '14', 'type': 'element', 'name': '_TodosComponent'}
-           ]
-         },
-         {
-           'node': {
-             'element': 'app-todo',
-             'component': {'name': 'app-todo', 'isElement': false, 'id': 12},
-             'directives': [{'name': '_TooltipDirective', 'id': 13}],
-             'children': [{
-               'element': 'div',
-               'component': null,
-               'directives': [{'name': '_TooltipDirective', 'id': 14}],
-               'children': [],
-               'resolutionPath': [
-                 {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
-                 {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
-                 {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                 {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                 {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                 {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                 {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                 {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                 {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                 {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                 {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                 {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                 {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                 {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                 {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                 {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-               ]
-             }],
-             'resolutionPath': [
-               {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
-               {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-               {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-               {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-               {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-               {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-               {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-               {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-             ]
-           },
-           'path': [
-             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-             {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-             {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-             {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-             {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-             {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-             {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-             {'id': '19', 'type': 'element', 'name': '_TodoComponent'}
-           ]
-         },
-         {
-           'node': {
-             'element': 'div',
-             'component': null,
-             'directives': [{'name': '_TooltipDirective', 'id': 14}],
-             'children': [],
-             'resolutionPath': [
-               {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
-               {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
-               {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-               {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-               {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-               {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-               {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-               {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-               {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-             ]
-           },
-           'path': [
-             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-             {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-             {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-             {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-             {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-             {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-             {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-             {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
-             {'id': '18', 'type': 'element', 'name': '_TooltipDirective'}
-           ]
-         },
-         {
-           'node': {
-             'element': 'app-todo',
-             'component': {'name': 'app-todo', 'isElement': false, 'id': 15},
-             'directives': [{'name': '_TooltipDirective', 'id': 16}],
-             'children': [{
-               'element': 'div',
-               'component': null,
-               'directives': [{'name': '_TooltipDirective', 'id': 17}],
-               'children': [],
-               'resolutionPath': [
-                 {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
-                 {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
-                 {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                 {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                 {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                 {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                 {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                 {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                 {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                 {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                 {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                 {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                 {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                 {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                 {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                 {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-               ]
-             }],
-             'resolutionPath': [
-               {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
-               {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-               {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-               {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-               {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-               {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-               {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-               {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-             ]
-           },
-           'path': [
-             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-             {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-             {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-             {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-             {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-             {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-             {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-             {'id': '22', 'type': 'element', 'name': '_TodoComponent'}
-           ]
-         },
-         {
-           'node': {
-             'element': 'div',
-             'component': null,
-             'directives': [{'name': '_TooltipDirective', 'id': 17}],
-             'children': [],
-             'resolutionPath': [
-               {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
-               {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
-               {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-               {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-               {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-               {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-               {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-               {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-               {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-             ]
-           },
-           'path': [
-             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-             {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-             {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-             {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-             {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-             {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-             {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-             {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
-             {'id': '21', 'type': 'element', 'name': '_TooltipDirective'}
-           ]
-         },
-         {
-           'node': {
-             'element': '#comment',
-             'component': null,
-             'directives': [{'name': '_NgForOf', 'id': 18}],
-             'children': [],
-             'resolutionPath': [
-               {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-               {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-               {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-               {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-               {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-               {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-               {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-             ]
-           },
-           'path': [
-             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-             {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-             {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-             {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-             {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-             {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-             {'id': '14', 'type': 'element', 'name': '_TodosComponent'}
-           ]
-         },
-         {
-           'node': {
-             'element': 'app-zippy',
-             'component': {'name': 'app-zippy', 'isElement': true, 'id': 19},
-             'directives': [],
-             'children': [],
-             'resolutionPath': [
-               {'id': '23', 'type': 'element', 'name': '_ZippyComponent'},
-               {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-             ]
-           },
-           'path': [
-             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-             {'id': '23', 'type': 'element', 'name': '_ZippyComponent'}
-           ]
-         },
-         {
-           'node': {
-             'element': 'app-heavy',
-             'component': {'name': 'app-heavy', 'isElement': false, 'id': 20},
-             'directives': [],
-             'children': [],
-             'resolutionPath': [
-               {'id': '24', 'type': 'element', 'name': '_HeavyComponent'},
-               {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-               {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-               {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-             ]
-           },
-           'path': [
-             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-             {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-             {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-             {'id': '24', 'type': 'element', 'name': '_HeavyComponent'}
-           ]
-         }
-       ];
-
-       const expectedElementPaths = [
-         {
-           'node': {
-             'element': 'app-root',
-             'component': {'name': 'app-root', 'isElement': false, 'id': 0},
-             'directives': [],
-             'children': [
-               {
-                 'element': 'router-outlet',
-                 'component': null,
-                 'directives': [{'name': '_RouterOutlet', 'id': 1}],
-                 'children': [],
-                 'resolutionPath': [
-                   {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                   {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                   {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                 ]
-               },
-               {
-                 'element': 'app-demo-component',
-                 'component': {'name': 'app-demo-component', 'isElement': false, 'id': 2},
-                 'directives': [],
-                 'children': [
-                   {
-                     'element': 'router-outlet',
-                     'component': null,
-                     'directives': [{'name': '_RouterOutlet', 'id': 3}],
-                     'children': [],
-                     'resolutionPath': [
-                       {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                       {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                       {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                       {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                       {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                     ]
-                   },
-                   {
-                     'element': 'app-todo-demo',
-                     'component': {'name': 'app-todo-demo', 'isElement': false, 'id': 4},
-                     'directives': [],
-                     'children': [
-                       {
-                         'element': 'a',
-                         'component': null,
-                         'directives': [{'name': '_RouterLink', 'id': 5}],
-                         'children': [],
-                         'resolutionPath': [
-                           {'id': '8', 'type': 'element', 'name': '_RouterLink'},
-                           {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                           {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                           {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                           {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                           {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                           {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                           {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                           {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                         ]
-                       },
-                       {
-                         'element': 'a',
-                         'component': null,
-                         'directives': [{'name': '_RouterLink', 'id': 6}],
-                         'children': [],
-                         'resolutionPath': [
-                           {'id': '11', 'type': 'element', 'name': '_RouterLink'},
-                           {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                           {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                           {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                           {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                           {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                           {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                           {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                           {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                         ]
-                       },
-                       {
-                         'element': 'router-outlet',
-                         'component': null,
-                         'directives': [{'name': '_RouterOutlet', 'id': 7}],
-                         'children': [],
-                         'resolutionPath': [
-                           {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                           {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                           {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                           {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                           {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                           {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                           {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                           {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                         ]
-                       },
-                       {
-                         'element': 'app-todos',
-                         'component': {'name': 'app-todos', 'isElement': false, 'id': 8},
-                         'directives': [],
-                         'children': [
-                           {
-                             'element': 'a',
-                             'component': null,
-                             'directives': [{'name': '_RouterLink', 'id': 9}],
-                             'children': [],
-                             'resolutionPath': [
-                               {'id': '13', 'type': 'element', 'name': '_RouterLink'},
-                               {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                               {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                               {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                               {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                               {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                               {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                               {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                               {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                               {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                             ]
-                           },
-                           {
-                             'element': 'a',
-                             'component': null,
-                             'directives': [{'name': '_RouterLink', 'id': 10}],
-                             'children': [],
-                             'resolutionPath': [
-                               {'id': '16', 'type': 'element', 'name': '_RouterLink'},
-                               {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                               {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                               {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                               {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                               {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                               {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                               {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                               {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                               {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                             ]
-                           },
-                           {
-                             'element': 'a',
-                             'component': null,
-                             'directives': [{'name': '_RouterLink', 'id': 11}],
-                             'children': [],
-                             'resolutionPath': [
-                               {'id': '17', 'type': 'element', 'name': '_RouterLink'},
-                               {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                               {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                               {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                               {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                               {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                               {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                               {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                               {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                               {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                             ]
-                           },
-                           {
-                             'element': 'app-todo',
-                             'component': {'name': 'app-todo', 'isElement': false, 'id': 12},
-                             'directives': [{'name': '_TooltipDirective', 'id': 13}],
-                             'children': [{
-                               'element': 'div',
-                               'component': null,
-                               'directives': [{'name': '_TooltipDirective', 'id': 14}],
-                               'children': [],
-                               'resolutionPath': [
-                                 {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
-                                 {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
-                                 {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                                 {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                                 {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                                 {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                                 {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                                 {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                                 {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                                 {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                                 {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                                 {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                                 {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                                 {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                                 {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                                 {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                               ]
-                             }],
-                             'resolutionPath': [
-                               {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
-                               {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                               {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                               {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                               {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                               {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                               {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                               {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                               {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                               {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                               {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                             ]
-                           },
-                           {
-                             'element': 'app-todo',
-                             'component': {'name': 'app-todo', 'isElement': false, 'id': 15},
-                             'directives': [{'name': '_TooltipDirective', 'id': 16}],
-                             'children': [{
-                               'element': 'div',
-                               'component': null,
-                               'directives': [{'name': '_TooltipDirective', 'id': 17}],
-                               'children': [],
-                               'resolutionPath': [
-                                 {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
-                                 {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
-                                 {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                                 {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                                 {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                                 {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                                 {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                                 {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                                 {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                                 {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                                 {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                                 {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                                 {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                                 {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                                 {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                                 {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                               ]
-                             }],
-                             'resolutionPath': [
-                               {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
-                               {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                               {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                               {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                               {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                               {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                               {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                               {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                               {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                               {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                               {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                             ]
-                           },
-                           {
-                             'element': '#comment',
-                             'component': null,
-                             'directives': [{'name': '_NgForOf', 'id': 18}],
-                             'children': [],
-                             'resolutionPath': [
-                               {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                               {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                               {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                               {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                               {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                               {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                               {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                               {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                               {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                               {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                             ]
-                           }
-                         ],
-                         'resolutionPath': [
-                           {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                           {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                           {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                           {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                           {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                           {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                           {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                           {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                           {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                           {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                         ]
-                       }
-                     ],
-                     'resolutionPath': [
-                       {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                       {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                       {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                       {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                       {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                       {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                     ]
-                   },
-                   {
-                     'element': 'app-zippy',
-                     'component': {'name': 'app-zippy', 'isElement': true, 'id': 19},
-                     'directives': [],
-                     'children': [],
-                     'resolutionPath': [
-                       {'id': '23', 'type': 'element', 'name': '_ZippyComponent'},
-                       {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                       {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                       {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                     ]
-                   },
-                   {
-                     'element': 'app-heavy',
-                     'component': {'name': 'app-heavy', 'isElement': false, 'id': 20},
-                     'directives': [],
-                     'children': [],
-                     'resolutionPath': [
-                       {'id': '24', 'type': 'element', 'name': '_HeavyComponent'},
-                       {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                       {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                       {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                       {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                       {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                     ]
-                   }
-                 ],
-                 'resolutionPath': [
-                   {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                   {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                   {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                   {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                   {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                 ]
-               }
-             ],
-             'resolutionPath': [
-               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-             ]
-           },
-           'path': [{'id': '1', 'type': 'element', 'name': '_AppComponent'}]
-         },
-         {
-           'node': {
-             'element': 'router-outlet',
-             'component': null,
-             'directives': [{'name': '_RouterOutlet', 'id': 1}],
-             'children': [],
-             'resolutionPath': [
-               {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-             ]
-           },
-           'path': [{'id': '1', 'type': 'element', 'name': '_AppComponent'}]
-         },
-         {
-           'node': {
-             'element': 'app-demo-component',
-             'component': {'name': 'app-demo-component', 'isElement': false, 'id': 2},
-             'directives': [],
-             'children': [
-               {
-                 'element': 'router-outlet',
-                 'component': null,
-                 'directives': [{'name': '_RouterOutlet', 'id': 3}],
-                 'children': [],
-                 'resolutionPath': [
-                   {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                   {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                   {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                   {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                   {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                 ]
-               },
-               {
-                 'element': 'app-todo-demo',
-                 'component': {'name': 'app-todo-demo', 'isElement': false, 'id': 4},
-                 'directives': [],
-                 'children': [
-                   {
-                     'element': 'a',
-                     'component': null,
-                     'directives': [{'name': '_RouterLink', 'id': 5}],
-                     'children': [],
-                     'resolutionPath': [
-                       {'id': '8', 'type': 'element', 'name': '_RouterLink'},
-                       {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                       {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                       {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                       {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                       {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                       {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                     ]
-                   },
-                   {
-                     'element': 'a',
-                     'component': null,
-                     'directives': [{'name': '_RouterLink', 'id': 6}],
-                     'children': [],
-                     'resolutionPath': [
-                       {'id': '11', 'type': 'element', 'name': '_RouterLink'},
-                       {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                       {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                       {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                       {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                       {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                       {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                     ]
-                   },
-                   {
-                     'element': 'router-outlet',
-                     'component': null,
-                     'directives': [{'name': '_RouterOutlet', 'id': 7}],
-                     'children': [],
-                     'resolutionPath': [
-                       {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                       {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                       {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                       {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                       {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                       {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                     ]
-                   },
-                   {
-                     'element': 'app-todos',
-                     'component': {'name': 'app-todos', 'isElement': false, 'id': 8},
-                     'directives': [],
-                     'children': [
-                       {
-                         'element': 'a',
-                         'component': null,
-                         'directives': [{'name': '_RouterLink', 'id': 9}],
-                         'children': [],
-                         'resolutionPath': [
-                           {'id': '13', 'type': 'element', 'name': '_RouterLink'},
-                           {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                           {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                           {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                           {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                           {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                           {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                           {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                           {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                           {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                           {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                         ]
-                       },
-                       {
-                         'element': 'a',
-                         'component': null,
-                         'directives': [{'name': '_RouterLink', 'id': 10}],
-                         'children': [],
-                         'resolutionPath': [
-                           {'id': '16', 'type': 'element', 'name': '_RouterLink'},
-                           {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                           {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                           {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                           {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                           {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                           {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                           {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                           {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                           {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                           {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                         ]
-                       },
-                       {
-                         'element': 'a',
-                         'component': null,
-                         'directives': [{'name': '_RouterLink', 'id': 11}],
-                         'children': [],
-                         'resolutionPath': [
-                           {'id': '17', 'type': 'element', 'name': '_RouterLink'},
-                           {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                           {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                           {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                           {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                           {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                           {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                           {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                           {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                           {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                           {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                         ]
-                       },
-                       {
-                         'element': 'app-todo',
-                         'component': {'name': 'app-todo', 'isElement': false, 'id': 12},
-                         'directives': [{'name': '_TooltipDirective', 'id': 13}],
-                         'children': [{
-                           'element': 'div',
-                           'component': null,
-                           'directives': [{'name': '_TooltipDirective', 'id': 14}],
-                           'children': [],
-                           'resolutionPath': [
-                             {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
-                             {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
-                             {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                             {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                             {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                             {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                             {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                             {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                             {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                             {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                             {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                             {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                             {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                             {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                           ]
-                         }],
-                         'resolutionPath': [
-                           {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
-                           {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                           {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                           {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                           {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                           {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                           {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                           {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                           {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                           {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                           {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                           {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                         ]
-                       },
-                       {
-                         'element': 'app-todo',
-                         'component': {'name': 'app-todo', 'isElement': false, 'id': 15},
-                         'directives': [{'name': '_TooltipDirective', 'id': 16}],
-                         'children': [{
-                           'element': 'div',
-                           'component': null,
-                           'directives': [{'name': '_TooltipDirective', 'id': 17}],
-                           'children': [],
-                           'resolutionPath': [
-                             {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
-                             {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
-                             {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                             {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                             {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                             {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                             {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                             {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                             {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                             {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                             {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                             {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                             {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                             {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                           ]
-                         }],
-                         'resolutionPath': [
-                           {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
-                           {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                           {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                           {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                           {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                           {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                           {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                           {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                           {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                           {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                           {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                           {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                         ]
-                       },
-                       {
-                         'element': '#comment',
-                         'component': null,
-                         'directives': [{'name': '_NgForOf', 'id': 18}],
-                         'children': [],
-                         'resolutionPath': [
-                           {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                           {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                           {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                           {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                           {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                           {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                           {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                           {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                           {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                           {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                           {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                         ]
-                       }
-                     ],
-                     'resolutionPath': [
-                       {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                       {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                       {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                       {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                       {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                       {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                       {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                       {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                     ]
-                   }
-                 ],
-                 'resolutionPath': [
-                   {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                   {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                   {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                   {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                   {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                   {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                 ]
-               },
-               {
-                 'element': 'app-zippy',
-                 'component': {'name': 'app-zippy', 'isElement': true, 'id': 19},
-                 'directives': [],
-                 'children': [],
-                 'resolutionPath': [
-                   {'id': '23', 'type': 'element', 'name': '_ZippyComponent'},
-                   {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                   {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                   {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                 ]
-               },
-               {
-                 'element': 'app-heavy',
-                 'component': {'name': 'app-heavy', 'isElement': false, 'id': 20},
-                 'directives': [],
-                 'children': [],
-                 'resolutionPath': [
-                   {'id': '24', 'type': 'element', 'name': '_HeavyComponent'},
-                   {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                   {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                   {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                   {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                   {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                 ]
-               }
-             ],
-             'resolutionPath': [
-               {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-               {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-               {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-             ]
-           },
-           'path': [
-             {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-             {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'}
-           ]
-         },
-         {
-           'node': {
-             'element': 'router-outlet',
-             'component': null,
-             'directives': [{'name': '_RouterOutlet', 'id': 3}],
-             'children': [],
-             'resolutionPath': [
-               {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-               {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-               {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-             ]
-           },
-           'path': [
-             {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-             {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'}
-           ]
-         },
-         {
-           'node': {
-             'element': 'app-todo-demo',
-             'component': {'name': 'app-todo-demo', 'isElement': false, 'id': 4},
-             'directives': [],
-             'children': [
-               {
-                 'element': 'a',
-                 'component': null,
-                 'directives': [{'name': '_RouterLink', 'id': 5}],
-                 'children': [],
-                 'resolutionPath': [
-                   {'id': '8', 'type': 'element', 'name': '_RouterLink'},
-                   {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                   {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                   {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                   {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                   {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                   {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                 ]
-               },
-               {
-                 'element': 'a',
-                 'component': null,
-                 'directives': [{'name': '_RouterLink', 'id': 6}],
-                 'children': [],
-                 'resolutionPath': [
-                   {'id': '11', 'type': 'element', 'name': '_RouterLink'},
-                   {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                   {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                   {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                   {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                   {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                   {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                 ]
-               },
-               {
-                 'element': 'router-outlet',
-                 'component': null,
-                 'directives': [{'name': '_RouterOutlet', 'id': 7}],
-                 'children': [],
-                 'resolutionPath': [
-                   {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                   {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                   {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                   {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                   {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                   {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                 ]
-               },
-               {
-                 'element': 'app-todos',
-                 'component': {'name': 'app-todos', 'isElement': false, 'id': 8},
-                 'directives': [],
-                 'children': [
-                   {
-                     'element': 'a',
-                     'component': null,
-                     'directives': [{'name': '_RouterLink', 'id': 9}],
-                     'children': [],
-                     'resolutionPath': [
-                       {'id': '13', 'type': 'element', 'name': '_RouterLink'},
-                       {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                       {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                       {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                       {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                       {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                       {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                       {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                       {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                     ]
-                   },
-                   {
-                     'element': 'a',
-                     'component': null,
-                     'directives': [{'name': '_RouterLink', 'id': 10}],
-                     'children': [],
-                     'resolutionPath': [
-                       {'id': '16', 'type': 'element', 'name': '_RouterLink'},
-                       {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                       {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                       {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                       {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                       {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                       {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                       {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                       {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                     ]
-                   },
-                   {
-                     'element': 'a',
-                     'component': null,
-                     'directives': [{'name': '_RouterLink', 'id': 11}],
-                     'children': [],
-                     'resolutionPath': [
-                       {'id': '17', 'type': 'element', 'name': '_RouterLink'},
-                       {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                       {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                       {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                       {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                       {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                       {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                       {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                       {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                     ]
-                   },
-                   {
-                     'element': 'app-todo',
-                     'component': {'name': 'app-todo', 'isElement': false, 'id': 12},
-                     'directives': [{'name': '_TooltipDirective', 'id': 13}],
-                     'children': [{
-                       'element': 'div',
-                       'component': null,
-                       'directives': [{'name': '_TooltipDirective', 'id': 14}],
-                       'children': [],
-                       'resolutionPath': [
-                         {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
-                         {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
-                         {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                         {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                         {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                         {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                         {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                         {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                         {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                         {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                         {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                         {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                         {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                         {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                         {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                         {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                       ]
-                     }],
-                     'resolutionPath': [
-                       {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
-                       {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                       {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                       {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                       {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                       {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                       {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                       {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                       {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                       {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                     ]
-                   },
-                   {
-                     'element': 'app-todo',
-                     'component': {'name': 'app-todo', 'isElement': false, 'id': 15},
-                     'directives': [{'name': '_TooltipDirective', 'id': 16}],
-                     'children': [{
-                       'element': 'div',
-                       'component': null,
-                       'directives': [{'name': '_TooltipDirective', 'id': 17}],
-                       'children': [],
-                       'resolutionPath': [
-                         {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
-                         {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
-                         {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                         {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                         {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                         {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                         {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                         {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                         {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                         {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                         {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                         {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                         {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                         {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                         {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                         {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                       ]
-                     }],
-                     'resolutionPath': [
-                       {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
-                       {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                       {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                       {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                       {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                       {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                       {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                       {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                       {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                       {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                     ]
-                   },
-                   {
-                     'element': '#comment',
-                     'component': null,
-                     'directives': [{'name': '_NgForOf', 'id': 18}],
-                     'children': [],
-                     'resolutionPath': [
-                       {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                       {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                       {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                       {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                       {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                       {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                       {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                       {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                       {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                     ]
-                   }
-                 ],
-                 'resolutionPath': [
-                   {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                   {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                   {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                   {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                   {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                   {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                   {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                   {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                 ]
-               }
-             ],
-             'resolutionPath': [
-               {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-               {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-               {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-               {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-             ]
-           },
-           'path': [
-             {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-             {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-             {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'}
-           ]
-         },
-         {
-           'node': {
-             'element': 'a',
-             'component': null,
-             'directives': [{'name': '_RouterLink', 'id': 5}],
-             'children': [],
-             'resolutionPath': [
-               {'id': '8', 'type': 'element', 'name': '_RouterLink'},
-               {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-               {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-               {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-               {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-             ]
-           },
-           'path': [
-             {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-             {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-             {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'}
-           ]
-         },
-         {
-           'node': {
-             'element': 'a',
-             'component': null,
-             'directives': [{'name': '_RouterLink', 'id': 6}],
-             'children': [],
-             'resolutionPath': [
-               {'id': '11', 'type': 'element', 'name': '_RouterLink'},
-               {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-               {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-               {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-               {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-             ]
-           },
-           'path': [
-             {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-             {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-             {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'}
-           ]
-         },
-         {
-           'node': {
-             'element': 'router-outlet',
-             'component': null,
-             'directives': [{'name': '_RouterOutlet', 'id': 7}],
-             'children': [],
-             'resolutionPath': [
-               {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-               {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-               {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-               {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-             ]
-           },
-           'path': [
-             {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-             {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-             {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'}
-           ]
-         },
-         {
-           'node': {
-             'element': 'app-todos',
-             'component': {'name': 'app-todos', 'isElement': false, 'id': 8},
-             'directives': [],
-             'children': [
-               {
-                 'element': 'a',
-                 'component': null,
-                 'directives': [{'name': '_RouterLink', 'id': 9}],
-                 'children': [],
-                 'resolutionPath': [
-                   {'id': '13', 'type': 'element', 'name': '_RouterLink'},
-                   {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                   {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                   {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                   {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                   {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                   {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                   {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                   {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                 ]
-               },
-               {
-                 'element': 'a',
-                 'component': null,
-                 'directives': [{'name': '_RouterLink', 'id': 10}],
-                 'children': [],
-                 'resolutionPath': [
-                   {'id': '16', 'type': 'element', 'name': '_RouterLink'},
-                   {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                   {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                   {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                   {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                   {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                   {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                   {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                   {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                 ]
-               },
-               {
-                 'element': 'a',
-                 'component': null,
-                 'directives': [{'name': '_RouterLink', 'id': 11}],
-                 'children': [],
-                 'resolutionPath': [
-                   {'id': '17', 'type': 'element', 'name': '_RouterLink'},
-                   {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                   {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                   {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                   {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                   {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                   {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                   {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                   {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                 ]
-               },
-               {
-                 'element': 'app-todo',
-                 'component': {'name': 'app-todo', 'isElement': false, 'id': 12},
-                 'directives': [{'name': '_TooltipDirective', 'id': 13}],
-                 'children': [{
-                   'element': 'div',
-                   'component': null,
-                   'directives': [{'name': '_TooltipDirective', 'id': 14}],
-                   'children': [],
-                   'resolutionPath': [
-                     {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
-                     {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
-                     {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                     {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                     {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                     {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                     {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                     {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                     {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                     {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                     {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                     {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                     {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                     {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                     {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                     {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                   ]
-                 }],
-                 'resolutionPath': [
-                   {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
-                   {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                   {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                   {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                   {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                   {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                   {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                   {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                   {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                   {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                 ]
-               },
-               {
-                 'element': 'app-todo',
-                 'component': {'name': 'app-todo', 'isElement': false, 'id': 15},
-                 'directives': [{'name': '_TooltipDirective', 'id': 16}],
-                 'children': [{
-                   'element': 'div',
-                   'component': null,
-                   'directives': [{'name': '_TooltipDirective', 'id': 17}],
-                   'children': [],
-                   'resolutionPath': [
-                     {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
-                     {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
-                     {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                     {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                     {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                     {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                     {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                     {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                     {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                     {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                     {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                     {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                     {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                     {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                     {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                     {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                   ]
-                 }],
-                 'resolutionPath': [
-                   {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
-                   {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                   {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                   {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                   {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                   {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                   {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                   {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                   {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                   {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                 ]
-               },
-               {
-                 'element': '#comment',
-                 'component': null,
-                 'directives': [{'name': '_NgForOf', 'id': 18}],
-                 'children': [],
-                 'resolutionPath': [
-                   {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                   {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                   {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                   {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                   {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                   {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                   {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                   {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                   {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                 ]
-               }
-             ],
-             'resolutionPath': [
-               {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-               {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-               {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-               {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-               {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-               {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-             ]
-           },
-           'path': [
-             {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-             {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-             {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-             {'id': '14', 'type': 'element', 'name': '_TodosComponent'}
-           ]
-         },
-         {
-           'node': {
-             'element': 'a',
-             'component': null,
-             'directives': [{'name': '_RouterLink', 'id': 9}],
-             'children': [],
-             'resolutionPath': [
-               {'id': '13', 'type': 'element', 'name': '_RouterLink'},
-               {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-               {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-               {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-               {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-               {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-               {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-             ]
-           },
-           'path': [
-             {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-             {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-             {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-             {'id': '14', 'type': 'element', 'name': '_TodosComponent'}
-           ]
-         },
-         {
-           'node': {
-             'element': 'a',
-             'component': null,
-             'directives': [{'name': '_RouterLink', 'id': 10}],
-             'children': [],
-             'resolutionPath': [
-               {'id': '16', 'type': 'element', 'name': '_RouterLink'},
-               {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-               {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-               {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-               {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-               {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-               {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-             ]
-           },
-           'path': [
-             {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-             {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-             {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-             {'id': '14', 'type': 'element', 'name': '_TodosComponent'}
-           ]
-         },
-         {
-           'node': {
-             'element': 'a',
-             'component': null,
-             'directives': [{'name': '_RouterLink', 'id': 11}],
-             'children': [],
-             'resolutionPath': [
-               {'id': '17', 'type': 'element', 'name': '_RouterLink'},
-               {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-               {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-               {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-               {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-               {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-               {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-             ]
-           },
-           'path': [
-             {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-             {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-             {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-             {'id': '14', 'type': 'element', 'name': '_TodosComponent'}
-           ]
-         },
-         {
-           'node': {
-             'element': 'app-todo',
-             'component': {'name': 'app-todo', 'isElement': false, 'id': 12},
-             'directives': [{'name': '_TooltipDirective', 'id': 13}],
-             'children': [{
-               'element': 'div',
-               'component': null,
-               'directives': [{'name': '_TooltipDirective', 'id': 14}],
-               'children': [],
-               'resolutionPath': [
-                 {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
-                 {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
-                 {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                 {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                 {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                 {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                 {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                 {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                 {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                 {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                 {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                 {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                 {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                 {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                 {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                 {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-               ]
-             }],
-             'resolutionPath': [
-               {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
-               {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-               {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-               {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-               {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-               {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-               {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-               {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-             ]
-           },
-           'path': [
-             {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-             {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-             {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-             {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-             {'id': '19', 'type': 'element', 'name': '_TodoComponent'}
-           ]
-         },
-         {
-           'node': {
-             'element': 'div',
-             'component': null,
-             'directives': [{'name': '_TooltipDirective', 'id': 14}],
-             'children': [],
-             'resolutionPath': [
-               {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
-               {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
-               {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-               {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-               {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-               {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-               {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-               {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-               {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-             ]
-           },
-           'path': [
-             {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-             {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-             {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-             {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-             {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
-             {'id': '18', 'type': 'element', 'name': '_TooltipDirective'}
-           ]
-         },
-         {
-           'node': {
-             'element': 'app-todo',
-             'component': {'name': 'app-todo', 'isElement': false, 'id': 15},
-             'directives': [{'name': '_TooltipDirective', 'id': 16}],
-             'children': [{
-               'element': 'div',
-               'component': null,
-               'directives': [{'name': '_TooltipDirective', 'id': 17}],
-               'children': [],
-               'resolutionPath': [
-                 {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
-                 {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
-                 {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                 {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                 {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                 {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                 {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                 {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                 {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                 {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                 {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                 {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                 {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                 {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                 {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                 {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-               ]
-             }],
-             'resolutionPath': [
-               {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
-               {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-               {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-               {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-               {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-               {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-               {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-               {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-             ]
-           },
-           'path': [
-             {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-             {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-             {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-             {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-             {'id': '22', 'type': 'element', 'name': '_TodoComponent'}
-           ]
-         },
-         {
-           'node': {
-             'element': 'div',
-             'component': null,
-             'directives': [{'name': '_TooltipDirective', 'id': 17}],
-             'children': [],
-             'resolutionPath': [
-               {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
-               {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
-               {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-               {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-               {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-               {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-               {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-               {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-               {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-             ]
-           },
-           'path': [
-             {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-             {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-             {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-             {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-             {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
-             {'id': '21', 'type': 'element', 'name': '_TooltipDirective'}
-           ]
-         },
-         {
-           'node': {
-             'element': '#comment',
-             'component': null,
-             'directives': [{'name': '_NgForOf', 'id': 18}],
-             'children': [],
-             'resolutionPath': [
-               {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-               {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-               {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-               {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-               {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-               {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-               {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-             ]
-           },
-           'path': [
-             {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-             {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-             {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-             {'id': '14', 'type': 'element', 'name': '_TodosComponent'}
-           ]
-         },
-         {
-           'node': {
-             'element': 'app-zippy',
-             'component': {'name': 'app-zippy', 'isElement': true, 'id': 19},
-             'directives': [],
-             'children': [],
-             'resolutionPath': [
-               {'id': '23', 'type': 'element', 'name': '_ZippyComponent'},
-               {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-             ]
-           },
-           'path': [{'id': '23', 'type': 'element', 'name': '_ZippyComponent'}]
-         },
-         {
-           'node': {
-             'element': 'app-heavy',
-             'component': {'name': 'app-heavy', 'isElement': false, 'id': 20},
-             'directives': [],
-             'children': [],
-             'resolutionPath': [
-               {'id': '24', 'type': 'element', 'name': '_HeavyComponent'},
-               {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-               {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-               {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-             ]
-           },
-           'path': [
-             {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-             {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-             {'id': '24', 'type': 'element', 'name': '_HeavyComponent'}
-           ]
-         }
-       ];
-
-       const expectedEnvironmentPaths = [
-         {
-           'node': {
-             'element': 'app-root',
-             'component': {'name': 'app-root', 'isElement': false, 'id': 0},
-             'directives': [],
-             'children': [
-               {
-                 'element': 'router-outlet',
-                 'component': null,
-                 'directives': [{'name': '_RouterOutlet', 'id': 1}],
-                 'children': [],
-                 'resolutionPath': [
-                   {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                   {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                   {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                 ]
-               },
-               {
-                 'element': 'app-demo-component',
-                 'component': {'name': 'app-demo-component', 'isElement': false, 'id': 2},
-                 'directives': [],
-                 'children': [
-                   {
-                     'element': 'router-outlet',
-                     'component': null,
-                     'directives': [{'name': '_RouterOutlet', 'id': 3}],
-                     'children': [],
-                     'resolutionPath': [
-                       {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                       {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                       {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                       {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                       {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                     ]
-                   },
-                   {
-                     'element': 'app-todo-demo',
-                     'component': {'name': 'app-todo-demo', 'isElement': false, 'id': 4},
-                     'directives': [],
-                     'children': [
-                       {
-                         'element': 'a',
-                         'component': null,
-                         'directives': [{'name': '_RouterLink', 'id': 5}],
-                         'children': [],
-                         'resolutionPath': [
-                           {'id': '8', 'type': 'element', 'name': '_RouterLink'},
-                           {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                           {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                           {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                           {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                           {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                           {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                           {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                           {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                         ]
-                       },
-                       {
-                         'element': 'a',
-                         'component': null,
-                         'directives': [{'name': '_RouterLink', 'id': 6}],
-                         'children': [],
-                         'resolutionPath': [
-                           {'id': '11', 'type': 'element', 'name': '_RouterLink'},
-                           {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                           {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                           {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                           {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                           {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                           {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                           {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                           {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                         ]
-                       },
-                       {
-                         'element': 'router-outlet',
-                         'component': null,
-                         'directives': [{'name': '_RouterOutlet', 'id': 7}],
-                         'children': [],
-                         'resolutionPath': [
-                           {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                           {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                           {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                           {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                           {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                           {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                           {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                           {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                         ]
-                       },
-                       {
-                         'element': 'app-todos',
-                         'component': {'name': 'app-todos', 'isElement': false, 'id': 8},
-                         'directives': [],
-                         'children': [
-                           {
-                             'element': 'a',
-                             'component': null,
-                             'directives': [{'name': '_RouterLink', 'id': 9}],
-                             'children': [],
-                             'resolutionPath': [
-                               {'id': '13', 'type': 'element', 'name': '_RouterLink'},
-                               {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                               {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                               {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                               {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                               {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                               {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                               {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                               {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                               {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                             ]
-                           },
-                           {
-                             'element': 'a',
-                             'component': null,
-                             'directives': [{'name': '_RouterLink', 'id': 10}],
-                             'children': [],
-                             'resolutionPath': [
-                               {'id': '16', 'type': 'element', 'name': '_RouterLink'},
-                               {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                               {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                               {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                               {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                               {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                               {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                               {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                               {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                               {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                             ]
-                           },
-                           {
-                             'element': 'a',
-                             'component': null,
-                             'directives': [{'name': '_RouterLink', 'id': 11}],
-                             'children': [],
-                             'resolutionPath': [
-                               {'id': '17', 'type': 'element', 'name': '_RouterLink'},
-                               {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                               {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                               {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                               {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                               {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                               {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                               {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                               {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                               {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                             ]
-                           },
-                           {
-                             'element': 'app-todo',
-                             'component': {'name': 'app-todo', 'isElement': false, 'id': 12},
-                             'directives': [{'name': '_TooltipDirective', 'id': 13}],
-                             'children': [{
-                               'element': 'div',
-                               'component': null,
-                               'directives': [{'name': '_TooltipDirective', 'id': 14}],
-                               'children': [],
-                               'resolutionPath': [
-                                 {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
-                                 {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
-                                 {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                                 {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                                 {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                                 {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                                 {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                                 {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                                 {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                                 {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                                 {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                                 {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                                 {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                                 {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                                 {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                                 {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                               ]
-                             }],
-                             'resolutionPath': [
-                               {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
-                               {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                               {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                               {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                               {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                               {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                               {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                               {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                               {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                               {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                               {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                             ]
-                           },
-                           {
-                             'element': 'app-todo',
-                             'component': {'name': 'app-todo', 'isElement': false, 'id': 15},
-                             'directives': [{'name': '_TooltipDirective', 'id': 16}],
-                             'children': [{
-                               'element': 'div',
-                               'component': null,
-                               'directives': [{'name': '_TooltipDirective', 'id': 17}],
-                               'children': [],
-                               'resolutionPath': [
-                                 {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
-                                 {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
-                                 {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                                 {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                                 {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                                 {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                                 {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                                 {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                                 {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                                 {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                                 {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                                 {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                                 {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                                 {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                                 {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                                 {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                               ]
-                             }],
-                             'resolutionPath': [
-                               {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
-                               {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                               {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                               {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                               {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                               {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                               {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                               {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                               {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                               {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                               {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                             ]
-                           },
-                           {
-                             'element': '#comment',
-                             'component': null,
-                             'directives': [{'name': '_NgForOf', 'id': 18}],
-                             'children': [],
-                             'resolutionPath': [
-                               {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                               {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                               {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                               {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                               {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                               {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                               {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                               {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                               {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                               {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                             ]
-                           }
-                         ],
-                         'resolutionPath': [
-                           {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                           {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                           {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                           {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                           {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                           {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                           {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                           {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                           {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                           {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                         ]
-                       }
-                     ],
-                     'resolutionPath': [
-                       {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                       {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                       {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                       {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                       {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                       {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                     ]
-                   },
-                   {
-                     'element': 'app-zippy',
-                     'component': {'name': 'app-zippy', 'isElement': true, 'id': 19},
-                     'directives': [],
-                     'children': [],
-                     'resolutionPath': [
-                       {'id': '23', 'type': 'element', 'name': '_ZippyComponent'},
-                       {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                       {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                       {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                     ]
-                   },
-                   {
-                     'element': 'app-heavy',
-                     'component': {'name': 'app-heavy', 'isElement': false, 'id': 20},
-                     'directives': [],
-                     'children': [],
-                     'resolutionPath': [
-                       {'id': '24', 'type': 'element', 'name': '_HeavyComponent'},
-                       {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                       {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                       {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                       {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                       {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                     ]
-                   }
-                 ],
-                 'resolutionPath': [
-                   {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                   {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                   {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                   {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                   {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                 ]
-               }
-             ],
-             'resolutionPath': [
-               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-             ]
-           },
-           'path': [{'id': '2', 'type': 'environment', 'name': '_AppModule'}]
-         },
-         {
-           'node': {
-             'element': 'router-outlet',
-             'component': null,
-             'directives': [{'name': '_RouterOutlet', 'id': 1}],
-             'children': [],
-             'resolutionPath': [
-               {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-             ]
-           },
-           'path': [{'id': '2', 'type': 'environment', 'name': '_AppModule'}]
-         },
-         {
-           'node': {
-             'element': 'app-demo-component',
-             'component': {'name': 'app-demo-component', 'isElement': false, 'id': 2},
-             'directives': [],
-             'children': [
-               {
-                 'element': 'router-outlet',
-                 'component': null,
-                 'directives': [{'name': '_RouterOutlet', 'id': 3}],
-                 'children': [],
-                 'resolutionPath': [
-                   {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                   {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                   {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                   {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                   {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                 ]
-               },
-               {
-                 'element': 'app-todo-demo',
-                 'component': {'name': 'app-todo-demo', 'isElement': false, 'id': 4},
-                 'directives': [],
-                 'children': [
-                   {
-                     'element': 'a',
-                     'component': null,
-                     'directives': [{'name': '_RouterLink', 'id': 5}],
-                     'children': [],
-                     'resolutionPath': [
-                       {'id': '8', 'type': 'element', 'name': '_RouterLink'},
-                       {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                       {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                       {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                       {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                       {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                       {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                     ]
-                   },
-                   {
-                     'element': 'a',
-                     'component': null,
-                     'directives': [{'name': '_RouterLink', 'id': 6}],
-                     'children': [],
-                     'resolutionPath': [
-                       {'id': '11', 'type': 'element', 'name': '_RouterLink'},
-                       {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                       {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                       {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                       {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                       {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                       {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                     ]
-                   },
-                   {
-                     'element': 'router-outlet',
-                     'component': null,
-                     'directives': [{'name': '_RouterOutlet', 'id': 7}],
-                     'children': [],
-                     'resolutionPath': [
-                       {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                       {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                       {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                       {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                       {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                       {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                     ]
-                   },
-                   {
-                     'element': 'app-todos',
-                     'component': {'name': 'app-todos', 'isElement': false, 'id': 8},
-                     'directives': [],
-                     'children': [
-                       {
-                         'element': 'a',
-                         'component': null,
-                         'directives': [{'name': '_RouterLink', 'id': 9}],
-                         'children': [],
-                         'resolutionPath': [
-                           {'id': '13', 'type': 'element', 'name': '_RouterLink'},
-                           {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                           {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                           {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                           {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                           {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                           {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                           {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                           {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                           {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                           {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                         ]
-                       },
-                       {
-                         'element': 'a',
-                         'component': null,
-                         'directives': [{'name': '_RouterLink', 'id': 10}],
-                         'children': [],
-                         'resolutionPath': [
-                           {'id': '16', 'type': 'element', 'name': '_RouterLink'},
-                           {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                           {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                           {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                           {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                           {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                           {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                           {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                           {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                           {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                           {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                         ]
-                       },
-                       {
-                         'element': 'a',
-                         'component': null,
-                         'directives': [{'name': '_RouterLink', 'id': 11}],
-                         'children': [],
-                         'resolutionPath': [
-                           {'id': '17', 'type': 'element', 'name': '_RouterLink'},
-                           {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                           {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                           {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                           {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                           {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                           {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                           {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                           {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                           {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                           {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                         ]
-                       },
-                       {
-                         'element': 'app-todo',
-                         'component': {'name': 'app-todo', 'isElement': false, 'id': 12},
-                         'directives': [{'name': '_TooltipDirective', 'id': 13}],
-                         'children': [{
-                           'element': 'div',
-                           'component': null,
-                           'directives': [{'name': '_TooltipDirective', 'id': 14}],
-                           'children': [],
-                           'resolutionPath': [
-                             {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
-                             {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
-                             {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                             {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                             {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                             {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                             {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                             {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                             {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                             {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                             {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                             {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                             {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                             {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                           ]
-                         }],
-                         'resolutionPath': [
-                           {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
-                           {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                           {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                           {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                           {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                           {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                           {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                           {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                           {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                           {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                           {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                           {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                         ]
-                       },
-                       {
-                         'element': 'app-todo',
-                         'component': {'name': 'app-todo', 'isElement': false, 'id': 15},
-                         'directives': [{'name': '_TooltipDirective', 'id': 16}],
-                         'children': [{
-                           'element': 'div',
-                           'component': null,
-                           'directives': [{'name': '_TooltipDirective', 'id': 17}],
-                           'children': [],
-                           'resolutionPath': [
-                             {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
-                             {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
-                             {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                             {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                             {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                             {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                             {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                             {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                             {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                             {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                             {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                             {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                             {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                             {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                           ]
-                         }],
-                         'resolutionPath': [
-                           {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
-                           {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                           {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                           {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                           {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                           {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                           {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                           {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                           {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                           {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                           {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                           {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                         ]
-                       },
-                       {
-                         'element': '#comment',
-                         'component': null,
-                         'directives': [{'name': '_NgForOf', 'id': 18}],
-                         'children': [],
-                         'resolutionPath': [
-                           {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                           {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                           {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                           {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                           {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                           {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                           {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                           {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                           {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                           {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                           {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                           {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                         ]
-                       }
-                     ],
-                     'resolutionPath': [
-                       {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                       {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                       {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                       {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                       {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                       {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                       {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                       {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                     ]
-                   }
-                 ],
-                 'resolutionPath': [
-                   {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                   {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                   {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                   {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                   {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                   {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                 ]
-               },
-               {
-                 'element': 'app-zippy',
-                 'component': {'name': 'app-zippy', 'isElement': true, 'id': 19},
-                 'directives': [],
-                 'children': [],
-                 'resolutionPath': [
-                   {'id': '23', 'type': 'element', 'name': '_ZippyComponent'},
-                   {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                   {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                   {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                 ]
-               },
-               {
-                 'element': 'app-heavy',
-                 'component': {'name': 'app-heavy', 'isElement': false, 'id': 20},
-                 'directives': [],
-                 'children': [],
-                 'resolutionPath': [
-                   {'id': '24', 'type': 'element', 'name': '_HeavyComponent'},
-                   {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                   {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                   {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                   {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                   {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                 ]
-               }
-             ],
-             'resolutionPath': [
-               {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-               {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-               {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-             ]
-           },
-           'path': [
-             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'}
-           ]
-         },
-         {
-           'node': {
-             'element': 'router-outlet',
-             'component': null,
-             'directives': [{'name': '_RouterOutlet', 'id': 3}],
-             'children': [],
-             'resolutionPath': [
-               {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-               {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-               {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-             ]
-           },
-           'path': [
-             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'}
-           ]
-         },
-         {
-           'node': {
-             'element': 'app-todo-demo',
-             'component': {'name': 'app-todo-demo', 'isElement': false, 'id': 4},
-             'directives': [],
-             'children': [
-               {
-                 'element': 'a',
-                 'component': null,
-                 'directives': [{'name': '_RouterLink', 'id': 5}],
-                 'children': [],
-                 'resolutionPath': [
-                   {'id': '8', 'type': 'element', 'name': '_RouterLink'},
-                   {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                   {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                   {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                   {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                   {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                   {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                 ]
-               },
-               {
-                 'element': 'a',
-                 'component': null,
-                 'directives': [{'name': '_RouterLink', 'id': 6}],
-                 'children': [],
-                 'resolutionPath': [
-                   {'id': '11', 'type': 'element', 'name': '_RouterLink'},
-                   {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                   {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                   {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                   {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                   {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                   {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                 ]
-               },
-               {
-                 'element': 'router-outlet',
-                 'component': null,
-                 'directives': [{'name': '_RouterOutlet', 'id': 7}],
-                 'children': [],
-                 'resolutionPath': [
-                   {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                   {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                   {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                   {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                   {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                   {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                 ]
-               },
-               {
-                 'element': 'app-todos',
-                 'component': {'name': 'app-todos', 'isElement': false, 'id': 8},
-                 'directives': [],
-                 'children': [
-                   {
-                     'element': 'a',
-                     'component': null,
-                     'directives': [{'name': '_RouterLink', 'id': 9}],
-                     'children': [],
-                     'resolutionPath': [
-                       {'id': '13', 'type': 'element', 'name': '_RouterLink'},
-                       {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                       {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                       {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                       {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                       {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                       {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                       {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                       {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                     ]
-                   },
-                   {
-                     'element': 'a',
-                     'component': null,
-                     'directives': [{'name': '_RouterLink', 'id': 10}],
-                     'children': [],
-                     'resolutionPath': [
-                       {'id': '16', 'type': 'element', 'name': '_RouterLink'},
-                       {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                       {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                       {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                       {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                       {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                       {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                       {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                       {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                     ]
-                   },
-                   {
-                     'element': 'a',
-                     'component': null,
-                     'directives': [{'name': '_RouterLink', 'id': 11}],
-                     'children': [],
-                     'resolutionPath': [
-                       {'id': '17', 'type': 'element', 'name': '_RouterLink'},
-                       {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                       {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                       {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                       {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                       {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                       {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                       {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                       {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                     ]
-                   },
-                   {
-                     'element': 'app-todo',
-                     'component': {'name': 'app-todo', 'isElement': false, 'id': 12},
-                     'directives': [{'name': '_TooltipDirective', 'id': 13}],
-                     'children': [{
-                       'element': 'div',
-                       'component': null,
-                       'directives': [{'name': '_TooltipDirective', 'id': 14}],
-                       'children': [],
-                       'resolutionPath': [
-                         {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
-                         {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
-                         {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                         {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                         {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                         {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                         {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                         {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                         {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                         {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                         {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                         {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                         {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                         {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                         {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                         {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                       ]
-                     }],
-                     'resolutionPath': [
-                       {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
-                       {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                       {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                       {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                       {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                       {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                       {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                       {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                       {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                       {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                     ]
-                   },
-                   {
-                     'element': 'app-todo',
-                     'component': {'name': 'app-todo', 'isElement': false, 'id': 15},
-                     'directives': [{'name': '_TooltipDirective', 'id': 16}],
-                     'children': [{
-                       'element': 'div',
-                       'component': null,
-                       'directives': [{'name': '_TooltipDirective', 'id': 17}],
-                       'children': [],
-                       'resolutionPath': [
-                         {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
-                         {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
-                         {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                         {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                         {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                         {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                         {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                         {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                         {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                         {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                         {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                         {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                         {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                         {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                         {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                         {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                       ]
-                     }],
-                     'resolutionPath': [
-                       {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
-                       {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                       {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                       {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                       {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                       {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                       {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                       {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                       {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                       {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                     ]
-                   },
-                   {
-                     'element': '#comment',
-                     'component': null,
-                     'directives': [{'name': '_NgForOf', 'id': 18}],
-                     'children': [],
-                     'resolutionPath': [
-                       {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                       {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                       {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                       {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                       {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                       {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                       {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                       {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                       {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                       {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                       {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                     ]
-                   }
-                 ],
-                 'resolutionPath': [
-                   {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                   {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                   {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                   {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                   {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                   {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                   {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                   {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                 ]
-               }
-             ],
-             'resolutionPath': [
-               {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-               {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-               {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-               {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-             ]
-           },
-           'path': [
-             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-             {'id': '10', 'type': 'environment', 'name': '_AppModule'}
-           ]
-         },
-         {
-           'node': {
-             'element': 'a',
-             'component': null,
-             'directives': [{'name': '_RouterLink', 'id': 5}],
-             'children': [],
-             'resolutionPath': [
-               {'id': '8', 'type': 'element', 'name': '_RouterLink'},
-               {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-               {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-               {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-               {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-             ]
-           },
-           'path': [
-             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-             {'id': '10', 'type': 'environment', 'name': '_AppModule'}
-           ]
-         },
-         {
-           'node': {
-             'element': 'a',
-             'component': null,
-             'directives': [{'name': '_RouterLink', 'id': 6}],
-             'children': [],
-             'resolutionPath': [
-               {'id': '11', 'type': 'element', 'name': '_RouterLink'},
-               {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-               {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-               {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-               {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-             ]
-           },
-           'path': [
-             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-             {'id': '10', 'type': 'environment', 'name': '_AppModule'}
-           ]
-         },
-         {
-           'node': {
-             'element': 'router-outlet',
-             'component': null,
-             'directives': [{'name': '_RouterOutlet', 'id': 7}],
-             'children': [],
-             'resolutionPath': [
-               {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-               {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-               {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-               {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-             ]
-           },
-           'path': [
-             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-             {'id': '10', 'type': 'environment', 'name': '_AppModule'}
-           ]
-         },
-         {
-           'node': {
-             'element': 'app-todos',
-             'component': {'name': 'app-todos', 'isElement': false, 'id': 8},
-             'directives': [],
-             'children': [
-               {
-                 'element': 'a',
-                 'component': null,
-                 'directives': [{'name': '_RouterLink', 'id': 9}],
-                 'children': [],
-                 'resolutionPath': [
-                   {'id': '13', 'type': 'element', 'name': '_RouterLink'},
-                   {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                   {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                   {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                   {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                   {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                   {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                   {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                   {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                 ]
-               },
-               {
-                 'element': 'a',
-                 'component': null,
-                 'directives': [{'name': '_RouterLink', 'id': 10}],
-                 'children': [],
-                 'resolutionPath': [
-                   {'id': '16', 'type': 'element', 'name': '_RouterLink'},
-                   {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                   {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                   {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                   {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                   {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                   {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                   {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                   {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                 ]
-               },
-               {
-                 'element': 'a',
-                 'component': null,
-                 'directives': [{'name': '_RouterLink', 'id': 11}],
-                 'children': [],
-                 'resolutionPath': [
-                   {'id': '17', 'type': 'element', 'name': '_RouterLink'},
-                   {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                   {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                   {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                   {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                   {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                   {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                   {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                   {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                 ]
-               },
-               {
-                 'element': 'app-todo',
-                 'component': {'name': 'app-todo', 'isElement': false, 'id': 12},
-                 'directives': [{'name': '_TooltipDirective', 'id': 13}],
-                 'children': [{
-                   'element': 'div',
-                   'component': null,
-                   'directives': [{'name': '_TooltipDirective', 'id': 14}],
-                   'children': [],
-                   'resolutionPath': [
-                     {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
-                     {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
-                     {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                     {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                     {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                     {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                     {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                     {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                     {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                     {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                     {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                     {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                     {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                     {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                     {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                     {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                   ]
-                 }],
-                 'resolutionPath': [
-                   {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
-                   {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                   {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                   {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                   {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                   {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                   {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                   {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                   {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                   {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                 ]
-               },
-               {
-                 'element': 'app-todo',
-                 'component': {'name': 'app-todo', 'isElement': false, 'id': 15},
-                 'directives': [{'name': '_TooltipDirective', 'id': 16}],
-                 'children': [{
-                   'element': 'div',
-                   'component': null,
-                   'directives': [{'name': '_TooltipDirective', 'id': 17}],
-                   'children': [],
-                   'resolutionPath': [
-                     {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
-                     {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
-                     {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                     {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                     {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                     {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                     {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                     {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                     {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                     {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                     {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                     {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                     {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                     {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                     {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                     {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                   ]
-                 }],
-                 'resolutionPath': [
-                   {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
-                   {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                   {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                   {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                   {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                   {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                   {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                   {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                   {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                   {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                 ]
-               },
-               {
-                 'element': '#comment',
-                 'component': null,
-                 'directives': [{'name': '_NgForOf', 'id': 18}],
-                 'children': [],
-                 'resolutionPath': [
-                   {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                   {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                   {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                   {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                   {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                   {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                   {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                   {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                   {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                   {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                   {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                 ]
-               }
-             ],
-             'resolutionPath': [
-               {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-               {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-               {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-               {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-               {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-               {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-             ]
-           },
-           'path': [
-             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-             {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-             {'id': '15', 'type': 'environment', 'name': '_HomeModule'}
-           ]
-         },
-         {
-           'node': {
-             'element': 'a',
-             'component': null,
-             'directives': [{'name': '_RouterLink', 'id': 9}],
-             'children': [],
-             'resolutionPath': [
-               {'id': '13', 'type': 'element', 'name': '_RouterLink'},
-               {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-               {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-               {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-               {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-               {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-               {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-             ]
-           },
-           'path': [
-             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-             {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-             {'id': '15', 'type': 'environment', 'name': '_HomeModule'}
-           ]
-         },
-         {
-           'node': {
-             'element': 'a',
-             'component': null,
-             'directives': [{'name': '_RouterLink', 'id': 10}],
-             'children': [],
-             'resolutionPath': [
-               {'id': '16', 'type': 'element', 'name': '_RouterLink'},
-               {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-               {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-               {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-               {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-               {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-               {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-             ]
-           },
-           'path': [
-             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-             {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-             {'id': '15', 'type': 'environment', 'name': '_HomeModule'}
-           ]
-         },
-         {
-           'node': {
-             'element': 'a',
-             'component': null,
-             'directives': [{'name': '_RouterLink', 'id': 11}],
-             'children': [],
-             'resolutionPath': [
-               {'id': '17', 'type': 'element', 'name': '_RouterLink'},
-               {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-               {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-               {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-               {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-               {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-               {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-             ]
-           },
-           'path': [
-             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-             {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-             {'id': '15', 'type': 'environment', 'name': '_HomeModule'}
-           ]
-         },
-         {
-           'node': {
-             'element': 'app-todo',
-             'component': {'name': 'app-todo', 'isElement': false, 'id': 12},
-             'directives': [{'name': '_TooltipDirective', 'id': 13}],
-             'children': [{
-               'element': 'div',
-               'component': null,
-               'directives': [{'name': '_TooltipDirective', 'id': 14}],
-               'children': [],
-               'resolutionPath': [
-                 {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
-                 {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
-                 {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                 {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                 {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                 {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                 {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                 {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                 {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                 {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                 {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                 {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                 {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                 {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                 {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                 {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-               ]
-             }],
-             'resolutionPath': [
-               {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
-               {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-               {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-               {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-               {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-               {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-               {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-               {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-             ]
-           },
-           'path': [
-             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-             {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-             {'id': '15', 'type': 'environment', 'name': '_HomeModule'}
-           ]
-         },
-         {
-           'node': {
-             'element': 'div',
-             'component': null,
-             'directives': [{'name': '_TooltipDirective', 'id': 14}],
-             'children': [],
-             'resolutionPath': [
-               {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
-               {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
-               {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-               {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-               {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-               {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-               {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-               {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-               {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-             ]
-           },
-           'path': [
-             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-             {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-             {'id': '15', 'type': 'environment', 'name': '_HomeModule'}
-           ]
-         },
-         {
-           'node': {
-             'element': 'app-todo',
-             'component': {'name': 'app-todo', 'isElement': false, 'id': 15},
-             'directives': [{'name': '_TooltipDirective', 'id': 16}],
-             'children': [{
-               'element': 'div',
-               'component': null,
-               'directives': [{'name': '_TooltipDirective', 'id': 17}],
-               'children': [],
-               'resolutionPath': [
-                 {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
-                 {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
-                 {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                 {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                 {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                 {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                 {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                 {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                 {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                 {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                 {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                 {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                 {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                 {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                 {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                 {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-               ]
-             }],
-             'resolutionPath': [
-               {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
-               {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-               {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-               {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-               {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-               {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-               {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-               {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-             ]
-           },
-           'path': [
-             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-             {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-             {'id': '15', 'type': 'environment', 'name': '_HomeModule'}
-           ]
-         },
-         {
-           'node': {
-             'element': 'div',
-             'component': null,
-             'directives': [{'name': '_TooltipDirective', 'id': 17}],
-             'children': [],
-             'resolutionPath': [
-               {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
-               {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
-               {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-               {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-               {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-               {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-               {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-               {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-               {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-             ]
-           },
-           'path': [
-             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-             {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-             {'id': '15', 'type': 'environment', 'name': '_HomeModule'}
-           ]
-         },
-         {
-           'node': {
-             'element': '#comment',
-             'component': null,
-             'directives': [{'name': '_NgForOf', 'id': 18}],
-             'children': [],
-             'resolutionPath': [
-               {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-               {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-               {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-               {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-               {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-               {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-               {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-             ]
-           },
-           'path': [
-             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-             {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-             {'id': '15', 'type': 'environment', 'name': '_HomeModule'}
-           ]
-         },
-         {
-           'node': {
-             'element': 'app-zippy',
-             'component': {'name': 'app-zippy', 'isElement': true, 'id': 19},
-             'directives': [],
-             'children': [],
-             'resolutionPath': [
-               {'id': '23', 'type': 'element', 'name': '_ZippyComponent'},
-               {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-             ]
-           },
-           'path': [
-             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'}
-           ]
-         },
-         {
-           'node': {
-             'element': 'app-heavy',
-             'component': {'name': 'app-heavy', 'isElement': false, 'id': 20},
-             'directives': [],
-             'children': [],
-             'resolutionPath': [
-               {'id': '24', 'type': 'element', 'name': '_HeavyComponent'},
-               {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-               {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-               {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-               {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-               {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-               {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-               {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-             ]
-           },
-           'path': [
-             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'}
-           ]
-         }
-       ];
-
-       const expectedStartingElementToEnvironmentPath = new Map([
-         ['1', [{'id': '2', 'type': 'environment', 'name': '_AppModule'}]],
-         [
-           '6',
-           [
-             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-             {'id': '2', 'type': 'environment', 'name': '_AppModule'}
-           ]
-         ],
-         [
-           '9',
-           [
-             {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-             {'id': '2', 'type': 'environment', 'name': '_AppModule'}
-           ]
-         ],
-         [
-           '14',
-           [
-             {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-             {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-             {'id': '2', 'type': 'environment', 'name': '_AppModule'}
-           ]
-         ],
-         [
-           '19',
-           [
-             {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-             {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-             {'id': '2', 'type': 'environment', 'name': '_AppModule'}
-           ]
-         ],
-         [
-           '18',
-           [
-             {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-             {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-             {'id': '2', 'type': 'environment', 'name': '_AppModule'}
-           ]
-         ],
-         [
-           '22',
-           [
-             {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-             {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-             {'id': '2', 'type': 'environment', 'name': '_AppModule'}
-           ]
-         ],
-         [
-           '21',
-           [
-             {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-             {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-             {'id': '2', 'type': 'environment', 'name': '_AppModule'}
-           ]
-         ],
-         [
-           '23',
-           [
-             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-             {'id': '2', 'type': 'environment', 'name': '_AppModule'}
-           ]
-         ],
-         [
-           '24',
-           [
-             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-             {'id': '2', 'type': 'environment', 'name': '_AppModule'}
-           ]
-         ]
-       ]);
-
-       const {elementPaths, environmentPaths, startingElementToEnvironmentPath} =
-           splitInjectorPathsIntoElementAndEnvironmentPaths(injectorPaths);
-
-       expect(elementPaths).toEqual(expectedElementPaths);
-       expect(environmentPaths).toEqual(expectedEnvironmentPaths);
-       expect(startingElementToEnvironmentPath).toEqual(expectedStartingElementToEnvironmentPath);
-     });
-});
-
-describe('grabInjectorPathsFromDirectiveForest', () => {
-  it('should be able to get a list of injector paths from a directive forest', () => {
-    const directiveForest = [{
-      'element': 'app-root',
-      'component': {'name': 'app-root', 'isElement': false, 'id': 0},
-      'directives': [],
-      'children': [
-        {
-          'element': 'router-outlet',
-          'component': null,
-          'directives': [{'name': '_RouterOutlet', 'id': 1}],
-          'children': [],
-          'resolutionPath': [
-            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-            {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-          ]
-        },
-        {
-          'element': 'app-demo-component',
-          'component': {'name': 'app-demo-component', 'isElement': false, 'id': 2},
-          'directives': [],
-          'children': [
-            {
-              'element': 'router-outlet',
-              'component': null,
-              'directives': [{'name': '_RouterOutlet', 'id': 3}],
-              'children': [],
-              'resolutionPath': [
-                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-              ]
-            },
-            {
-              'element': 'app-todo-demo',
-              'component': {'name': 'app-todo-demo', 'isElement': false, 'id': 4},
-              'directives': [],
-              'children': [
-                {
-                  'element': 'a',
-                  'component': null,
-                  'directives': [{'name': '_RouterLink', 'id': 5}],
-                  'children': [],
-                  'resolutionPath': [
-                    {'id': '8', 'type': 'element', 'name': '_RouterLink'},
-                    {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                    {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                    {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                    {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                    {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                    {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                    {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                    {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                    {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                    {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                  ]
-                },
-                {
-                  'element': 'a',
-                  'component': null,
-                  'directives': [{'name': '_RouterLink', 'id': 6}],
-                  'children': [],
-                  'resolutionPath': [
-                    {'id': '11', 'type': 'element', 'name': '_RouterLink'},
-                    {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                    {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                    {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                    {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                    {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                    {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                    {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                    {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                    {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                    {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                  ]
-                },
-                {
-                  'element': 'router-outlet',
-                  'component': null,
-                  'directives': [{'name': '_RouterOutlet', 'id': 7}],
-                  'children': [],
-                  'resolutionPath': [
-                    {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                    {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                    {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                    {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                    {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                    {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                    {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                    {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                    {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                    {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                    {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                  ]
-                },
-                {
-                  'element': 'app-todos',
-                  'component': {'name': 'app-todos', 'isElement': false, 'id': 8},
-                  'directives': [],
-                  'children': [
-                    {
-                      'element': 'a',
-                      'component': null,
-                      'directives': [{'name': '_RouterLink', 'id': 9}],
-                      'children': [],
-                      'resolutionPath': [
-                        {'id': '13', 'type': 'element', 'name': '_RouterLink'},
-                        {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                        {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                        {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                        {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                        {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                        {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                        {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                        {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                        {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                        {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                        {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                        {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                        {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                      ]
-                    },
-                    {
-                      'element': 'a',
-                      'component': null,
-                      'directives': [{'name': '_RouterLink', 'id': 10}],
-                      'children': [],
-                      'resolutionPath': [
-                        {'id': '16', 'type': 'element', 'name': '_RouterLink'},
-                        {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                        {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                        {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                        {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                        {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                        {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                        {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                        {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                        {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                        {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                        {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                        {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                        {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                      ]
-                    },
-                    {
-                      'element': 'a',
-                      'component': null,
-                      'directives': [{'name': '_RouterLink', 'id': 11}],
-                      'children': [],
-                      'resolutionPath': [
-                        {'id': '17', 'type': 'element', 'name': '_RouterLink'},
-                        {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                        {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                        {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                        {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                        {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                        {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                        {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                        {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                        {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                        {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                        {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                        {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                        {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                      ]
-                    },
-                    {
-                      'element': 'app-todo',
-                      'component': {'name': 'app-todo', 'isElement': false, 'id': 12},
-                      'directives': [{'name': '_TooltipDirective', 'id': 13}],
-                      'children': [{
-                        'element': 'div',
-                        'component': null,
-                        'directives': [{'name': '_TooltipDirective', 'id': 14}],
-                        'children': [],
-                        'resolutionPath': [
-                          {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
-                          {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
-                          {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                          {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                          {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                          {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                          {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                          {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                          {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                          {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                          {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                          {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                          {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                          {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                          {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                          {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                        ]
-                      }],
-                      'resolutionPath': [
-                        {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
-                        {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                        {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                        {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                        {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                        {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                        {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                        {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                        {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                        {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                        {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                        {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                        {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                        {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                        {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                      ]
-                    },
-                    {
-                      'element': 'app-todo',
-                      'component': {'name': 'app-todo', 'isElement': false, 'id': 15},
-                      'directives': [{'name': '_TooltipDirective', 'id': 16}],
-                      'children': [{
-                        'element': 'div',
-                        'component': null,
-                        'directives': [{'name': '_TooltipDirective', 'id': 17}],
-                        'children': [],
-                        'resolutionPath': [
-                          {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
-                          {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
-                          {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                          {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                          {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                          {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                          {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                          {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                          {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                          {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                          {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                          {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                          {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                          {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                          {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                          {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                        ]
-                      }],
-                      'resolutionPath': [
-                        {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
-                        {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                        {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                        {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                        {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                        {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                        {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                        {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                        {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                        {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                        {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                        {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                        {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                        {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                        {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                      ]
-                    },
-                    {
-                      'element': '#comment',
-                      'component': null,
-                      'directives': [{'name': '_NgForOf', 'id': 18}],
-                      'children': [],
-                      'resolutionPath': [
-                        {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                        {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                        {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                        {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                        {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                        {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                        {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                        {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                        {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                        {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                        {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                        {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                        {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                        {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                      ]
-                    }
-                  ],
-                  'resolutionPath': [
-                    {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                    {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                    {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                    {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                    {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                    {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                    {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                    {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                    {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                    {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                    {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                    {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                    {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                  ]
-                }
-              ],
-              'resolutionPath': [
-                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-              ]
-            },
-            {
-              'element': 'app-zippy',
-              'component': {'name': 'app-zippy', 'isElement': true, 'id': 19},
-              'directives': [],
-              'children': [],
-              'resolutionPath': [
-                {'id': '23', 'type': 'element', 'name': '_ZippyComponent'},
-                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-              ]
-            },
-            {
-              'element': 'app-heavy',
-              'component': {'name': 'app-heavy', 'isElement': false, 'id': 20},
-              'directives': [],
-              'children': [],
-              'resolutionPath': [
-                {'id': '24', 'type': 'element', 'name': '_HeavyComponent'},
-                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-              ]
-            }
-          ],
-          'resolutionPath': [
-            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-            {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-          ]
-        }
-      ],
-      'resolutionPath': [
-        {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-        {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-        {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-        {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-      ]
-    }];
+              {
+                'element': 'app-zippy',
+                'component': {'name': 'app-zippy', 'isElement': true, 'id': 19},
+                'directives': [],
+                'children': [],
+                'resolutionPath': [
+                  {'id': '23', 'type': 'element', 'name': '_ZippyComponent'},
+                  {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                  {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                  {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                  {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                ],
+              },
+              {
+                'element': 'app-heavy',
+                'component': {'name': 'app-heavy', 'isElement': false, 'id': 20},
+                'directives': [],
+                'children': [],
+                'resolutionPath': [
+                  {'id': '24', 'type': 'element', 'name': '_HeavyComponent'},
+                  {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                  {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                  {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                  {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                  {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                  {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                  {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                ],
+              },
+            ],
+            'resolutionPath': [
+              {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+              {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+              {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+              {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+              {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+              {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+              {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+            ],
+          },
+        ],
+        'resolutionPath': [
+          {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+          {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+          {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+          {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+        ],
+      },
+    ];
 
     const expectedInjectorPaths = [
       {
@@ -8633,8 +8759,8 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
                 {'id': '1', 'type': 'element', 'name': '_AppComponent'},
                 {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                 {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-              ]
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
             },
             {
               'element': 'app-demo-component',
@@ -8654,8 +8780,8 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
                     {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                     {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                     {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                    {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                  ]
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
                 },
                 {
                   'element': 'app-todo-demo',
@@ -8678,8 +8804,8 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
                         {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                         {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                         {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                        {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                      ]
+                        {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                      ],
                     },
                     {
                       'element': 'a',
@@ -8697,8 +8823,8 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
                         {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                         {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                         {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                        {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                      ]
+                        {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                      ],
                     },
                     {
                       'element': 'router-outlet',
@@ -8716,8 +8842,8 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
                         {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                         {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                         {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                        {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                      ]
+                        {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                      ],
                     },
                     {
                       'element': 'app-todos',
@@ -8743,8 +8869,8 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
                             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                             {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                            {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                          ]
+                            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                          ],
                         },
                         {
                           'element': 'a',
@@ -8765,8 +8891,8 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
                             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                             {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                            {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                          ]
+                            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                          ],
                         },
                         {
                           'element': 'a',
@@ -8787,37 +8913,39 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
                             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                             {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                            {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                          ]
+                            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                          ],
                         },
                         {
                           'element': 'app-todo',
                           'component': {'name': 'app-todo', 'isElement': false, 'id': 12},
                           'directives': [{'name': '_TooltipDirective', 'id': 13}],
-                          'children': [{
-                            'element': 'div',
-                            'component': null,
-                            'directives': [{'name': '_TooltipDirective', 'id': 14}],
-                            'children': [],
-                            'resolutionPath': [
-                              {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
-                              {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
-                              {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                              {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                              {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                              {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                              {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                              {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                              {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                              {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                              {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                              {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                              {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                              {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                              {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                              {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                            ]
-                          }],
+                          'children': [
+                            {
+                              'element': 'div',
+                              'component': null,
+                              'directives': [{'name': '_TooltipDirective', 'id': 14}],
+                              'children': [],
+                              'resolutionPath': [
+                                {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
+                                {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
+                                {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                                {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                                {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                                {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                              ],
+                            },
+                          ],
                           'resolutionPath': [
                             {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
                             {'id': '20', 'type': 'element', 'name': '_NgForOf'},
@@ -8833,37 +8961,39 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
                             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                             {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                            {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                          ]
+                            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                          ],
                         },
                         {
                           'element': 'app-todo',
                           'component': {'name': 'app-todo', 'isElement': false, 'id': 15},
                           'directives': [{'name': '_TooltipDirective', 'id': 16}],
-                          'children': [{
-                            'element': 'div',
-                            'component': null,
-                            'directives': [{'name': '_TooltipDirective', 'id': 17}],
-                            'children': [],
-                            'resolutionPath': [
-                              {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
-                              {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
-                              {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                              {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                              {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                              {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                              {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                              {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                              {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                              {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                              {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                              {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                              {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                              {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                              {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                              {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                            ]
-                          }],
+                          'children': [
+                            {
+                              'element': 'div',
+                              'component': null,
+                              'directives': [{'name': '_TooltipDirective', 'id': 17}],
+                              'children': [],
+                              'resolutionPath': [
+                                {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
+                                {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
+                                {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                                {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                                {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                                {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                              ],
+                            },
+                          ],
                           'resolutionPath': [
                             {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
                             {'id': '20', 'type': 'element', 'name': '_NgForOf'},
@@ -8879,8 +9009,8 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
                             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                             {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                            {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                          ]
+                            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                          ],
                         },
                         {
                           'element': '#comment',
@@ -8901,9 +9031,9 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
                             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                             {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                            {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                          ]
-                        }
+                            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                          ],
+                        },
                       ],
                       'resolutionPath': [
                         {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
@@ -8918,9 +9048,9 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
                         {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                         {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                         {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                        {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                      ]
-                    }
+                        {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                      ],
+                    },
                   ],
                   'resolutionPath': [
                     {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
@@ -8932,8 +9062,8 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
                     {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                     {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                     {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                    {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                  ]
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
                 },
                 {
                   'element': 'app-zippy',
@@ -8945,8 +9075,8 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
                     {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                     {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                     {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                    {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                  ]
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
                 },
                 {
                   'element': 'app-heavy',
@@ -8961,9 +9091,9 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
                     {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                     {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                     {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                    {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                  ]
-                }
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
+                },
               ],
               'resolutionPath': [
                 {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
@@ -8972,23 +9102,23 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
                 {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                 {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                 {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-              ]
-            }
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
+            },
           ],
           'resolutionPath': [
             {'id': '1', 'type': 'element', 'name': '_AppComponent'},
             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
             {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-            {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-          ]
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
         },
         'path': [
           {'id': '4', 'type': 'null', 'name': 'Null Injector'},
           {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
           {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-          {'id': '1', 'type': 'element', 'name': '_AppComponent'}
-        ]
+          {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+        ],
       },
       {
         'node': {
@@ -9001,16 +9131,16 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
             {'id': '1', 'type': 'element', 'name': '_AppComponent'},
             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
             {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-            {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-          ]
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
         },
         'path': [
           {'id': '4', 'type': 'null', 'name': 'Null Injector'},
           {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
           {'id': '2', 'type': 'environment', 'name': '_AppModule'},
           {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-          {'id': '0', 'type': 'element', 'name': '_RouterOutlet'}
-        ]
+          {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+        ],
       },
       {
         'node': {
@@ -9031,8 +9161,8 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
                 {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                 {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                 {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-              ]
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
             },
             {
               'element': 'app-todo-demo',
@@ -9055,8 +9185,8 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
                     {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                     {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                     {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                    {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                  ]
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
                 },
                 {
                   'element': 'a',
@@ -9074,8 +9204,8 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
                     {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                     {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                     {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                    {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                  ]
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
                 },
                 {
                   'element': 'router-outlet',
@@ -9093,8 +9223,8 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
                     {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                     {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                     {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                    {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                  ]
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
                 },
                 {
                   'element': 'app-todos',
@@ -9120,8 +9250,8 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
                         {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                         {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                         {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                        {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                      ]
+                        {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                      ],
                     },
                     {
                       'element': 'a',
@@ -9142,8 +9272,8 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
                         {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                         {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                         {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                        {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                      ]
+                        {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                      ],
                     },
                     {
                       'element': 'a',
@@ -9164,37 +9294,39 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
                         {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                         {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                         {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                        {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                      ]
+                        {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                      ],
                     },
                     {
                       'element': 'app-todo',
                       'component': {'name': 'app-todo', 'isElement': false, 'id': 12},
                       'directives': [{'name': '_TooltipDirective', 'id': 13}],
-                      'children': [{
-                        'element': 'div',
-                        'component': null,
-                        'directives': [{'name': '_TooltipDirective', 'id': 14}],
-                        'children': [],
-                        'resolutionPath': [
-                          {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
-                          {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
-                          {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                          {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                          {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                          {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                          {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                          {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                          {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                          {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                          {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                          {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                          {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                          {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                          {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                          {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                        ]
-                      }],
+                      'children': [
+                        {
+                          'element': 'div',
+                          'component': null,
+                          'directives': [{'name': '_TooltipDirective', 'id': 14}],
+                          'children': [],
+                          'resolutionPath': [
+                            {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
+                            {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
+                            {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                            {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                            {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                            {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                          ],
+                        },
+                      ],
                       'resolutionPath': [
                         {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
                         {'id': '20', 'type': 'element', 'name': '_NgForOf'},
@@ -9210,37 +9342,39 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
                         {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                         {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                         {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                        {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                      ]
+                        {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                      ],
                     },
                     {
                       'element': 'app-todo',
                       'component': {'name': 'app-todo', 'isElement': false, 'id': 15},
                       'directives': [{'name': '_TooltipDirective', 'id': 16}],
-                      'children': [{
-                        'element': 'div',
-                        'component': null,
-                        'directives': [{'name': '_TooltipDirective', 'id': 17}],
-                        'children': [],
-                        'resolutionPath': [
-                          {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
-                          {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
-                          {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                          {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                          {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                          {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                          {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                          {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                          {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                          {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                          {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                          {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                          {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                          {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                          {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                          {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                        ]
-                      }],
+                      'children': [
+                        {
+                          'element': 'div',
+                          'component': null,
+                          'directives': [{'name': '_TooltipDirective', 'id': 17}],
+                          'children': [],
+                          'resolutionPath': [
+                            {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
+                            {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
+                            {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                            {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                            {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                            {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                            {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                            {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                            {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                            {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                            {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                            {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                            {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                          ],
+                        },
+                      ],
                       'resolutionPath': [
                         {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
                         {'id': '20', 'type': 'element', 'name': '_NgForOf'},
@@ -9256,8 +9390,8 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
                         {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                         {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                         {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                        {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                      ]
+                        {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                      ],
                     },
                     {
                       'element': '#comment',
@@ -9278,9 +9412,9 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
                         {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                         {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                         {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                        {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                      ]
-                    }
+                        {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                      ],
+                    },
                   ],
                   'resolutionPath': [
                     {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
@@ -9295,9 +9429,9 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
                     {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                     {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                     {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                    {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                  ]
-                }
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
+                },
               ],
               'resolutionPath': [
                 {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
@@ -9309,8 +9443,8 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
                 {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                 {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                 {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-              ]
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
             },
             {
               'element': 'app-zippy',
@@ -9322,8 +9456,8 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
                 {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                 {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                 {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-              ]
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
             },
             {
               'element': 'app-heavy',
@@ -9338,9 +9472,9 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
                 {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                 {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                 {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-              ]
-            }
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
+            },
           ],
           'resolutionPath': [
             {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
@@ -9349,8 +9483,8 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
             {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-            {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-          ]
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
         },
         'path': [
           {'id': '4', 'type': 'null', 'name': 'Null Injector'},
@@ -9359,8 +9493,8 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
           {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
           {'id': '1', 'type': 'element', 'name': '_AppComponent'},
           {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-          {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'}
-        ]
+          {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+        ],
       },
       {
         'node': {
@@ -9376,8 +9510,8 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
             {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-            {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-          ]
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
         },
         'path': [
           {'id': '4', 'type': 'null', 'name': 'Null Injector'},
@@ -9387,8 +9521,8 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
           {'id': '1', 'type': 'element', 'name': '_AppComponent'},
           {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
           {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-          {'id': '5', 'type': 'element', 'name': '_RouterOutlet'}
-        ]
+          {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+        ],
       },
       {
         'node': {
@@ -9412,8 +9546,8 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
                 {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                 {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                 {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-              ]
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
             },
             {
               'element': 'a',
@@ -9431,8 +9565,8 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
                 {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                 {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                 {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-              ]
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
             },
             {
               'element': 'router-outlet',
@@ -9450,8 +9584,8 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
                 {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                 {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                 {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-              ]
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
             },
             {
               'element': 'app-todos',
@@ -9477,8 +9611,8 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
                     {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                     {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                     {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                    {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                  ]
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
                 },
                 {
                   'element': 'a',
@@ -9499,8 +9633,8 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
                     {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                     {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                     {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                    {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                  ]
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
                 },
                 {
                   'element': 'a',
@@ -9521,37 +9655,39 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
                     {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                     {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                     {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                    {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                  ]
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
                 },
                 {
                   'element': 'app-todo',
                   'component': {'name': 'app-todo', 'isElement': false, 'id': 12},
                   'directives': [{'name': '_TooltipDirective', 'id': 13}],
-                  'children': [{
-                    'element': 'div',
-                    'component': null,
-                    'directives': [{'name': '_TooltipDirective', 'id': 14}],
-                    'children': [],
-                    'resolutionPath': [
-                      {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
-                      {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
-                      {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                      {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                      {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                      {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                      {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                      {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                      {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                      {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                      {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                      {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                      {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                      {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                      {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                      {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                    ]
-                  }],
+                  'children': [
+                    {
+                      'element': 'div',
+                      'component': null,
+                      'directives': [{'name': '_TooltipDirective', 'id': 14}],
+                      'children': [],
+                      'resolutionPath': [
+                        {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
+                        {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
+                        {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                        {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                        {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                        {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                        {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                        {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                        {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                        {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                        {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                      ],
+                    },
+                  ],
                   'resolutionPath': [
                     {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
                     {'id': '20', 'type': 'element', 'name': '_NgForOf'},
@@ -9567,37 +9703,39 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
                     {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                     {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                     {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                    {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                  ]
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
                 },
                 {
                   'element': 'app-todo',
                   'component': {'name': 'app-todo', 'isElement': false, 'id': 15},
                   'directives': [{'name': '_TooltipDirective', 'id': 16}],
-                  'children': [{
-                    'element': 'div',
-                    'component': null,
-                    'directives': [{'name': '_TooltipDirective', 'id': 17}],
-                    'children': [],
-                    'resolutionPath': [
-                      {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
-                      {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
-                      {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                      {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                      {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                      {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                      {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                      {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                      {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                      {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                      {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                      {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                      {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                      {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                      {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                      {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                    ]
-                  }],
+                  'children': [
+                    {
+                      'element': 'div',
+                      'component': null,
+                      'directives': [{'name': '_TooltipDirective', 'id': 17}],
+                      'children': [],
+                      'resolutionPath': [
+                        {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
+                        {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
+                        {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                        {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                        {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                        {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                        {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                        {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                        {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                        {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                        {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                        {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                        {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                      ],
+                    },
+                  ],
                   'resolutionPath': [
                     {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
                     {'id': '20', 'type': 'element', 'name': '_NgForOf'},
@@ -9613,8 +9751,8 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
                     {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                     {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                     {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                    {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                  ]
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
                 },
                 {
                   'element': '#comment',
@@ -9635,9 +9773,9 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
                     {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                     {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                     {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                    {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                  ]
-                }
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
+                },
               ],
               'resolutionPath': [
                 {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
@@ -9652,9 +9790,9 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
                 {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                 {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                 {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-              ]
-            }
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
+            },
           ],
           'resolutionPath': [
             {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
@@ -9666,8 +9804,8 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
             {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-            {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-          ]
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
         },
         'path': [
           {'id': '4', 'type': 'null', 'name': 'Null Injector'},
@@ -9679,8 +9817,8 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
           {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
           {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
           {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-          {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'}
-        ]
+          {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+        ],
       },
       {
         'node': {
@@ -9699,8 +9837,8 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
             {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-            {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-          ]
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
         },
         'path': [
           {'id': '4', 'type': 'null', 'name': 'Null Injector'},
@@ -9713,8 +9851,8 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
           {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
           {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
           {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-          {'id': '8', 'type': 'element', 'name': '_RouterLink'}
-        ]
+          {'id': '8', 'type': 'element', 'name': '_RouterLink'},
+        ],
       },
       {
         'node': {
@@ -9733,8 +9871,8 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
             {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-            {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-          ]
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
         },
         'path': [
           {'id': '4', 'type': 'null', 'name': 'Null Injector'},
@@ -9747,8 +9885,8 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
           {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
           {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
           {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-          {'id': '11', 'type': 'element', 'name': '_RouterLink'}
-        ]
+          {'id': '11', 'type': 'element', 'name': '_RouterLink'},
+        ],
       },
       {
         'node': {
@@ -9767,8 +9905,8 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
             {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-            {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-          ]
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
         },
         'path': [
           {'id': '4', 'type': 'null', 'name': 'Null Injector'},
@@ -9781,8 +9919,8 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
           {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
           {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
           {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-          {'id': '12', 'type': 'element', 'name': '_RouterOutlet'}
-        ]
+          {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+        ],
       },
       {
         'node': {
@@ -9809,8 +9947,8 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
                 {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                 {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                 {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-              ]
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
             },
             {
               'element': 'a',
@@ -9831,8 +9969,8 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
                 {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                 {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                 {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-              ]
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
             },
             {
               'element': 'a',
@@ -9853,37 +9991,39 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
                 {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                 {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                 {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-              ]
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
             },
             {
               'element': 'app-todo',
               'component': {'name': 'app-todo', 'isElement': false, 'id': 12},
               'directives': [{'name': '_TooltipDirective', 'id': 13}],
-              'children': [{
-                'element': 'div',
-                'component': null,
-                'directives': [{'name': '_TooltipDirective', 'id': 14}],
-                'children': [],
-                'resolutionPath': [
-                  {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
-                  {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
-                  {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                  {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                  {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                  {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                  {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                  {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                  {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                  {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                  {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                  {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                  {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                  {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                  {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                  {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                ]
-              }],
+              'children': [
+                {
+                  'element': 'div',
+                  'component': null,
+                  'directives': [{'name': '_TooltipDirective', 'id': 14}],
+                  'children': [],
+                  'resolutionPath': [
+                    {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
+                    {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
+                    {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                    {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                    {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                    {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                    {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                    {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                    {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                    {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
+                },
+              ],
               'resolutionPath': [
                 {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
                 {'id': '20', 'type': 'element', 'name': '_NgForOf'},
@@ -9899,37 +10039,39 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
                 {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                 {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                 {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-              ]
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
             },
             {
               'element': 'app-todo',
               'component': {'name': 'app-todo', 'isElement': false, 'id': 15},
               'directives': [{'name': '_TooltipDirective', 'id': 16}],
-              'children': [{
-                'element': 'div',
-                'component': null,
-                'directives': [{'name': '_TooltipDirective', 'id': 17}],
-                'children': [],
-                'resolutionPath': [
-                  {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
-                  {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
-                  {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-                  {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-                  {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-                  {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-                  {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-                  {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-                  {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-                  {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-                  {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-                  {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-                  {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-                  {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-                  {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                  {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-                ]
-              }],
+              'children': [
+                {
+                  'element': 'div',
+                  'component': null,
+                  'directives': [{'name': '_TooltipDirective', 'id': 17}],
+                  'children': [],
+                  'resolutionPath': [
+                    {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
+                    {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
+                    {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                    {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                    {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                    {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                    {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                    {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                    {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                    {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                    {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                    {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                    {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+                  ],
+                },
+              ],
               'resolutionPath': [
                 {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
                 {'id': '20', 'type': 'element', 'name': '_NgForOf'},
@@ -9945,8 +10087,8 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
                 {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                 {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                 {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-              ]
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
             },
             {
               'element': '#comment',
@@ -9967,9 +10109,9 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
                 {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
                 {'id': '2', 'type': 'environment', 'name': '_AppModule'},
                 {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-                {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-              ]
-            }
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
+            },
           ],
           'resolutionPath': [
             {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
@@ -9984,8 +10126,8 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
             {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-            {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-          ]
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
         },
         'path': [
           {'id': '4', 'type': 'null', 'name': 'Null Injector'},
@@ -10000,8 +10142,8 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
           {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
           {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
           {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-          {'id': '14', 'type': 'element', 'name': '_TodosComponent'}
-        ]
+          {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+        ],
       },
       {
         'node': {
@@ -10023,8 +10165,8 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
             {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-            {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-          ]
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
         },
         'path': [
           {'id': '4', 'type': 'null', 'name': 'Null Injector'},
@@ -10040,8 +10182,8 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
           {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
           {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
           {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-          {'id': '13', 'type': 'element', 'name': '_RouterLink'}
-        ]
+          {'id': '13', 'type': 'element', 'name': '_RouterLink'},
+        ],
       },
       {
         'node': {
@@ -10063,8 +10205,8 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
             {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-            {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-          ]
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
         },
         'path': [
           {'id': '4', 'type': 'null', 'name': 'Null Injector'},
@@ -10080,8 +10222,8 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
           {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
           {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
           {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-          {'id': '16', 'type': 'element', 'name': '_RouterLink'}
-        ]
+          {'id': '16', 'type': 'element', 'name': '_RouterLink'},
+        ],
       },
       {
         'node': {
@@ -10103,8 +10245,8 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
             {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-            {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-          ]
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
         },
         'path': [
           {'id': '4', 'type': 'null', 'name': 'Null Injector'},
@@ -10120,38 +10262,40 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
           {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
           {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
           {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-          {'id': '17', 'type': 'element', 'name': '_RouterLink'}
-        ]
+          {'id': '17', 'type': 'element', 'name': '_RouterLink'},
+        ],
       },
       {
         'node': {
           'element': 'app-todo',
           'component': {'name': 'app-todo', 'isElement': false, 'id': 12},
           'directives': [{'name': '_TooltipDirective', 'id': 13}],
-          'children': [{
-            'element': 'div',
-            'component': null,
-            'directives': [{'name': '_TooltipDirective', 'id': 14}],
-            'children': [],
-            'resolutionPath': [
-              {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
-              {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
-              {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-              {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-              {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-              {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-              {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-              {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-              {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-              {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-              {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-              {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-              {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-              {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-              {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-              {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-            ]
-          }],
+          'children': [
+            {
+              'element': 'div',
+              'component': null,
+              'directives': [{'name': '_TooltipDirective', 'id': 14}],
+              'children': [],
+              'resolutionPath': [
+                {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
+                {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
+                {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
+            },
+          ],
           'resolutionPath': [
             {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
             {'id': '20', 'type': 'element', 'name': '_NgForOf'},
@@ -10167,8 +10311,8 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
             {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-            {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-          ]
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
         },
         'path': [
           {'id': '4', 'type': 'null', 'name': 'Null Injector'},
@@ -10185,8 +10329,8 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
           {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
           {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
           {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-          {'id': '19', 'type': 'element', 'name': '_TodoComponent'}
-        ]
+          {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
+        ],
       },
       {
         'node': {
@@ -10210,8 +10354,8 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
             {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-            {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-          ]
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
         },
         'path': [
           {'id': '4', 'type': 'null', 'name': 'Null Injector'},
@@ -10229,38 +10373,40 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
           {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
           {'id': '20', 'type': 'element', 'name': '_NgForOf'},
           {'id': '19', 'type': 'element', 'name': '_TodoComponent'},
-          {'id': '18', 'type': 'element', 'name': '_TooltipDirective'}
-        ]
+          {'id': '18', 'type': 'element', 'name': '_TooltipDirective'},
+        ],
       },
       {
         'node': {
           'element': 'app-todo',
           'component': {'name': 'app-todo', 'isElement': false, 'id': 15},
           'directives': [{'name': '_TooltipDirective', 'id': 16}],
-          'children': [{
-            'element': 'div',
-            'component': null,
-            'directives': [{'name': '_TooltipDirective', 'id': 17}],
-            'children': [],
-            'resolutionPath': [
-              {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
-              {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
-              {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-              {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-              {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
-              {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
-              {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
-              {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-              {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
-              {'id': '1', 'type': 'element', 'name': '_AppComponent'},
-              {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
-              {'id': '10', 'type': 'environment', 'name': '_AppModule'},
-              {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-              {'id': '2', 'type': 'environment', 'name': '_AppModule'},
-              {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-              {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-            ]
-          }],
+          'children': [
+            {
+              'element': 'div',
+              'component': null,
+              'directives': [{'name': '_TooltipDirective', 'id': 17}],
+              'children': [],
+              'resolutionPath': [
+                {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
+                {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
+                {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+                {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
+                {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
+                {'id': '5', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
+                {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
+                {'id': '1', 'type': 'element', 'name': '_AppComponent'},
+                {'id': '15', 'type': 'environment', 'name': '_HomeModule'},
+                {'id': '10', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
+                {'id': '2', 'type': 'environment', 'name': '_AppModule'},
+                {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
+                {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+              ],
+            },
+          ],
           'resolutionPath': [
             {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
             {'id': '20', 'type': 'element', 'name': '_NgForOf'},
@@ -10276,8 +10422,8 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
             {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-            {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-          ]
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
         },
         'path': [
           {'id': '4', 'type': 'null', 'name': 'Null Injector'},
@@ -10294,8 +10440,8 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
           {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
           {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
           {'id': '20', 'type': 'element', 'name': '_NgForOf'},
-          {'id': '22', 'type': 'element', 'name': '_TodoComponent'}
-        ]
+          {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
+        ],
       },
       {
         'node': {
@@ -10319,8 +10465,8 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
             {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-            {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-          ]
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
         },
         'path': [
           {'id': '4', 'type': 'null', 'name': 'Null Injector'},
@@ -10338,8 +10484,8 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
           {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
           {'id': '20', 'type': 'element', 'name': '_NgForOf'},
           {'id': '22', 'type': 'element', 'name': '_TodoComponent'},
-          {'id': '21', 'type': 'element', 'name': '_TooltipDirective'}
-        ]
+          {'id': '21', 'type': 'element', 'name': '_TooltipDirective'},
+        ],
       },
       {
         'node': {
@@ -10361,8 +10507,8 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
             {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-            {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-          ]
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
         },
         'path': [
           {'id': '4', 'type': 'null', 'name': 'Null Injector'},
@@ -10378,8 +10524,8 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
           {'id': '9', 'type': 'element', 'name': '_AppTodoComponent'},
           {'id': '12', 'type': 'element', 'name': '_RouterOutlet'},
           {'id': '14', 'type': 'element', 'name': '_TodosComponent'},
-          {'id': '20', 'type': 'element', 'name': '_NgForOf'}
-        ]
+          {'id': '20', 'type': 'element', 'name': '_NgForOf'},
+        ],
       },
       {
         'node': {
@@ -10392,16 +10538,16 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
             {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-            {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-          ]
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
         },
         'path': [
           {'id': '4', 'type': 'null', 'name': 'Null Injector'},
           {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
           {'id': '2', 'type': 'environment', 'name': '_AppModule'},
           {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
-          {'id': '23', 'type': 'element', 'name': '_ZippyComponent'}
-        ]
+          {'id': '23', 'type': 'element', 'name': '_ZippyComponent'},
+        ],
       },
       {
         'node': {
@@ -10417,8 +10563,8 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
             {'id': '7', 'type': 'environment', 'name': '_DemoAppModule'},
             {'id': '2', 'type': 'environment', 'name': '_AppModule'},
             {'id': '3', 'type': 'environment', 'name': 'Platform: core'},
-            {'id': '4', 'type': 'null', 'name': 'Null Injector'}
-          ]
+            {'id': '4', 'type': 'null', 'name': 'Null Injector'},
+          ],
         },
         'path': [
           {'id': '4', 'type': 'null', 'name': 'Null Injector'},
@@ -10428,9 +10574,9 @@ describe('grabInjectorPathsFromDirectiveForest', () => {
           {'id': '1', 'type': 'element', 'name': '_AppComponent'},
           {'id': '0', 'type': 'element', 'name': '_RouterOutlet'},
           {'id': '6', 'type': 'element', 'name': '_DemoAppComponent'},
-          {'id': '24', 'type': 'element', 'name': '_HeavyComponent'}
-        ]
-      }
+          {'id': '24', 'type': 'element', 'name': '_HeavyComponent'},
+        ],
+      },
     ];
 
     expect(grabInjectorPathsFromDirectiveForest(directiveForest)).toEqual(expectedInjectorPaths);
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-tree-fns.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-tree-fns.ts
index 6ac1e695896..557057d405a 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-tree-fns.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-tree-fns.ts
@@ -8,7 +8,10 @@
 
 import {DevToolsNode, SerializedInjector} from 'protocol';
 
-import {InjectorTreeD3Node, InjectorTreeNode} from '../dependency-injection/injector-tree-visualizer';
+import {
+  InjectorTreeD3Node,
+  InjectorTreeNode,
+} from '../dependency-injection/injector-tree-visualizer';
 
 export interface InjectorPath {
   node: DevToolsNode;
@@ -42,12 +45,15 @@ export function equalInjector(a: SerializedInjector, b: SerializedInjector): boo
 }
 
 export function findExistingPath(
-    path: InjectorTreeNode[], value: SerializedInjector): InjectorTreeNode|null {
-  return path.find(injector => equalInjector(injector.injector, value)) || null;
+  path: InjectorTreeNode[],
+  value: SerializedInjector,
+): InjectorTreeNode | null {
+  return path.find((injector) => equalInjector(injector.injector, value)) || null;
 }
 
-export function transformInjectorResolutionPathsIntoTree(injectorPaths: InjectorPath[]):
-    InjectorTreeNode {
+export function transformInjectorResolutionPathsIntoTree(
+  injectorPaths: InjectorPath[],
+): InjectorTreeNode {
   const injectorTree: InjectorTreeNode[] = [];
   const injectorIdToNode = new Map<string, DevToolsNode>();
 
@@ -83,8 +89,9 @@ export function transformInjectorResolutionPathsIntoTree(injectorPaths: Injector
   return hiddenRoot as any;
 }
 
-export function grabInjectorPathsFromDirectiveForest(directiveForest: DevToolsNode[]):
-    InjectorPath[] {
+export function grabInjectorPathsFromDirectiveForest(
+  directiveForest: DevToolsNode[],
+): InjectorPath[] {
   const injectorPaths: InjectorPath[] = [];
 
   const grabInjectorPaths = (node: DevToolsNode) => {
@@ -92,7 +99,7 @@ export function grabInjectorPathsFromDirectiveForest(directiveForest: DevToolsNo
       injectorPaths.push({node, path: node.resolutionPath.slice().reverse()});
     }
 
-    node.children.forEach(child => grabInjectorPaths(child));
+    node.children.forEach((child) => grabInjectorPaths(child));
   };
 
   for (const directive of directiveForest) {
@@ -103,7 +110,8 @@ export function grabInjectorPathsFromDirectiveForest(directiveForest: DevToolsNo
 }
 
 export function splitInjectorPathsIntoElementAndEnvironmentPaths(injectorPaths: InjectorPath[]): {
-  elementPaths: InjectorPath[]; environmentPaths: InjectorPath[];
+  elementPaths: InjectorPath[];
+  environmentPaths: InjectorPath[];
   startingElementToEnvironmentPath: Map<string, SerializedInjector[]>;
 } {
   const elementPaths: InjectorPath[] = [];
@@ -111,7 +119,7 @@ export function splitInjectorPathsIntoElementAndEnvironmentPaths(injectorPaths:
   const startingElementToEnvironmentPath = new Map<string, SerializedInjector[]>();
 
   injectorPaths.forEach(({node, path}) => {
-    const firstElementIndex = path.findIndex(injector => injector.type === 'element');
+    const firstElementIndex = path.findIndex((injector) => injector.type === 'element');
 
     // split the path into two paths,
     // one for the element injector and one for the environment injector
@@ -131,15 +139,18 @@ export function splitInjectorPathsIntoElementAndEnvironmentPaths(injectorPaths:
     if (elementPath[elementPath.length - 1]) {
       // reverse each path to get the paths starting from the starting element
       startingElementToEnvironmentPath.set(
-          elementPath[elementPath.length - 1].id, environmentPath.slice().reverse());
+        elementPath[elementPath.length - 1].id,
+        environmentPath.slice().reverse(),
+      );
     }
   });
 
   return {
-    elementPaths:
-        elementPaths.filter(({path}) => path.every(injector => injector.type === 'element')),
+    elementPaths: elementPaths.filter(({path}) =>
+      path.every((injector) => injector.type === 'element'),
+    ),
     environmentPaths,
-    startingElementToEnvironmentPath
+    startingElementToEnvironmentPath,
   };
 }
 
@@ -188,17 +199,20 @@ const ANGULAR_DIRECTIVES = [
   'RouterLinkActive',
   'RouterLinkWithHref',
   'RouterOutlet',
-  'UpgradeComponent'
+  'UpgradeComponent',
 ];
 
 const ignoredAngularInjectors = new Set([
-  'Null Injector', ...ANGULAR_DIRECTIVES, ...ANGULAR_DIRECTIVES.map(directive => `_${directive}`)
+  'Null Injector',
+  ...ANGULAR_DIRECTIVES,
+  ...ANGULAR_DIRECTIVES.map((directive) => `_${directive}`),
 ]);
 
 export function filterOutInjectorsWithNoProviders(injectorPaths: InjectorPath[]): InjectorPath[] {
   for (const injectorPath of injectorPaths) {
-    injectorPath.path =
-        injectorPath.path.filter(({providers}) => providers === undefined || providers > 0);
+    injectorPath.path = injectorPath.path.filter(
+      ({providers}) => providers === undefined || providers > 0,
+    );
   }
 
   return injectorPaths;
@@ -206,6 +220,6 @@ export function filterOutInjectorsWithNoProviders(injectorPaths: InjectorPath[])
 
 export function filterOutAngularInjectors(injectorPaths: InjectorPath[]): InjectorPath[] {
   return injectorPaths.map(({node, path}) => {
-    return {node, path: path.filter(injector => !ignoredAngularInjectors.has(injector.name))};
+    return {node, path: path.filter((injector) => !ignoredAngularInjectors.has(injector.name))};
   });
 }
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-tree.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-tree.component.ts
index 7d16872eb94..f6fe7271f84 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-tree.component.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-tree.component.ts
@@ -14,25 +14,49 @@ import {MatExpansionModule} from '@angular/material/expansion';
 import {MatIconModule} from '@angular/material/icon';
 import {MatTabsModule} from '@angular/material/tabs';
 import {MatTooltipModule} from '@angular/material/tooltip';
-import {ComponentExplorerView, DevToolsNode, Events, MessageBus, SerializedInjector, SerializedProviderRecord} from 'protocol';
+import {
+  ComponentExplorerView,
+  DevToolsNode,
+  Events,
+  MessageBus,
+  SerializedInjector,
+  SerializedProviderRecord,
+} from 'protocol';
 
 import {AngularSplitModule} from '../../vendor/angular-split/public_api';
-import {InjectorTreeD3Node, InjectorTreeVisualizer} from '../dependency-injection/injector-tree-visualizer';
+import {
+  InjectorTreeD3Node,
+  InjectorTreeVisualizer,
+} from '../dependency-injection/injector-tree-visualizer';
 import {ResolutionPathComponent} from '../dependency-injection/resolution-path.component';
 
 import {InjectorProvidersComponent} from './injector-providers.component';
-import {filterOutAngularInjectors, filterOutInjectorsWithNoProviders, generateEdgeIdsFromNodeIds, getInjectorIdsToRootFromNode, grabInjectorPathsFromDirectiveForest, splitInjectorPathsIntoElementAndEnvironmentPaths, transformInjectorResolutionPathsIntoTree} from './injector-tree-fns';
-
+import {
+  filterOutAngularInjectors,
+  filterOutInjectorsWithNoProviders,
+  generateEdgeIdsFromNodeIds,
+  getInjectorIdsToRootFromNode,
+  grabInjectorPathsFromDirectiveForest,
+  splitInjectorPathsIntoElementAndEnvironmentPaths,
+  transformInjectorResolutionPathsIntoTree,
+} from './injector-tree-fns';
 
 @Component({
   standalone: true,
   selector: 'ng-injector-tree',
   imports: [
-    MatButtonModule, AngularSplitModule, ResolutionPathComponent, MatTabsModule, MatExpansionModule,
-    InjectorProvidersComponent, MatIconModule, MatTooltipModule, MatCheckboxModule
+    MatButtonModule,
+    AngularSplitModule,
+    ResolutionPathComponent,
+    MatTabsModule,
+    MatExpansionModule,
+    InjectorProvidersComponent,
+    MatIconModule,
+    MatTooltipModule,
+    MatCheckboxModule,
   ],
   templateUrl: `./injector-tree.component.html`,
-  styleUrls: ['./injector-tree.component.scss']
+  styleUrls: ['./injector-tree.component.scss'],
 })
 export class InjectorTreeComponent {
   @ViewChild('svgContainer', {static: false}) private svgContainer!: ElementRef;
@@ -45,7 +69,7 @@ export class InjectorTreeComponent {
   zone = inject(NgZone);
 
   firstRender = true;
-  selectedNode: InjectorTreeD3Node|null = null;
+  selectedNode: InjectorTreeD3Node | null = null;
   rawDirectiveForest: DevToolsNode[] = [];
   injectorTreeGraph!: InjectorTreeVisualizer;
   elementInjectorTreeGraph!: InjectorTreeVisualizer;
@@ -71,13 +95,13 @@ export class InjectorTreeComponent {
     });
 
     this._messageBus.on(
-        'latestInjectorProviders',
-        (_: SerializedInjector, providers: SerializedProviderRecord[]) => {
-          this.providers = Array.from(providers).sort((a, b) => {
-            return a.token.localeCompare(b.token);
-          });
+      'latestInjectorProviders',
+      (_: SerializedInjector, providers: SerializedProviderRecord[]) => {
+        this.providers = Array.from(providers).sort((a, b) => {
+          return a.token.localeCompare(b.token);
         });
-
+      },
+    );
 
     this._messageBus.on('highlightComponent', (id: number) => {
       const injectorNode = this.getNodeByComponentId(this.elementInjectorTreeGraph, id);
@@ -139,7 +163,7 @@ export class InjectorTreeComponent {
       // In Angular we have two types of injectors, element injectors and environment injectors.
       // We want to split the resolution paths into two groups, one for each type of injector.
       const {elementPaths, environmentPaths, startingElementToEnvironmentPath} =
-          splitInjectorPathsIntoElementAndEnvironmentPaths(injectorPaths);
+        splitInjectorPathsIntoElementAndEnvironmentPaths(injectorPaths);
       this.elementToEnvironmentPath = startingElementToEnvironmentPath;
 
       // Here for our 2 groups of resolution paths, we want to convert them into a tree structure.
@@ -216,7 +240,7 @@ export class InjectorTreeComponent {
     this.snapToRoot(this.elementInjectorTreeGraph);
   }
 
-  getNodeByComponentId(graph: InjectorTreeVisualizer, id: number): InjectorTreeD3Node|null {
+  getNodeByComponentId(graph: InjectorTreeVisualizer, id: number): InjectorTreeD3Node | null {
     const graphElement = graph.graphElement;
     const element = graphElement.querySelector(`.node[data-component-id="${id}"]`);
     if (element === null) {
@@ -237,8 +261,10 @@ export class InjectorTreeComponent {
     }
 
     this.injectorTreeGraph?.cleanup?.();
-    this.injectorTreeGraph =
-        new InjectorTreeVisualizer(this.svgContainer.nativeElement, this.g.nativeElement);
+    this.injectorTreeGraph = new InjectorTreeVisualizer(
+      this.svgContainer.nativeElement,
+      this.g.nativeElement,
+    );
   }
 
   setUpElementInjectorVisualizer(): void {
@@ -248,8 +274,10 @@ export class InjectorTreeComponent {
 
     this.elementInjectorTreeGraph?.cleanup?.();
     this.elementInjectorTreeGraph = new InjectorTreeVisualizer(
-        this.elementSvgContainer.nativeElement, this.elementG.nativeElement,
-        {nodeSeparation: () => 1});
+      this.elementSvgContainer.nativeElement,
+      this.elementG.nativeElement,
+      {nodeSeparation: () => 1},
+    );
   }
 
   highlightPathFromSelectedInjector(): void {
@@ -266,21 +294,22 @@ export class InjectorTreeComponent {
 
     if (this.selectedNode.data.injector.type === 'element') {
       const idsToRoot = getInjectorIdsToRootFromNode(this.selectedNode);
-      idsToRoot.forEach(id => this.highlightNodeById(this.elementG, id));
+      idsToRoot.forEach((id) => this.highlightNodeById(this.elementG, id));
       const edgeIds = generateEdgeIdsFromNodeIds(idsToRoot);
-      edgeIds.forEach((edgeId => this.highlightEdgeById(this.elementG, edgeId)));
+      edgeIds.forEach((edgeId) => this.highlightEdgeById(this.elementG, edgeId));
 
       const environmentPath =
-          this.elementToEnvironmentPath.get(this.selectedNode.data.injector.id) ?? [];
-      environmentPath.forEach(injector => this.highlightNodeById(this.g, injector.id));
-      const environmentEdgeIds =
-          generateEdgeIdsFromNodeIds(environmentPath.map(injector => injector.id));
-      environmentEdgeIds.forEach(edgeId => this.highlightEdgeById(this.g, edgeId));
+        this.elementToEnvironmentPath.get(this.selectedNode.data.injector.id) ?? [];
+      environmentPath.forEach((injector) => this.highlightNodeById(this.g, injector.id));
+      const environmentEdgeIds = generateEdgeIdsFromNodeIds(
+        environmentPath.map((injector) => injector.id),
+      );
+      environmentEdgeIds.forEach((edgeId) => this.highlightEdgeById(this.g, edgeId));
     } else {
       const idsToRoot = getInjectorIdsToRootFromNode(this.selectedNode);
-      idsToRoot.forEach(id => this.highlightNodeById(this.g, id));
+      idsToRoot.forEach((id) => this.highlightNodeById(this.g, id));
       const edgeIds = generateEdgeIdsFromNodeIds(idsToRoot);
-      edgeIds.forEach(edgeId => this.highlightEdgeById(this.g, edgeId));
+      edgeIds.forEach((edgeId) => this.highlightEdgeById(this.g, edgeId));
     }
   }
 
@@ -331,10 +360,12 @@ export class InjectorTreeComponent {
       return;
     }
     const injector = this.selectedNode.data.injector;
-    this._messageBus.emit('getInjectorProviders', [{
-                            id: injector.id,
-                            type: injector.type,
-                            name: injector.name,
-                          }]);
+    this._messageBus.emit('getInjectorProviders', [
+      {
+        id: injector.id,
+        type: injector.type,
+        name: injector.name,
+      },
+    ]);
   }
 }
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/file-api-service.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/file-api-service.ts
index 65c94194db3..ada27aaeb6e 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/file-api-service.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/file-api-service.ts
@@ -33,8 +33,9 @@ export class FileApiService {
   saveObjectAsJSON(object: object): void {
     const downloadLink = document.createElement('a');
     downloadLink.download = `NgDevTools-Profile-${toISO8601Compact(new Date())}.json`;
-    downloadLink.href =
-        URL.createObjectURL(new Blob([JSON.stringify(object)], {type: 'application/json'}));
+    downloadLink.href = URL.createObjectURL(
+      new Blob([JSON.stringify(object)], {type: 'application/json'}),
+    );
     downloadLink.click();
     setTimeout(() => URL.revokeObjectURL(downloadLink.href));
   }
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler-import-dialog.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler-import-dialog.component.ts
index 8e0ae352c08..e08cfe28a3f 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler-import-dialog.component.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler-import-dialog.component.ts
@@ -13,7 +13,7 @@ interface DialogData {
   profilerVersion?: number;
   importedVersion?: number;
   errorMessage?: string;
-  status: 'ERROR'|'INVALID_VERSION';
+  status: 'ERROR' | 'INVALID_VERSION';
 }
 
 @Component({
@@ -23,6 +23,7 @@ interface DialogData {
 })
 export class ProfilerImportDialogComponent {
   constructor(
-      public dialogRef: MatDialogRef<ProfilerImportDialogComponent>,
-      @Inject(MAT_DIALOG_DATA) public data: DialogData) {}
+    public dialogRef: MatDialogRef<ProfilerImportDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: DialogData,
+  ) {}
 }
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler.component.ts
index 462ea915255..e73253fa0e1 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler.component.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler.component.ts
@@ -14,7 +14,7 @@ import {Subject, Subscription} from 'rxjs';
 import {FileApiService} from './file-api-service';
 import {ProfilerImportDialogComponent} from './profiler-import-dialog.component';
 
-type State = 'idle'|'recording'|'visualizing';
+type State = 'idle' | 'recording' | 'visualizing';
 
 const SUPPORTED_VERSIONS = [1];
 const PROFILER_VERSION = 1;
@@ -32,9 +32,9 @@ export class ProfilerComponent implements OnInit {
   private _buffer: ProfilerFrame[] = [];
 
   constructor(
-      private _fileApiService: FileApiService,
-      private _messageBus: MessageBus<Events>,
-      public dialog: MatDialog,
+    private _fileApiService: FileApiService,
+    private _messageBus: MessageBus<Events>,
+    public dialog: MatDialog,
   ) {
     this._fileApiService.uploadedData.subscribe((importedFile) => {
       if (importedFile.error) {
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler.module.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler.module.ts
index 1cec0ab9b45..084cff178e8 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler.module.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler.module.ts
@@ -35,5 +35,4 @@ import {TimelineModule} from './timeline/timeline.module';
   ],
   exports: [ProfilerComponent],
 })
-export class ProfilerModule {
-}
+export class ProfilerModule {}
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/filter.spec.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/filter.spec.ts
index 13b1b0b58d0..76d0e6bef74 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/filter.spec.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/filter.spec.ts
@@ -85,163 +85,191 @@ describe('filtering', () => {
   describe('filtering', () => {
     it('should filter results with a source query', () => {
       const filter = createFilter('source:click');
-      expect(filter({
-        frame: {
-          directives: [],
-          duration: 10,
-          source: 'click',
-        },
-        style: {},
-        toolTip: '',
-      })).toBeTrue();
+      expect(
+        filter({
+          frame: {
+            directives: [],
+            duration: 10,
+            source: 'click',
+          },
+          style: {},
+          toolTip: '',
+        }),
+      ).toBeTrue();
 
-      expect(filter({
-        frame: {
-          directives: [],
-          duration: 10,
-          source: 'mouseenter',
-        },
-        style: {},
-        toolTip: '',
-      })).toBeFalse();
+      expect(
+        filter({
+          frame: {
+            directives: [],
+            duration: 10,
+            source: 'mouseenter',
+          },
+          style: {},
+          toolTip: '',
+        }),
+      ).toBeFalse();
     });
 
     it('should filter results with a duration query', () => {
       const filter1 = createFilter('duration:>10ms');
-      expect(filter1({
-        frame: {
-          directives: [],
-          duration: 10,
-          source: 'click',
-        },
-        style: {},
-        toolTip: '',
-      })).toBeFalse();
+      expect(
+        filter1({
+          frame: {
+            directives: [],
+            duration: 10,
+            source: 'click',
+          },
+          style: {},
+          toolTip: '',
+        }),
+      ).toBeFalse();
 
-      expect(filter1({
-        frame: {
-          directives: [],
-          duration: 15,
-          source: 'mouseenter',
-        },
-        style: {},
-        toolTip: '',
-      })).toBeTrue();
+      expect(
+        filter1({
+          frame: {
+            directives: [],
+            duration: 15,
+            source: 'mouseenter',
+          },
+          style: {},
+          toolTip: '',
+        }),
+      ).toBeTrue();
 
       const filter2 = createFilter('duration:=10ms');
-      expect(filter2({
-        frame: {
-          directives: [],
-          duration: 11,
-          source: 'mouseenter',
-        },
-        style: {},
-        toolTip: '',
-      })).toBeFalse();
-      expect(filter2({
-        frame: {
-          directives: [],
-          duration: 10,
-          source: 'mouseenter',
-        },
-        style: {},
-        toolTip: '',
-      })).toBeTrue();
+      expect(
+        filter2({
+          frame: {
+            directives: [],
+            duration: 11,
+            source: 'mouseenter',
+          },
+          style: {},
+          toolTip: '',
+        }),
+      ).toBeFalse();
+      expect(
+        filter2({
+          frame: {
+            directives: [],
+            duration: 10,
+            source: 'mouseenter',
+          },
+          style: {},
+          toolTip: '',
+        }),
+      ).toBeTrue();
     });
 
     it('should work with composite selectors', () => {
       const filter = createFilter('duration:>10ms source: click');
-      expect(filter({
-        frame: {
-          directives: [],
-          duration: 10,
-          source: 'click',
-        },
-        style: {},
-        toolTip: '',
-      })).toBeFalse();
+      expect(
+        filter({
+          frame: {
+            directives: [],
+            duration: 10,
+            source: 'click',
+          },
+          style: {},
+          toolTip: '',
+        }),
+      ).toBeFalse();
 
-      expect(filter({
-        frame: {
-          directives: [],
-          duration: 15,
-          source: 'mouseenter',
-        },
-        style: {},
-        toolTip: '',
-      })).toBeFalse();
+      expect(
+        filter({
+          frame: {
+            directives: [],
+            duration: 15,
+            source: 'mouseenter',
+          },
+          style: {},
+          toolTip: '',
+        }),
+      ).toBeFalse();
 
-      expect(filter({
-        frame: {
-          directives: [],
-          duration: 15,
-          source: 'click',
-        },
-        style: {},
-        toolTip: '',
-      })).toBeTrue();
+      expect(
+        filter({
+          frame: {
+            directives: [],
+            duration: 15,
+            source: 'click',
+          },
+          style: {},
+          toolTip: '',
+        }),
+      ).toBeTrue();
     });
 
     it('should work with invalid arguments', () => {
       const filter = createFilter('duration:>ms');
 
-      expect(filter({
-        frame: {
-          directives: [],
-          duration: 15,
-          source: 'click',
-        },
-        style: {},
-        toolTip: '',
-      })).toBeTrue();
+      expect(
+        filter({
+          frame: {
+            directives: [],
+            duration: 15,
+            source: 'click',
+          },
+          style: {},
+          toolTip: '',
+        }),
+      ).toBeTrue();
     });
 
     it('should work with negation', () => {
       const filter = createFilter('!source:message');
 
-      expect(filter({
-        frame: {
-          directives: [],
-          duration: 15,
-          source: 'message',
-        },
-        style: {},
-        toolTip: '',
-      })).toBeFalse();
+      expect(
+        filter({
+          frame: {
+            directives: [],
+            duration: 15,
+            source: 'message',
+          },
+          style: {},
+          toolTip: '',
+        }),
+      ).toBeFalse();
     });
 
     it('should work with negation and composite expressions', () => {
       const filter = createFilter('!duration:=15 !source:message source:click');
 
-      expect(filter({
-        frame: {
-          directives: [],
-          duration: 15,
-          source: 'click',
-        },
-        style: {},
-        toolTip: '',
-      })).toBeFalse();
+      expect(
+        filter({
+          frame: {
+            directives: [],
+            duration: 15,
+            source: 'click',
+          },
+          style: {},
+          toolTip: '',
+        }),
+      ).toBeFalse();
 
-      expect(filter({
-        frame: {
-          directives: [],
-          duration: 10,
-          source: 'message',
-        },
-        style: {},
-        toolTip: '',
-      })).toBeFalse();
+      expect(
+        filter({
+          frame: {
+            directives: [],
+            duration: 10,
+            source: 'message',
+          },
+          style: {},
+          toolTip: '',
+        }),
+      ).toBeFalse();
 
-      expect(filter({
-        frame: {
-          directives: [],
-          duration: 14,
-          source: 'click',
-        },
-        style: {},
-        toolTip: '',
-      })).toBeTrue();
+      expect(
+        filter({
+          frame: {
+            directives: [],
+            duration: 14,
+            source: 'click',
+          },
+          style: {},
+          toolTip: '',
+        }),
+      ).toBeTrue();
     });
   });
 });
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/filter.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/filter.ts
index abe955723fe..9e34fff8f9e 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/filter.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/filter.ts
@@ -16,11 +16,11 @@ export const noopFilter = (_: GraphNode) => true;
 
 interface Query<Arguments = unknown> {
   readonly name: QueryType;
-  parseArguments(args: string[]): Arguments|undefined;
+  parseArguments(args: string[]): Arguments | undefined;
   apply(node: ProfilerFrame, args: Arguments): boolean;
 }
 
-type Operator = '>'|'<'|'='|'<='|'>=';
+type Operator = '>' | '<' | '=' | '<=' | '>=';
 
 const ops: {[operator in Operator]: (a: number, b: number) => boolean} = {
   '>'(a: number, b: number): boolean {
@@ -48,12 +48,12 @@ const enum QueryType {
   Source = 'source',
 }
 
-type QueryArguments = DurationArgument|SourceArgument;
+type QueryArguments = DurationArgument | SourceArgument;
 
 const operatorRe = /^(>=|<=|=|<|>|)/;
 class DurationQuery implements Query<DurationArgument> {
   readonly name = QueryType.Duration;
-  parseArguments([arg]: string[]): DurationArgument|undefined {
+  parseArguments([arg]: string[]): DurationArgument | undefined {
     arg = arg.trim();
     const operator = (arg.match(operatorRe) ?? [null])[0];
     if (!operator) {
@@ -82,15 +82,17 @@ class SourceQuery implements Query<SourceArgument> {
   }
 }
 
-const queryMap: {[query in QueryType]: Query} =
-    [new DurationQuery(), new SourceQuery()].reduce((map, query) => {
-      map[query.name] = query;
-      return map;
-    }, {} as {[query in QueryType]: Query});
+const queryMap: {[query in QueryType]: Query} = [new DurationQuery(), new SourceQuery()].reduce(
+  (map, query) => {
+    map[query.name] = query;
+    return map;
+  },
+  {} as {[query in QueryType]: Query},
+);
 
 const queryRe = new RegExp(`!?s*(${QueryType.Duration}|${QueryType.Source})$`, 'g');
 
-type Predicate = true|false;
+type Predicate = true | false;
 type QueryAST = [Predicate, QueryType, QueryArguments];
 
 /**
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/frame-selector.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/frame-selector.component.ts
index aafe0d1e7b0..a6addaf7c0a 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/frame-selector.component.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/frame-selector.component.ts
@@ -7,7 +7,15 @@
  */
 
 import {CdkVirtualScrollViewport} from '@angular/cdk/scrolling';
-import {Component, DestroyRef, ElementRef, EventEmitter, Input, Output, ViewChild,} from '@angular/core';
+import {
+  Component,
+  DestroyRef,
+  ElementRef,
+  EventEmitter,
+  Input,
+  Output,
+  ViewChild,
+} from '@angular/core';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 import {Observable, Subscription} from 'rxjs';
 
@@ -28,11 +36,14 @@ export class FrameSelectorComponent {
   set graphData$(graphData: Observable<GraphNode[]>) {
     this._graphData$ = graphData;
     this._graphDataSubscription?.unsubscribe();
-    this._graphDataSubscription = this._graphData$.pipe(takeUntilDestroyed(this.destroyRef))
-                                      .subscribe((items) => setTimeout(() => {
-                                                   this.frameCount = items.length;
-                                                   this.viewport.scrollToIndex(items.length);
-                                                 }));
+    this._graphDataSubscription = this._graphData$
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((items) =>
+        setTimeout(() => {
+          this.frameCount = items.length;
+          this.viewport.scrollToIndex(items.length);
+        }),
+      );
   }
 
   get graphData$(): Observable<GraphNode[]> {
@@ -57,10 +68,9 @@ export class FrameSelectorComponent {
   private _graphData$!: Observable<GraphNode[]>;
   private _graphDataSubscription?: Subscription;
 
-
   constructor(
-      private _tabUpdate: TabUpdate,
-      private destroyRef: DestroyRef,
+    private _tabUpdate: TabUpdate,
+    private destroyRef: DestroyRef,
   ) {
     this._tabUpdate.tabUpdate$.pipe(takeUntilDestroyed()).subscribe(() => {
       if (this.viewport) {
@@ -84,7 +94,7 @@ export class FrameSelectorComponent {
     const sortedIndexes = indexArray.sort((a, b) => a - b);
 
     const groups: number[][] = [];
-    let prev: number|null = null;
+    let prev: number | null = null;
 
     for (const index of sortedIndexes) {
       // First iteration: create initial group and set prev variable to the first index
@@ -104,12 +114,12 @@ export class FrameSelectorComponent {
       prev = index;
     }
 
-    return groups.filter((group) => group.length > 0)
-        .map(
-            (group) => group.length === 1 ? group[0] + 1 :
-                                            `${group[0] + 1}-${group[group.length - 1] + 1}`,
-            )
-        .join(', ');
+    return groups
+      .filter((group) => group.length > 0)
+      .map((group) =>
+        group.length === 1 ? group[0] + 1 : `${group[0] + 1}-${group[group.length - 1] + 1}`,
+      )
+      .join(', ');
   }
 
   move(value: number): void {
@@ -134,12 +144,12 @@ export class FrameSelectorComponent {
     if (shiftKey) {
       const [start, end] = [Math.min(this.startFrameIndex, idx), Math.max(this.endFrameIndex, idx)];
       this.selectedFrameIndexes = new Set(
-          Array.from(Array(end - start + 1), (_, index) => index + start),
+        Array.from(Array(end - start + 1), (_, index) => index + start),
       );
     } else if (ctrlKey || metaKey) {
       if (this.selectedFrameIndexes.has(idx)) {
         if (this.selectedFrameIndexes.size === 1) {
-          return;  // prevent deselection when only one frame is selected
+          return; // prevent deselection when only one frame is selected
         }
 
         this.selectedFrameIndexes.delete(idx);
@@ -190,6 +200,6 @@ export class FrameSelectorComponent {
     const dragScrollSpeed = 2;
     const dx = event.clientX - this._viewportScrollState.xCoordinate;
     this.viewport.elementRef.nativeElement.scrollLeft =
-        this._viewportScrollState.scrollLeft - dx * dragScrollSpeed;
+      this._viewportScrollState.scrollLeft - dx * dragScrollSpeed;
   }
 }
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/bargraph-formatter/bargraph-formatter.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/bargraph-formatter/bargraph-formatter.ts
index 9ecc00b6424..b459eb61ea0 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/bargraph-formatter/bargraph-formatter.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/bargraph-formatter/bargraph-formatter.ts
@@ -16,7 +16,7 @@ export interface BargraphNode {
   value: number;
   label: string;
   original: ElementProfile;
-  count: number;  // number of merged nodes with the same label
+  count: number; // number of merged nodes with the same label
   directives?: DirectiveProfile[];
 }
 
@@ -55,7 +55,10 @@ export class BarGraphFormatter extends RecordFormatter<BargraphNode[]> {
   }
 
   override addFrame(
-      nodes: BargraphNode[], elements: ElementProfile[], parents: ElementProfile[] = []): number {
+    nodes: BargraphNode[],
+    elements: ElementProfile[],
+    parents: ElementProfile[] = [],
+  ): number {
     let timeSpent = 0;
     elements.forEach((element) => {
       // Possibly undefined because of the insertion on the backend.
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/flamegraph-formatter/flamegraph-formatter.spec.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/flamegraph-formatter/flamegraph-formatter.spec.ts
index 974e9259de6..75b82d84343 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/flamegraph-formatter/flamegraph-formatter.spec.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/flamegraph-formatter/flamegraph-formatter.spec.ts
@@ -7,7 +7,12 @@
  */
 
 import {AppEntry} from '../record-formatter';
-import {NESTED_FORMATTED_FLAMEGRAPH_RECORD, NESTED_RECORD, SIMPLE_FORMATTED_FLAMEGRAPH_RECORD, SIMPLE_RECORD,} from '../record-formatter-spec-constants';
+import {
+  NESTED_FORMATTED_FLAMEGRAPH_RECORD,
+  NESTED_RECORD,
+  SIMPLE_FORMATTED_FLAMEGRAPH_RECORD,
+  SIMPLE_RECORD,
+} from '../record-formatter-spec-constants';
 
 import {FlamegraphFormatter, FlamegraphNode} from './flamegraph-formatter';
 
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/flamegraph-formatter/flamegraph-formatter.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/flamegraph-formatter/flamegraph-formatter.ts
index a91d3456c5d..8e8d55561b5 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/flamegraph-formatter/flamegraph-formatter.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/flamegraph-formatter/flamegraph-formatter.ts
@@ -24,8 +24,11 @@ export interface FlamegraphNode {
 export const ROOT_LEVEL_ELEMENT_LABEL = 'Entire application';
 
 export class FlamegraphFormatter extends RecordFormatter<FlamegraphNode> {
-  override formatFrame(frame: ProfilerFrame, showChangeDetection?: boolean, theme?: Theme):
-      FlamegraphNode {
+  override formatFrame(
+    frame: ProfilerFrame,
+    showChangeDetection?: boolean,
+    theme?: Theme,
+  ): FlamegraphNode {
     const result: FlamegraphNode = {
       value: 0,
       label: ROOT_LEVEL_ELEMENT_LABEL,
@@ -40,7 +43,7 @@ export class FlamegraphFormatter extends RecordFormatter<FlamegraphNode> {
 
     if (showChangeDetection) {
       result.color =
-          theme === 'dark-theme' ? CHANGE_DETECTION_COLOR_DARK : CHANGE_DETECTION_COLOR_LIGHT;
+        theme === 'dark-theme' ? CHANGE_DETECTION_COLOR_DARK : CHANGE_DETECTION_COLOR_LIGHT;
     }
 
     this.addFrame(result.children, frame.directives, showChangeDetection, theme);
@@ -48,8 +51,11 @@ export class FlamegraphFormatter extends RecordFormatter<FlamegraphNode> {
   }
 
   override addFrame(
-      nodes: FlamegraphNode[], elements: ElementProfile[], showChangeDetection?: boolean,
-      theme?: Theme): number {
+    nodes: FlamegraphNode[],
+    elements: ElementProfile[],
+    showChangeDetection?: boolean,
+    theme?: Theme,
+  ): number {
     let timeSpent = 0;
     elements.forEach((element) => {
       // Possibly undefined because of
@@ -69,7 +75,7 @@ export class FlamegraphFormatter extends RecordFormatter<FlamegraphNode> {
       };
       if (showChangeDetection) {
         const CHANGE_DETECTION_COLOR =
-            theme === 'dark-theme' ? CHANGE_DETECTION_COLOR_DARK : CHANGE_DETECTION_COLOR_LIGHT;
+          theme === 'dark-theme' ? CHANGE_DETECTION_COLOR_DARK : CHANGE_DETECTION_COLOR_LIGHT;
         node.color = changeDetected ? CHANGE_DETECTION_COLOR : NO_CHANGE_DETECTION_COLOR;
       }
       timeSpent += this.addFrame(node.children, element.children, showChangeDetection, theme);
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/frame-merger.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/frame-merger.ts
index e74506efd9b..2da69004ef8 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/frame-merger.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/frame-merger.ts
@@ -8,7 +8,7 @@
 
 import {DirectiveProfile, ElementProfile, LifecycleProfile, ProfilerFrame} from 'protocol';
 
-const mergeProperty = (mergeInProp: number|undefined, value: number|undefined) => {
+const mergeProperty = (mergeInProp: number | undefined, value: number | undefined) => {
   if (mergeInProp === undefined) {
     return value;
   }
@@ -52,7 +52,7 @@ const mergeFrame = (mergeIn: ProfilerFrame, second: ProfilerFrame) => {
   mergeDirectives(mergeIn.directives, second.directives);
 };
 
-export const mergeFrames = (frames: ProfilerFrame[]): ProfilerFrame|null => {
+export const mergeFrames = (frames: ProfilerFrame[]): ProfilerFrame | null => {
   if (!frames || !frames.length) {
     return null;
   }
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/record-formatter-spec-constants.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/record-formatter-spec-constants.ts
index 604fe932839..91c0f173044 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/record-formatter-spec-constants.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/record-formatter-spec-constants.ts
@@ -334,15 +334,10 @@ export const NESTED_FORMATTED_FLAMEGRAPH_RECORD: FlamegraphNode[] = [
                                     changeDetected: true,
                                     children: [],
                                     instances: 1,
-                                    original: NESTED_RECORD[0]
-                                                  .children[0]
-                                                  .children[0]
-                                                  .children[0]
-                                                  .children[0]
-                                                  .children[0]
-                                                  .children[0]
-                                                  .children[0]
-                                                  .children[0],
+                                    original:
+                                      NESTED_RECORD[0].children[0].children[0].children[0]
+                                        .children[0].children[0].children[0].children[0]
+                                        .children[0],
                                   },
                                   {
                                     value: 0,
@@ -350,15 +345,10 @@ export const NESTED_FORMATTED_FLAMEGRAPH_RECORD: FlamegraphNode[] = [
                                     changeDetected: true,
                                     children: [],
                                     instances: 1,
-                                    original: NESTED_RECORD[0]
-                                                  .children[0]
-                                                  .children[0]
-                                                  .children[0]
-                                                  .children[0]
-                                                  .children[0]
-                                                  .children[0]
-                                                  .children[0]
-                                                  .children[1],
+                                    original:
+                                      NESTED_RECORD[0].children[0].children[0].children[0]
+                                        .children[0].children[0].children[0].children[0]
+                                        .children[1],
                                   },
                                   {
                                     value: 0,
@@ -366,38 +356,28 @@ export const NESTED_FORMATTED_FLAMEGRAPH_RECORD: FlamegraphNode[] = [
                                     changeDetected: true,
                                     children: [],
                                     instances: 1,
-                                    original: NESTED_RECORD[0]
-                                                  .children[0]
-                                                  .children[0]
-                                                  .children[0]
-                                                  .children[0]
-                                                  .children[0]
-                                                  .children[0]
-                                                  .children[0]
-                                                  .children[2],
+                                    original:
+                                      NESTED_RECORD[0].children[0].children[0].children[0]
+                                        .children[0].children[0].children[0].children[0]
+                                        .children[2],
                                   },
                                 ],
                                 instances: 1,
-                                original: NESTED_RECORD[0]
-                                              .children[0]
-                                              .children[0]
-                                              .children[0]
-                                              .children[0]
-                                              .children[0]
-                                              .children[0]
-                                              .children[0],
+                                original:
+                                  NESTED_RECORD[0].children[0].children[0].children[0].children[0]
+                                    .children[0].children[0].children[0],
                               },
                             ],
                             instances: 1,
                             original:
-                                NESTED_RECORD[0].children[0].children[0].children[0].children
-                                    [0].children
-                                        [0].children[0],
+                              NESTED_RECORD[0].children[0].children[0].children[0].children[0]
+                                .children[0].children[0],
                           },
                         ],
                         instances: 1,
-                        original: NESTED_RECORD[0].children[0].children[0].children[0].children
-                                      [0].children[0],
+                        original:
+                          NESTED_RECORD[0].children[0].children[0].children[0].children[0]
+                            .children[0],
                       },
                     ],
                     instances: 1,
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/record-formatter.spec.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/record-formatter.spec.ts
index e81d726ec58..94546fa5009 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/record-formatter.spec.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/record-formatter.spec.ts
@@ -28,13 +28,15 @@ describe('getValue cases', () => {
   it('calculates value with  no lifecycle hooks', () => {
     element = {
       children: [],
-      directives: [{
-        changeDetection: 10,
-        isElement: false,
-        isComponent: true,
-        lifecycle: {},
-        name: 'AppComponent'
-      }],
+      directives: [
+        {
+          changeDetection: 10,
+          isElement: false,
+          isComponent: true,
+          lifecycle: {},
+          name: 'AppComponent',
+        },
+      ],
     };
     expect(formatter.getValue(element)).toBe(10);
   });
@@ -48,7 +50,7 @@ describe('getValue cases', () => {
           isElement: false,
           name: 'NgForOf',
           lifecycle: {ngDoCheck: 5},
-          changeDetection: 0
+          changeDetection: 0,
         },
       ],
     };
@@ -64,7 +66,7 @@ describe('getValue cases', () => {
           isElement: false,
           name: 'NgForOf',
           lifecycle: {ngDoCheck: 5},
-          changeDetection: 10
+          changeDetection: 10,
         },
       ],
     };
@@ -143,7 +145,7 @@ describe('getLabel cases', () => {
           isComponent: true,
           lifecycle: {},
           outputs: {},
-          name: 'TodoComponent'
+          name: 'TodoComponent',
         },
       ],
     };
@@ -176,7 +178,7 @@ describe('getLabel cases', () => {
           isComponent: true,
           lifecycle: {},
           outputs: {},
-          name: 'TodoComponent'
+          name: 'TodoComponent',
         },
       ],
     };
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/record-formatter.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/record-formatter.ts
index ba82c8c1b32..2d19b0f977c 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/record-formatter.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/record-formatter.ts
@@ -26,13 +26,16 @@ export interface GraphNode {
 
 export abstract class RecordFormatter<T> {
   abstract formatFrame(frame: ProfilerFrame): T;
-  abstract addFrame(nodes: T|T[], elements: ElementProfile[]): number|void;
+  abstract addFrame(nodes: T | T[], elements: ElementProfile[]): number | void;
 
   getLabel(element: ElementProfile): string {
-    const name = element.directives.filter((d) => d.isComponent).map((c) => c.name).join(', ');
-    const attributes =
-        [...new Set(element.directives.filter((d) => !d.isComponent).map((d) => d.name))].join(
-            ', ');
+    const name = element.directives
+      .filter((d) => d.isComponent)
+      .map((c) => c.name)
+      .join(', ');
+    const attributes = [
+      ...new Set(element.directives.filter((d) => !d.isComponent).map((d) => d.name)),
+    ].join(', ');
     return attributes === '' ? name : `${name}[${attributes}]`;
   }
 
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/tree-map-formatter/tree-map-formatter.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/tree-map-formatter/tree-map-formatter.ts
index eb05a379d9e..a7de314c5b2 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/tree-map-formatter/tree-map-formatter.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/tree-map-formatter/tree-map-formatter.ts
@@ -16,7 +16,7 @@ export interface TreeMapNode {
   value: number;
   size: number;
   children: TreeMapNode[];
-  original: ElementProfile|null;
+  original: ElementProfile | null;
 }
 
 export class TreeMapFormatter extends RecordFormatter<TreeMapNode> {
@@ -37,7 +37,10 @@ export class TreeMapFormatter extends RecordFormatter<TreeMapNode> {
   }
 
   override addFrame(
-      nodes: TreeMapNode[], elements: ElementProfile[], prev: TreeMapNode|null = null): void {
+    nodes: TreeMapNode[],
+    elements: ElementProfile[],
+    prev: TreeMapNode | null = null,
+  ): void {
     elements.forEach((element) => {
       if (!element) {
         console.error('Unable to insert undefined element');
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-dialog.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-dialog.component.ts
index 56a71cde647..1206d1ed309 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-dialog.component.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-dialog.component.ts
@@ -13,5 +13,4 @@ import {Component} from '@angular/core';
   templateUrl: './recording-dialog.component.html',
   styleUrls: ['./recording-dialog.component.scss'],
 })
-export class RecordingDialogComponent {
-}
+export class RecordingDialogComponent {}
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-modal.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-modal.component.ts
index c08044c1484..44adec12eca 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-modal.component.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-modal.component.ts
@@ -13,5 +13,4 @@ import {Component} from '@angular/core';
   templateUrl: './recording-modal.component.html',
   styleUrls: ['./recording-modal.component.scss'],
 })
-export class RecordingModalComponent {
-}
+export class RecordingModalComponent {}
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/bar-chart.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/bar-chart.component.ts
index a9264d5f8cd..6b03ac0cf7b 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/bar-chart.component.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/bar-chart.component.ts
@@ -6,7 +6,15 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {animate, animateChild, query, stagger, style, transition, trigger,} from '@angular/animations';
+import {
+  animate,
+  animateChild,
+  query,
+  stagger,
+  style,
+  transition,
+  trigger,
+} from '@angular/animations';
 import {Component, EventEmitter, Input, Output} from '@angular/core';
 
 import {BargraphNode} from '../record-formatter/bargraph-formatter/bargraph-formatter';
@@ -25,11 +33,9 @@ interface BarData {
   templateUrl: './bar-chart.component.html',
   styleUrls: ['./bar-chart.component.scss'],
   animations: [
-    trigger(
-        'appear',
-        [
-          transition(':enter', [style({width: 0}), animate('.3s ease', style({width: '*'}))]),
-        ]),
+    trigger('appear', [
+      transition(':enter', [style({width: 0}), animate('.3s ease', style({width: '*'}))]),
+    ]),
     trigger('stagger', [transition(':enter', [query(':enter', stagger('.1s', [animateChild()]))])]),
   ],
 })
@@ -58,5 +64,6 @@ export class BarChartComponent {
 
 export function createBarText(bar: BargraphNode) {
   return `${bar.label} | ${bar.value.toFixed(1)} ms | ${bar.count} ${
-      bar.count === 1 ? 'instance' : 'instances'}`;
+    bar.count === 1 ? 'instance' : 'instances'
+  }`;
 }
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/flamegraph-visualizer.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/flamegraph-visualizer.component.ts
index 4ba74223f0f..89e5a2ce137 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/flamegraph-visualizer.component.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/flamegraph-visualizer.component.ts
@@ -12,7 +12,11 @@ import {ProfilerFrame} from 'protocol';
 import {Subscription} from 'rxjs';
 
 import {Theme, ThemeService} from '../../../../theme-service';
-import {FlamegraphFormatter, FlamegraphNode, ROOT_LEVEL_ELEMENT_LABEL,} from '../record-formatter/flamegraph-formatter/flamegraph-formatter';
+import {
+  FlamegraphFormatter,
+  FlamegraphNode,
+  ROOT_LEVEL_ELEMENT_LABEL,
+} from '../record-formatter/flamegraph-formatter/flamegraph-formatter';
 
 import {formatDirectiveProfile} from './profile-formatter';
 import {SelectedDirective, SelectedEntry} from './timeline-visualizer.component';
@@ -52,16 +56,18 @@ export class FlamegraphVisualizerComponent implements OnInit, OnDestroy {
   ngOnInit(): void {
     this._currentThemeSubscription = this.themeService.currentTheme.subscribe((theme) => {
       this.currentTheme = theme;
-      this.colors = theme === 'dark-theme' ? {
-        hue: [210, 90],
-        saturation: [90, 90],
-        lightness: [25, 25],
-      } :
-                                             {
-                                               hue: [50, 15],
-                                               saturation: [100, 100],
-                                               lightness: [75, 75],
-                                             };
+      this.colors =
+        theme === 'dark-theme'
+          ? {
+              hue: [210, 90],
+              saturation: [90, 90],
+              lightness: [25, 25],
+            }
+          : {
+              hue: [50, 15],
+              saturation: [100, 100],
+              lightness: [75, 75],
+            };
       this._selectFrame();
     });
   }
@@ -89,7 +95,8 @@ export class FlamegraphVisualizerComponent implements OnInit, OnDestroy {
   }
 
   private _selectFrame(): void {
-    this.profilerBars =
-        [this._formatter.formatFrame(this._frame, this._showChangeDetection, this.currentTheme)];
+    this.profilerBars = [
+      this._formatter.formatFrame(this._frame, this._showChangeDetection, this.currentTheme),
+    ];
   }
 }
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/profile-formatter.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/profile-formatter.ts
index daedbf22c18..e14d95f0473 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/profile-formatter.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/profile-formatter.ts
@@ -23,7 +23,10 @@ const formatOutput = (outputName: string) => {
     }
     output.push(parts[idx]);
   }
-  return output.filter((el) => !!el).reverse().join('-');
+  return output
+    .filter((el) => !!el)
+    .reverse()
+    .join('-');
 };
 
 export const formatDirectiveProfile = (nodes: DirectiveProfile[]) => {
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/recording-visualizer.module.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/recording-visualizer.module.ts
index 0242e8fa036..de018a35f2f 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/recording-visualizer.module.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/recording-visualizer.module.ts
@@ -32,10 +32,13 @@ import {TreeMapVisualizerComponent} from './tree-map-visualizer.component';
     BargraphVisualizerComponent,
   ],
   imports: [
-    CommonModule, NgxFlamegraphModule, MatTooltipModule, MatToolbarModule, MatCardModule,
-    AngularSplitModule
+    CommonModule,
+    NgxFlamegraphModule,
+    MatTooltipModule,
+    MatToolbarModule,
+    MatCardModule,
+    AngularSplitModule,
   ],
   exports: [TimelineVisualizerComponent],
 })
-export class RecordingVisualizerModule {
-}
+export class RecordingVisualizerModule {}
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/timeline-visualizer.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/timeline-visualizer.component.ts
index 11de53f2c12..f73a009c8d9 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/timeline-visualizer.component.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/timeline-visualizer.component.ts
@@ -14,7 +14,7 @@ import {FlamegraphNode} from '../record-formatter/flamegraph-formatter';
 import {VisualizationMode} from '../visualization-mode';
 
 export interface SelectedEntry {
-  entry: BargraphNode|FlamegraphNode;
+  entry: BargraphNode | FlamegraphNode;
   selectedDirectives: SelectedDirective[];
   parentHierarchy?: {name: string}[];
 }
@@ -43,7 +43,7 @@ export class TimelineVisualizerComponent {
 
   cmpVisualizationModes = VisualizationMode;
 
-  selectedEntry: BargraphNode|FlamegraphNode|null = null;
+  selectedEntry: BargraphNode | FlamegraphNode | null = null;
   selectedDirectives: SelectedDirective[] = [];
   parentHierarchy: {name: string}[] = [];
 
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/tree-map-visualizer.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/tree-map-visualizer.component.ts
index 054fe6d9498..68927a3bf41 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/tree-map-visualizer.component.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/tree-map-visualizer.component.ts
@@ -36,15 +36,17 @@ export class TreeMapVisualizerComponent implements OnInit, OnDestroy {
   private resize$ = new Subject<void>();
   private _throttledResizeSubscription!: Subscription;
 
-  private _resizeObserver: ResizeObserver =
-      new ResizeObserver(() => this._ngZone.run(() => this.resize$.next()));
+  private _resizeObserver: ResizeObserver = new ResizeObserver(() =>
+    this._ngZone.run(() => this.resize$.next()),
+  );
   private treeMapRecords!: TreeMapNode;
 
   @ViewChild('webTree', {static: true}) tree!: ElementRef<HTMLElement>;
 
   ngOnInit(): void {
-    this._throttledResizeSubscription =
-        this.resize$.pipe(debounceTime(100)).subscribe(() => this._renderTree());
+    this._throttledResizeSubscription = this.resize$
+      .pipe(debounceTime(100))
+      .subscribe(() => this._renderTree());
     this._resizeObserver.observe(this.tree.nativeElement);
   }
 
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/timeline-controls.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/timeline-controls.component.ts
index f23e3570fd2..8f26734f958 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/timeline-controls.component.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/timeline-controls.component.ts
@@ -17,7 +17,7 @@ import {VisualizationMode} from './visualization-mode';
   styleUrls: ['./timeline-controls.component.scss'],
 })
 export class TimelineControlsComponent {
-  @Input() record: ProfilerFrame|undefined;
+  @Input() record: ProfilerFrame | undefined;
   @Input({required: true}) estimatedFrameRate!: number;
   @Input({required: true}) visualizationMode!: VisualizationMode;
   @Input({required: true}) empty!: boolean;
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/timeline.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/timeline.component.ts
index e20b382d822..5a358cbc5f4 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/timeline.component.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/timeline.component.ts
@@ -44,7 +44,7 @@ export class TimelineComponent implements OnDestroy {
   @Output() exportProfile = new EventEmitter<void>();
   visualizationMode = VisualizationMode.BarGraph;
   changeDetection = false;
-  frame: ProfilerFrame|null = null;
+  frame: ProfilerFrame | null = null;
 
   private _filter: Filter = noopFilter;
   private _maxDuration = -Infinity;
@@ -54,9 +54,11 @@ export class TimelineComponent implements OnDestroy {
   private _graphDataSubject = new BehaviorSubject<GraphNode[]>([]);
   visualizing = false;
   graphData$ = this._graphDataSubject.pipe(
-      share(), map((nodes) => {
-        return (this._filtered = nodes.filter((node) => this._filter(node)));
-      }));
+    share(),
+    map((nodes) => {
+      return (this._filtered = nodes.filter((node) => this._filter(node)));
+    }),
+  );
 
   selectFrames({indexes}: {indexes: number[]}): void {
     this.frame = mergeFrames(indexes.map((index) => this._filtered[index].frame));
@@ -106,9 +108,9 @@ export class TimelineComponent implements OnDestroy {
       return;
     }
     const multiplicationFactor = parseFloat((MAX_HEIGHT / this._maxDuration).toFixed(2));
-    frames.forEach(
-        (frame) =>
-            this._graphDataSubject.value.push(this._getBarStyles(frame, multiplicationFactor)));
+    frames.forEach((frame) =>
+      this._graphDataSubject.value.push(this._getBarStyles(frame, multiplicationFactor)),
+    );
 
     // We need to pass a new reference, because the CDK virtual scroll
     // has OnPush strategy, so it doesn't update the UI otherwise.
@@ -118,7 +120,9 @@ export class TimelineComponent implements OnDestroy {
 
   private _generateBars(): GraphNode[] {
     const maxValue = this._allRecords.reduce(
-        (acc: number, frame: ProfilerFrame) => Math.max(acc, frame.duration), 0);
+      (acc: number, frame: ProfilerFrame) => Math.max(acc, frame.duration),
+      0,
+    );
     const multiplicationFactor = parseFloat((MAX_HEIGHT / maxValue).toFixed(2));
     this._maxDuration = Math.max(this._maxDuration, maxValue);
     return this._allRecords.map((r) => this._getBarStyles(r, multiplicationFactor));
@@ -130,8 +134,7 @@ export class TimelineComponent implements OnDestroy {
     const backgroundColor = this.getColorByFrameRate(this.estimateFrameRate(frame.duration));
 
     const style = {
-      'background-image': `-webkit-linear-gradient(bottom, ${backgroundColor} ${
-          colorPercentage}%, transparent ${colorPercentage}%)`,
+      'background-image': `-webkit-linear-gradient(bottom, ${backgroundColor} ${colorPercentage}%, transparent ${colorPercentage}%)`,
       cursor: 'pointer',
       'min-width': '25px',
       width: '25px',
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/timeline.module.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/timeline.module.ts
index 2e3d3f999cb..f67adf38e67 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/timeline.module.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/timeline.module.ts
@@ -60,5 +60,4 @@ import {TimelineComponent} from './timeline.component';
     FrameSelectorComponent,
   ],
 })
-export class TimelineModule {
-}
+export class TimelineModule {}
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-tree.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-tree.component.ts
index d54a0248214..250b73a78cd 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-tree.component.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-tree.component.ts
@@ -57,76 +57,82 @@ export class RouterTreeComponent implements AfterViewInit {
 
     const root: any = this._routes[0];
 
-    const nodes = this.tree(d3.hierarchy(
+    const nodes = this.tree(
+      d3.hierarchy(
         root.children.length === 0 || root.children.length > 1 ? root : root.children[0],
-        (d) => d.children));
+        (d) => d.children,
+      ),
+    );
 
     // Define the div for the tooltip
-    this.tooltip = d3.select('body')
-                       .append('div')
-                       .attr('class', 'tooltip')
-                       .style('opacity', 0)
-                       .style('padding', '0');
+    this.tooltip = d3
+      .select('body')
+      .append('div')
+      .attr('class', 'tooltip')
+      .style('opacity', 0)
+      .style('padding', '0');
 
     g.selectAll('.link')
-        .data(nodes.descendants().slice(1))
-        .enter()
-        .append('path')
-        .attr('class', 'link')
-        .attr('d', (d) => `
+      .data(nodes.descendants().slice(1))
+      .enter()
+      .append('path')
+      .attr('class', 'link')
+      .attr(
+        'd',
+        (d) => `
             M${d.y},${d.x}
             C${(d.y + (d as any).parent.y) / 2},
               ${d.x} ${(d.y + (d as any).parent.y) / 2},
               ${(d as any).parent.x} ${(d as any).parent.y},
-              ${(d as any).parent.x}`);
+              ${(d as any).parent.x}`,
+      );
 
     // Declare the nodes
-    const node =
-        g.selectAll('g.node')
-            .data(nodes.descendants())
-            .enter()
-            .append('g')
-            .attr('class', 'node')
-            .on('mouseover',
-                (n) => {
-                  const content = `
+    const node = g
+      .selectAll('g.node')
+      .data(nodes.descendants())
+      .enter()
+      .append('g')
+      .attr('class', 'node')
+      .on('mouseover', (n) => {
+        const content = `
           <b>Name:</b> ${n.data.name}<br/>
           <b>Path:</b> ${n.data.path}<br/>
           <b>Auxiliary Route:</b> ${n.data.isAux}<br/>
           <b>Specificity:</b> ${n.data.specificity}<br/>
           <b>Handler:</b> ${n.data.handler}<br/>
         `;
-                  this.tooltip.style('padding', '4px 8px').transition().style('opacity', 0.9);
-                  this.tooltip.html(content)
-                      .style('left', (d3 as any).event.pageX + 8 + 'px')
-                      .style('top', (d3 as any).event.pageY + 8 + 'px');
-                })
-            .on('mouseout', () => this.tooltip.transition().style('opacity', 0))
-            .attr('transform', (d) => `translate(${d.y},${d.x})`);
+        this.tooltip.style('padding', '4px 8px').transition().style('opacity', 0.9);
+        this.tooltip
+          .html(content)
+          .style('left', (d3 as any).event.pageX + 8 + 'px')
+          .style('top', (d3 as any).event.pageY + 8 + 'px');
+      })
+      .on('mouseout', () => this.tooltip.transition().style('opacity', 0))
+      .attr('transform', (d) => `translate(${d.y},${d.x})`);
 
-    node.append('circle')
-        .attr('class', (d) => ((d.data as any).isAux ? 'node-aux-route' : 'node-route'))
-        .attr('r', 6);
+    node
+      .append('circle')
+      .attr('class', (d) => ((d.data as any).isAux ? 'node-aux-route' : 'node-route'))
+      .attr('r', 6);
 
-    node.append('text')
-        .attr('dy', (d) => (d.depth === 0 || !d.children ? '0.35em' : '-1.50em'))
-        .attr(
-            'dx',
-            (d: any):
-                any => {
-                  if (d.parent && d.children) {
-                    return 6;
-                  } else if (!d.parent && d.children) {
-                    return -13;
-                  } else if (d.parent && !d.children) {
-                    return 13;
-                  }
-                })
-        .attr('text-anchor', (d) => (d.children ? 'end' : 'start'))
-        .text((d) => {
-          const label = (d.data as any).name;
-          return label.length > 20 ? label.slice(0, 17) + '...' : label;
-        });
+    node
+      .append('text')
+      .attr('dy', (d) => (d.depth === 0 || !d.children ? '0.35em' : '-1.50em'))
+      .attr('dx', (d: any): any => {
+        if (d.parent && d.children) {
+          return 6;
+        } else if (!d.parent && d.children) {
+          return -13;
+        } else if (d.parent && !d.children) {
+          return 13;
+        }
+      })
+      .attr('text-anchor', (d) => (d.children ? 'end' : 'start'))
+      .text((d) => {
+        const label = (d.data as any).name;
+        return label.length > 20 ? label.slice(0, 17) + '...' : label;
+      });
 
     // reset transform
     g.attr('transform', 'translate(0, 0)');
@@ -134,10 +140,13 @@ export class RouterTreeComponent implements AfterViewInit {
     const svgRect = this.svgContainer.nativeElement.getBoundingClientRect();
     const gElRect = this.g.nativeElement.getBoundingClientRect();
 
-    g.attr('transform', `translate(
+    g.attr(
+      'transform',
+      `translate(
         ${svgRect.left - gElRect.left + svgPadding},
         ${svgRect.top - gElRect.top + svgPadding}
-      )`);
+      )`,
+    );
     const height = gElRect.height + svgPadding * 2;
     const width = gElRect.width + svgPadding * 2;
     svg.attr('height', height).attr('width', width);
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-tree.module.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-tree.module.ts
index dce99886c9c..a65c0124828 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-tree.module.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-tree.module.ts
@@ -18,5 +18,4 @@ import {RouterTreeComponent} from './router-tree.component';
   imports: [CommonModule, MatDialogModule, MatSelectModule],
   exports: [RouterTreeComponent],
 })
-export class RouterTreeModule {
-}
+export class RouterTreeModule {}
diff --git a/devtools/projects/ng-devtools/src/lib/devtools.component.ts b/devtools/projects/ng-devtools/src/lib/devtools.component.ts
index 719999c30cd..1f8ed7b93ae 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools.component.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools.component.ts
@@ -20,17 +20,15 @@ import {ThemeService} from './theme-service';
   templateUrl: './devtools.component.html',
   styleUrls: ['./devtools.component.scss'],
   animations: [
-    trigger(
-        'enterAnimation',
-        [
-          transition(':enter', [style({opacity: 0}), animate('200ms', style({opacity: 1}))]),
-          transition(':leave', [style({opacity: 1}), animate('200ms', style({opacity: 0}))]),
-        ]),
+    trigger('enterAnimation', [
+      transition(':enter', [style({opacity: 0}), animate('200ms', style({opacity: 1}))]),
+      transition(':leave', [style({opacity: 1}), animate('200ms', style({opacity: 0}))]),
+    ]),
   ],
 })
 export class DevToolsComponent implements OnInit, OnDestroy {
-  angularExists: boolean|null = null;
-  angularVersion: string|boolean|undefined = undefined;
+  angularExists: boolean | null = null;
+  angularVersion: string | boolean | undefined = undefined;
   angularIsInDevMode = true;
   ivy!: boolean;
 
@@ -38,8 +36,11 @@ export class DevToolsComponent implements OnInit, OnDestroy {
   private readonly _chromeStyleName = 'chrome_styles.css';
 
   constructor(
-      private _messageBus: MessageBus<Events>, private _themeService: ThemeService,
-      private _platform: Platform, @Inject(DOCUMENT) private _document: Document) {}
+    private _messageBus: MessageBus<Events>,
+    private _themeService: ThemeService,
+    private _platform: Platform,
+    @Inject(DOCUMENT) private _document: Document,
+  ) {}
 
   private _interval$ = interval(500).subscribe((attempt) => {
     if (attempt === 10) {
@@ -59,8 +60,9 @@ export class DevToolsComponent implements OnInit, OnDestroy {
       this._interval$.unsubscribe();
     });
 
-    const browserStyleName =
-        this._platform.FIREFOX ? this._firefoxStyleName : this._chromeStyleName;
+    const browserStyleName = this._platform.FIREFOX
+      ? this._firefoxStyleName
+      : this._chromeStyleName;
     this._loadStyle(browserStyleName);
   }
 
diff --git a/devtools/projects/ng-devtools/src/lib/devtools.module.ts b/devtools/projects/ng-devtools/src/lib/devtools.module.ts
index 1fadc433ec7..d5d6941a843 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools.module.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools.module.ts
@@ -19,5 +19,4 @@ import {DevToolsComponent} from './devtools.component';
   imports: [CommonModule, DevToolsTabModule, MatProgressSpinnerModule, MatTooltipModule],
   exports: [DevToolsComponent],
 })
-export class DevToolsModule {
-}
+export class DevToolsModule {}
diff --git a/devtools/projects/ng-devtools/src/lib/theme-service.ts b/devtools/projects/ng-devtools/src/lib/theme-service.ts
index a394508af54..906ae3dc172 100644
--- a/devtools/projects/ng-devtools/src/lib/theme-service.ts
+++ b/devtools/projects/ng-devtools/src/lib/theme-service.ts
@@ -9,7 +9,7 @@
 import {Injectable, Renderer2, RendererFactory2} from '@angular/core';
 import {ReplaySubject, Subject} from 'rxjs';
 
-export type Theme = 'dark-theme'|'light-theme';
+export type Theme = 'dark-theme' | 'light-theme';
 
 @Injectable({
   providedIn: 'root',
diff --git a/devtools/projects/ng-devtools/src/lib/vendor/angular-split/lib/component/interface.ts b/devtools/projects/ng-devtools/src/lib/vendor/angular-split/lib/component/interface.ts
index 175b49a2d51..4f6942cfb70 100644
--- a/devtools/projects/ng-devtools/src/lib/vendor/angular-split/lib/component/interface.ts
+++ b/devtools/projects/ng-devtools/src/lib/vendor/angular-split/lib/component/interface.ts
@@ -10,9 +10,9 @@ export interface IPoint {
 export interface IArea {
   component: SplitAreaDirective;
   order: number;
-  size: number|null;
-  minSize: number|null;
-  maxSize: number|null;
+  size: number | null;
+  minSize: number | null;
+  maxSize: number | null;
 }
 
 // CREATED ON DRAG START
@@ -53,4 +53,4 @@ export interface IOutputData {
   sizes: IOutputAreaSizes;
 }
 
-export interface IOutputAreaSizes extends Array<number|'*'> {}
+export interface IOutputAreaSizes extends Array<number | '*'> {}
diff --git a/devtools/projects/ng-devtools/src/lib/vendor/angular-split/lib/component/split.component.ts b/devtools/projects/ng-devtools/src/lib/vendor/angular-split/lib/component/split.component.ts
index d7b795a1eca..0fda04568c4 100644
--- a/devtools/projects/ng-devtools/src/lib/vendor/angular-split/lib/component/split.component.ts
+++ b/devtools/projects/ng-devtools/src/lib/vendor/angular-split/lib/component/split.component.ts
@@ -1,11 +1,42 @@
 // tslint:disable
-import {AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, NgZone, OnDestroy, Output, QueryList, Renderer2, ViewChildren,} from '@angular/core';
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  NgZone,
+  OnDestroy,
+  Output,
+  QueryList,
+  Renderer2,
+  ViewChildren,
+} from '@angular/core';
 import {Observable, Subject, Subscriber} from 'rxjs';
 import {debounceTime} from 'rxjs/operators';
 
-import {IArea, IAreaSnapshot, IOutputAreaSizes, IOutputData, IPoint, ISplitSnapshot} from './interface';
+import {
+  IArea,
+  IAreaSnapshot,
+  IOutputAreaSizes,
+  IOutputData,
+  IPoint,
+  ISplitSnapshot,
+} from './interface';
 import {SplitAreaDirective} from './splitArea.directive';
-import {getAreaMaxSize, getAreaMinSize, getElementPixelSize, getGutterSideAbsorptionCapacity, getInputBoolean, getInputPositiveNumber, getPointFromEvent, isUserSizesValid, updateAreaSize,} from './utils';
+import {
+  getAreaMaxSize,
+  getAreaMinSize,
+  getElementPixelSize,
+  getGutterSideAbsorptionCapacity,
+  getInputBoolean,
+  getInputPositiveNumber,
+  getPointFromEvent,
+  isUserSizesValid,
+  updateAreaSize,
+} from './utils';
 
 /**
  * angular-split
@@ -47,58 +78,59 @@ import {getAreaMaxSize, getAreaMinSize, getElementPixelSize, getGutterSideAbsorp
   changeDetection: ChangeDetectionStrategy.OnPush,
   styleUrls: [`./split.component.scss`],
   template: ` <ng-content></ng-content>
-    @for (_ of displayedAreas; track $index) {
-      @if ($last === false) {
-        <div
-          #gutterEls
-          class="as-split-gutter"
-          [style.flex-basis.px]="gutterSize"
-          [style.order]="$index * 2 + 1"
-          (mousedown)="startDragging($event, $index * 2 + 1, $index + 1)"
-          (touchstart)="startDragging($event, $index * 2 + 1, $index + 1)"
-          (mouseup)="clickGutter($event, $index + 1)"
-          (touchend)="clickGutter($event, $index + 1)"
-          >
-          <div class="as-split-gutter-icon"></div>
-        </div>
-      }
-    }`,
+    @for (_ of displayedAreas; track $index) { @if ($last === false) {
+    <div
+      #gutterEls
+      class="as-split-gutter"
+      [style.flex-basis.px]="gutterSize"
+      [style.order]="$index * 2 + 1"
+      (mousedown)="startDragging($event, $index * 2 + 1, $index + 1)"
+      (touchstart)="startDragging($event, $index * 2 + 1, $index + 1)"
+      (mouseup)="clickGutter($event, $index + 1)"
+      (touchend)="clickGutter($event, $index + 1)"
+    >
+      <div class="as-split-gutter-icon"></div>
+    </div>
+    } }`,
 })
 export class SplitComponent implements AfterViewInit, OnDestroy {
-  private _direction: 'horizontal'|'vertical' = 'horizontal';
+  private _direction: 'horizontal' | 'vertical' = 'horizontal';
 
   @Input()
-  set direction(v: 'horizontal'|'vertical') {
+  set direction(v: 'horizontal' | 'vertical') {
     this._direction = v === 'vertical' ? 'vertical' : 'horizontal';
 
     this.renderer.addClass(this.elRef.nativeElement, `as-${this._direction}`);
     this.renderer.removeClass(
-        this.elRef.nativeElement,
-        `as-${this._direction === 'vertical' ? 'horizontal' : 'vertical'}`);
+      this.elRef.nativeElement,
+      `as-${this._direction === 'vertical' ? 'horizontal' : 'vertical'}`,
+    );
 
     this.build(false, false);
   }
 
-  get direction(): 'horizontal'|'vertical' {
+  get direction(): 'horizontal' | 'vertical' {
     return this._direction;
   }
 
   ////
 
-  private _unit: 'percent'|'pixel' = 'percent';
+  private _unit: 'percent' | 'pixel' = 'percent';
 
   @Input()
-  set unit(v: 'percent'|'pixel') {
+  set unit(v: 'percent' | 'pixel') {
     this._unit = v === 'pixel' ? 'pixel' : 'percent';
 
     this.renderer.addClass(this.elRef.nativeElement, `as-${this._unit}`);
     this.renderer.removeClass(
-        this.elRef.nativeElement, `as-${this._unit === 'pixel' ? 'percent' : 'pixel'}`);
+      this.elRef.nativeElement,
+      `as-${this._unit === 'pixel' ? 'percent' : 'pixel'}`,
+    );
 
     this.build(false, true);
   }
 
-  get unit(): 'percent'|'pixel' {
+  get unit(): 'percent' | 'pixel' {
     return this._unit;
   }
 
@@ -107,13 +139,13 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
   private _gutterSize: number = 11;
 
   @Input()
-  set gutterSize(v: number|null) {
+  set gutterSize(v: number | null) {
     this._gutterSize = getInputPositiveNumber(v, 11);
 
     this.build(false, false);
   }
 
-  get gutterSize(): number|null {
+  get gutterSize(): number | null {
     return this._gutterSize;
   }
 
@@ -151,10 +183,8 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
   set useTransition(v: boolean) {
     this._useTransition = getInputBoolean(v);
 
-    if (this._useTransition)
-      this.renderer.addClass(this.elRef.nativeElement, 'as-transition');
-    else
-      this.renderer.removeClass(this.elRef.nativeElement, 'as-transition');
+    if (this._useTransition) this.renderer.addClass(this.elRef.nativeElement, 'as-transition');
+    else this.renderer.removeClass(this.elRef.nativeElement, 'as-transition');
   }
 
   get useTransition(): boolean {
@@ -169,10 +199,8 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
   set disabled(v: boolean) {
     this._disabled = getInputBoolean(v);
 
-    if (this._disabled)
-      this.renderer.addClass(this.elRef.nativeElement, 'as-disabled');
-    else
-      this.renderer.removeClass(this.elRef.nativeElement, 'as-disabled');
+    if (this._disabled) this.renderer.addClass(this.elRef.nativeElement, 'as-disabled');
+    else this.renderer.removeClass(this.elRef.nativeElement, 'as-disabled');
   }
 
   get disabled(): boolean {
@@ -181,16 +209,16 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
 
   ////
 
-  private _dir: 'ltr'|'rtl' = 'ltr';
+  private _dir: 'ltr' | 'rtl' = 'ltr';
 
   @Input()
-  set dir(v: 'ltr'|'rtl') {
+  set dir(v: 'ltr' | 'rtl') {
     this._dir = v === 'rtl' ? 'rtl' : 'ltr';
 
     this.renderer.setAttribute(this.elRef.nativeElement, 'dir', this._dir);
   }
 
-  get dir(): 'ltr'|'rtl' {
+  get dir(): 'ltr' | 'rtl' {
     return this._dir;
   }
 
@@ -214,11 +242,12 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
   @Output() gutterClick = new EventEmitter<IOutputData>(false);
   @Output() gutterDblClick = new EventEmitter<IOutputData>(false);
 
-  private transitionEndSubscriber: Subscriber<IOutputAreaSizes>|null = null;
+  private transitionEndSubscriber: Subscriber<IOutputAreaSizes> | null = null;
   @Output()
   get transitionEnd(): Observable<IOutputAreaSizes> {
-    return new Observable((subscriber) => (this.transitionEndSubscriber = subscriber))
-        .pipe(debounceTime<any>(20));
+    return new Observable((subscriber) => (this.transitionEndSubscriber = subscriber)).pipe(
+      debounceTime<any>(20),
+    );
   }
 
   private dragProgressSubject: Subject<IOutputData> = new Subject();
@@ -228,9 +257,9 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
 
   private isDragging: boolean = false;
   private dragListeners: Array<Function> = [];
-  private snapshot: ISplitSnapshot|null = null;
-  private startPoint: IPoint|null = null;
-  private endPoint: IPoint|null = null;
+  private snapshot: ISplitSnapshot | null = null;
+  private startPoint: IPoint | null = null;
+  private endPoint: IPoint | null = null;
 
   public readonly displayedAreas: Array<IArea> = [];
   private readonly hidedAreas: Array<IArea> = [];
@@ -238,8 +267,11 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
   @ViewChildren('gutterEls') private gutterEls!: QueryList<ElementRef>;
 
   constructor(
-      private ngZone: NgZone, private elRef: ElementRef, private cdRef: ChangeDetectorRef,
-      private renderer: Renderer2) {
+    private ngZone: NgZone,
+    private elRef: ElementRef,
+    private cdRef: ChangeDetectorRef,
+    private renderer: Renderer2,
+  ) {
     // To force adding default class, could be override by user @Input() or not
     this.direction = this._direction;
   }
@@ -285,8 +317,11 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
     }
   }
 
-  public updateArea(component: SplitAreaDirective, resetOrders: boolean, resetSizes: boolean):
-      void {
+  public updateArea(
+    component: SplitAreaDirective,
+    resetOrders: boolean,
+    resetSizes: boolean,
+  ): void {
     if (component.visible === true) {
       this.build(resetOrders, resetSizes);
     }
@@ -364,8 +399,10 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
     // ¤ AREAS SIZE
 
     if (resetSizes === true) {
-      const useUserSizes =
-          isUserSizesValid(this.unit, this.displayedAreas.map((a) => a.component.size));
+      const useUserSizes = isUserSizesValid(
+        this.unit,
+        this.displayedAreas.map((a) => a.component.size),
+      );
 
       switch (this.unit) {
         case 'percent': {
@@ -445,9 +482,12 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
 
         this.displayedAreas.forEach((area) => {
           area.component.setStyleFlex(
-              0, 0, `calc( ${area.size}% - ${(<number>area.size / 100) * sumGutterSize}px )`,
-              area.minSize !== null && area.minSize === area.size ? true : false,
-              area.maxSize !== null && area.maxSize === area.size ? true : false);
+            0,
+            0,
+            `calc( ${area.size}% - ${(<number>area.size / 100) * sumGutterSize}px )`,
+            area.minSize !== null && area.minSize === area.size ? true : false,
+            area.maxSize !== null && area.maxSize === area.size ? true : false,
+          );
         });
       }
     }
@@ -472,24 +512,30 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
           // Multiple areas > use each pixel basis
           else {
             area.component.setStyleFlex(
-                0, 0, `${area.size}px`,
-                area.minSize !== null && area.minSize === area.size ? true : false,
-                area.maxSize !== null && area.maxSize === area.size ? true : false);
+              0,
+              0,
+              `${area.size}px`,
+              area.minSize !== null && area.minSize === area.size ? true : false,
+              area.maxSize !== null && area.maxSize === area.size ? true : false,
+            );
           }
         }
       });
     }
   }
 
-  _clickTimeout: number|null = null;
+  _clickTimeout: number | null = null;
 
-  public clickGutter(event: MouseEvent|TouchEvent, gutterNum: number): void {
+  public clickGutter(event: MouseEvent | TouchEvent, gutterNum: number): void {
     const tempPoint = getPointFromEvent(event);
 
     // Be sure mouseup/touchend happened at same point as mousedown/touchstart to trigger
     // click/dblclick
-    if (this.startPoint && this.startPoint.x === tempPoint!.x &&
-        this.startPoint.y === tempPoint!.y) {
+    if (
+      this.startPoint &&
+      this.startPoint.x === tempPoint!.x &&
+      this.startPoint.y === tempPoint!.y
+    ) {
       // If timeout in progress and new click > clearTimeout & dblClickEvent
       if (this._clickTimeout !== null) {
         window.clearTimeout(this._clickTimeout);
@@ -508,7 +554,11 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
     }
   }
 
-  public startDragging(event: MouseEvent|TouchEvent, gutterOrder: number, gutterNum: number): void {
+  public startDragging(
+    event: MouseEvent | TouchEvent,
+    gutterOrder: number,
+    gutterNum: number,
+  ): void {
     event.preventDefault();
     event.stopPropagation();
 
@@ -521,7 +571,7 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
       gutterNum,
       lastSteppedOffset: 0,
       allAreasSizePixel:
-          getElementPixelSize(this.elRef, this.direction) - this.getNbGutters() * this.gutterSize!,
+        getElementPixelSize(this.elRef, this.direction) - this.getNbGutters() * this.gutterSize!,
       allInvolvedAreasSizePercent: 100,
       areasBeforeGutter: [],
       areasAfterGutter: [],
@@ -531,8 +581,7 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
       const areaSnapshot: IAreaSnapshot = {
         area,
         sizePixelAtStart: getElementPixelSize(area.component.elRef, this.direction),
-        sizePercentAtStart: (this.unit === 'percent' ? area.size : -1) as
-            number,  // If pixel mode, anyway, will not be used.
+        sizePercentAtStart: (this.unit === 'percent' ? area.size : -1) as number, // If pixel mode, anyway, will not be used.
       };
 
       if (area.order < gutterOrder) {
@@ -556,23 +605,30 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
       ...this.snapshot.areasAfterGutter,
     ].reduce((t, a) => t + a.sizePercentAtStart, 0);
 
-    if (this.snapshot.areasBeforeGutter.length === 0 ||
-        this.snapshot.areasAfterGutter.length === 0) {
+    if (
+      this.snapshot.areasBeforeGutter.length === 0 ||
+      this.snapshot.areasAfterGutter.length === 0
+    ) {
       return;
     }
 
     this.dragListeners.push(
-        this.renderer.listen('document', 'mouseup', this.stopDragging.bind(this)));
+      this.renderer.listen('document', 'mouseup', this.stopDragging.bind(this)),
+    );
     this.dragListeners.push(
-        this.renderer.listen('document', 'touchend', this.stopDragging.bind(this)));
+      this.renderer.listen('document', 'touchend', this.stopDragging.bind(this)),
+    );
     this.dragListeners.push(
-        this.renderer.listen('document', 'touchcancel', this.stopDragging.bind(this)));
+      this.renderer.listen('document', 'touchcancel', this.stopDragging.bind(this)),
+    );
 
     this.ngZone.runOutsideAngular(() => {
       this.dragListeners.push(
-          this.renderer.listen('document', 'mousemove', this.dragEvent.bind(this)));
+        this.renderer.listen('document', 'mousemove', this.dragEvent.bind(this)),
+      );
       this.dragListeners.push(
-          this.renderer.listen('document', 'touchmove', this.dragEvent.bind(this)));
+        this.renderer.listen('document', 'touchmove', this.dragEvent.bind(this)),
+      );
     });
 
     this.displayedAreas.forEach((area) => area.component.lockEvents());
@@ -580,12 +636,14 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
     this.isDragging = true;
     this.renderer.addClass(this.elRef.nativeElement, 'as-dragging');
     this.renderer.addClass(
-        this.gutterEls.toArray()[this.snapshot.gutterNum - 1].nativeElement, 'as-dragged');
+      this.gutterEls.toArray()[this.snapshot.gutterNum - 1].nativeElement,
+      'as-dragged',
+    );
 
     this.notify('start', this.snapshot.gutterNum);
   }
 
-  private dragEvent(event: MouseEvent|TouchEvent): void {
+  private dragEvent(event: MouseEvent | TouchEvent): void {
     event.preventDefault();
     event.stopPropagation();
 
@@ -605,8 +663,10 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
 
     // Calculate steppedOffset
 
-    let offset = this.direction === 'horizontal' ? this.startPoint!.x - this.endPoint.x :
-                                                   this.startPoint!.y - this.endPoint.y;
+    let offset =
+      this.direction === 'horizontal'
+        ? this.startPoint!.x - this.endPoint.x
+        : this.startPoint!.y - this.endPoint.y;
     if (this.dir === 'rtl') {
       offset = -offset;
     }
@@ -621,38 +681,56 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
     // Need to know if each gutter side areas could reacts to steppedOffset
 
     let areasBefore = getGutterSideAbsorptionCapacity(
-        this.unit, this.snapshot!.areasBeforeGutter, -steppedOffset,
-        this.snapshot!.allAreasSizePixel);
+      this.unit,
+      this.snapshot!.areasBeforeGutter,
+      -steppedOffset,
+      this.snapshot!.allAreasSizePixel,
+    );
     let areasAfter = getGutterSideAbsorptionCapacity(
-        this.unit, this.snapshot!.areasAfterGutter, steppedOffset,
-        this.snapshot!.allAreasSizePixel);
+      this.unit,
+      this.snapshot!.areasAfterGutter,
+      steppedOffset,
+      this.snapshot!.allAreasSizePixel,
+    );
 
     // Each gutter side areas can't absorb all offset
     if (areasBefore.remain !== 0 && areasAfter.remain !== 0) {
       if (Math.abs(areasBefore.remain) === Math.abs(areasAfter.remain)) {
       } else if (Math.abs(areasBefore.remain) > Math.abs(areasAfter.remain)) {
         areasAfter = getGutterSideAbsorptionCapacity(
-            this.unit, this.snapshot!.areasAfterGutter, steppedOffset + areasBefore.remain,
-            this.snapshot!.allAreasSizePixel);
+          this.unit,
+          this.snapshot!.areasAfterGutter,
+          steppedOffset + areasBefore.remain,
+          this.snapshot!.allAreasSizePixel,
+        );
       } else {
         areasBefore = getGutterSideAbsorptionCapacity(
-            this.unit, this.snapshot!.areasBeforeGutter, -(steppedOffset - areasAfter.remain),
-            this.snapshot!.allAreasSizePixel);
+          this.unit,
+          this.snapshot!.areasBeforeGutter,
+          -(steppedOffset - areasAfter.remain),
+          this.snapshot!.allAreasSizePixel,
+        );
       }
     }
     // Areas before gutter can't absorbs all offset > need to recalculate sizes for areas after
     // gutter.
     else if (areasBefore.remain !== 0) {
       areasAfter = getGutterSideAbsorptionCapacity(
-          this.unit, this.snapshot!.areasAfterGutter, steppedOffset + areasBefore.remain,
-          this.snapshot!.allAreasSizePixel);
+        this.unit,
+        this.snapshot!.areasAfterGutter,
+        steppedOffset + areasBefore.remain,
+        this.snapshot!.allAreasSizePixel,
+      );
     }
     // Areas after gutter can't absorbs all offset > need to recalculate sizes for areas before
     // gutter.
     else if (areasAfter.remain !== 0) {
       areasBefore = getGutterSideAbsorptionCapacity(
-          this.unit, this.snapshot!.areasBeforeGutter, -(steppedOffset - areasAfter.remain),
-          this.snapshot!.allAreasSizePixel);
+        this.unit,
+        this.snapshot!.areasBeforeGutter,
+        -(steppedOffset - areasAfter.remain),
+        this.snapshot!.allAreasSizePixel,
+      );
     }
 
     if (this.unit === 'percent') {
@@ -661,14 +739,18 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
       // to 99.99875% then 99.99286%, 99.98986%,..
       const all = [...areasBefore.list, ...areasAfter.list];
       const areaToReset = all.find(
-          (a) => a.percentAfterAbsorption !== 0 &&
-              a.percentAfterAbsorption !== a.areaSnapshot.area.minSize &&
-              a.percentAfterAbsorption !== a.areaSnapshot.area.maxSize);
+        (a) =>
+          a.percentAfterAbsorption !== 0 &&
+          a.percentAfterAbsorption !== a.areaSnapshot.area.minSize &&
+          a.percentAfterAbsorption !== a.areaSnapshot.area.maxSize,
+      );
 
       if (areaToReset) {
-        areaToReset.percentAfterAbsorption = this.snapshot!.allInvolvedAreasSizePercent -
-            all.filter((a) => a !== areaToReset)
-                .reduce((total, a) => total + a.percentAfterAbsorption, 0);
+        areaToReset.percentAfterAbsorption =
+          this.snapshot!.allInvolvedAreasSizePercent -
+          all
+            .filter((a) => a !== areaToReset)
+            .reduce((total, a) => total + a.percentAfterAbsorption, 0);
       }
     }
 
@@ -703,14 +785,18 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
     this.isDragging = false;
 
     // If moved from starting point, notify end
-    if (this.endPoint &&
-        (this.startPoint!.x !== this.endPoint.x || this.startPoint!.y !== this.endPoint.y)) {
+    if (
+      this.endPoint &&
+      (this.startPoint!.x !== this.endPoint.x || this.startPoint!.y !== this.endPoint.y)
+    ) {
       this.notify('end', this.snapshot!.gutterNum);
     }
 
     this.renderer.removeClass(this.elRef.nativeElement, 'as-dragging');
     this.renderer.removeClass(
-        this.gutterEls.toArray()[this.snapshot!.gutterNum - 1].nativeElement, 'as-dragged');
+      this.gutterEls.toArray()[this.snapshot!.gutterNum - 1].nativeElement,
+      'as-dragged',
+    );
     this.snapshot = null;
 
     // Needed to let (click)="clickGutter(...)" event run and verify if mouse moved or not
@@ -723,7 +809,9 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
   }
 
   public notify(
-      type: 'start'|'progress'|'end'|'click'|'dblclick'|'transitionEnd', gutterNum: number): void {
+    type: 'start' | 'progress' | 'end' | 'click' | 'dblclick' | 'transitionEnd',
+    gutterNum: number,
+  ): void {
     const sizes = this.getVisibleAreaSizes();
 
     if (type === 'start') {
diff --git a/devtools/projects/ng-devtools/src/lib/vendor/angular-split/lib/component/split.module.ts b/devtools/projects/ng-devtools/src/lib/vendor/angular-split/lib/component/split.module.ts
index b9184967419..e4d2c4b8259 100644
--- a/devtools/projects/ng-devtools/src/lib/vendor/angular-split/lib/component/split.module.ts
+++ b/devtools/projects/ng-devtools/src/lib/vendor/angular-split/lib/component/split.module.ts
@@ -9,5 +9,4 @@ import {SplitAreaDirective} from './splitArea.directive';
   declarations: [SplitAreaDirective, SplitComponent],
   exports: [SplitAreaDirective, SplitComponent],
 })
-export class SplitModule {
-}
+export class SplitModule {}
diff --git a/devtools/projects/ng-devtools/src/lib/vendor/angular-split/lib/component/splitArea.directive.ts b/devtools/projects/ng-devtools/src/lib/vendor/angular-split/lib/component/splitArea.directive.ts
index 09e75804ac2..25d24766114 100644
--- a/devtools/projects/ng-devtools/src/lib/vendor/angular-split/lib/component/splitArea.directive.ts
+++ b/devtools/projects/ng-devtools/src/lib/vendor/angular-split/lib/component/splitArea.directive.ts
@@ -11,61 +11,61 @@ import {getInputBoolean, getInputPositiveNumber} from './utils';
   exportAs: 'asSplitArea',
 })
 export class SplitAreaDirective implements OnInit, OnDestroy {
-  private _order: number|null = null;
+  private _order: number | null = null;
 
   @Input()
-  set order(v: number|null) {
+  set order(v: number | null) {
     this._order = getInputPositiveNumber(v, null);
 
     this.split.updateArea(this, true, false);
   }
 
-  get order(): number|null {
+  get order(): number | null {
     return this._order;
   }
 
   ////
 
-  private _size: number|null = null;
+  private _size: number | null = null;
 
   @Input()
-  set size(v: number|null) {
+  set size(v: number | null) {
     this._size = getInputPositiveNumber(v, null);
 
     this.split.updateArea(this, false, true);
   }
 
-  get size(): number|null {
+  get size(): number | null {
     return this._size;
   }
 
   ////
 
-  private _minSize: number|null = null;
+  private _minSize: number | null = null;
 
   @Input()
-  set minSize(v: number|null) {
+  set minSize(v: number | null) {
     this._minSize = getInputPositiveNumber(v, null);
 
     this.split.updateArea(this, false, true);
   }
 
-  get minSize(): number|null {
+  get minSize(): number | null {
     return this._minSize;
   }
 
   ////
 
-  private _maxSize: number|null = null;
+  private _maxSize: number | null = null;
 
   @Input()
-  set maxSize(v: number|null) {
+  set maxSize(v: number | null) {
     this._maxSize = getInputPositiveNumber(v, null);
 
     this.split.updateArea(this, false, true);
   }
 
-  get maxSize(): number|null {
+  get maxSize(): number | null {
     return this._maxSize;
   }
 
@@ -111,8 +111,11 @@ export class SplitAreaDirective implements OnInit, OnDestroy {
   private readonly lockListeners: Array<Function> = [];
 
   constructor(
-      private ngZone: NgZone, public elRef: ElementRef, private renderer: Renderer2,
-      private split: SplitComponent) {
+    private ngZone: NgZone,
+    public elRef: ElementRef,
+    private renderer: Renderer2,
+    private split: SplitComponent,
+  ) {
     this.renderer.addClass(this.elRef.nativeElement, 'as-split-area');
   }
 
@@ -121,12 +124,15 @@ export class SplitAreaDirective implements OnInit, OnDestroy {
 
     this.ngZone.runOutsideAngular(() => {
       this.transitionListener = this.renderer.listen(
-          this.elRef.nativeElement, 'transitionend', (event: TransitionEvent) => {
-            // Limit only flex-basis transition to trigger the event
-            if (event.propertyName === 'flex-basis') {
-              this.split.notify('transitionEnd', -1);
-            }
-          });
+        this.elRef.nativeElement,
+        'transitionend',
+        (event: TransitionEvent) => {
+          // Limit only flex-basis transition to trigger the event
+          if (event.propertyName === 'flex-basis') {
+            this.split.notify('transitionEnd', -1);
+          }
+        },
+      );
     });
   }
 
@@ -134,31 +140,34 @@ export class SplitAreaDirective implements OnInit, OnDestroy {
     this.renderer.setStyle(this.elRef.nativeElement, 'order', value);
   }
 
-  public setStyleFlex(grow: number, shrink: number, basis: string, isMin: boolean, isMax: boolean):
-      void {
+  public setStyleFlex(
+    grow: number,
+    shrink: number,
+    basis: string,
+    isMin: boolean,
+    isMax: boolean,
+  ): void {
     // Need 3 separated properties to work on IE11
     // (https://github.com/angular/flex-layout/issues/323)
     this.renderer.setStyle(this.elRef.nativeElement, 'flex-grow', grow);
     this.renderer.setStyle(this.elRef.nativeElement, 'flex-shrink', shrink);
     this.renderer.setStyle(this.elRef.nativeElement, 'flex-basis', basis);
 
-    if (isMin === true)
-      this.renderer.addClass(this.elRef.nativeElement, 'as-min');
-    else
-      this.renderer.removeClass(this.elRef.nativeElement, 'as-min');
+    if (isMin === true) this.renderer.addClass(this.elRef.nativeElement, 'as-min');
+    else this.renderer.removeClass(this.elRef.nativeElement, 'as-min');
 
-    if (isMax === true)
-      this.renderer.addClass(this.elRef.nativeElement, 'as-max');
-    else
-      this.renderer.removeClass(this.elRef.nativeElement, 'as-max');
+    if (isMax === true) this.renderer.addClass(this.elRef.nativeElement, 'as-max');
+    else this.renderer.removeClass(this.elRef.nativeElement, 'as-max');
   }
 
   public lockEvents(): void {
     this.ngZone.runOutsideAngular(() => {
       this.lockListeners.push(
-          this.renderer.listen(this.elRef.nativeElement, 'selectstart', (e: Event) => false));
+        this.renderer.listen(this.elRef.nativeElement, 'selectstart', (e: Event) => false),
+      );
       this.lockListeners.push(
-          this.renderer.listen(this.elRef.nativeElement, 'dragstart', (e: Event) => false));
+        this.renderer.listen(this.elRef.nativeElement, 'dragstart', (e: Event) => false),
+      );
     });
   }
 
diff --git a/devtools/projects/ng-devtools/src/lib/vendor/angular-split/lib/component/utils.ts b/devtools/projects/ng-devtools/src/lib/vendor/angular-split/lib/component/utils.ts
index 0aceef068de..3abd266ce68 100644
--- a/devtools/projects/ng-devtools/src/lib/vendor/angular-split/lib/component/utils.ts
+++ b/devtools/projects/ng-devtools/src/lib/vendor/angular-split/lib/component/utils.ts
@@ -1,12 +1,20 @@
 // tslint:disable
 import {ElementRef} from '@angular/core';
 
-import {IArea, IAreaAbsorptionCapacity, IAreaSnapshot, IPoint, ISplitSideAbsorptionCapacity} from './interface';
+import {
+  IArea,
+  IAreaAbsorptionCapacity,
+  IAreaSnapshot,
+  IPoint,
+  ISplitSideAbsorptionCapacity,
+} from './interface';
 
-export function getPointFromEvent(event: MouseEvent|TouchEvent): IPoint|null {
+export function getPointFromEvent(event: MouseEvent | TouchEvent): IPoint | null {
   // TouchEvent
-  if ((<TouchEvent>event).changedTouches !== undefined &&
-      (<TouchEvent>event).changedTouches.length > 0) {
+  if (
+    (<TouchEvent>event).changedTouches !== undefined &&
+    (<TouchEvent>event).changedTouches.length > 0
+  ) {
     return {
       x: (<TouchEvent>event).changedTouches[0].clientX,
       y: (<TouchEvent>event).changedTouches[0].clientY,
@@ -22,7 +30,10 @@ export function getPointFromEvent(event: MouseEvent|TouchEvent): IPoint|null {
   return null;
 }
 
-export function getElementPixelSize(elRef: ElementRef, direction: 'horizontal'|'vertical'): number {
+export function getElementPixelSize(
+  elRef: ElementRef,
+  direction: 'horizontal' | 'vertical',
+): number {
   const rect = (<HTMLElement>elRef.nativeElement).getBoundingClientRect();
 
   return direction === 'horizontal' ? rect.width : rect.height;
@@ -32,15 +43,17 @@ export function getInputBoolean(v: any): boolean {
   return typeof v === 'boolean' ? v : v === 'false' ? false : true;
 }
 
-export function getInputPositiveNumber<T>(v: any, defaultValue: T): number|T {
+export function getInputPositiveNumber<T>(v: any, defaultValue: T): number | T {
   if (v === null || v === undefined) return defaultValue;
 
   v = Number(v);
   return !isNaN(v) && v >= 0 ? v : defaultValue;
 }
 
-export function isUserSizesValid(unit: 'percent'|'pixel', sizes: Array<number|null>): boolean|
-    undefined|void {
+export function isUserSizesValid(
+  unit: 'percent' | 'pixel',
+  sizes: Array<number | null>,
+): boolean | undefined | void {
   // All sizes have to be not null and total should be 100
   if (unit === 'percent') {
     const total = sizes.reduce((total, s) => (s !== null ? total! + s : total), 0);
@@ -53,7 +66,7 @@ export function isUserSizesValid(unit: 'percent'|'pixel', sizes: Array<number|nu
   }
 }
 
-export function getAreaMinSize(a: IArea): null|number {
+export function getAreaMinSize(a: IArea): null | number {
   if (a.size === null) {
     return null;
   }
@@ -73,7 +86,7 @@ export function getAreaMinSize(a: IArea): null|number {
   return a.component.minSize;
 }
 
-export function getAreaMaxSize(a: IArea): null|number {
+export function getAreaMaxSize(a: IArea): null | number {
   if (a.size === null) {
     return null;
   }
@@ -94,19 +107,28 @@ export function getAreaMaxSize(a: IArea): null|number {
 }
 
 export function getGutterSideAbsorptionCapacity(
-    unit: 'percent'|'pixel', sideAreas: Array<IAreaSnapshot>, pixels: number,
-    allAreasSizePixel: number): ISplitSideAbsorptionCapacity {
-  return sideAreas.reduce((acc, area) => {
-    const res = getAreaAbsorptionCapacity(unit, area, acc.remain, allAreasSizePixel);
-    (acc.list as any).push(res);
-    acc.remain = res!.pixelRemain;
-    return acc;
-  }, {remain: pixels, list: []});
+  unit: 'percent' | 'pixel',
+  sideAreas: Array<IAreaSnapshot>,
+  pixels: number,
+  allAreasSizePixel: number,
+): ISplitSideAbsorptionCapacity {
+  return sideAreas.reduce(
+    (acc, area) => {
+      const res = getAreaAbsorptionCapacity(unit, area, acc.remain, allAreasSizePixel);
+      (acc.list as any).push(res);
+      acc.remain = res!.pixelRemain;
+      return acc;
+    },
+    {remain: pixels, list: []},
+  );
 }
 
 function getAreaAbsorptionCapacity(
-    unit: 'percent'|'pixel', areaSnapshot: IAreaSnapshot, pixels: number,
-    allAreasSizePixel: number): IAreaAbsorptionCapacity|undefined|void {
+  unit: 'percent' | 'pixel',
+  areaSnapshot: IAreaSnapshot,
+  pixels: number,
+  allAreasSizePixel: number,
+): IAreaAbsorptionCapacity | undefined | void {
   // No pain no gain
   if (pixels === 0) {
     return {
@@ -137,8 +159,10 @@ function getAreaAbsorptionCapacity(
 }
 
 function getAreaAbsorptionCapacityPercent(
-    areaSnapshot: IAreaSnapshot, pixels: number,
-    allAreasSizePixel: number): IAreaAbsorptionCapacity|undefined|void {
+  areaSnapshot: IAreaSnapshot,
+  pixels: number,
+  allAreasSizePixel: number,
+): IAreaAbsorptionCapacity | undefined | void {
   const tempPixelSize = areaSnapshot.sizePixelAtStart + pixels;
   const tempPercentSize = (tempPixelSize / allAreasSizePixel) * 100;
 
@@ -197,8 +221,10 @@ function getAreaAbsorptionCapacityPercent(
 }
 
 function getAreaAbsorptionCapacityPixel(
-    areaSnapshot: IAreaSnapshot, pixels: number,
-    containerSizePixel: number): IAreaAbsorptionCapacity|undefined|void {
+  areaSnapshot: IAreaSnapshot,
+  pixels: number,
+  containerSizePixel: number,
+): IAreaAbsorptionCapacity | undefined | void {
   const tempPixelSize = areaSnapshot.sizePixelAtStart + pixels;
 
   // ENLARGE AREA
@@ -250,7 +276,7 @@ function getAreaAbsorptionCapacityPixel(
   }
 }
 
-export function updateAreaSize(unit: 'percent'|'pixel', item: IAreaAbsorptionCapacity) {
+export function updateAreaSize(unit: 'percent' | 'pixel', item: IAreaAbsorptionCapacity) {
   if (unit === 'percent') {
     item.areaSnapshot.area.size = item.percentAfterAbsorption;
   } else if (unit === 'pixel') {
diff --git a/devtools/projects/ng-devtools/src/lib/vendor/chromium/date-utilities.ts b/devtools/projects/ng-devtools/src/lib/vendor/chromium/date-utilities.ts
index f6cbc383f5c..e6dfb2b0c27 100644
--- a/devtools/projects/ng-devtools/src/lib/vendor/chromium/date-utilities.ts
+++ b/devtools/projects/ng-devtools/src/lib/vendor/chromium/date-utilities.ts
@@ -16,6 +16,12 @@ export const toISO8601Compact = (date: Date): string => {
   }
 
   return (
-      date.getFullYear() + leadZero(date.getMonth() + 1) + leadZero(date.getDate()) + 'T' +
-      leadZero(date.getHours()) + leadZero(date.getMinutes()) + leadZero(date.getSeconds()));
+    date.getFullYear() +
+    leadZero(date.getMonth() + 1) +
+    leadZero(date.getDate()) +
+    'T' +
+    leadZero(date.getHours()) +
+    leadZero(date.getMinutes()) +
+    leadZero(date.getSeconds())
+  );
 };
diff --git a/devtools/projects/ng-devtools/src/lib/vendor/memo-decorator/index.ts b/devtools/projects/ng-devtools/src/lib/vendor/memo-decorator/index.ts
index ea924ecd083..58eab0f9c67 100644
--- a/devtools/projects/ng-devtools/src/lib/vendor/memo-decorator/index.ts
+++ b/devtools/projects/ng-devtools/src/lib/vendor/memo-decorator/index.ts
@@ -12,7 +12,7 @@ export interface Config {
 }
 
 function memoize(func: Function, resolver: Resolver, cache: MapLike) {
-  const memoized = function() {
+  const memoized = function () {
     const args = arguments;
     // @ts-ignore: ignore implicit any type
     const key = resolver.apply(this, args);
@@ -33,15 +33,16 @@ function memoize(func: Function, resolver: Resolver, cache: MapLike) {
 
 const defaultResolver: Resolver = (...args: any[]) => args[0];
 
-export const memo = (config: Config = {}) =>
-    (_: any, __: string, descriptor: PropertyDescriptor): PropertyDescriptor => {
-      if (typeof descriptor.value !== 'function') {
-        throw new Error('Memoization can be applied only to methods');
-      }
+export const memo =
+  (config: Config = {}) =>
+  (_: any, __: string, descriptor: PropertyDescriptor): PropertyDescriptor => {
+    if (typeof descriptor.value !== 'function') {
+      throw new Error('Memoization can be applied only to methods');
+    }
 
-      const resolver = config.resolver ?? defaultResolver;
-      const cache = config.cache ?? new Map();
+    const resolver = config.resolver ?? defaultResolver;
+    const cache = config.cache ?? new Map();
 
-      descriptor.value = memoize(descriptor.value, resolver, cache);
-      return descriptor;
-    };
+    descriptor.value = memoize(descriptor.value, resolver, cache);
+    return descriptor;
+  };
diff --git a/devtools/projects/ng-devtools/src/lib/vendor/webtreemap/treemap.ts b/devtools/projects/ng-devtools/src/lib/vendor/webtreemap/treemap.ts
index 7cd67d47daa..a9ab6266628 100644
--- a/devtools/projects/ng-devtools/src/lib/vendor/webtreemap/treemap.ts
+++ b/devtools/projects/ng-devtools/src/lib/vendor/webtreemap/treemap.ts
@@ -68,7 +68,7 @@ export interface Options {
  */
 function getNodeIndex(target: Element): number {
   let index = 0;
-  let node: Element|null = target;
+  let node: Element | null = target;
   while ((node = node.previousElementSibling)) {
     if (isDOMNode(node)) index++;
   }
@@ -82,12 +82,12 @@ function getNodeIndex(target: Element): number {
  */
 export function getAddress(el: Element): number[] {
   let address: number[] = [];
-  let n: Element|null = el;
+  let n: Element | null = el;
   while (n && isDOMNode(n)) {
     address.unshift(getNodeIndex(n));
     n = n.parentElement;
   }
-  address.shift();  // The first element will be the root, index 0.
+  address.shift(); // The first element will be the root, index 0.
   return address;
 }
 
@@ -107,23 +107,26 @@ function defaultOptions(options: Partial<Options>): Options {
     lowerBound: options.lowerBound === undefined ? 0.1 : options.lowerBound,
     applyMutations: options.applyMutations || (() => null),
     caption: options.caption || ((node: Node) => node.id || ''),
-    showNode: options.showNode ||
-        ((node: Node, width: number, height: number):
-             boolean => {
-               return width > 20 && height >= opts.padding[0];
-             }),
-    showChildren: options.showChildren ||
-        ((node: Node, width: number, height: number):
-             boolean => {
-               return width > 40 && height > 40;
-             }),
+    showNode:
+      options.showNode ||
+      ((node: Node, width: number, height: number): boolean => {
+        return width > 20 && height >= opts.padding[0];
+      }),
+    showChildren:
+      options.showChildren ||
+      ((node: Node, width: number, height: number): boolean => {
+        return width > 40 && height > 40;
+      }),
   };
   return opts;
 }
 
 export class TreeMap {
   readonly options: Options;
-  constructor(public node: Node, options: Partial<Options>) {
+  constructor(
+    public node: Node,
+    options: Partial<Options>,
+  ) {
     this.options = defaultOptions(options);
   }
 
@@ -155,10 +158,10 @@ export class TreeMap {
     // Add rectangles one by one, stopping when aspect ratios begin to go
     // bad.  Result is [start,end) covering the best run for this span.
     // http://scholar.google.com/scholar?cluster=5972512107845615474
-    let smin = children[start].size;  // Smallest seen child so far.
-    let smax = smin;                  // Largest child.
-    let sum = 0;                      // Sum of children in this span.
-    let lastScore = 0;                // Best score yet found.
+    let smin = children[start].size; // Smallest seen child so far.
+    let smax = smin; // Largest child.
+    let sum = 0; // Sum of children in this span.
+    let lastScore = 0; // Best score yet found.
     let end = start;
     for (; end < children.length; end++) {
       const size = children[end].size;
@@ -188,8 +191,9 @@ export class TreeMap {
       // Take the larger of these two ratios as the measure of the
       // worst non-squarenesss.
       const score = Math.max(
-          (smax * space * space) / (nextSum * nextSum),
-          (nextSum * nextSum) / (smin * space * space));
+        (smax * space * space) / (nextSum * nextSum),
+        (nextSum * nextSum) / (smin * space * space),
+      );
       if (lastScore && score > lastScore) {
         // Including this additional rectangle produces worse squareness than
         // without it.  We're done.
@@ -212,9 +216,12 @@ export class TreeMap {
     // parent) and create each box 1px larger than necessary (to make
     // adjoining borders overlap).
 
-    let x1 = -1, y1 = -1, x2 = width - 1, y2 = height - 1;
+    let x1 = -1,
+      y1 = -1,
+      x2 = width - 1,
+      y2 = height - 1;
 
-    const spacing = 0;  // TODO: this.options.spacing;
+    const spacing = 0; // TODO: this.options.spacing;
     const padding = this.options.padding;
     y1 += padding[0];
     if (padding[1]) {
@@ -228,8 +235,9 @@ export class TreeMap {
     let i: number = 0;
     if (this.options.showChildren(node, x2 - x1, y2 - y1)) {
       const scale = Math.sqrt(total / ((x2 - x1) * (y2 - y1)));
-      var x = x1, y = y1;
-      children: for (let start = 0; start < children.length;) {
+      var x = x1,
+        y = y1;
+      children: for (let start = 0; start < children.length; ) {
         x = x1;
         const space = scale * (x2 - x1);
         const {end, sum} = this.selectSpan(children, space, start);
@@ -284,7 +292,7 @@ export class TreeMap {
     const width = container.offsetWidth;
     const height = container.offsetHeight;
     dom.onclick = (e) => {
-      let node: Element|null = e.target as Element;
+      let node: Element | null = e.target as Element;
       while (!isDOMNode(node)) {
         node = node.parentElement;
         if (!node) return;
diff --git a/devtools/projects/protocol/src/lib/message-bus.ts b/devtools/projects/protocol/src/lib/message-bus.ts
index f87408f3aee..e8158d4a204 100644
--- a/devtools/projects/protocol/src/lib/message-bus.ts
+++ b/devtools/projects/protocol/src/lib/message-bus.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-export type Parameters<F> = F extends(...args: infer T) => any ? T : never;
+export type Parameters<F> = F extends (...args: infer T) => any ? T : never;
 
 export abstract class MessageBus<T> {
   abstract on<E extends keyof T>(topic: E, cb: T[E]): void;
diff --git a/devtools/projects/protocol/src/lib/messages.ts b/devtools/projects/protocol/src/lib/messages.ts
index 54a6a6e814f..277bebc8c8a 100644
--- a/devtools/projects/protocol/src/lib/messages.ts
+++ b/devtools/projects/protocol/src/lib/messages.ts
@@ -22,7 +22,7 @@ export interface ComponentType {
 export interface DevToolsNode<DirType = DirectiveType, CmpType = ComponentType> {
   element: string;
   directives: DirType[];
-  component: CmpType|null;
+  component: CmpType | null;
   children: DevToolsNode<DirType, CmpType>[];
   nativeElement?: Node;
   resolutionPath?: SerializedInjector[];
@@ -38,10 +38,10 @@ export interface SerializedInjector {
 
 export interface SerializedProviderRecord {
   token: string;
-  type: 'type'|'existing'|'class'|'value'|'factory'|'multi';
+  type: 'type' | 'existing' | 'class' | 'value' | 'factory' | 'multi';
   multi: boolean;
   isViewProvider: boolean;
-  index?: number|number[];
+  index?: number | number[];
 }
 
 /**
@@ -49,13 +49,13 @@ export interface SerializedProviderRecord {
  * needing to publicly expose the interface from the framework.
  */
 export interface InjectedService {
-  token?: Type<unknown>|InjectionToken<unknown>;
+  token?: Type<unknown> | InjectionToken<unknown>;
   value: unknown;
   flags?: InjectOptions;
   providedIn: Injector;
 }
 
-export type ContainerType = 'WritableSignal'|'ReadonlySignal'|null;
+export type ContainerType = 'WritableSignal' | 'ReadonlySignal' | null;
 
 export enum PropType {
   Number,
@@ -117,7 +117,7 @@ export interface DirectivePosition {
 }
 
 export interface NestedProp {
-  name: string|number;
+  name: string | number;
   children: NestedProp[];
 }
 
@@ -139,7 +139,7 @@ export interface SelectedPropertiesQuery {
   properties: ComponentExplorerViewProperties;
 }
 
-export type PropertyQuery = AllPropertiesQuery|SelectedPropertiesQuery;
+export type PropertyQuery = AllPropertiesQuery | SelectedPropertiesQuery;
 
 export interface ComponentExplorerViewQuery {
   selectedElement: ElementPosition;
@@ -194,9 +194,9 @@ export interface UpdatedStateData {
 
 export interface Route {
   name: string;
-  hash: string|null;
+  hash: string | null;
   path: string;
-  specificity: string|null;
+  specificity: string | null;
   handler: string;
   data: any;
   children?: Array<Route>;
@@ -214,8 +214,11 @@ export interface Events {
   handshake: () => void;
   shutdown: () => void;
   queryNgAvailability: () => void;
-  ngAvailability:
-      (config: {version: string|undefined|boolean; devMode: boolean; ivy: boolean}) => void;
+  ngAvailability: (config: {
+    version: string | undefined | boolean;
+    devMode: boolean;
+    ivy: boolean;
+  }) => void;
 
   inspectorStart: () => void;
   inspectorEnd: () => void;
@@ -250,8 +253,10 @@ export interface Events {
 
   // todo: type properly
   getInjectorProviders: (injector: SerializedInjector) => void;
-  latestInjectorProviders:
-      (injector: SerializedInjector, providers: SerializedProviderRecord[]) => void;
+  latestInjectorProviders: (
+    injector: SerializedInjector,
+    providers: SerializedProviderRecord[],
+  ) => void;
 
   logProvider: (injector: SerializedInjector, providers: SerializedProviderRecord) => void;
 }
diff --git a/devtools/projects/protocol/src/lib/priority-aware-message-bus.ts b/devtools/projects/protocol/src/lib/priority-aware-message-bus.ts
index 7d01fe33a4b..6ce72cd1680 100644
--- a/devtools/projects/protocol/src/lib/priority-aware-message-bus.ts
+++ b/devtools/projects/protocol/src/lib/priority-aware-message-bus.ts
@@ -52,7 +52,9 @@ export class PriorityAwareMessageBus extends MessageBus<Events> {
   private _inProgress: TopicsInProgress = {};
 
   constructor(
-      private _bus: MessageBus<Events>, private _setTimeout: typeof setTimeout = setTimeout) {
+    private _bus: MessageBus<Events>,
+    private _setTimeout: typeof setTimeout = setTimeout,
+  ) {
     super();
   }
 
diff --git a/devtools/projects/shared-utils/src/lib/angular-check.spec.ts b/devtools/projects/shared-utils/src/lib/angular-check.spec.ts
index a861ebf42ec..f9d9188c433 100644
--- a/devtools/projects/shared-utils/src/lib/angular-check.spec.ts
+++ b/devtools/projects/shared-utils/src/lib/angular-check.spec.ts
@@ -6,10 +6,16 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {appIsAngular, appIsAngularInDevMode, appIsAngularIvy, appIsSupportedAngularVersion, getAngularVersion,} from './angular-check';
+import {
+  appIsAngular,
+  appIsAngularInDevMode,
+  appIsAngularIvy,
+  appIsSupportedAngularVersion,
+  getAngularVersion,
+} from './angular-check';
 
 const setNgVersion = (version = '12.0.0'): void =>
-    document.documentElement.setAttribute('ng-version', version);
+  document.documentElement.setAttribute('ng-version', version);
 const removeNgVersion = (): void => document.documentElement.removeAttribute('ng-version');
 
 describe('angular-check', () => {
@@ -57,7 +63,7 @@ describe('angular-check', () => {
   describe('appIsAngularIvy', () => {
     it('should not recognize VE apps', () => {
       (window as any).ng = {
-        probe(): void{},
+        probe(): void {},
       };
       setNgVersion();
       expect(appIsAngularIvy()).toBeFalse();
@@ -84,7 +90,7 @@ describe('angular-check', () => {
 
     it('should detect VE apps', () => {
       (window as any).ng = {
-        probe(): void{},
+        probe(): void {},
       };
       setNgVersion();
 
@@ -93,7 +99,7 @@ describe('angular-check', () => {
 
     it('should detect Ivy apps', () => {
       (window as any).ng = {
-        getComponent(): void{},
+        getComponent(): void {},
       };
       setNgVersion();
       expect(appIsAngularInDevMode()).toBeTrue();
diff --git a/devtools/projects/shared-utils/src/lib/angular-check.ts b/devtools/projects/shared-utils/src/lib/angular-check.ts
index f7857bbc868..d87a929a07d 100644
--- a/devtools/projects/shared-utils/src/lib/angular-check.ts
+++ b/devtools/projects/shared-utils/src/lib/angular-check.ts
@@ -43,11 +43,13 @@ export const appIsSupportedAngularVersion = (): boolean => {
  * @returns if the app has global ng debug object
  */
 const appHasGlobalNgDebugObject = (): boolean => {
-  return typeof ng === 'object' &&
-      (typeof ng.getComponent === 'function' || typeof ng.probe === 'function');
+  return (
+    typeof ng === 'object' &&
+    (typeof ng.getComponent === 'function' || typeof ng.probe === 'function')
+  );
 };
 
-export const getAngularVersion = (): string|null => {
+export const getAngularVersion = (): string | null => {
   const el = document.querySelector('[ng-version]');
   if (!el) {
     return null;
diff --git a/devtools/projects/shared-utils/src/lib/shared-utils.ts b/devtools/projects/shared-utils/src/lib/shared-utils.ts
index bc203936b6a..0aa390125fd 100644
--- a/devtools/projects/shared-utils/src/lib/shared-utils.ts
+++ b/devtools/projects/shared-utils/src/lib/shared-utils.ts
@@ -7,21 +7,23 @@
  */
 
 // works with arrays of string, numbers and booleans
-export const arrayEquals =
-    (a: (string|number|boolean)[], b: (string|number|boolean)[]): boolean => {
-      if (a.length !== b.length) {
-        return false;
-      }
-      if (a.length === 0) {
-        return b.length === 0;
-      }
+export const arrayEquals = (
+  a: (string | number | boolean)[],
+  b: (string | number | boolean)[],
+): boolean => {
+  if (a.length !== b.length) {
+    return false;
+  }
+  if (a.length === 0) {
+    return b.length === 0;
+  }
 
-      let equal;
-      for (let i = 0; i < a.length; i++) {
-        equal = i === 0 ? a[i] === b[i] : a[i] === b[i] && equal;
-        if (!equal) {
-          break;
-        }
-      }
-      return equal ?? false;
-    };
+  let equal;
+  for (let i = 0; i < a.length; i++) {
+    equal = i === 0 ? a[i] === b[i] : a[i] === b[i] && equal;
+    if (!equal) {
+      break;
+    }
+  }
+  return equal ?? false;
+};
diff --git a/devtools/projects/shell-browser/src/app/app.component.spec.ts b/devtools/projects/shell-browser/src/app/app.component.spec.ts
index 6e2625255ec..1f27bcb23b6 100644
--- a/devtools/projects/shell-browser/src/app/app.component.spec.ts
+++ b/devtools/projects/shell-browser/src/app/app.component.spec.ts
@@ -15,18 +15,16 @@ import {AppComponent} from './app.component';
 describe('AppComponent', () => {
   beforeEach(waitForAsync(() => {
     const applicationOperationsSPy = jasmine.createSpyObj('messageBus', ['viewSource']);
-    TestBed
-        .configureTestingModule({
-          declarations: [AppComponent],
-          imports: [RouterModule.forRoot([])],
-          providers: [
-            {
-              provide: ApplicationOperations,
-              useClass: applicationOperationsSPy,
-            },
-          ],
-        })
-        .compileComponents();
+    TestBed.configureTestingModule({
+      declarations: [AppComponent],
+      imports: [RouterModule.forRoot([])],
+      providers: [
+        {
+          provide: ApplicationOperations,
+          useClass: applicationOperationsSPy,
+        },
+      ],
+    }).compileComponents();
   }));
 
   it('should create the app', () => {
diff --git a/devtools/projects/shell-browser/src/app/app.module.ts b/devtools/projects/shell-browser/src/app/app.module.ts
index 618e9612cde..3041848bbd6 100644
--- a/devtools/projects/shell-browser/src/app/app.module.ts
+++ b/devtools/projects/shell-browser/src/app/app.module.ts
@@ -29,5 +29,4 @@ import {ChromeApplicationOperations} from './chrome-application-operations';
     },
   ],
 })
-export class AppModule {
-}
+export class AppModule {}
diff --git a/devtools/projects/shell-browser/src/app/backend.ts b/devtools/projects/shell-browser/src/app/backend.ts
index bbb267260d6..8dadbe5e996 100644
--- a/devtools/projects/shell-browser/src/app/backend.ts
+++ b/devtools/projects/shell-browser/src/app/backend.ts
@@ -13,8 +13,10 @@ import {unHighlight} from '../../../ng-devtools-backend/src/lib/highlighter';
 import {initializeExtendedWindowOperations} from './chrome-window-extensions';
 import {SamePageMessageBus} from './same-page-message-bus';
 
-const messageBus =
-    new SamePageMessageBus('angular-devtools-backend', 'angular-devtools-content-script');
+const messageBus = new SamePageMessageBus(
+  'angular-devtools-backend',
+  'angular-devtools-content-script',
+);
 
 let initialized = false;
 messageBus.on('handshake', () => {
@@ -36,9 +38,13 @@ messageBus.on('handshake', () => {
 
   // handles case when mouse leaves chrome extension too quickly. unHighlight() is not a very
   // expensive function and has an if check so it's DOM api call is not called more than necessary
-  document.addEventListener('mousemove', () => {
-    if (!inspectorRunning) {
-      unHighlight();
-    }
-  }, false);
+  document.addEventListener(
+    'mousemove',
+    () => {
+      if (!inspectorRunning) {
+        unHighlight();
+      }
+    },
+    false,
+  );
 });
diff --git a/devtools/projects/shell-browser/src/app/background.ts b/devtools/projects/shell-browser/src/app/background.ts
index 2730999a339..80b94d32513 100644
--- a/devtools/projects/shell-browser/src/app/background.ts
+++ b/devtools/projects/shell-browser/src/app/background.ts
@@ -27,26 +27,28 @@ const browserAction = (() => {
 // By default use the black and white icon.
 // Replace it only when we detect an Angular app.
 browserAction.setIcon(
-    {
-      path: {
-        16: chrome.runtime.getURL(`assets/icon-bw16.png`),
-        48: chrome.runtime.getURL(`assets/icon-bw48.png`),
-        128: chrome.runtime.getURL(`assets/icon-bw128.png`),
-      },
+  {
+    path: {
+      16: chrome.runtime.getURL(`assets/icon-bw16.png`),
+      48: chrome.runtime.getURL(`assets/icon-bw48.png`),
+      128: chrome.runtime.getURL(`assets/icon-bw128.png`),
     },
-    () => {});
+  },
+  () => {},
+);
 
 const ports: {
   [tab: string]:
-      |{
-        'content-script': chrome.runtime.Port|null;
-        devtools: chrome.runtime.Port|null;
-      }|undefined;
+    | {
+        'content-script': chrome.runtime.Port | null;
+        devtools: chrome.runtime.Port | null;
+      }
+    | undefined;
 } = {};
 
 chrome.runtime.onConnect.addListener((port) => {
-  let tab: string|null = null;
-  let name: 'devtools'|'content-script'|null = null;
+  let tab: string | null = null;
+  let name: 'devtools' | 'content-script' | null = null;
   // tslint:disable-next-line:no-console
   console.log('Connection event in the background script');
 
@@ -109,9 +111,11 @@ const installContentScript = (tabId: number) => {
 
   if (isManifestV3) {
     chrome.scripting.executeScript(
-        {files: ['app/content_script_bundle.js'], target: {tabId}}, () => {
-          chrome.scripting.executeScript({func: () => (globalThis as any).main(), target: {tabId}});
-        });
+      {files: ['app/content_script_bundle.js'], target: {tabId}},
+      () => {
+        chrome.scripting.executeScript({func: () => (globalThis as any).main(), target: {tabId}});
+      },
+    );
 
     return;
   }
@@ -124,40 +128,42 @@ const installContentScript = (tabId: number) => {
   });
 };
 
-const doublePipe =
-    (devtoolsPort: chrome.runtime.Port|null, contentScriptPort: chrome.runtime.Port,
-     tab: string) => {
-      if (devtoolsPort === null) {
-        console.warn('DevTools port is equal to null');
-        return;
-      }
+const doublePipe = (
+  devtoolsPort: chrome.runtime.Port | null,
+  contentScriptPort: chrome.runtime.Port,
+  tab: string,
+) => {
+  if (devtoolsPort === null) {
+    console.warn('DevTools port is equal to null');
+    return;
+  }
 
-      // tslint:disable-next-line:no-console
-      console.log('Creating two-way communication channel', Date.now(), ports);
+  // tslint:disable-next-line:no-console
+  console.log('Creating two-way communication channel', Date.now(), ports);
 
-      const onDevToolsMessage = (message: chrome.runtime.Port) => {
-        contentScriptPort.postMessage(message);
-      };
-      devtoolsPort.onMessage.addListener(onDevToolsMessage);
+  const onDevToolsMessage = (message: chrome.runtime.Port) => {
+    contentScriptPort.postMessage(message);
+  };
+  devtoolsPort.onMessage.addListener(onDevToolsMessage);
 
-      const onContentScriptMessage = (message: chrome.runtime.Port) => {
-        devtoolsPort.postMessage(message);
-      };
-      contentScriptPort.onMessage.addListener(onContentScriptMessage);
+  const onContentScriptMessage = (message: chrome.runtime.Port) => {
+    devtoolsPort.postMessage(message);
+  };
+  contentScriptPort.onMessage.addListener(onContentScriptMessage);
 
-      const shutdown = (source: string) => {
-        // tslint:disable-next-line:no-console
-        console.log('Disconnecting', source);
+  const shutdown = (source: string) => {
+    // tslint:disable-next-line:no-console
+    console.log('Disconnecting', source);
 
-        devtoolsPort.onMessage.removeListener(onDevToolsMessage);
-        contentScriptPort.onMessage.removeListener(onContentScriptMessage);
-        devtoolsPort.disconnect();
-        contentScriptPort.disconnect();
-        ports[tab] = undefined;
-      };
-      devtoolsPort.onDisconnect.addListener(shutdown.bind(null, 'devtools'));
-      contentScriptPort.onDisconnect.addListener(shutdown.bind(null, 'content-script'));
-    };
+    devtoolsPort.onMessage.removeListener(onDevToolsMessage);
+    contentScriptPort.onMessage.removeListener(onContentScriptMessage);
+    devtoolsPort.disconnect();
+    contentScriptPort.disconnect();
+    ports[tab] = undefined;
+  };
+  devtoolsPort.onDisconnect.addListener(shutdown.bind(null, 'devtools'));
+  contentScriptPort.onDisconnect.addListener(shutdown.bind(null, 'content-script'));
+};
 
 const getPopUpName = (ng: AngularDetection) => {
   if (!ng.isAngular) {
@@ -184,14 +190,15 @@ chrome.runtime.onMessage.addListener((req: AngularDetection, sender) => {
   }
   if (sender && sender.tab && req.isAngular) {
     browserAction.setIcon(
-        {
-          tabId: sender.tab.id,
-          path: {
-            16: chrome.runtime.getURL(`assets/icon16.png`),
-            48: chrome.runtime.getURL(`assets/icon48.png`),
-            128: chrome.runtime.getURL(`assets/icon128.png`),
-          },
+      {
+        tabId: sender.tab.id,
+        path: {
+          16: chrome.runtime.getURL(`assets/icon16.png`),
+          48: chrome.runtime.getURL(`assets/icon48.png`),
+          128: chrome.runtime.getURL(`assets/icon128.png`),
         },
-        () => {});
+      },
+      () => {},
+    );
   }
 });
diff --git a/devtools/projects/shell-browser/src/app/chrome-application-operations.ts b/devtools/projects/shell-browser/src/app/chrome-application-operations.ts
index 5b27aa43caa..729e461f32f 100644
--- a/devtools/projects/shell-browser/src/app/chrome-application-operations.ts
+++ b/devtools/projects/shell-browser/src/app/chrome-application-operations.ts
@@ -15,15 +15,16 @@ export class ChromeApplicationOperations extends ApplicationOperations {
   override viewSource(position: ElementPosition, directiveIndex: number): void {
     if (chrome.devtools) {
       chrome.devtools.inspectedWindow.eval(
-          `inspect(inspectedApplication.findConstructorByPosition('${position}', ${
-              directiveIndex}))`);
+        `inspect(inspectedApplication.findConstructorByPosition('${position}', ${directiveIndex}))`,
+      );
     }
   }
 
   override selectDomElement(position: ElementPosition): void {
     if (chrome.devtools) {
       chrome.devtools.inspectedWindow.eval(
-          `inspect(inspectedApplication.findDomElementByPosition('${position}'))`);
+        `inspect(inspectedApplication.findDomElementByPosition('${position}'))`,
+      );
     }
   }
 
@@ -34,7 +35,8 @@ export class ChromeApplicationOperations extends ApplicationOperations {
         objectPath,
       };
       chrome.devtools.inspectedWindow.eval(
-          `inspect(inspectedApplication.findPropertyByPosition('${JSON.stringify(args)}'))`);
+        `inspect(inspectedApplication.findPropertyByPosition('${JSON.stringify(args)}'))`,
+      );
     }
   }
 }
diff --git a/devtools/projects/shell-browser/src/app/chrome-window-extensions.ts b/devtools/projects/shell-browser/src/app/chrome-window-extensions.ts
index 7f27d06e760..df84c43d472 100644
--- a/devtools/projects/shell-browser/src/app/chrome-window-extensions.ts
+++ b/devtools/projects/shell-browser/src/app/chrome-window-extensions.ts
@@ -8,7 +8,10 @@
 
 import {findNodeFromSerializedPosition} from 'ng-devtools-backend';
 
-import {buildDirectiveForest, queryDirectiveForest} from '../../../ng-devtools-backend/src/lib/component-tree';
+import {
+  buildDirectiveForest,
+  queryDirectiveForest,
+} from '../../../ng-devtools-backend/src/lib/component-tree';
 
 export const initializeExtendedWindowOperations = () => {
   extendWindowOperations(globalThis, {inspectedApplication: chromeWindowExtensions});
@@ -25,8 +28,10 @@ const extendWindowOperations = <T extends {}>(target: any, classImpl: T) => {
 };
 
 const chromeWindowExtensions = {
-  findConstructorByPosition: (serializedId: string, directiveIndex: number):
-                                 Element | undefined => {
+  findConstructorByPosition: (
+    serializedId: string,
+    directiveIndex: number,
+  ): Element | undefined => {
     const node = findNodeFromSerializedPosition(serializedId);
     if (node === null) {
       console.error(`Cannot find element associated with node ${serializedId}`);
@@ -37,7 +42,8 @@ const chromeWindowExtensions = {
         return node.directives[directiveIndex].instance.constructor;
       } else {
         console.error(
-            `Could not find the directive in the current node at index ${directiveIndex}`);
+          `Could not find the directive in the current node at index ${directiveIndex}`,
+        );
         return;
       }
     }
@@ -64,9 +70,10 @@ const chromeWindowExtensions = {
       return undefined;
     }
 
-    const isDirective = directivePosition.directive !== undefined &&
-        node.directives[directivePosition.directive] &&
-        typeof node.directives[directivePosition.directive] === 'object';
+    const isDirective =
+      directivePosition.directive !== undefined &&
+      node.directives[directivePosition.directive] &&
+      typeof node.directives[directivePosition.directive] === 'object';
     if (isDirective) {
       return traverseDirective(node.directives[directivePosition.directive].instance, objectPath);
     }
diff --git a/devtools/projects/shell-browser/src/app/content-script.ts b/devtools/projects/shell-browser/src/app/content-script.ts
index 527a372e8e8..8c2c4cd60f0 100644
--- a/devtools/projects/shell-browser/src/app/content-script.ts
+++ b/devtools/projects/shell-browser/src/app/content-script.ts
@@ -29,8 +29,10 @@ export const main = () => {
 
   port.onDisconnect.addListener(handleDisconnect);
 
-  const localMessageBus =
-      new SamePageMessageBus('angular-devtools-content-script', 'angular-devtools-backend');
+  const localMessageBus = new SamePageMessageBus(
+    'angular-devtools-content-script',
+    'angular-devtools-backend',
+  );
   const chromeMessageBus = new ChromeMessageBus(port);
 
   const handshakeWithBackend = (): void => {
diff --git a/devtools/projects/shell-browser/src/app/detect-angular-for-extension-icon.ts b/devtools/projects/shell-browser/src/app/detect-angular-for-extension-icon.ts
index f115341fd65..960ea40bc94 100644
--- a/devtools/projects/shell-browser/src/app/detect-angular-for-extension-icon.ts
+++ b/devtools/projects/shell-browser/src/app/detect-angular-for-extension-icon.ts
@@ -6,7 +6,12 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {appIsAngular, appIsAngularInDevMode, appIsAngularIvy, appIsSupportedAngularVersion} from 'shared-utils';
+import {
+  appIsAngular,
+  appIsAngularInDevMode,
+  appIsAngularIvy,
+  appIsSupportedAngularVersion,
+} from 'shared-utils';
 
 export interface AngularDetection {
   // This is necessary because the runtime
@@ -28,14 +33,15 @@ function detectAngular(win: Window): void {
   const isIvy = appIsAngularIvy();
 
   win.postMessage(
-      {
-        isIvy,
-        isAngular,
-        isDebugMode,
-        isSupportedAngularVersion,
-        isAngularDevTools: true,
-      } as AngularDetection,
-      '*');
+    {
+      isIvy,
+      isAngular,
+      isDebugMode,
+      isSupportedAngularVersion,
+      isAngularDevTools: true,
+    } as AngularDetection,
+    '*',
+  );
 
   if (!isAngular) {
     setTimeout(() => detectAngular(win), 1000);
diff --git a/devtools/projects/shell-browser/src/app/inject.ts b/devtools/projects/shell-browser/src/app/inject.ts
index 0bf1762b840..7d9428f8b4a 100644
--- a/devtools/projects/shell-browser/src/app/inject.ts
+++ b/devtools/projects/shell-browser/src/app/inject.ts
@@ -8,15 +8,15 @@
 
 const loadScripts = (urls: string[]) => {
   return urls
-      .map((url, idx) => {
-        return `
+    .map((url, idx) => {
+      return `
       const script${idx} = document.constructor.prototype.createElement.call(document, 'script');
       script${idx}.src = getScriptName("${url}");
       document.documentElement.appendChild(script${idx});
       script${idx}.parentNode.removeChild(script${idx});
     `;
-      })
-      .join('\n');
+    })
+    .join('\n');
 };
 
 let loaded = false;
diff --git a/devtools/projects/shell-browser/src/app/same-page-message-bus.ts b/devtools/projects/shell-browser/src/app/same-page-message-bus.ts
index d785b0ab054..052508fd7ef 100644
--- a/devtools/projects/shell-browser/src/app/same-page-message-bus.ts
+++ b/devtools/projects/shell-browser/src/app/same-page-message-bus.ts
@@ -15,7 +15,10 @@ type ListenerFn = (e: MessageEvent) => void;
 export class SamePageMessageBus extends MessageBus<Events> {
   private _listeners: ListenerFn[] = [];
 
-  constructor(private _source: string, private _destination: string) {
+  constructor(
+    private _source: string,
+    private _destination: string,
+  ) {
     super();
   }
 
@@ -66,13 +69,14 @@ export class SamePageMessageBus extends MessageBus<Events> {
 
   override emit<E extends keyof Events>(topic: E, args?: Parameters<Events[E]>): boolean {
     window.postMessage(
-        {
-          source: this._source,
-          topic,
-          args,
-          __ignore_ng_zone__: true,
-        },
-        '*');
+      {
+        source: this._source,
+        topic,
+        args,
+        __ignore_ng_zone__: true,
+      },
+      '*',
+    );
     return true;
   }
 
diff --git a/devtools/projects/shell-browser/src/app/zone-aware-chrome-message-bus.ts b/devtools/projects/shell-browser/src/app/zone-aware-chrome-message-bus.ts
index 001325b1ac3..0ba59226303 100644
--- a/devtools/projects/shell-browser/src/app/zone-aware-chrome-message-bus.ts
+++ b/devtools/projects/shell-browser/src/app/zone-aware-chrome-message-bus.ts
@@ -13,21 +13,30 @@ import {ChromeMessageBus} from './chrome-message-bus';
 
 export class ZoneAwareChromeMessageBus extends MessageBus<Events> {
   private _bus: ChromeMessageBus;
-  constructor(port: chrome.runtime.Port, private _ngZone: NgZone) {
+  constructor(
+    port: chrome.runtime.Port,
+    private _ngZone: NgZone,
+  ) {
     super();
     this._bus = new ChromeMessageBus(port);
   }
 
   override on<E extends keyof Events>(topic: E, cb: Events[E]): void {
-    this._bus.on(topic, function(this: ZoneAwareChromeMessageBus): void {
-      this._ngZone.run(() => (cb as any).apply(null, arguments));
-    }.bind(this));
+    this._bus.on(
+      topic,
+      function (this: ZoneAwareChromeMessageBus): void {
+        this._ngZone.run(() => (cb as any).apply(null, arguments));
+      }.bind(this),
+    );
   }
 
   override once<E extends keyof Events>(topic: E, cb: Events[E]): void {
-    this._bus.once(topic, function(this: ZoneAwareChromeMessageBus): void {
-      this._ngZone.run(() => (cb as any).apply(null, arguments));
-    }.bind(this));
+    this._bus.once(
+      topic,
+      function (this: ZoneAwareChromeMessageBus): void {
+        this._ngZone.run(() => (cb as any).apply(null, arguments));
+      }.bind(this),
+    );
   }
 
   override emit<E extends keyof Events>(topic: E, args?: Parameters<Events[E]>): boolean {
diff --git a/devtools/projects/shell-browser/src/assets/BUILD.bazel b/devtools/projects/shell-browser/src/assets/BUILD.bazel
index b61dc3f85e2..1402a23dcd9 100644
--- a/devtools/projects/shell-browser/src/assets/BUILD.bazel
+++ b/devtools/projects/shell-browser/src/assets/BUILD.bazel
@@ -7,7 +7,7 @@ filegroup(
         "**/*.png",
         "*.css",
     ]) + [
-        "//third_party/github.com/google/material-design-icons:material-design-icons",
+        "//third_party/github.com/google/material-design-icons",
         "//third_party/github.com/google/material-design-icons:LICENSE",
     ],
 )
diff --git a/devtools/projects/shell-browser/src/environments/environment.ts b/devtools/projects/shell-browser/src/environments/environment.ts
index ae2c93cfafc..eb4f92736f0 100644
--- a/devtools/projects/shell-browser/src/environments/environment.ts
+++ b/devtools/projects/shell-browser/src/environments/environment.ts
@@ -8,5 +8,5 @@
 
 export const environment = {
   production: true,
-  LATEST_SHA: 'BUILD_SCM_COMMIT_SHA',  // Stamped at build time by bazel
+  LATEST_SHA: 'BUILD_SCM_COMMIT_SHA', // Stamped at build time by bazel
 };
diff --git a/devtools/projects/shell-browser/src/main.ts b/devtools/projects/shell-browser/src/main.ts
index e912c7c1570..22898974744 100644
--- a/devtools/projects/shell-browser/src/main.ts
+++ b/devtools/projects/shell-browser/src/main.ts
@@ -12,4 +12,6 @@ import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 import {AppModule} from './app/app.module';
 
 enableProdMode();
-platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.error(err));
+platformBrowserDynamic()
+  .bootstrapModule(AppModule)
+  .catch((err) => console.error(err));
diff --git a/devtools/src/app/app.module.ts b/devtools/src/app/app.module.ts
index fca1f4df1f6..2eef9a62ff3 100644
--- a/devtools/src/app/app.module.ts
+++ b/devtools/src/app/app.module.ts
@@ -24,7 +24,7 @@ import {AppComponent} from './app.component';
       {
         path: '',
         loadChildren: () =>
-            import('./devtools-app/devtools-app.module').then((m) => m.DevToolsModule),
+          import('./devtools-app/devtools-app.module').then((m) => m.DevToolsModule),
         pathMatch: 'full',
       },
       {
@@ -45,5 +45,4 @@ import {AppComponent} from './app.component';
   ],
   bootstrap: [AppComponent],
 })
-export class AppModule {
-}
+export class AppModule {}
diff --git a/devtools/src/app/demo-app/demo-app.component.ts b/devtools/src/app/demo-app/demo-app.component.ts
index efa3999bd7e..8d5fdeb2db8 100644
--- a/devtools/src/app/demo-app/demo-app.component.ts
+++ b/devtools/src/app/demo-app/demo-app.component.ts
@@ -6,7 +6,17 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component, computed, ElementRef, EventEmitter, Input, Output, signal, ViewChild, ViewEncapsulation} from '@angular/core';
+import {
+  Component,
+  computed,
+  ElementRef,
+  EventEmitter,
+  Input,
+  Output,
+  signal,
+  ViewChild,
+  ViewEncapsulation,
+} from '@angular/core';
 
 import {ZippyComponent} from './zippy.component';
 
@@ -34,7 +44,7 @@ export class DemoAppComponent {
     return {...original, age: original.age + 1};
   });
 
-  getTitle(): '► Click to expand'|'▼ Click to collapse' {
+  getTitle(): '► Click to expand' | '▼ Click to collapse' {
     if (!this.zippy || !this.zippy.visible) {
       return '► Click to expand';
     }
diff --git a/devtools/src/app/demo-app/demo-app.module.ts b/devtools/src/app/demo-app/demo-app.module.ts
index 6c2da8feb39..451642deb11 100644
--- a/devtools/src/app/demo-app/demo-app.module.ts
+++ b/devtools/src/app/demo-app/demo-app.module.ts
@@ -44,5 +44,10 @@ export class DemoAppModule {
   }
 }
 
-initializeMessageBus(new ZoneUnawareIFrameMessageBus(
-    'angular-devtools-backend', 'angular-devtools', () => window.parent));
+initializeMessageBus(
+  new ZoneUnawareIFrameMessageBus(
+    'angular-devtools-backend',
+    'angular-devtools',
+    () => window.parent,
+  ),
+);
diff --git a/devtools/src/app/demo-app/heavy.component.ts b/devtools/src/app/demo-app/heavy.component.ts
index 37696ce8b54..a948b4d13c0 100644
--- a/devtools/src/app/demo-app/heavy.component.ts
+++ b/devtools/src/app/demo-app/heavy.component.ts
@@ -22,8 +22,7 @@ const fib = (n: number): number => {
 })
 export class HeavyComponent {
   @Input()
-  set foo(_: any) {
-  }
+  set foo(_: any) {}
 
   state = {
     nested: {
@@ -31,14 +30,12 @@ export class HeavyComponent {
         foo: 1,
         bar: 2,
       },
-      [Symbol(3)]():
-          number {
-            return 1.618;
-          },
-      get foo():
-          number {
-            return 42;
-          },
+      [Symbol(3)](): number {
+        return 1.618;
+      },
+      get foo(): number {
+        return 42;
+      },
     },
   };
   calculate(): number {
diff --git a/devtools/src/app/demo-app/sample-properties.component.ts b/devtools/src/app/demo-app/sample-properties.component.ts
index 92431f799a5..35fd174da0a 100644
--- a/devtools/src/app/demo-app/sample-properties.component.ts
+++ b/devtools/src/app/demo-app/sample-properties.component.ts
@@ -32,7 +32,11 @@ export class SamplePropertiesComponent {
   exampleObject = {name: 'John', age: 40};
   exampleArray = [1, 2, [3, 4], {name: 'John', age: 40, skills: ['JavaScript']}];
   exampleSet = new Set([1, 2, 3, 4, 5]);
-  exampleMap = new Map<unknown, unknown>([['name', 'John'], ['age', 40], [{id: 123}, undefined]]);
+  exampleMap = new Map<unknown, unknown>([
+    ['name', 'John'],
+    ['age', 40],
+    [{id: 123}, undefined],
+  ]);
   exampleDate = new Date();
   exampleFunction = () => 'John';
 
diff --git a/devtools/src/app/demo-app/sample.service.ts b/devtools/src/app/demo-app/sample.service.ts
index 23ca8f78371..679bd550ad4 100644
--- a/devtools/src/app/demo-app/sample.service.ts
+++ b/devtools/src/app/demo-app/sample.service.ts
@@ -21,7 +21,11 @@ export class SampleService {
   exampleObject = {name: 'John', age: 40};
   exampleArray = [1, 2, [3, 4], {name: 'John', age: 40, skills: ['JavaScript']}];
   exampleSet = new Set([1, 2, 3, 4, 5]);
-  exampleMap = new Map<unknown, unknown>([['name', 'John'], ['age', 40], [{id: 123}, undefined]]);
+  exampleMap = new Map<unknown, unknown>([
+    ['name', 'John'],
+    ['age', 40],
+    [{id: 123}, undefined],
+  ]);
   exampleDate = new Date();
   exampleFunction = () => 'John';
 
diff --git a/devtools/src/app/demo-app/todo/about/about.component.ts b/devtools/src/app/demo-app/todo/about/about.component.ts
index 771e7017e14..598cfaaf545 100644
--- a/devtools/src/app/demo-app/todo/about/about.component.ts
+++ b/devtools/src/app/demo-app/todo/about/about.component.ts
@@ -17,5 +17,4 @@ import {Component} from '@angular/core';
     <a [routerLink]="">Home</a>
   `,
 })
-export class AboutComponent {
-}
+export class AboutComponent {}
diff --git a/devtools/src/app/demo-app/todo/about/about.module.ts b/devtools/src/app/demo-app/todo/about/about.module.ts
index 26997999725..686efca3b49 100644
--- a/devtools/src/app/demo-app/todo/about/about.module.ts
+++ b/devtools/src/app/demo-app/todo/about/about.module.ts
@@ -24,5 +24,4 @@ import {AboutComponent} from './about.component';
   declarations: [AboutComponent],
   exports: [AboutComponent],
 })
-export class AboutModule {
-}
+export class AboutModule {}
diff --git a/devtools/src/app/demo-app/todo/app-todo.component.ts b/devtools/src/app/demo-app/todo/app-todo.component.ts
index d65486029ec..d0b379b109d 100644
--- a/devtools/src/app/demo-app/todo/app-todo.component.ts
+++ b/devtools/src/app/demo-app/todo/app-todo.component.ts
@@ -12,14 +12,13 @@ import {MatDialog} from '@angular/material/dialog';
 import {DialogComponent} from './dialog.component';
 
 @Injectable()
-export class MyServiceA {
-}
+export class MyServiceA {}
 
 @Component({
   selector: 'app-todo-demo',
   templateUrl: './app-todo.component.html',
   styleUrls: ['./app-todo.component.scss'],
-  viewProviders: [MyServiceA]
+  viewProviders: [MyServiceA],
 })
 export class AppTodoComponent {
   name!: string;
diff --git a/devtools/src/app/demo-app/todo/app.module.ts b/devtools/src/app/demo-app/todo/app.module.ts
index 0b88dfebaaa..22380daa788 100644
--- a/devtools/src/app/demo-app/todo/app.module.ts
+++ b/devtools/src/app/demo-app/todo/app.module.ts
@@ -53,5 +53,4 @@ import {DialogComponent} from './dialog.component';
   exports: [AppTodoComponent],
   bootstrap: [AppTodoComponent],
 })
-export class AppModule {
-}
+export class AppModule {}
diff --git a/devtools/src/app/demo-app/todo/dialog.component.ts b/devtools/src/app/demo-app/todo/dialog.component.ts
index 874a027689f..1a562f074ab 100644
--- a/devtools/src/app/demo-app/todo/dialog.component.ts
+++ b/devtools/src/app/demo-app/todo/dialog.component.ts
@@ -20,8 +20,9 @@ export interface DialogData {
 })
 export class DialogComponent {
   constructor(
-      public dialogRef: MatDialogRef<DialogComponent>,
-      @Inject(MAT_DIALOG_DATA) public data: DialogData) {}
+    public dialogRef: MatDialogRef<DialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: DialogData,
+  ) {}
 
   onNoClick(): void {
     this.dialogRef.close();
diff --git a/devtools/src/app/demo-app/todo/home/home.module.ts b/devtools/src/app/demo-app/todo/home/home.module.ts
index cdf7a4222d8..2e607edeb8e 100644
--- a/devtools/src/app/demo-app/todo/home/home.module.ts
+++ b/devtools/src/app/demo-app/todo/home/home.module.ts
@@ -30,5 +30,4 @@ import {TodosFilter} from './todos.pipe';
   declarations: [SamplePipe, TodosComponent, TodoComponent, TodosFilter, TooltipDirective],
   exports: [TodosComponent],
 })
-export class HomeModule {
-}
+export class HomeModule {}
diff --git a/devtools/src/app/devtools-app/devtools-app.component.ts b/devtools/src/app/devtools-app/devtools-app.component.ts
index 58dde7bfdae..e25433158b6 100644
--- a/devtools/src/app/devtools-app/devtools-app.component.ts
+++ b/devtools/src/app/devtools-app/devtools-app.component.ts
@@ -18,15 +18,19 @@ import {IFrameMessageBus} from '../../iframe-message-bus';
     {
       provide: MessageBus,
       useFactory(): MessageBus<Events> {
-        return new PriorityAwareMessageBus(new IFrameMessageBus(
-            'angular-devtools', 'angular-devtools-backend',
+        return new PriorityAwareMessageBus(
+          new IFrameMessageBus(
+            'angular-devtools',
+            'angular-devtools-backend',
             // tslint:disable-next-line: no-non-null-assertion
-            () => (document.querySelector('#sample-app') as HTMLIFrameElement).contentWindow!));
+            () => (document.querySelector('#sample-app') as HTMLIFrameElement).contentWindow!,
+          ),
+        );
       },
     },
   ],
 })
 export class DevToolsComponent {
-  messageBus: IFrameMessageBus|null = null;
+  messageBus: IFrameMessageBus | null = null;
   @ViewChild('ref') iframe!: ElementRef;
 }
diff --git a/devtools/src/app/devtools-app/devtools-app.module.ts b/devtools/src/app/devtools-app/devtools-app.module.ts
index 22a0d9c31a0..389bcc0e2ca 100644
--- a/devtools/src/app/devtools-app/devtools-app.module.ts
+++ b/devtools/src/app/devtools-app/devtools-app.module.ts
@@ -27,5 +27,4 @@ import {DevToolsComponent} from './devtools-app.component';
     ]),
   ],
 })
-export class DevToolsModule {
-}
+export class DevToolsModule {}
diff --git a/devtools/src/environments/environment.ts b/devtools/src/environments/environment.ts
index 6830d2daa76..226d242d5ae 100644
--- a/devtools/src/environments/environment.ts
+++ b/devtools/src/environments/environment.ts
@@ -8,5 +8,5 @@
 
 export const environment = {
   production: false,
-  LATEST_SHA: 'BUILD_SCM_COMMIT_SHA',  // Stamped at build time by bazel
+  LATEST_SHA: 'BUILD_SCM_COMMIT_SHA', // Stamped at build time by bazel
 };
diff --git a/devtools/src/iframe-message-bus.ts b/devtools/src/iframe-message-bus.ts
index 021875358b4..c27cc1efe0c 100644
--- a/devtools/src/iframe-message-bus.ts
+++ b/devtools/src/iframe-message-bus.ts
@@ -14,7 +14,10 @@ export class IFrameMessageBus extends MessageBus<Events> {
   private _listeners: any[] = [];
 
   constructor(
-      private _source: string, private _destination: string, private _docWindow: () => Window) {
+    private _source: string,
+    private _destination: string,
+    private _docWindow: () => Window,
+  ) {
     super();
   }
 
@@ -65,18 +68,19 @@ export class IFrameMessageBus extends MessageBus<Events> {
 
   override emit<E extends keyof Events>(topic: E, args?: Parameters<Events[E]>): boolean {
     this._docWindow().postMessage(
-        {
-          source: this._source,
-          topic,
-          args,
-          // Since both the devtools app and the demo app use IframeMessageBus,
-          // we want to only ignore the ngZone for the demo app. This will let us
-          // prevent infinite change detection loops triggered by message
-          // event listeners but also not prevent the NgZone in the devtools app
-          // from updating its UI.
-          __ignore_ng_zone__: this._source === 'angular-devtools',
-        },
-        '*');
+      {
+        source: this._source,
+        topic,
+        args,
+        // Since both the devtools app and the demo app use IframeMessageBus,
+        // we want to only ignore the ngZone for the demo app. This will let us
+        // prevent infinite change detection loops triggered by message
+        // event listeners but also not prevent the NgZone in the devtools app
+        // from updating its UI.
+        __ignore_ng_zone__: this._source === 'angular-devtools',
+      },
+      '*',
+    );
     return true;
   }
 
diff --git a/devtools/src/main.ts b/devtools/src/main.ts
index 68ca2561d15..3f49b529e1d 100644
--- a/devtools/src/main.ts
+++ b/devtools/src/main.ts
@@ -10,4 +10,6 @@ import {platformBrowser} from '@angular/platform-browser';
 
 import {AppModule} from './app/app.module';
 
-platformBrowser().bootstrapModule(AppModule).catch((err) => console.error(err));
+platformBrowser()
+  .bootstrapModule(AppModule)
+  .catch((err) => console.error(err));