test(ivy): Have more descriptive names for `LView` (#33449)

When debugging `LView`s it is easy to get lost since all of them have
the same name. This change does three things:

1. It makes `TView` have an explicit type:
  - `Host`: for the top level `TView` for bootstrap
  - `Component`: for the `TView` which represents components template
  - `Embedded`: for the `TView` which represents an embedded template
2. It changes the name of `LView` to `LHostView`, `LComponentView`, and
  `LEmbeddedView` depending on the `TView` type.
3. For `LComponentView` and `LEmbeddedView` we also append the name of
  of the `context` constructor. The result is that we have `LView`s which
  are name as: `LComponentView_MyComponent` and `LEmbeddedView_NgIfContext`.

The above changes will make it easier to understand the structure of the
application when debugging.

NOTE: All of these are behind `ngDevMode` and will get removed in
production application.

PR Close #33449

packages/core/src/render3/component.ts

@@ -17,12 +17,12 @@ import {assertComponentType} from './assert';
 import {getComponentDef} from './definition';
 import {diPublicInInjector, getOrCreateNodeInjectorForNode} from './di';
 import {registerPostOrderHooks, registerPreOrderHooks} from './hooks';
-import {CLEAN_PROMISE, addToViewTree, createLView, createTView, getOrCreateTNode, getOrCreateTView, initNodeFlags, instantiateRootComponent, invokeHostBindingsInCreationMode, locateHostElement, markAsComponentHost, refreshView, renderView} from './instructions/shared';
+import {CLEAN_PROMISE, addToViewTree, createLView, createTView, getOrCreateTComponentView, getOrCreateTNode, initNodeFlags, instantiateRootComponent, invokeHostBindingsInCreationMode, locateHostElement, markAsComponentHost, refreshView, renderView} from './instructions/shared';
 import {ComponentDef, ComponentType, RenderFlags} from './interfaces/definition';
 import {TElementNode, TNode, TNodeType} from './interfaces/node';
 import {PlayerHandler} from './interfaces/player';
 import {RElement, Renderer3, RendererFactory3, domRendererFactory3} from './interfaces/renderer';
-import {CONTEXT, HEADER_OFFSET, LView, LViewFlags, RootContext, RootContextFlags, TVIEW} from './interfaces/view';
+import {CONTEXT, HEADER_OFFSET, LView, LViewFlags, RootContext, RootContextFlags, TVIEW, TViewType} from './interfaces/view';
 import {enterView, getPreviousOrParentTNode, incrementActiveDirectiveId, leaveView, setActiveHostElement} from './state';
 import {publishDefaultGlobalUtils} from './util/global_utils';
 import {defaultScheduler, stringifyForError} from './util/misc_utils';
@@ -124,7 +124,7 @@ export function renderComponent<T>(
   const rootContext = createRootContext(opts.scheduler, opts.playerHandler);
 
   const renderer = rendererFactory.createRenderer(hostRNode, componentDef);
-  const rootTView = createTView(-1, null, 1, 0, null, null, null, null, null);
+  const rootTView = createTView(TViewType.Root, -1, null, 1, 0, null, null, null, null, null);
   const rootView: LView = createLView(
       null, rootTView, rootContext, rootFlags, null, null, rendererFactory, renderer, undefined,
       opts.injector || null);
@@ -171,8 +171,9 @@ export function createRootComponentView(
   rootView[0 + HEADER_OFFSET] = rNode;
   const tNode: TElementNode = getOrCreateTNode(tView, null, 0, TNodeType.Element, null, null);
   const componentView = createLView(
-      rootView, getOrCreateTView(def), null, def.onPush ? LViewFlags.Dirty : LViewFlags.CheckAlways,
-      rootView[HEADER_OFFSET], tNode, rendererFactory, renderer, sanitizer);
+      rootView, getOrCreateTComponentView(def), null,
+      def.onPush ? LViewFlags.Dirty : LViewFlags.CheckAlways, rootView[HEADER_OFFSET], tNode,
+      rendererFactory, renderer, sanitizer);
 
   if (tView.firstCreatePass) {
     diPublicInInjector(getOrCreateNodeInjectorForNode(tNode, rootView), tView, def.type);

packages/core/src/render3/component_ref.ts

@@ -28,7 +28,7 @@ import {assignTViewNodeToLView, createLView, createTView, elementCreate, locateH
 import {ComponentDef} from './interfaces/definition';
 import {TContainerNode, TElementContainerNode, TElementNode} from './interfaces/node';
 import {RNode, RendererFactory3, domRendererFactory3, isProceduralRenderer} from './interfaces/renderer';
-import {LView, LViewFlags, TVIEW} from './interfaces/view';
+import {LView, LViewFlags, TVIEW, TViewType} from './interfaces/view';
 import {enterView, leaveView} from './state';
 import {defaultScheduler} from './util/misc_utils';
 import {getTNode} from './util/view_utils';
@@ -158,7 +158,7 @@ export class ComponentFactory<T> extends viewEngine_ComponentFactory<T> {
     }
 
     // Create the root view. Uses empty TView and ContentTemplate.
-    const rootTView = createTView(-1, null, 1, 0, null, null, null, null, null);
+    const rootTView = createTView(TViewType.Root, -1, null, 1, 0, null, null, null, null, null);
     const rootLView = createLView(
         null, rootTView, rootContext, rootFlags, null, null, rendererFactory, renderer, sanitizer,
         rootViewInjector);

packages/core/src/render3/instructions/container.ts

@@ -13,7 +13,7 @@ import {ACTIVE_INDEX, CONTAINER_HEADER_OFFSET, LContainer} from '../interfaces/c
 import {ComponentTemplate} from '../interfaces/definition';
 import {LocalRefExtractor, TAttributes, TContainerNode, TNode, TNodeType, TViewNode} from '../interfaces/node';
 import {isDirectiveHost} from '../interfaces/type_checks';
-import {FLAGS, HEADER_OFFSET, InitPhaseState, LView, LViewFlags, RENDERER, TVIEW, T_HOST} from '../interfaces/view';
+import {FLAGS, HEADER_OFFSET, InitPhaseState, LView, LViewFlags, RENDERER, TVIEW, TViewType, T_HOST} from '../interfaces/view';
 import {assertNodeType} from '../node_assert';
 import {appendChild, removeView} from '../node_manipulation';
 import {getBindingIndex, getCheckNoChangesMode, getIsParent, getLView, getPreviousOrParentTNode, setIsNotParent, setPreviousOrParentTNode} from '../state';
@@ -81,8 +81,8 @@ export function ɵɵtemplate(
     registerPostOrderHooks(tView, tContainerNode);
 
     const embeddedTView = tContainerNode.tViews = createTView(
-        -1, templateFn, decls, vars, tView.directiveRegistry, tView.pipeRegistry, null,
-        tView.schemas, tViewConsts);
+        TViewType.Embedded, -1, templateFn, decls, vars, tView.directiveRegistry,
+        tView.pipeRegistry, null, tView.schemas, tViewConsts);
     const embeddedTViewNode = createTNode(tView, null, TNodeType.View, -1, null, null) as TViewNode;
     embeddedTViewNode.injectorIndex = tContainerNode.injectorIndex;
     embeddedTView.node = embeddedTViewNode;

packages/core/src/render3/instructions/embedded_view.ts

@@ -11,7 +11,7 @@ import {assertLContainerOrUndefined} from '../assert';
 import {ACTIVE_INDEX, CONTAINER_HEADER_OFFSET, LContainer} from '../interfaces/container';
 import {RenderFlags} from '../interfaces/definition';
 import {TContainerNode, TNodeType} from '../interfaces/node';
-import {CONTEXT, LView, LViewFlags, PARENT, TVIEW, TView, T_HOST} from '../interfaces/view';
+import {CONTEXT, LView, LViewFlags, PARENT, TVIEW, TView, TViewType, T_HOST} from '../interfaces/view';
 import {assertNodeType} from '../node_assert';
 import {insertView, removeView} from '../node_manipulation';
 import {enterView, getIsParent, getLView, getPreviousOrParentTNode, leaveViewProcessExit, setIsParent, setPreviousOrParentTNode} from '../state';
@@ -87,8 +87,8 @@ function getOrCreateEmbeddedTView(
   ngDevMode && assertEqual(Array.isArray(containerTViews), true, 'TViews should be in an array');
   if (viewIndex >= containerTViews.length || containerTViews[viewIndex] == null) {
     containerTViews[viewIndex] = createTView(
-        viewIndex, null, decls, vars, tView.directiveRegistry, tView.pipeRegistry, null, null,
-        tView.consts);
+        TViewType.Embedded, viewIndex, null, decls, vars, tView.directiveRegistry,
+        tView.pipeRegistry, null, null, tView.consts);
   }
   return containerTViews[viewIndex];
 }

packages/core/src/render3/instructions/lview_debug.ts

@@ -7,7 +7,7 @@
  */
 
 import {AttributeMarker, ComponentTemplate} from '..';
-import {SchemaMetadata} from '../../core';
+import {SchemaMetadata, Type} from '../../core';
 import {assertDefined} from '../../util/assert';
 import {createNamedArrayType} from '../../util/named_array_type';
 import {initNgDevMode} from '../../util/ng_dev_mode';
@@ -19,7 +19,7 @@ import {SelectorFlags} from '../interfaces/projection';
 import {TQueries} from '../interfaces/query';
 import {RComment, RElement, RNode} from '../interfaces/renderer';
 import {TStylingContext} from '../interfaces/styling';
-import {CHILD_HEAD, CHILD_TAIL, CLEANUP, CONTEXT, DECLARATION_VIEW, ExpandoInstructions, FLAGS, HEADER_OFFSET, HOST, HookData, INJECTOR, LView, LViewFlags, NEXT, PARENT, QUERIES, RENDERER, RENDERER_FACTORY, SANITIZER, TData, TVIEW, TView as ITView, TView, T_HOST} from '../interfaces/view';
+import {CHILD_HEAD, CHILD_TAIL, CLEANUP, CONTEXT, DECLARATION_VIEW, ExpandoInstructions, FLAGS, HEADER_OFFSET, HOST, HookData, INJECTOR, LView, LViewFlags, NEXT, PARENT, QUERIES, RENDERER, RENDERER_FACTORY, SANITIZER, TData, TVIEW, TView as ITView, TView, TViewType, T_HOST} from '../interfaces/view';
 import {DebugNodeStyling, NodeStylingDebug} from '../styling/styling_debug';
 import {attachDebugObject} from '../util/debug_utils';
 import {isStylingContext} from '../util/styling_utils';
@@ -56,25 +56,64 @@ const NG_DEV_MODE = ((typeof ngDevMode === 'undefined' || !!ngDevMode) && initNg
  * ```
  */
 
-export const LViewArray = NG_DEV_MODE && createNamedArrayType('LView') || null !as ArrayConstructor;
-let LVIEW_EMPTY: unknown[];  // can't initialize here or it will not be tree shaken, because `LView`
-                             // constructor could have side-effects.
+let LVIEW_COMPONENT_CACHE !: Map<string|null, Array<any>>;
+let LVIEW_EMBEDDED_CACHE !: Map<string|null, Array<any>>;
+let LVIEW_ROOT !: Array<any>;
+
+interface TViewDebug extends ITView {
+  type: TViewType;
+}
+
 /**
  * This function clones a blueprint and creates LView.
  *
  * Simple slice will keep the same type, and we need it to be LView
  */
-export function cloneToLView(list: any[]): LView {
-  if (LVIEW_EMPTY === undefined) LVIEW_EMPTY = new LViewArray();
-  return LVIEW_EMPTY.concat(list) as any;
+export function cloneToLViewFromTViewBlueprint(tView: TView): LView {
+  const debugTView = tView as TViewDebug;
+  const lView = getLViewToClone(debugTView.type, tView.template && tView.template.name);
+  return lView.concat(tView.blueprint) as any;
+}
+
+function getLViewToClone(type: TViewType, name: string | null): Array<any> {
+  switch (type) {
+    case TViewType.Root:
+      if (LVIEW_ROOT === undefined) LVIEW_ROOT = new (createNamedArrayType('LRootView'))();
+      return LVIEW_ROOT;
+    case TViewType.Component:
+      if (LVIEW_COMPONENT_CACHE === undefined) LVIEW_COMPONENT_CACHE = new Map();
+      let componentArray = LVIEW_COMPONENT_CACHE.get(name);
+      if (componentArray === undefined) {
+        componentArray = new (createNamedArrayType('LComponentView' + nameSuffix(name)))();
+        LVIEW_COMPONENT_CACHE.set(name, componentArray);
+      }
+      return componentArray;
+    case TViewType.Embedded:
+      if (LVIEW_EMBEDDED_CACHE === undefined) LVIEW_EMBEDDED_CACHE = new Map();
+      let embeddedArray = LVIEW_EMBEDDED_CACHE.get(name);
+      if (embeddedArray === undefined) {
+        embeddedArray = new (createNamedArrayType('LEmbeddedView' + nameSuffix(name)))();
+        LVIEW_EMBEDDED_CACHE.set(name, embeddedArray);
+      }
+      return embeddedArray;
+  }
+  throw new Error('unreachable code');
+}
+
+function nameSuffix(text: string | null | undefined): string {
+  if (text == null) return '';
+  const index = text.lastIndexOf('_Template');
+  return '_' + (index === -1 ? text : text.substr(0, index));
 }
 
 /**
- * This class is a debug version of Object literal so that we can have constructor name show up in
+ * This class is a debug version of Object literal so that we can have constructor name show up
+ * in
  * debug tools in ngDevMode.
  */
 export const TViewConstructor = class TView implements ITView {
   constructor(
+      public type: TViewType,                                //
       public id: number,                                     //
       public blueprint: LView,                               //
       public template: ComponentTemplate<{}>|null,           //
@@ -259,8 +298,10 @@ export function toDebug(obj: any): any {
  * reading.
  *
  * @param value possibly wrapped native DOM node.
- * @param includeChildren If `true` then the serialized HTML form will include child elements (same
- * as `outerHTML`). If `false` then the serialized HTML form will only contain the element itself
+ * @param includeChildren If `true` then the serialized HTML form will include child elements
+ * (same
+ * as `outerHTML`). If `false` then the serialized HTML form will only contain the element
+ * itself
  * (will not serialize child elements).
  */
 function toHtml(value: any, includeChildren: boolean = false): string|null {
@@ -305,7 +346,8 @@ export class LViewDebug {
   get html(): string { return (this.nodes || []).map(node => toHtml(node.native, true)).join(''); }
   get context(): {}|null { return this._raw_lView[CONTEXT]; }
   /**
-   * The tree of nodes associated with the current `LView`. The nodes have been normalized into a
+   * The tree of nodes associated with the current `LView`. The nodes have been normalized into
+   * a
    * tree structure with relevant details pulled out for readability.
    */
   get nodes(): DebugNode[]|null {

packages/core/src/render3/instructions/shared.ts

@@ -27,7 +27,7 @@ import {AttributeMarker, InitialInputData, InitialInputs, LocalRefExtractor, Pro
 import {RComment, RElement, RNode, RText, Renderer3, RendererFactory3, isProceduralRenderer} from '../interfaces/renderer';
 import {SanitizerFn} from '../interfaces/sanitization';
 import {isComponentDef, isComponentHost, isContentQueryHost, isLContainer, isRootView} from '../interfaces/type_checks';
-import {CHILD_HEAD, CHILD_TAIL, CLEANUP, CONTEXT, DECLARATION_VIEW, ExpandoInstructions, FLAGS, HEADER_OFFSET, HOST, INJECTOR, InitPhaseState, LView, LViewFlags, NEXT, PARENT, RENDERER, RENDERER_FACTORY, RootContext, RootContextFlags, SANITIZER, TData, TVIEW, TView, T_HOST} from '../interfaces/view';
+import {CHILD_HEAD, CHILD_TAIL, CLEANUP, CONTEXT, DECLARATION_VIEW, ExpandoInstructions, FLAGS, HEADER_OFFSET, HOST, INJECTOR, InitPhaseState, LView, LViewFlags, NEXT, PARENT, RENDERER, RENDERER_FACTORY, RootContext, RootContextFlags, SANITIZER, TData, TVIEW, TView, TViewType, T_HOST} from '../interfaces/view';
 import {assertNodeOfPossibleTypes} from '../node_assert';
 import {isNodeMatchingSelectorList} from '../node_selector_matcher';
 import {ActiveElementFlags, enterView, executeElementExitFn, getBindingIndex, getBindingsEnabled, getCheckNoChangesMode, getIsParent, getPreviousOrParentTNode, getSelectedIndex, hasActiveElementFlag, incrementActiveDirectiveId, leaveView, leaveViewProcessExit, setActiveHostElement, setBindingIndex, setBindingRoot, setCheckNoChangesMode, setCurrentDirectiveDef, setCurrentQueryIndex, setPreviousOrParentTNode, setSelectedIndex} from '../state';
@@ -40,7 +40,7 @@ import {getLViewParent} from '../util/view_traversal_utils';
 import {getComponentLViewByIndex, getNativeByIndex, getNativeByTNode, getTNode, isCreationMode, readPatchedLView, resetPreOrderHookFlags, unwrapRNode, viewAttachedToChangeDetector} from '../util/view_utils';
 
 import {selectIndexInternal} from './advance';
-import {LCleanup, LViewBlueprint, MatchesArray, TCleanup, TNodeConstructor, TNodeInitialInputs, TNodeLocalNames, TViewComponents, TViewConstructor, attachLContainerDebug, attachLViewDebug, cloneToLView, cloneToTViewData} from './lview_debug';
+import {LCleanup, LViewBlueprint, MatchesArray, TCleanup, TNodeConstructor, TNodeInitialInputs, TNodeLocalNames, TViewComponents, TViewConstructor, attachLContainerDebug, attachLViewDebug, cloneToLViewFromTViewBlueprint, cloneToTViewData} from './lview_debug';
 
 
 
@@ -158,7 +158,8 @@ export function createLView<T>(
     host: RElement | null, tHostNode: TViewNode | TElementNode | null,
     rendererFactory?: RendererFactory3 | null, renderer?: Renderer3 | null,
     sanitizer?: Sanitizer | null, injector?: Injector | null): LView {
-  const lView = ngDevMode ? cloneToLView(tView.blueprint) : tView.blueprint.slice() as LView;
+  const lView =
+      ngDevMode ? cloneToLViewFromTViewBlueprint(tView) : tView.blueprint.slice() as LView;
   lView[HOST] = host;
   lView[FLAGS] = flags | LViewFlags.CreationMode | LViewFlags.Attached | LViewFlags.FirstLViewPass;
   resetPreOrderHookFlags(lView);
@@ -568,10 +569,11 @@ export function saveResolvedLocalsInData(
  * @param def ComponentDef
  * @returns TView
  */
-export function getOrCreateTView(def: ComponentDef<any>): TView {
-  return def.tView || (def.tView = createTView(
-                           -1, def.template, def.decls, def.vars, def.directiveDefs, def.pipeDefs,
-                           def.viewQuery, def.schemas, def.consts));
+export function getOrCreateTComponentView(def: ComponentDef<any>): TView {
+  return def.tView ||
+      (def.tView = createTView(
+           TViewType.Component, -1, def.template, def.decls, def.vars, def.directiveDefs,
+           def.pipeDefs, def.viewQuery, def.schemas, def.consts));
 }
 
 
@@ -588,8 +590,8 @@ export function getOrCreateTView(def: ComponentDef<any>): TView {
  * @param consts Constants for this view
  */
 export function createTView(
-    viewIndex: number, templateFn: ComponentTemplate<any>| null, decls: number, vars: number,
-    directives: DirectiveDefListOrFactory | null, pipes: PipeDefListOrFactory | null,
+    type: TViewType, viewIndex: number, templateFn: ComponentTemplate<any>| null, decls: number,
+    vars: number, directives: DirectiveDefListOrFactory | null, pipes: PipeDefListOrFactory | null,
     viewQuery: ViewQueriesFunction<any>| null, schemas: SchemaMetadata[] | null,
     consts: TConstants | null): TView {
   ngDevMode && ngDevMode.tView++;
@@ -601,6 +603,7 @@ export function createTView(
   const blueprint = createViewBlueprint(bindingStartIndex, initialViewLength);
   return blueprint[TVIEW as any] = ngDevMode ?
       new TViewConstructor(
+             type,
              viewIndex,   // id: number,
              blueprint,   // blueprint: LView,
              templateFn,  // template: ComponentTemplate<{}>|null,
@@ -1304,7 +1307,7 @@ function baseResolveDirective<T>(tView: TView, viewData: LView, def: DirectiveDe
 
 function addComponentLogic<T>(lView: LView, hostTNode: TElementNode, def: ComponentDef<T>): void {
   const native = getNativeByTNode(hostTNode, lView) as RElement;
-  const tView = getOrCreateTView(def);
+  const tView = getOrCreateTComponentView(def);
 
   // Only component views should be added to the view tree directly. Embedded views are
   // accessed through their containers because they may be removed / re-added later.

packages/core/src/render3/interfaces/view.ts

@@ -310,6 +310,35 @@ export const enum PreOrderHookFlags {
  */
 export interface ExpandoInstructions extends Array<number|HostBindingsFunction<any>|null> {}
 
+/**
+ * Explicitly marks `TView` as a specific type in `ngDevMode`
+ *
+ * It is useful to know conceptually what time of `TView` we are dealing with when
+ * debugging an application (even if the runtime does not need it.) For this reason
+ * we store this information in the `ngDevMode` `TView` and than use it for
+ * better debugging experience.
+ */
+export const enum TViewType {
+  /**
+   * Root `TView` is the used to bootstrap components into. It is used in conjunction with
+   * `LView` which takes an existing DOM node not owned by Angular and wraps it in `TView`/`LView`
+   * so that other components can be loaded into it.
+   */
+  Root = 0,
+
+  /**
+   * `TView` associated with a Component. This would be the `TView` directly associated with the
+   * component view (as opposed an `Embedded` `TView` which would be a child of `Component` `TView`)
+   */
+  Component = 1,
+
+  /**
+   * `TView` associated with a template. Such as `*ngIf`, `<ng-template>` etc... A `Component`
+   * can have zero or more `Embedede` `TView`s.
+   */
+  Embedded = 2,
+}
+
 /**
  * The static data for an LView (shared between all templates of a
  * given type).

packages/core/src/render3/util/discovery_utils.ts

@@ -370,3 +370,20 @@ export function getDebugNode(element: Node): DebugNode|null {
 
   return debugNode;
 }
+
+/**
+ * Retrieve the component `LView` from component/element.
+ *
+ * NOTE: `LView` is a private and should not be leaked outside.
+ *       Don't export this method to `ng.*` on window.
+ *
+ * @param target Component or Element instance.
+ */
+export function getComponentLView(target: any): LView {
+  const lContext = loadLContext(target);
+  const nodeIndx = lContext.nodeIndex;
+  const lView = lContext.lView;
+  const componentLView = lView[nodeIndx];
+  ngDevMode && assertLView(componentLView);
+  return componentLView;
+}

packages/core/src/util/named_array_type.ts

@@ -8,7 +8,6 @@
  */
 
 import './ng_dev_mode';
-import {global} from './global';
 
 /**
  * THIS FILE CONTAINS CODE WHICH SHOULD BE TREE SHAKEN AND NEVER CALLED FROM PRODUCTION CODE!!!

packages/core/test/acceptance/discover_utils_spec.ts

@@ -7,11 +7,13 @@
  */
 import {CommonModule} from '@angular/common';
 import {Component, Directive, HostBinding, InjectionToken, ViewChild} from '@angular/core';
+import {isLView} from '@angular/core/src/render3/interfaces/type_checks';
+import {CONTEXT} from '@angular/core/src/render3/interfaces/view';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {onlyInIvy} from '@angular/private/testing';
 
 import {getHostElement, markDirty} from '../../src/render3/index';
-import {getComponent, getContext, getDebugNode, getDirectives, getInjectionTokens, getInjector, getListeners, getLocalRefs, getRootComponents, getViewComponent, loadLContext} from '../../src/render3/util/discovery_utils';
+import {getComponent, getComponentLView, getContext, getDebugNode, getDirectives, getInjectionTokens, getInjector, getListeners, getLocalRefs, getRootComponents, getViewComponent, loadLContext} from '../../src/render3/util/discovery_utils';
 
 onlyInIvy('Ivy-specific utilities').describe('discovery utils', () => {
   let fixture: ComponentFixture<MyApp>;
@@ -87,6 +89,20 @@ onlyInIvy('Ivy-specific utilities').describe('discovery utils', () => {
     });
   });
 
+  describe('getComponentLView', () => {
+    it('should retrieve component LView from element', () => {
+      const childLView = getComponentLView(child[0]);
+      expect(isLView(childLView)).toBe(true);
+      expect(childLView[CONTEXT] instanceof Child).toBe(true);
+    });
+
+    it('should retrieve component LView from component instance', () => {
+      const childLView = getComponentLView(childComponent[0]);
+      expect(isLView(childLView)).toBe(true);
+      expect(childLView[CONTEXT] instanceof Child).toBe(true);
+    });
+  });
+
   describe('getContext', () => {
     it('should throw when called on non-element', () => {
       expect(() => getContext(dirA[0] as any)).toThrowError(/Expecting instance of DOM Node/);

packages/core/test/acceptance/ngdevmode_debug_spec.ts

@@ -0,0 +1,49 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * 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 {CommonModule} from '@angular/common';
+import {Component} from '@angular/core';
+import {LView} from '@angular/core/src/render3/interfaces/view';
+import {getComponentLView, loadLContext} from '@angular/core/src/render3/util/discovery_utils';
+import {createNamedArrayType} from '@angular/core/src/util/named_array_type';
+import {TestBed} from '@angular/core/testing';
+import {onlyInIvy} from '@angular/private/testing';
+
+const supportsArraySubclassing =
+    createNamedArrayType('SupportsArraySubclassing').name === 'SupportsArraySubclassing';
+
+onlyInIvy('Debug information exist in ivy only').describe('ngDevMode debug', () => {
+  describe('LViewDebug', () => {
+    supportsArraySubclassing && it('should name LView based on type', () => {
+      @Component({
+        template: `
+        <ul>
+          <li *ngIf="true">item</li>
+        </ul>
+        `
+      })
+      class MyApp {
+      }
+
+      TestBed.configureTestingModule({declarations: [MyApp], imports: [CommonModule]});
+      const fixture = TestBed.createComponent(MyApp);
+      const rootLView = loadLContext(fixture.nativeElement).lView;
+      expect(rootLView.constructor.name).toEqual('LRootView');
+
+      const componentLView = getComponentLView(fixture.componentInstance);
+      expect(componentLView.constructor.name).toEqual('LComponentView_MyApp');
+
+      const element: HTMLElement = fixture.nativeElement;
+      fixture.detectChanges();
+      const li = element.querySelector('li') !;
+      const embeddedLView = loadLContext(li).lView;
+      expect(embeddedLView.constructor.name).toEqual('LEmbeddedView_MyApp_li_1');
+
+    });
+  });
+});

packages/core/test/bundling/cyclic_import/bundle.golden_symbols.json

@@ -354,10 +354,10 @@
     "name": "getOrCreateNodeInjectorForNode"
   },
   {
-    "name": "getOrCreateTNode"
+    "name": "getOrCreateTComponentView"
   },
   {
-    "name": "getOrCreateTView"
+    "name": "getOrCreateTNode"
   },
   {
     "name": "getParentInjectorIndex"

packages/core/test/bundling/hello_world/bundle.golden_symbols.json

@@ -273,10 +273,10 @@
     "name": "getOrCreateNodeInjectorForNode"
   },
   {
-    "name": "getOrCreateTNode"
+    "name": "getOrCreateTComponentView"
   },
   {
-    "name": "getOrCreateTView"
+    "name": "getOrCreateTNode"
   },
   {
     "name": "getParentInjectorIndex"

packages/core/test/bundling/todo/bundle.golden_symbols.json

@@ -723,10 +723,10 @@
     "name": "getOrCreateNodeInjectorForNode"
   },
   {
-    "name": "getOrCreateTNode"
+    "name": "getOrCreateTComponentView"
   },
   {
-    "name": "getOrCreateTView"
+    "name": "getOrCreateTNode"
   },
   {
     "name": "getOriginalError"

packages/core/test/render3/di_spec.ts

@@ -16,7 +16,7 @@ import {ɵɵdefineDirective, ɵɵdirectiveInject, ɵɵelement, ɵɵelementEnd,
 import {TNODE} from '../../src/render3/interfaces/injector';
 import {TNodeType} from '../../src/render3/interfaces/node';
 import {isProceduralRenderer} from '../../src/render3/interfaces/renderer';
-import {LViewFlags, TVIEW} from '../../src/render3/interfaces/view';
+import {LViewFlags, TVIEW, TViewType} from '../../src/render3/interfaces/view';
 import {enterView, leaveViewProcessExit} from '../../src/render3/state';
 
 import {getRendererFactory2} from './imported_renderer2';
@@ -223,7 +223,7 @@ describe('di', () => {
   describe('getOrCreateNodeInjector', () => {
     it('should handle initial undefined state', () => {
       const contentView = createLView(
-          null, createTView(-1, null, 1, 0, null, null, null, null, null), null,
+          null, createTView(TViewType.Embedded, -1, null, 1, 0, null, null, null, null, null), {},
           LViewFlags.CheckAlways, null, null, {} as any, {} as any);
       enterView(contentView, null);
       try {

packages/core/test/render3/perf/directive_instantiate/index.ts

@@ -5,6 +5,7 @@
  * 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 {TViewType} from '@angular/core/src/render3/interfaces/view';
 import {ɵɵdefineDirective, ɵɵelementEnd, ɵɵelementStart, ɵɵtext} from '../../../../src/render3/index';
 import {createTNode, createTView} from '../../../../src/render3/instructions/shared';
 import {RenderFlags} from '../../../../src/render3/interfaces/definition';
@@ -74,7 +75,7 @@ function testTemplate(rf: RenderFlags, ctx: any) {
 
 const viewTNode = createTNode(null !, null, TNodeType.View, -1, null, null) as TViewNode;
 const embeddedTView = createTView(
-    -1, testTemplate, 21, 10, [Tooltip.ɵdir], null, null, null,
+    TViewType.Embedded, -1, testTemplate, 21, 10, [Tooltip.ɵdir], null, null, null,
     [['position', 'top', 3, 'tooltip']]);
 
 // create view once so we don't profile first template pass

packages/core/test/render3/perf/element_text_create/index.ts

@@ -5,6 +5,7 @@
  * 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 {TViewType} from '@angular/core/src/render3/interfaces/view';
 import {ɵɵelementEnd, ɵɵelementStart} from '../../../../src/render3/instructions/element';
 import {createTNode, createTView} from '../../../../src/render3/instructions/shared';
 import {ɵɵtext} from '../../../../src/render3/instructions/text';
@@ -64,9 +65,10 @@ function testTemplate(rf: RenderFlags, ctx: any) {
 }
 
 const viewTNode = createTNode(null !, null, TNodeType.View, -1, null, null) as TViewNode;
-const embeddedTView = createTView(-1, testTemplate, 21, 0, null, null, null, null, [
-  ['name1', 'value1', 'name2', 'value2', 'name3', 'value3', 'name4', 'value4', 'name5', 'value5']
-]);
+const embeddedTView = createTView(
+    TViewType.Embedded, -1, testTemplate, 21, 0, null, null, null, null, [[
+      'name1', 'value1', 'name2', 'value2', 'name3', 'value3', 'name4', 'value4', 'name5', 'value5'
+    ]]);
 
 // create view once so we don't profile first template pass
 createAndRenderLView(null, embeddedTView, viewTNode);

packages/core/test/render3/perf/listeners/index.ts

@@ -5,6 +5,7 @@
  * 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 {TViewType} from '@angular/core/src/render3/interfaces/view';
 import {ɵɵelementEnd, ɵɵelementStart} from '../../../../src/render3/instructions/element';
 import {ɵɵlistener} from '../../../../src/render3/instructions/listener';
 import {createTNode, createTView} from '../../../../src/render3/instructions/shared';
@@ -75,8 +76,8 @@ function testTemplate(rf: RenderFlags, ctx: any) {
 }
 
 const viewTNode = createTNode(null !, null, TNodeType.View, -1, null, null) as TViewNode;
-const embeddedTView =
-    createTView(-1, testTemplate, 11, 0, null, null, null, null, [[3, 'click', 'input']]);
+const embeddedTView = createTView(
+    TViewType.Embedded, -1, testTemplate, 11, 0, null, null, null, null, [[3, 'click', 'input']]);
 
 // create view once so we don't profile first template pass
 createAndRenderLView(null, embeddedTView, viewTNode);

packages/core/test/render3/perf/ng_template/index.ts

@@ -5,8 +5,8 @@
  * 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 {TViewType} from '@angular/core/src/render3/interfaces/view';
 import {ElementRef, TemplateRef, ViewContainerRef} from '../../../../src/linker';
-
 import {ɵɵdefineDirective, ɵɵdirectiveInject, ɵɵtemplate} from '../../../../src/render3/index';
 import {createTNode, createTView} from '../../../../src/render3/instructions/shared';
 import {RenderFlags} from '../../../../src/render3/interfaces/definition';
@@ -60,7 +60,8 @@ function testTemplate(rf: RenderFlags, ctx: any) {
 
 const viewTNode = createTNode(null !, null, TNodeType.View, -1, null, null) as TViewNode;
 const embeddedTView = createTView(
-    -1, testTemplate, 2, 0, [NgIfLike.ɵdir], null, null, null, [['viewManipulation', '']]);
+    TViewType.Root, -1, testTemplate, 2, 0, [NgIfLike.ɵdir], null, null, null,
+    [['viewManipulation', '']]);
 
 // create view once so we don't profile first template pass
 createAndRenderLView(null, embeddedTView, viewTNode);

packages/core/test/render3/perf/setup.ts

@@ -9,7 +9,7 @@ import {addToViewTree, createLContainer, createLView, createTNode, createTView,
 import {ComponentTemplate} from '../../../src/render3/interfaces/definition';
 import {TAttributes, TNodeType, TViewNode} from '../../../src/render3/interfaces/node';
 import {RendererFactory3, domRendererFactory3} from '../../../src/render3/interfaces/renderer';
-import {LView, LViewFlags, TView} from '../../../src/render3/interfaces/view';
+import {LView, LViewFlags, TView, TViewType} from '../../../src/render3/interfaces/view';
 import {insertView} from '../../../src/render3/node_manipulation';
 
 import {MicroBenchmarkRendererFactory} from './noop_renderer';
@@ -45,7 +45,7 @@ export function setupTestHarness(
     templateFn: ComponentTemplate<any>| null, decls: number, vars: number, noOfViews: number,
     embeddedViewContext: any = {}, consts: TAttributes[] | null = null): TestHarness {
   // Create a root view with a container
-  const hostTView = createTView(-1, null, 1, 0, null, null, null, null, consts);
+  const hostTView = createTView(TViewType.Root, -1, null, 1, 0, null, null, null, null, consts);
   const tContainerNode = getOrCreateTNode(hostTView, null, 0, TNodeType.Container, null, null);
   const hostNode = renderer.createElement('div');
   const hostLView = createLView(
@@ -58,7 +58,8 @@ export function setupTestHarness(
 
 
   // create test embedded views
-  const embeddedTView = createTView(-1, templateFn, decls, vars, null, null, null, null, consts);
+  const embeddedTView =
+      createTView(TViewType.Embedded, -1, templateFn, decls, vars, null, null, null, null, consts);
   const viewTNode = createTNode(hostTView, null, TNodeType.View, -1, null, null) as TViewNode;
 
   function createEmbeddedLView(): LView {

packages/core/test/render3/render_util.ts

@@ -12,8 +12,8 @@ import {ElementRef} from '@angular/core/src/linker/element_ref';
 import {TemplateRef} from '@angular/core/src/linker/template_ref';
 import {ViewContainerRef} from '@angular/core/src/linker/view_container_ref';
 import {Renderer2} from '@angular/core/src/render/api';
-import {createLView, createTView, getOrCreateTNode, getOrCreateTView, renderComponentOrTemplate} from '@angular/core/src/render3/instructions/shared';
-import {TAttributes, TConstants, TNodeType} from '@angular/core/src/render3/interfaces/node';
+import {createLView, createTView, getOrCreateTComponentView, getOrCreateTNode, renderComponentOrTemplate} from '@angular/core/src/render3/instructions/shared';
+import {TConstants, TNodeType} from '@angular/core/src/render3/interfaces/node';
 import {enterView, getLView} from '@angular/core/src/render3/state';
 import {stringifyElement} from '@angular/platform-browser/testing/src/browser_util';
 
@@ -32,13 +32,15 @@ import {ComponentDef, ComponentTemplate, ComponentType, DirectiveDef, DirectiveT
 import {DirectiveDefList, DirectiveDefListOrFactory, DirectiveTypesOrFactory, HostBindingsFunction, PipeDef, PipeDefList, PipeDefListOrFactory, PipeTypesOrFactory} from '../../src/render3/interfaces/definition';
 import {PlayerHandler} from '../../src/render3/interfaces/player';
 import {ProceduralRenderer3, RComment, RElement, RNode, RText, Renderer3, RendererFactory3, RendererStyleFlags3, domRendererFactory3} from '../../src/render3/interfaces/renderer';
-import {HEADER_OFFSET, LView, LViewFlags, T_HOST} from '../../src/render3/interfaces/view';
+import {HEADER_OFFSET, LView, LViewFlags, TViewType, T_HOST} from '../../src/render3/interfaces/view';
 import {destroyLView} from '../../src/render3/node_manipulation';
 import {getRootView} from '../../src/render3/util/view_traversal_utils';
 import {Sanitizer} from '../../src/sanitization/sanitizer';
 
 import {getRendererFactory2} from './imported_renderer2';
 
+
+
 export abstract class BaseFixture {
   /**
    * Each fixture creates the following initial DOM structure:
@@ -254,7 +256,7 @@ export function renderTemplate<T>(
     const renderer = providedRendererFactory.createRenderer(null, null);
 
     // We need to create a root view so it's possible to look up the host element through its index
-    const tView = createTView(-1, null, 1, 0, null, null, null, null, null);
+    const tView = createTView(TViewType.Root, -1, null, 1, 0, null, null, null, null, null);
     const hostLView = createLView(
         null, tView, {}, LViewFlags.CheckAlways | LViewFlags.IsRoot, null, null,
         providedRendererFactory, renderer);
@@ -270,7 +272,7 @@ export function renderTemplate<T>(
     def.directiveDefs = directives || null;
     def.pipeDefs = pipes || null;
 
-    const componentTView = getOrCreateTView(def);
+    const componentTView = getOrCreateTComponentView(def);
     const hostTNode = getOrCreateTNode(tView, hostLView[T_HOST], 0, TNodeType.Element, null, null);
     hostLView[hostTNode.index] = hostNode;
     componentView = createLView(

packages/core/test/render3/view_utils_spec.ts

@@ -8,11 +8,12 @@
 
 import {createLContainer, createLView, createTNode, createTView} from '@angular/core/src/render3/instructions/shared';
 import {isLContainer, isLView} from '@angular/core/src/render3/interfaces/type_checks';
+import {TViewType} from '@angular/core/src/render3/interfaces/view';
 
 describe('view_utils', () => {
   it('should verify unwrap methods', () => {
     const div = document.createElement('div');
-    const tView = createTView(0, null, 0, 0, null, null, null, null, null);
+    const tView = createTView(TViewType.Root, 0, null, 0, 0, null, null, null, null, null);
     const lView = createLView(null, tView, {}, 0, div, null, {} as any, {} as any, null, null);
     const tNode = createTNode(null !, null, 3, 0, 'div', []);
     const lContainer = createLContainer(lView, lView, div, tNode, true);