refactor(ivy): separate container into 2 instructions (#25509)

PR Close #25509

packages/compiler-cli/test/compliance/r3_compiler_compliance_spec.ts

@@ -648,7 +648,7 @@ describe('compiler compliance', () => {
           template: function MyComponent_Template(rf, ctx) {
             if (rf & 1) {
               $r3$.ɵelementStart(0, "ul", null, $c1$);
-              $r3$.ɵcontainer(2, MyComponent_li_Template_2, null, $c2$);
+              $r3$.ɵtemplate(2, MyComponent_li_Template_2, null, $c2$);
               $r3$.ɵelementEnd();
             }
           },
@@ -1345,7 +1345,7 @@ describe('compiler compliance', () => {
           if (rf & 1) {
             $r3$.ɵelementStart(0, "div");
             $r3$.ɵtext(1);
-            $r3$.ɵcontainer(2, MyComponent_div_span_Template_2, null, $c2$);
+            $r3$.ɵtemplate(2, MyComponent_div_span_Template_2, null, $c2$);
             $r3$.ɵelement(3, "span", null, $c4$);
             $r3$.ɵelementEnd();
           }
@@ -1366,7 +1366,7 @@ describe('compiler compliance', () => {
             if (rf & 1) {
               $r3$.ɵelement(0, "div", null, $c1$);
               $r3$.ɵtext(2);
-              $r3$.ɵcontainer(3, MyComponent_div_Template_3, null, $c2$);
+              $r3$.ɵtemplate(3, MyComponent_div_Template_3, null, $c2$);
               $r3$.ɵelement(4, "div", null, $c3$);
             }
             if (rf & 2) {
@@ -1430,7 +1430,7 @@ describe('compiler compliance', () => {
         if (rf & 1) {
           $i0$.ɵelementStart(0, "div");
           $i0$.ɵelement(1, "div", null, $c1$);
-          $i0$.ɵcontainer(3, MyComponent_div_span_Template_3, null, $c2$);
+          $i0$.ɵtemplate(3, MyComponent_div_span_Template_3, null, $c2$);
           $i0$.ɵelementEnd();
         }
         if (rf & 2) {
@@ -1442,7 +1442,7 @@ describe('compiler compliance', () => {
       // ...
       template:function MyComponent_Template(rf, ctx){
         if (rf & 1) {
-          $i0$.ɵcontainer(0, MyComponent_div_Template_0, null, $c0$);
+          $i0$.ɵtemplate(0, MyComponent_div_Template_0, null, $c0$);
         }
         if (rf & 2) {
           $i0$.ɵelementProperty(0, "ngForOf", $i0$.ɵbind(ctx.items));
@@ -1647,7 +1647,7 @@ describe('compiler compliance', () => {
                   if (rf & 1) {
                     $r3$.ɵnamespaceSVG();
                     $r3$.ɵelementStart(0,"svg");
-                    $r3$.ɵcontainer(1,MyComponent__svg_g_Template_1,null,$_c0$);
+                    $r3$.ɵtemplate(1,MyComponent__svg_g_Template_1,null,$_c0$);
                     $r3$.ɵelementEnd();
                   }
                   if (rf & 2) { $r3$.ɵelementProperty(1,"forOf",$r3$.ɵbind(ctx.items)); }
@@ -1723,7 +1723,7 @@ describe('compiler compliance', () => {
             template: function MyComponent_Template(rf, ctx) {
               if (rf & 1) {
                 $r3$.ɵelementStart(0, "ul");
-                $r3$.ɵcontainer(1, MyComponent_li_Template_1, null, $_c0$);
+                $r3$.ɵtemplate(1, MyComponent_li_Template_1, null, $_c0$);
                 $r3$.ɵelementEnd();
               }
               if (rf & 2) {
@@ -1801,7 +1801,7 @@ describe('compiler compliance', () => {
               $r3$.ɵtext(2);
               $r3$.ɵelementEnd();
               $r3$.ɵelementStart(3, "ul");
-              $r3$.ɵcontainer(4, MyComponent_li_li_Template_4, null, $c1$);
+              $r3$.ɵtemplate(4, MyComponent_li_li_Template_4, null, $c1$);
               $r3$.ɵelementEnd();
               $r3$.ɵelementEnd();
             }
@@ -1821,7 +1821,7 @@ describe('compiler compliance', () => {
             template: function MyComponent_Template(rf, ctx) {
               if (rf & 1) {
                 $r3$.ɵelementStart(0, "ul");
-                $r3$.ɵcontainer(1, MyComponent_li_Template_1, null, $c1$);
+                $r3$.ɵtemplate(1, MyComponent_li_Template_1, null, $c1$);
                 $r3$.ɵelementEnd();
               }
               if (rf & 2) {

packages/compiler-cli/test/compliance/r3_view_compiler_listener_spec.ts

@@ -112,7 +112,7 @@ describe('compiler compliance: listen()', () => {
         // ...
         template: function MyComponent_Template(rf, ctx) {
           if (rf & 1) {
-            $r3$.ɵcontainer(0, MyComponent_div_Template_0, null, $c0$);
+            $r3$.ɵtemplate(0, MyComponent_div_Template_0, null, $c0$);
           }
           if (rf & 2) {
             $i0$.ɵelementProperty(0, "ngIf", $i0$.ɵbind(ctx.showing));

packages/compiler-cli/test/compliance/r3_view_compiler_template_spec.ts

@@ -81,7 +81,7 @@ describe('compiler compliance: template', () => {
       function MyComponent_ul_li_Template_1(rf, ctx) {
         if (rf & 1) {
           $i0$.ɵelementStart(0, "li");
-          $i0$.ɵcontainer(1, MyComponent_ul_li_div_Template_1, null, _c0);
+          $i0$.ɵtemplate(1, MyComponent_ul_li_div_Template_1, null, _c0);
           $i0$.ɵelementEnd();
         }
         if (rf & 2) {
@@ -93,7 +93,7 @@ describe('compiler compliance: template', () => {
       function MyComponent_ul_Template_0(rf, ctx) {
         if (rf & 1) {
           $i0$.ɵelementStart(0, "ul");
-          $i0$.ɵcontainer(1, MyComponent_ul_li_Template_1, null, _c0);
+          $i0$.ɵtemplate(1, MyComponent_ul_li_Template_1, null, _c0);
           $i0$.ɵelementEnd();
         }
         if (rf & 2) {
@@ -104,7 +104,7 @@ describe('compiler compliance: template', () => {
       // ...
       template:function MyComponent_Template(rf, ctx){
         if (rf & 1) {
-          $i0$.ɵcontainer(0, MyComponent_ul_Template_0, null, _c0);
+          $i0$.ɵtemplate(0, MyComponent_ul_Template_0, null, _c0);
         }
         if (rf & 2) {
           $i0$.ɵelementProperty(0, "ngForOf", $i0$.ɵbind(ctx.items));
@@ -155,7 +155,7 @@ describe('compiler compliance: template', () => {
       // ...
       template:function MyComponent_Template(rf, ctx){
         if (rf & 1) {
-          $i0$.ɵcontainer(0, MyComponent_span_Template_0, null, _c0);
+          $i0$.ɵtemplate(0, MyComponent_span_Template_0, null, _c0);
         }
         if (rf & 2) {
           $i0$.ɵelementProperty(0, "ngForOf", $i0$.ɵbind(ctx.items));
@@ -211,7 +211,7 @@ describe('compiler compliance: template', () => {
       function MyComponent_div_Template_0(rf, ctx) {
         if (rf & 1) {
           $i0$.ɵelementStart(0, "div");
-          $i0$.ɵcontainer(1, MyComponent_div_span_Template_1, null, $c1$);
+          $i0$.ɵtemplate(1, MyComponent_div_span_Template_1, null, $c1$);
           $i0$.ɵelementEnd();
         }
         if (rf & 2) {
@@ -223,7 +223,7 @@ describe('compiler compliance: template', () => {
       // ...
       template:function MyComponent_Template(rf, ctx){
         if (rf & 1) {
-          $i0$.ɵcontainer(0, MyComponent_div_Template_0, null, $c0$);
+          $i0$.ɵtemplate(0, MyComponent_div_Template_0, null, $c0$);
         }
         if (rf & 2) {
           $i0$.ɵelementProperty(0, "ngForOf", $i0$.ɵbind(ctx.items));
@@ -279,7 +279,7 @@ describe('compiler compliance: template', () => {
       function MyComponent_div_div_Template_1(rf, ctx) {
         if (rf & 1) {
           $i0$.ɵelementStart(0, "div");
-          $i0$.ɵcontainer(1, MyComponent_div_div_div_Template_1, null, _c0);
+          $i0$.ɵtemplate(1, MyComponent_div_div_div_Template_1, null, _c0);
           $i0$.ɵelementEnd();
         }
         if (rf & 2) {
@@ -291,7 +291,7 @@ describe('compiler compliance: template', () => {
       function MyComponent_div_Template_0(rf, ctx) {
         if (rf & 1) {
           $i0$.ɵelementStart(0, "div");
-          $i0$.ɵcontainer(1, MyComponent_div_div_Template_1, null, _c0);
+          $i0$.ɵtemplate(1, MyComponent_div_div_Template_1, null, _c0);
           $i0$.ɵelementEnd();
         }
         if (rf & 2) {
@@ -302,7 +302,7 @@ describe('compiler compliance: template', () => {
       // ...
       template:function MyComponent_Template(rf, ctx){
         if (rf & 1) {
-          $i0$.ɵcontainer(0, MyComponent_div_Template_0, null, _c0);
+          $i0$.ɵtemplate(0, MyComponent_div_Template_0, null, _c0);
         }
         if (rf & 2) {
           $i0$.ɵelementProperty(0, "ngForOf", $i0$.ɵbind(ctx.items));
@@ -348,7 +348,7 @@ describe('compiler compliance: template', () => {
 
       template: function MyComponent_Template(rf, ctx) {
         if (rf & 1) {
-          $i0$.ɵcontainer(0, Template_0, null, $c0$);
+          $i0$.ɵtemplate(0, Template_0, null, $c0$);
         }
         if (rf & 2) {
           $i0$.ɵelementProperty(0, "boundAttr", $i0$.ɵbind(ctx.b));

packages/compiler/src/render3/r3_identifiers.ts

@@ -52,6 +52,8 @@ export class Identifiers {
 
   static nextContext: o.ExternalReference = {name: 'ɵnextContext', moduleName: CORE};
 
+  static templateCreate: o.ExternalReference = {name: 'ɵtemplate', moduleName: CORE};
+
   static text: o.ExternalReference = {name: 'ɵtext', moduleName: CORE};
 
   static textBinding: o.ExternalReference = {name: 'ɵtextBinding', moduleName: CORE};

packages/compiler/src/render3/view/template.ts

@@ -727,9 +727,8 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
       parameters.push(this.constantPool.getConstLiteral(o.literalArr(attributeNames), true));
     }
 
-    // e.g. C(1, C1Template)
+    // e.g. template(1, MyComp_Template_1)
-    this.creationInstruction(
+    this.creationInstruction(template.sourceSpan, R3.templateCreate, trimTrailingNulls(parameters));
-        template.sourceSpan, R3.containerCreate, trimTrailingNulls(parameters));
 
     // e.g. p(1, 'forOf', ɵbind(ctx.items));
     const context = o.variable(CONTEXT_NAME);

packages/core/src/core_render3_private_export.ts

@@ -94,6 +94,7 @@ export {
   elementStylingApply as ɵelementStylingApply,
   elementClassProp as ɵelementClassProp,
   textBinding as ɵtextBinding,
+  template as ɵtemplate,
   embeddedViewEnd as ɵembeddedViewEnd,
   store as ɵstore,
   load as ɵload,
@@ -157,4 +158,4 @@ export {
   bypassSanitizationTrustUrl as ɵbypassSanitizationTrustUrl,
   bypassSanitizationTrustResourceUrl as ɵbypassSanitizationTrustResourceUrl,
 } from './sanitization/bypass';
-// clang-format on
+// clang-format on

packages/core/src/render3/index.ts

@@ -73,6 +73,7 @@ export {
 
   text,
   textBinding,
+  template,
 
   reference,
 

packages/core/src/render3/instructions.ts

@@ -516,7 +516,7 @@ export function resetApplicationState() {
 /**
  *
  * @param hostNode Existing node to render into.
- * @param template Template function with the instructions.
+ * @param templateFn Template function with the instructions.
  * @param context to pass into the template.
  * @param providedRendererFactory renderer factory to use
  * @param host The host element node to use
@@ -524,14 +524,14 @@ export function resetApplicationState() {
  * @param pipes Pipe defs that should be used for matching
  */
 export function renderTemplate<T>(
-    hostNode: RElement, template: ComponentTemplate<T>, context: T,
+    hostNode: RElement, templateFn: ComponentTemplate<T>, context: T,
     providedRendererFactory: RendererFactory3, host: LElementNode | null,
     directives?: DirectiveDefListOrFactory | null, pipes?: PipeDefListOrFactory | null,
     sanitizer?: Sanitizer | null): LElementNode {
   if (host == null) {
     resetApplicationState();
     rendererFactory = providedRendererFactory;
-    const tView = getOrCreateTView(template, directives || null, pipes || null, null);
+    const tView = getOrCreateTView(templateFn, directives || null, pipes || null, null);
     host = createLNode(
         -1, TNodeType.Element, hostNode, null, null,
         createLViewData(
@@ -540,7 +540,7 @@ export function renderTemplate<T>(
   }
   const hostView = host.data !;
   ngDevMode && assertDefined(hostView, 'Host node should have an LView defined in host.data.');
-  renderComponentOrTemplate(host, hostView, context, template);
+  renderComponentOrTemplate(host, hostView, context, templateFn);
   return host;
 }
 
@@ -632,15 +632,15 @@ export function nextContext<T = any>(level: number = 1): T {
 
 export function renderComponentOrTemplate<T>(
     node: LElementNode, hostView: LViewData, componentOrContext: T,
-    template?: ComponentTemplate<T>) {
+    templateFn?: ComponentTemplate<T>) {
   const oldView = enterView(hostView, node);
   try {
     if (rendererFactory.begin) {
       rendererFactory.begin();
     }
-    if (template) {
+    if (templateFn) {
       namespaceHTML();
-      template(getRenderFlags(hostView), componentOrContext !);
+      templateFn(getRenderFlags(hostView), componentOrContext !);
       refreshDescendantViews();
     } else {
       executeInitAndContentHooks();
@@ -991,13 +991,13 @@ function saveResolvedLocalsInData(): void {
  * Gets TView from a template function or creates a new TView
  * if it doesn't already exist.
  *
- * @param template The template from which to get static data
+ * @param templateFn The template from which to get static data
  * @param directives Directive defs that should be saved on TView
  * @param pipes Pipe defs that should be saved on TView
  * @returns TView
  */
 function getOrCreateTView(
-    template: ComponentTemplate<any>, directives: DirectiveDefListOrFactory | null,
+    templateFn: ComponentTemplate<any>, directives: DirectiveDefListOrFactory | null,
     pipes: PipeDefListOrFactory | null, viewQuery: ComponentQuery<any>| null): TView {
   // TODO(misko): reading `ngPrivateData` here is problematic for two reasons
   // 1. It is a megamorphic call on each invocation.
@@ -1006,8 +1006,8 @@ function getOrCreateTView(
   // Correct solution is to only put `ngPrivateData` on the Component template
   // and not on embedded templates.
 
-  return template.ngPrivateData ||
+  return templateFn.ngPrivateData || (templateFn.ngPrivateData = createTView(
-      (template.ngPrivateData = createTView(-1, template, directives, pipes, viewQuery) as never);
+                                          -1, templateFn, directives, pipes, viewQuery) as never);
 }
 
 /**
@@ -1018,13 +1018,13 @@ function getOrCreateTView(
  * @param pipes Registry of pipes for this view
  */
 export function createTView(
-    viewIndex: number, template: ComponentTemplate<any>| null,
+    viewIndex: number, templateFn: ComponentTemplate<any>| null,
     directives: DirectiveDefListOrFactory | null, pipes: PipeDefListOrFactory | null,
     viewQuery: ComponentQuery<any>| null): TView {
   ngDevMode && ngDevMode.tView++;
   return {
     id: viewIndex,
-    template: template,
+    template: templateFn,
     viewQuery: viewQuery,
     node: null !,
     data: HEADER_FILLER.slice(),  // Fill in to match HEADER_OFFSET in LViewData
@@ -1827,19 +1827,52 @@ export function createLContainer(
 }
 
 /**
- * Creates an LContainerNode.
+ * Creates an LContainerNode for an ng-template (dynamically-inserted view), e.g.
  *
- * Only `LViewNodes` can go into `LContainerNodes`.
+ * <ng-template #foo>
+ *    <div></div>
+ * </ng-template>
  *
  * @param index The index of the container in the data array
- * @param template Optional inline template
+ * @param templateFn Inline template
  * @param tagName The name of the container element, if applicable
  * @param attrs The attrs attached to the container, if applicable
  * @param localRefs A set of local reference bindings on the element.
  */
-export function container(
+export function template(
-    index: number, template?: ComponentTemplate<any>| null, tagName?: string | null,
+    index: number, templateFn: ComponentTemplate<any>| null, tagName?: string | null,
-    attrs?: TAttributes | null, localRefs?: string[] | null): void {
+    attrs?: TAttributes | null, localRefs?: string[] | null) {
+  // TODO: consider a separate node type for templates
+  const node = containerInternal(index, tagName || null, attrs || null, localRefs || null);
+  if (firstTemplatePass) {
+    node.tNode.tViews =
+        createTView(-1, templateFn, tView.directiveRegistry, tView.pipeRegistry, null);
+  }
+
+  createDirectivesAndLocals(localRefs);
+  currentQueries && (currentQueries = currentQueries.addNode(node));
+  queueLifecycleHooks(node.tNode.flags, tView);
+  isParent = false;
+}
+
+/**
+ * Creates an LContainerNode for inline views, e.g.
+ *
+ * % if (showing) {
+ *   <div></div>
+ * % }
+ *
+ * @param index The index of the container in the data array
+ */
+export function container(index: number): void {
+  const node = containerInternal(index, null, null, null);
+  firstTemplatePass && (node.tNode.tViews = []);
+  isParent = false;
+}
+
+function containerInternal(
+    index: number, tagName: string | null, attrs: TAttributes | null,
+    localRefs: string[] | null): LContainerNode {
   ngDevMode &&
       assertEqual(
           viewData[BINDING_INDEX], -1, 'container nodes should be created before any bindings');
@@ -1849,16 +1882,9 @@ export function container(
 
   ngDevMode && ngDevMode.rendererCreateComment++;
   const comment = renderer.createComment(ngDevMode ? 'container' : '');
-  const node =
+  const node = createLNode(index, TNodeType.Container, comment, tagName, attrs, lContainer);
-      createLNode(index, TNodeType.Container, comment, tagName || null, attrs || null, lContainer);
   appendChild(getParentLNode(node), comment, viewData);
 
-  if (firstTemplatePass) {
-    node.tNode.tViews = template ?
-        createTView(-1, template, tView.directiveRegistry, tView.pipeRegistry, null) :
-        [];
-  }
-
   // Containers are added to the current view tree instead of their embedded views
   // because views can be removed and re-inserted.
   addToViewTree(viewData, index + HEADER_OFFSET, node.data);
@@ -1868,13 +1894,8 @@ export function container(
     lContainer[QUERIES] = currentQueries.container();
   }
 
-  createDirectivesAndLocals(localRefs);
-
-  isParent = false;
   ngDevMode && assertNodeType(previousOrParentNode, TNodeType.Container);
-  // check if a given container node matches
+  return node;
-  currentQueries && (currentQueries = currentQueries.addNode(node));
-  queueLifecycleHooks(node.tNode.flags, tView);
 }
 
 /**
@@ -2409,13 +2430,13 @@ export function detectChangesInternal<T>(
     hostView: LViewData, hostNode: LElementNode, component: T) {
   const oldView = enterView(hostView, hostNode);
   const hostTView = hostView[TVIEW];
-  const template = hostTView.template !;
+  const templateFn = hostTView.template !;
   const viewQuery = hostTView.viewQuery;
 
   try {
     namespaceHTML();
     createViewQuery(viewQuery, hostView[FLAGS], component);
-    template(getRenderFlags(hostView), component);
+    templateFn(getRenderFlags(hostView), component);
     refreshDescendantViews();
     updateViewQuery(viewQuery, component);
   } finally {

packages/core/src/render3/jit/environment.ts

@@ -95,6 +95,7 @@ export const angularCoreEnv: {[name: string]: Function} = {
   'ɵelementStylingMap': r3.elementStylingMap,
   'ɵelementStylingProp': r3.elementStyleProp,
   'ɵelementStylingApply': r3.elementStylingApply,
+  'ɵtemplate': r3.template,
   'ɵtext': r3.text,
   'ɵtextBinding': r3.textBinding,
   'ɵembeddedViewStart': r3.embeddedViewStart,

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

@@ -369,7 +369,7 @@
     "name": "componentRefresh"
   },
   {
-    "name": "container"
+    "name": "containerInternal"
   },
   {
     "name": "contextViewData"
@@ -896,6 +896,9 @@
   {
     "name": "stringify$2"
   },
+  {
+    "name": "template"
+  },
   {
     "name": "text"
   },

packages/core/test/render3/common_integration_spec.ts

@@ -10,7 +10,7 @@ import {NgForOfContext} from '@angular/common';
 
 import {getOrCreateNodeInjectorForNode, getOrCreateTemplateRef} from '../../src/render3/di';
 import {AttributeMarker, defineComponent} from '../../src/render3/index';
-import {bind, container, elementEnd, elementProperty, elementStart, getCurrentView, interpolation1, interpolation2, interpolation3, interpolationV, listener, load, nextContext, restoreView, text, textBinding} from '../../src/render3/instructions';
+import {bind, template, elementEnd, elementProperty, elementStart, getCurrentView, interpolation1, interpolation2, interpolation3, interpolationV, listener, load, nextContext, restoreView, text, textBinding} from '../../src/render3/instructions';
 import {RenderFlags} from '../../src/render3/interfaces/definition';
 
 import {NgForOf, NgIf, NgTemplateOutlet} from './common_with_def';
@@ -45,7 +45,7 @@ describe('@angular/common integration', () => {
           template: (rf: RenderFlags, ctx: MyApp) => {
             if (rf & RenderFlags.Create) {
               elementStart(0, 'ul');
-              { container(1, liTemplate, undefined, ['ngForOf', '']); }
+              { template(1, liTemplate, undefined, ['ngForOf', '']); }
               elementEnd();
             }
             if (rf & RenderFlags.Update) {
@@ -106,7 +106,7 @@ describe('@angular/common integration', () => {
           template: (rf: RenderFlags, ctx: MyApp) => {
             if (rf & RenderFlags.Create) {
               elementStart(0, 'ul');
-              { container(1, liTemplate, undefined, ['ngForOf', '']); }
+              { template(1, liTemplate, undefined, ['ngForOf', '']); }
               elementEnd();
             }
             if (rf & RenderFlags.Update) {
@@ -171,7 +171,7 @@ describe('@angular/common integration', () => {
               }
               elementEnd();
               elementStart(2, 'ul');
-              { container(3, liTemplate, undefined, ['ngForOf', '']); }
+              { template(3, liTemplate, undefined, ['ngForOf', '']); }
               elementEnd();
             }
             if (rf & RenderFlags.Update) {
@@ -224,7 +224,7 @@ describe('@angular/common integration', () => {
           template: (rf: RenderFlags, ctx: MyApp) => {
             if (rf & RenderFlags.Create) {
               elementStart(0, 'ul');
-              { container(1, liTemplate, null, ['ngForOf', '']); }
+              { template(1, liTemplate, null, ['ngForOf', '']); }
               elementEnd();
             }
             if (rf & RenderFlags.Update) {
@@ -239,7 +239,7 @@ describe('@angular/common integration', () => {
       function liTemplate(rf: RenderFlags, ctx: any) {
         if (rf & RenderFlags.Create) {
           elementStart(0, 'li');
-          { container(1, spanTemplate, null, ['ngForOf', '']); }
+          { template(1, spanTemplate, null, ['ngForOf', '']); }
           elementEnd();
         }
         if (rf & RenderFlags.Update) {
@@ -312,7 +312,7 @@ describe('@angular/common integration', () => {
           selectors: [['my-app']],
           template: (rf: RenderFlags, ctx: MyApp) => {
             if (rf & RenderFlags.Create) {
-              container(0, divTemplate, null, ['ngForOf', '']);
+              template(0, divTemplate, null, ['ngForOf', '']);
             }
             if (rf & RenderFlags.Update) {
               elementProperty(0, 'ngForOf', bind(ctx.items));
@@ -326,7 +326,7 @@ describe('@angular/common integration', () => {
       function divTemplate(rf: RenderFlags, ctx: any) {
         if (rf & RenderFlags.Create) {
           elementStart(0, 'div');
-          { container(1, pTemplate, null, ['ngForOf', '']); }
+          { template(1, pTemplate, null, ['ngForOf', '']); }
           elementEnd();
         }
         if (rf & RenderFlags.Update) {
@@ -404,7 +404,7 @@ describe('@angular/common integration', () => {
           selectors: [['my-app']],
           template: (rf: RenderFlags, ctx: MyApp) => {
             if (rf & RenderFlags.Create) {
-              container(0, divTemplate, null, ['ngForOf', '']);
+              template(0, divTemplate, null, ['ngForOf', '']);
             }
             if (rf & RenderFlags.Update) {
               elementProperty(0, 'ngForOf', bind(ctx.items));
@@ -418,7 +418,7 @@ describe('@angular/common integration', () => {
       function divTemplate(rf: RenderFlags, ctx: any) {
         if (rf & RenderFlags.Create) {
           elementStart(0, 'div');
-          { container(1, innerDivTemplate, null, ['ngForOf', '']); }
+          { template(1, innerDivTemplate, null, ['ngForOf', '']); }
           elementEnd();
         }
         if (rf & RenderFlags.Update) {
@@ -430,7 +430,7 @@ describe('@angular/common integration', () => {
       function innerDivTemplate(rf: RenderFlags, ctx: any) {
         if (rf & RenderFlags.Create) {
           elementStart(0, 'div');
-          { container(1, spanTemplate, null, ['ngForOf', '']); }
+          { template(1, spanTemplate, null, ['ngForOf', '']); }
           elementEnd();
         }
         if (rf & RenderFlags.Update) {
@@ -570,7 +570,7 @@ describe('@angular/common integration', () => {
           selectors: [['my-app']],
           template: (rf: RenderFlags, ctx: MyApp) => {
             if (rf & RenderFlags.Create) {
-              container(0, itemTemplate0, null, ['ngForOf', '']);
+              template(0, itemTemplate0, null, ['ngForOf', '']);
             }
             if (rf & RenderFlags.Update) {
               elementProperty(0, 'ngForOf', bind(ctx.items));
@@ -584,7 +584,7 @@ describe('@angular/common integration', () => {
       function itemTemplate0(rf: RenderFlags, ctx: any) {
         if (rf & RenderFlags.Create) {
           elementStart(0, 'span');
-          { container(1, itemTemplate1, null, ['ngForOf', '']); }
+          { template(1, itemTemplate1, null, ['ngForOf', '']); }
           elementEnd();
         }
         if (rf & RenderFlags.Update) {
@@ -596,7 +596,7 @@ describe('@angular/common integration', () => {
       function itemTemplate1(rf: RenderFlags, ctx: any) {
         if (rf & RenderFlags.Create) {
           elementStart(0, 'span');
-          { container(1, itemTemplate2, null, ['ngForOf', '']); }
+          { template(1, itemTemplate2, null, ['ngForOf', '']); }
           elementEnd();
         }
         if (rf & RenderFlags.Update) {
@@ -608,7 +608,7 @@ describe('@angular/common integration', () => {
       function itemTemplate2(rf: RenderFlags, ctx: any) {
         if (rf & RenderFlags.Create) {
           elementStart(0, 'span');
-          { container(1, itemTemplate3, null, ['ngForOf', '']); }
+          { template(1, itemTemplate3, null, ['ngForOf', '']); }
           elementEnd();
         }
         if (rf & RenderFlags.Update) {
@@ -620,7 +620,7 @@ describe('@angular/common integration', () => {
       function itemTemplate3(rf: RenderFlags, ctx: any) {
         if (rf & RenderFlags.Create) {
           elementStart(0, 'span');
-          { container(1, itemTemplate4, null, ['ngForOf', '']); }
+          { template(1, itemTemplate4, null, ['ngForOf', '']); }
           elementEnd();
         }
         if (rf & RenderFlags.Update) {
@@ -632,7 +632,7 @@ describe('@angular/common integration', () => {
       function itemTemplate4(rf: RenderFlags, ctx: any) {
         if (rf & RenderFlags.Create) {
           elementStart(0, 'span');
-          { container(1, itemTemplate5, null, ['ngForOf', '']); }
+          { template(1, itemTemplate5, null, ['ngForOf', '']); }
           elementEnd();
         }
         if (rf & RenderFlags.Update) {
@@ -644,7 +644,7 @@ describe('@angular/common integration', () => {
       function itemTemplate5(rf: RenderFlags, ctx: any) {
         if (rf & RenderFlags.Create) {
           elementStart(0, 'span');
-          { container(1, itemTemplate6, null, ['ngForOf', '']); }
+          { template(1, itemTemplate6, null, ['ngForOf', '']); }
           elementEnd();
         }
         if (rf & RenderFlags.Update) {
@@ -656,7 +656,7 @@ describe('@angular/common integration', () => {
       function itemTemplate6(rf: RenderFlags, ctx: any) {
         if (rf & RenderFlags.Create) {
           elementStart(0, 'span');
-          { container(1, itemTemplate7, null, ['ngForOf', '']); }
+          { template(1, itemTemplate7, null, ['ngForOf', '']); }
           elementEnd();
         }
         if (rf & RenderFlags.Update) {
@@ -668,7 +668,7 @@ describe('@angular/common integration', () => {
       function itemTemplate7(rf: RenderFlags, ctx: any) {
         if (rf & RenderFlags.Create) {
           elementStart(0, 'span');
-          { container(1, itemTemplate8, null, ['ngForOf', '']); }
+          { template(1, itemTemplate8, null, ['ngForOf', '']); }
           elementEnd();
         }
         if (rf & RenderFlags.Update) {
@@ -736,8 +736,8 @@ describe('@angular/common integration', () => {
            */
           template: (rf: RenderFlags, ctx: MyApp) => {
             if (rf & RenderFlags.Create) {
-              container(0, templateOne, undefined, ['ngIf', '']);
+              template(0, templateOne, undefined, ['ngIf', '']);
-              container(1, templateTwo, undefined, ['ngIf', '']);
+              template(1, templateTwo, undefined, ['ngIf', '']);
             }
             if (rf & RenderFlags.Update) {
               elementProperty(0, 'ngIf', bind(ctx.showing));
@@ -804,7 +804,7 @@ describe('@angular/common integration', () => {
           selectors: [['my-app']],
           template: (rf: RenderFlags, ctx: AppComponent) => {
             if (rf & RenderFlags.Create) {
-              container(0, divTemplate, undefined, ['ngIf', '']);
+              template(0, divTemplate, undefined, ['ngIf', '']);
             }
             if (rf & RenderFlags.Update) {
               elementProperty(0, 'ngIf', bind(ctx.showing));
@@ -818,7 +818,7 @@ describe('@angular/common integration', () => {
       function divTemplate(rf: RenderFlags, ctx: any) {
         if (rf & RenderFlags.Create) {
           elementStart(0, 'div');
-          { container(1, outerDivTemplate, undefined, ['ngIf', '']); }
+          { template(1, outerDivTemplate, undefined, ['ngIf', '']); }
           elementEnd();
         }
         if (rf & RenderFlags.Update) {
@@ -830,7 +830,7 @@ describe('@angular/common integration', () => {
       function outerDivTemplate(rf: RenderFlags, ctx: any) {
         if (rf & RenderFlags.Create) {
           elementStart(0, 'div');
-          { container(1, innerDivTemplate, undefined, ['ngIf', '']); }
+          { template(1, innerDivTemplate, undefined, ['ngIf', '']); }
           elementEnd();
         }
         if (rf & RenderFlags.Update) {
@@ -877,12 +877,12 @@ describe('@angular/common integration', () => {
            */
           template: (rf: RenderFlags, myApp: MyApp) => {
             if (rf & RenderFlags.Create) {
-              container(0, (rf1: RenderFlags) => {
+              template(0, (rf1: RenderFlags) => {
                 if (rf1 & RenderFlags.Create) {
                   text(0, 'from tpl');
                 }
               }, undefined, undefined, ['tpl', '']);
-              container(2, undefined, null, [AttributeMarker.SelectOnly, 'ngTemplateOutlet']);
+              template(2, null, null, [AttributeMarker.SelectOnly, 'ngTemplateOutlet']);
             }
             if (rf & RenderFlags.Update) {
               const tplRef = getOrCreateTemplateRef(getOrCreateNodeInjectorForNode(load(0)));

packages/core/test/render3/compiler_canonical/component_directives_spec.ts

@@ -351,6 +351,19 @@ describe('components & directives', () => {
   xit('should support structural directives', () => {
     type $MyComponent$ = MyComponent;
 
+    function C1(rf1: $RenderFlags$, ctx1: $any$) {
+      if (rf1 & 1) {
+        $r3$.ɵelementStart(0, 'li');
+        $r3$.ɵtext(1);
+        $r3$.ɵelementEnd();
+      }
+      if (rf1 & 2) {
+        const $comp$ = $r3$.ɵnextContext();
+        const $foo$ = $r3$.ɵreference(1);
+        $r3$.ɵtextBinding(1, $r3$.ɵinterpolation2('', $comp$.salutation, ' ', $foo$, ''));
+      }
+    }
+
     const log: string[] = [];
     @Directive({
       selector: '[if]',
@@ -383,25 +396,9 @@ describe('components & directives', () => {
         template: function(rf: $RenderFlags$, ctx: $MyComponent$) {
           if (rf & 1) {
             $r3$.ɵelementStart(0, 'ul', null, $e0_locals$);
-            $r3$.ɵcontainer(2, C1, '', ['if', '']);
+            $r3$.ɵtemplate(2, C1, '', ['if', '']);
             $r3$.ɵelementEnd();
           }
-          let $foo$ = $r3$.ɵload<any>(1);
-          if (rf & 2) {
-            $r3$.ɵcontainerRefreshStart(2);
-            $r3$.ɵcontainerRefreshEnd();
-          }
-
-          function C1(rf1: $RenderFlags$, ctx1: $any$) {
-            if (rf1 & 1) {
-              $r3$.ɵelementStart(0, 'li');
-              $r3$.ɵtext(1);
-              $r3$.ɵelementEnd();
-            }
-            if (rf1 & 2) {
-              $r3$.ɵtextBinding(1, $r3$.ɵinterpolation2('', ctx.salutation, ' ', $foo$, ''));
-            }
-          }
         }
       });
       // /NORMATIVE

packages/core/test/render3/compiler_canonical/i18n_spec.ts

@@ -112,7 +112,7 @@ describe('i18n', () => {
         template: (rf: $RenderFlags$, myApp: $MyApp$) => {
           if (rf & 1) {
             $r3$.ɵelementStart(0, 'ul');
-            $r3$.ɵcontainer(1, liTemplate, null, ['ngForOf', '']);
+            $r3$.ɵtemplate(1, liTemplate, null, ['ngForOf', '']);
             $r3$.ɵelementEnd();
             $r3$.ɵi18nApply(1, $i18n_1$[0]);
           }

packages/core/test/render3/compiler_canonical/pipes_spec.ts

@@ -170,7 +170,7 @@ describe('pipes', () => {
             $r3$.ɵpipe(1, 'myPurePipe');
             $r3$.ɵtext(2);
             $r3$.ɵpipe(3, 'myPurePipe');
-            $r3$.ɵcontainer(4, C4, '', ['oneTimeIf', '']);
+            $r3$.ɵtemplate(4, C4, '', ['oneTimeIf', '']);
             $r3$.ɵreserveSlots(6);
           }
           if (rf & 2) {

packages/core/test/render3/compiler_canonical/small_app_spec.ts

@@ -81,7 +81,7 @@ class ToDoAppComponent {
         r3.text(1, 'ToDo Application');
         r3.elementEnd();
         r3.elementStart(2, 'div');
-        r3.container(3, ToDoAppComponent_NgForOf_Template, '', ['ngForOf', '']);
+        r3.template(3, ToDoAppComponent_NgForOf_Template, '', ['ngForOf', '']);
         r3.elementEnd();
         r3.elementStart(4, 'span');
         r3.text(5);

packages/core/test/render3/compiler_canonical/template_variables_spec.ts

@@ -100,7 +100,7 @@ describe('template variables', () => {
         template: function MyComponent_Template(rf: $RenderFlags$, ctx: $MyComponent$) {
           if (rf & 1) {
             $r3$.ɵelementStart(0, 'ul');
-            $r3$.ɵcontainer(1, MyComponent_ForOfDirective_Template_1, '', ['forOf', '']);
+            $r3$.ɵtemplate(1, MyComponent_ForOfDirective_Template_1, '', ['forOf', '']);
             $r3$.ɵelementEnd();
           }
           if (rf & 2) {
@@ -174,7 +174,7 @@ describe('template variables', () => {
         template: function MyComponent_Template(rf: $RenderFlags$, ctx: $MyComponent$) {
           if (rf & 1) {
             $r3$.ɵelementStart(0, 'ul');
-            $r3$.ɵcontainer(1, MyComponent_ForOfDirective_Template_1, '', ['forOf', '']);
+            $r3$.ɵtemplate(1, MyComponent_ForOfDirective_Template_1, '', ['forOf', '']);
             $r3$.ɵelementEnd();
           }
           if (rf & 2) {
@@ -190,7 +190,7 @@ describe('template variables', () => {
               $r3$.ɵtext(2);
               $r3$.ɵelementEnd();
               $r3$.ɵelementStart(3, 'ul');
-              $r3$.ɵcontainer(
+              $r3$.ɵtemplate(
                   4, MyComponent_ForOfDirective_ForOfDirective_Template_3, '', ['forOf', '']);
               $r3$.ɵelementEnd();
               $r3$.ɵelementEnd();

packages/core/test/render3/component_spec.ts

@@ -9,7 +9,7 @@
 
 import {DoCheck, Input, TemplateRef, ViewContainerRef, ViewEncapsulation, createInjector, defineInjectable, defineInjector} from '../../src/core';
 import {getRenderedText} from '../../src/render3/component';
-import {AttributeMarker, ComponentFactory, LifecycleHooksFeature, defineComponent, directiveInject, markDirty} from '../../src/render3/index';
+import {AttributeMarker, ComponentFactory, LifecycleHooksFeature, defineComponent, directiveInject, markDirty, template} from '../../src/render3/index';
 import {bind, container, containerRefreshEnd, containerRefreshStart, element, elementEnd, elementProperty, elementStart, embeddedViewEnd, embeddedViewStart, nextContext, text, textBinding, tick} from '../../src/render3/instructions';
 import {ComponentDefInternal, DirectiveDefInternal, RenderFlags} from '../../src/render3/interfaces/definition';
 import {createRendererType2} from '../../src/view/index';
@@ -383,8 +383,8 @@ describe('recursive components', () => {
 
         if (rf & RenderFlags.Create) {
           text(0);
-          container(1, IfTemplate, '', [AttributeMarker.SelectOnly, 'ngIf']);
+          template(1, IfTemplate, '', [AttributeMarker.SelectOnly, 'ngIf']);
-          container(2, IfTemplate2, '', [AttributeMarker.SelectOnly, 'ngIf']);
+          template(2, IfTemplate2, '', [AttributeMarker.SelectOnly, 'ngIf']);
         }
         if (rf & RenderFlags.Update) {
           textBinding(0, bind(ctx.data.value));

packages/core/test/render3/content_spec.ts

@@ -12,7 +12,7 @@ import {Input, TemplateRef, ViewContainerRef, ViewRef} from '../../src/core';
 import {defineDirective} from '../../src/render3/definition';
 import {injectTemplateRef, injectViewContainerRef} from '../../src/render3/di';
 import {AttributeMarker, detectChanges} from '../../src/render3/index';
-import {bind, container, containerRefreshEnd, containerRefreshStart, element, elementContainerEnd, elementContainerStart, elementEnd, elementProperty, elementStart, embeddedViewEnd, embeddedViewStart, loadDirective, projection, projectionDef, text} from '../../src/render3/instructions';
+import {bind, container, containerRefreshEnd, containerRefreshStart, element, elementContainerEnd, elementContainerStart, elementEnd, elementProperty, elementStart, embeddedViewEnd, embeddedViewStart, loadDirective, projection, projectionDef, template, text} from '../../src/render3/instructions';
 import {RenderFlags} from '../../src/render3/interfaces/definition';
 
 import {NgIf} from './common_with_def';
@@ -816,7 +816,7 @@ describe('content projection', () => {
       if (rf & RenderFlags.Create) {
         projectionDef();
         text(0, 'Before-');
-        container(1, IfTemplate, '', [AttributeMarker.SelectOnly, 'ngIf']);
+        template(1, IfTemplate, '', [AttributeMarker.SelectOnly, 'ngIf']);
         text(2, '-After');
       }
       if (rf & RenderFlags.Update) {
@@ -881,7 +881,7 @@ describe('content projection', () => {
       if (rf & RenderFlags.Create) {
         projectionDef();
         text(0, 'Before-');
-        container(1, IfTemplate, '', [AttributeMarker.SelectOnly, 'ngIf']);
+        template(1, IfTemplate, '', [AttributeMarker.SelectOnly, 'ngIf']);
         text(2, '-After');
       }
       if (rf & RenderFlags.Update) {
@@ -1805,35 +1805,35 @@ describe('content projection', () => {
         }
       });
 
+      function IfTemplate(rf: RenderFlags, ctx: any) {
+        if (rf & RenderFlags.Create) {
+          elementStart(0, 'div');
+          { text(1, 'content'); }
+          elementEnd();
+        }
+      }
+
       /**
        * <child>
-       *   <div *ngIf="true">content</div>
+       *    <div *ngIf="value">content</div>
        * </child>
        */
       const Parent = createComponent('parent', function(rf: RenderFlags, ctx: {value: any}) {
         if (rf & RenderFlags.Create) {
           elementStart(0, 'child');
-          { container(1, undefined, 'div'); }
+          { template(1, IfTemplate, 'div', [AttributeMarker.SelectOnly, 'ngIf']); }
           elementEnd();
         }
         if (rf & RenderFlags.Update) {
-          containerRefreshStart(1);
+          elementProperty(1, 'ngIf', bind(ctx.value));
-          {
-            if (true) {
-              let rf0 = embeddedViewStart(0);
-              if (rf0 & RenderFlags.Create) {
-                elementStart(0, 'div');
-                { text(1, 'content'); }
-                elementEnd();
-              }
-              embeddedViewEnd();
-            }
-          }
-          containerRefreshEnd();
         }
-      }, [Child]);
+      }, [Child, NgIf]);
-      const parent = renderComponent(Parent);
+
-      expect(toHtml(parent)).toEqual('<child><span><div>content</div></span></child>');
+
+      const fixture = new ComponentFixture(Parent);
+      fixture.component.value = true;
+      fixture.update();
+      expect(fixture.html).toEqual('<child><span><div>content</div></span></child>');
     });
 
   });

packages/core/test/render3/di_spec.ts

@@ -12,7 +12,7 @@ import {RenderFlags} from '@angular/core/src/render3/interfaces/definition';
 import {defineComponent} from '../../src/render3/definition';
 import {bloomAdd, bloomFindPossibleInjector, getOrCreateNodeInjector, injectAttribute} from '../../src/render3/di';
 import {NgOnChangesFeature, PublicFeature, defineDirective, directiveInject, injectChangeDetectorRef, injectElementRef, injectTemplateRef, injectViewContainerRef} from '../../src/render3/index';
-import {bind, container, containerRefreshEnd, containerRefreshStart, createLNode, createLViewData, createTView, element, elementEnd, elementStart, embeddedViewEnd, embeddedViewStart, enterView, interpolation2, leaveView, projection, projectionDef, reference, text, textBinding} from '../../src/render3/instructions';
+import {bind, container, containerRefreshEnd, containerRefreshStart, createLNode, createLViewData, createTView, element, elementEnd, elementStart, embeddedViewEnd, embeddedViewStart, enterView, interpolation2, leaveView, projection, projectionDef, reference, template, text, textBinding} from '../../src/render3/instructions';
 import {LInjector} from '../../src/render3/interfaces/injector';
 import {AttributeMarker, TNodeType} from '../../src/render3/interfaces/node';
 import {LViewFlags} from '../../src/render3/interfaces/view';
@@ -862,7 +862,7 @@ describe('di', () => {
        */
       function Template(rf: RenderFlags, ctx: any) {
         if (rf & RenderFlags.Create) {
-          container(0, function() {
+          template(0, function() {
           }, undefined, ['dir', '', 'dirSame', ''], ['dir', 'dir', 'dirSame', 'dirSame']);
           text(3);
         }
@@ -1159,7 +1159,7 @@ describe('di', () => {
           /** <div *myIf="showing" dir dirSameInstance #dir="dir"> {{ dir.value }} </div> */
           template: function(rf: RenderFlags, ctx: MyApp) {
             if (rf & RenderFlags.Create) {
-              container(0, C1, null, ['myIf', 'showing']);
+              template(0, C1, null, ['myIf', 'showing']);
             }
             if (rf & RenderFlags.Update) {
               containerRefreshStart(0);

packages/core/test/render3/exports_spec.ts

@@ -7,7 +7,7 @@
  */
 
 import {AttributeMarker, defineComponent, defineDirective} from '../../src/render3/index';
-import {bind, container, containerRefreshEnd, containerRefreshStart, element, elementAttribute, elementClassProp, elementEnd, elementProperty, elementStart, elementStyling, elementStylingApply, embeddedViewEnd, embeddedViewStart, interpolation2, nextContext, reference, text, textBinding} from '../../src/render3/instructions';
+import {bind, container, containerRefreshEnd, containerRefreshStart, element, elementAttribute, elementClassProp, elementEnd, elementProperty, elementStart, elementStyling, elementStylingApply, embeddedViewEnd, embeddedViewStart, interpolation2, nextContext, reference, template, text, textBinding} from '../../src/render3/instructions';
 import {InitialStylingFlags, RenderFlags} from '../../src/render3/interfaces/definition';
 
 import {NgIf} from './common_with_def';
@@ -348,7 +348,7 @@ describe('exports', () => {
         if (rf & RenderFlags.Create) {
           elementStart(0, 'input', ['value', 'one'], ['outerInput', '']);
           elementEnd();
-          container(2, outerTemplate, '', [AttributeMarker.SelectOnly, 'ngIf']);
+          template(2, outerTemplate, '', [AttributeMarker.SelectOnly, 'ngIf']);
         }
         if (rf & RenderFlags.Update) {
           elementProperty(2, 'ngIf', bind(app.outer));
@@ -362,7 +362,7 @@ describe('exports', () => {
             text(1);
             elementStart(2, 'input', ['value', 'two'], ['innerInput', '']);
             elementEnd();
-            container(4, innerTemplate, '', [AttributeMarker.SelectOnly, 'ngIf']);
+            template(4, innerTemplate, '', [AttributeMarker.SelectOnly, 'ngIf']);
           }
           elementEnd();
         }

packages/core/test/render3/i18n_spec.ts

@@ -10,7 +10,7 @@ import {NgForOfContext} from '@angular/common';
 import {Component} from '../../src/core';
 import {defineComponent} from '../../src/render3/definition';
 import {I18nExpInstruction, I18nInstruction, i18nApply, i18nExpMapping, i18nInterpolation1, i18nInterpolation2, i18nInterpolation3, i18nInterpolation4, i18nInterpolation5, i18nInterpolation6, i18nInterpolation7, i18nInterpolation8, i18nInterpolationV, i18nMapping} from '../../src/render3/i18n';
-import {bind, container, containerRefreshEnd, containerRefreshStart, element, elementEnd, elementProperty, elementStart, embeddedViewEnd, embeddedViewStart, projection, projectionDef, text, textBinding} from '../../src/render3/instructions';
+import {bind, container, containerRefreshEnd, containerRefreshStart, element, elementEnd, elementProperty, elementStart, embeddedViewEnd, embeddedViewStart, projection, projectionDef, template, text, textBinding} from '../../src/render3/instructions';
 import {RenderFlags} from '../../src/render3/interfaces/definition';
 import {NgForOf} from './common_with_def';
 import {ComponentFixture, TemplateFixture} from './render_util';
@@ -558,7 +558,7 @@ describe('Runtime i18n', () => {
               elementStart(0, 'ul');
               {
                 // Start of translated section 1
-                container(1, liTemplate, null, ['ngForOf', '']);  // START_LI
+                template(1, liTemplate, null, ['ngForOf', '']);  // START_LI
                 // End of translated section 1
               }
               elementEnd();
@@ -645,8 +645,8 @@ describe('Runtime i18n', () => {
               elementStart(0, 'ul');
               {
                 // Start of translated section 1
-                container(1, liTemplate, null, ['ngForOf', '']);     // START_LI_0
+                template(1, liTemplate, null, ['ngForOf', '']);     // START_LI_0
-                container(2, liTemplateBis, null, ['ngForOf', '']);  // START_LI_1
+                template(2, liTemplateBis, null, ['ngForOf', '']);  // START_LI_1
                 // End of translated section 1
               }
               elementEnd();
@@ -755,8 +755,8 @@ describe('Runtime i18n', () => {
               elementStart(0, 'ul');
               {
                 // Start of translated section 1
-                container(1, liTemplate, null, ['ngForOf', '']);     // START_LI_0
+                template(1, liTemplate, null, ['ngForOf', '']);     // START_LI_0
-                container(2, liTemplateBis, null, ['ngForOf', '']);  // START_LI_1
+                template(2, liTemplateBis, null, ['ngForOf', '']);  // START_LI_1
                 // End of translated section 1
               }
               elementEnd();
@@ -866,7 +866,7 @@ describe('Runtime i18n', () => {
               elementStart(0, 'ul');
               {
                 // Start of translated section 1
-                container(1, liTemplate, null, ['ngForOf', '']);  // START_LI
+                template(1, liTemplate, null, ['ngForOf', '']);  // START_LI
                 // End of translated section 1
               }
               elementEnd();
@@ -882,7 +882,7 @@ describe('Runtime i18n', () => {
                 // Start of translated section 2
                 elementStart(0, 'li');  // START_LI
                 {
-                  container(1, spanTemplate, null, ['ngForOf', '']);  // START_SPAN
+                  template(1, spanTemplate, null, ['ngForOf', '']);  // START_SPAN
                 }
                 elementEnd();
                 // End of translated section 2
@@ -979,9 +979,9 @@ describe('Runtime i18n', () => {
               elementStart(0, 'ul');
               {
                 // Start of translated section 1
-                element(1, 'li');                                 // START_LI_0
+                element(1, 'li');                                // START_LI_0
-                container(2, liTemplate, null, ['ngForOf', '']);  // START_LI_1
+                template(2, liTemplate, null, ['ngForOf', '']);  // START_LI_1
-                elementStart(3, 'li');                            // START_LI_2
+                elementStart(3, 'li');                           // START_LI_2
                 { text(4, 'delete me'); }
                 elementEnd();
                 // End of translated section 1
@@ -1070,7 +1070,7 @@ describe('Runtime i18n', () => {
               elementStart(0, 'ul');
               {
                 // Start of translated section 1
-                container(1, liTemplate, undefined, ['ngForOf', '']);  // START_LI
+                template(1, liTemplate, undefined, ['ngForOf', '']);  // START_LI
                 // End of translated section 1
               }
               elementEnd();

packages/core/test/render3/instructions_spec.ts

@@ -10,7 +10,7 @@ import {NgForOfContext} from '@angular/common';
 
 import {RenderFlags, directiveInject} from '../../src/render3';
 import {defineComponent} from '../../src/render3/definition';
-import {bind, container, element, elementAttribute, elementEnd, elementProperty, elementStart, elementStyleProp, elementStyling, elementStylingApply, elementStylingMap, interpolation1, renderTemplate, text, textBinding} from '../../src/render3/instructions';
+import {bind, element, elementAttribute, elementEnd, elementProperty, elementStart, elementStyleProp, elementStyling, elementStylingApply, elementStylingMap, interpolation1, renderTemplate, template, text, textBinding} from '../../src/render3/instructions';
 import {InitialStylingFlags} from '../../src/render3/interfaces/definition';
 import {AttributeMarker, LElementNode, LNode} from '../../src/render3/interfaces/node';
 import {RElement, domRendererFactory3} from '../../src/render3/interfaces/renderer';
@@ -306,7 +306,7 @@ describe('instructions', () => {
           factory: function ToDoAppComponent_Factory() { return new NestedLoops(); },
           template: function ToDoAppComponent_Template(rf: RenderFlags, ctx: NestedLoops) {
             if (rf & RenderFlags.Create) {
-              container(0, ToDoAppComponent_NgForOf_Template_0, null, _c0);
+              template(0, ToDoAppComponent_NgForOf_Template_0, null, _c0);
             }
             if (rf & RenderFlags.Update) {
               elementProperty(0, 'ngForOf', bind(ctx.rows));
@@ -315,7 +315,7 @@ describe('instructions', () => {
                 rf: RenderFlags, ctx0: NgForOfContext<any>) {
               if (rf & RenderFlags.Create) {
                 elementStart(0, 'ul');
-                container(1, ToDoAppComponent_NgForOf_NgForOf_Template_1, null, _c0);
+                template(1, ToDoAppComponent_NgForOf_NgForOf_Template_1, null, _c0);
                 elementEnd();
               }
               if (rf & RenderFlags.Update) {

packages/core/test/render3/integration_spec.ts

@@ -11,7 +11,7 @@ import {RenderFlags} from '@angular/core/src/render3';
 
 import {getOrCreateNodeInjectorForNode, getOrCreateTemplateRef} from '../../src/render3/di';
 import {AttributeMarker, defineComponent, defineDirective, injectElementRef, injectTemplateRef, injectViewContainerRef} from '../../src/render3/index';
-import {NO_CHANGE, bind, container, containerRefreshEnd, containerRefreshStart, element, elementAttribute, elementClassProp, elementContainerEnd, elementContainerStart, elementEnd, elementProperty, elementStart, elementStyleProp, elementStyling, elementStylingApply, embeddedViewEnd, embeddedViewStart, interpolation1, interpolation2, interpolation3, interpolation4, interpolation5, interpolation6, interpolation7, interpolation8, interpolationV, listener, load, loadDirective, projection, projectionDef, text, textBinding} from '../../src/render3/instructions';
+import {NO_CHANGE, bind, container, containerRefreshEnd, containerRefreshStart, element, elementAttribute, elementClassProp, elementContainerEnd, elementContainerStart, elementEnd, elementProperty, elementStart, elementStyleProp, elementStyling, elementStylingApply, embeddedViewEnd, embeddedViewStart, interpolation1, interpolation2, interpolation3, interpolation4, interpolation5, interpolation6, interpolation7, interpolation8, interpolationV, listener, load, loadDirective, projection, projectionDef, text, textBinding, template} from '../../src/render3/instructions';
 import {InitialStylingFlags} from '../../src/render3/interfaces/definition';
 import {HEADER_OFFSET} from '../../src/render3/interfaces/view';
 import {sanitizeUrl} from '../../src/sanitization/sanitization';
@@ -558,7 +558,7 @@ describe('render3 integration test', () => {
          const TestCmpt =
              createComponent('test-cmpt', function(rf: RenderFlags, ctx: {value: any}) {
                if (rf & RenderFlags.Create) {
-                 container(0, ngIfTemplate, null, [AttributeMarker.SelectOnly, 'ngIf']);
+                 template(0, ngIfTemplate, null, [AttributeMarker.SelectOnly, 'ngIf']);
                }
                if (rf & RenderFlags.Update) {
                  elementProperty(0, 'ngIf', bind(ctx.value));
@@ -614,7 +614,7 @@ describe('render3 integration test', () => {
           </ng-template>`;
          const TestCmpt = createComponent('test-cmpt', function(rf: RenderFlags) {
            if (rf & RenderFlags.Create) {
-             container(0, embeddedTemplate, null, [AttributeMarker.SelectOnly, 'testDirective']);
+             template(0, embeddedTemplate, null, [AttributeMarker.SelectOnly, 'testDirective']);
            }
            if (rf & RenderFlags.Update) {
              testDirective = loadDirective<TestDirective>(0);
@@ -728,7 +728,7 @@ describe('render3 integration test', () => {
       </ng-template>`;
       const TestCmpt = createComponent('test-cmpt', function(rf: RenderFlags) {
         if (rf & RenderFlags.Create) {
-          container(0, embeddedTemplate, null, [AttributeMarker.SelectOnly, 'testDirective']);
+          template(0, embeddedTemplate, null, [AttributeMarker.SelectOnly, 'testDirective']);
         }
         if (rf & RenderFlags.Update) {
           testDirective = loadDirective<TestDirective>(0);

packages/core/test/render3/lifecycle_spec.ts

@@ -8,7 +8,7 @@
 
 import {OnDestroy, SimpleChanges} from '../../src/core';
 import {AttributeMarker, ComponentTemplate, LifecycleHooksFeature, NgOnChangesFeature, defineComponent, defineDirective} from '../../src/render3/index';
-import {bind, container, containerRefreshEnd, containerRefreshStart, element, elementEnd, elementProperty, elementStart, embeddedViewEnd, embeddedViewStart, listener, markDirty, projection, projectionDef, store, text} from '../../src/render3/instructions';
+import {bind, container, containerRefreshEnd, containerRefreshStart, element, elementEnd, elementProperty, elementStart, embeddedViewEnd, embeddedViewStart, listener, markDirty, projection, projectionDef, store, template, text} from '../../src/render3/instructions';
 import {RenderFlags} from '../../src/render3/interfaces/definition';
 
 import {NgIf} from './common_with_def';
@@ -2445,7 +2445,7 @@ describe('lifecycles', () => {
 
       function conditionTpl(rf: RenderFlags, ctx: Cmpt) {
         if (rf & RenderFlags.Create) {
-          container(0, cmptTpl, null, [AttributeMarker.SelectOnly, 'onDestroyDirective']);
+          template(0, cmptTpl, null, [AttributeMarker.SelectOnly, 'onDestroyDirective']);
         }
       }
 
@@ -2456,7 +2456,7 @@ describe('lifecycles', () => {
        */
       function cmptTpl(rf: RenderFlags, cmpt: Cmpt) {
         if (rf & RenderFlags.Create) {
-          container(0, conditionTpl, null, [AttributeMarker.SelectOnly, 'ngIf']);
+          template(0, conditionTpl, null, [AttributeMarker.SelectOnly, 'ngIf']);
         }
         if (rf & RenderFlags.Update) {
           elementProperty(0, 'ngIf', bind(cmpt.showing));

packages/core/test/render3/query_spec.ts

@@ -12,7 +12,7 @@ import {ElementRef, TemplateRef, ViewContainerRef} from '@angular/core';
 import {EventEmitter} from '../..';
 import {QUERY_READ_CONTAINER_REF, QUERY_READ_ELEMENT_REF, QUERY_READ_FROM_NODE, QUERY_READ_TEMPLATE_REF, getOrCreateNodeInjectorForNode, getOrCreateTemplateRef} from '../../src/render3/di';
 import {AttributeMarker, QueryList, defineComponent, defineDirective, detectChanges, injectTemplateRef, injectViewContainerRef} from '../../src/render3/index';
-import {bind, container, containerRefreshEnd, containerRefreshStart, element, elementContainerEnd, elementContainerStart, elementEnd, elementProperty, elementStart, embeddedViewEnd, embeddedViewStart, load, loadDirective, loadElement, loadQueryList, registerContentQuery} from '../../src/render3/instructions';
+import {bind, container, containerRefreshEnd, containerRefreshStart, element, elementContainerEnd, elementContainerStart, elementEnd, elementProperty, elementStart, embeddedViewEnd, embeddedViewStart, load, loadDirective, loadElement, loadQueryList, registerContentQuery, template} from '../../src/render3/instructions';
 import {RenderFlags} from '../../src/render3/interfaces/definition';
 import {query, queryRefresh} from '../../src/render3/query';
 
@@ -510,7 +510,7 @@ describe('query', () => {
             'cmpt',
             function(rf: RenderFlags, ctx: any) {
               if (rf & RenderFlags.Create) {
-                container(1, null, null, null, ['foo', '']);
+                template(1, null, null, null, ['foo', '']);
               }
             },
             [], [],
@@ -542,7 +542,7 @@ describe('query', () => {
                'cmpt',
                function(rf: RenderFlags, ctx: any) {
                  if (rf & RenderFlags.Create) {
-                   container(1, null, null, null, ['foo', '']);
+                   template(1, null, null, null, ['foo', '']);
                  }
                },
                [], [],
@@ -577,7 +577,7 @@ describe('query', () => {
             'cmpt',
             function(rf: RenderFlags, ctx: any) {
               if (rf & RenderFlags.Create) {
-                container(1, null, null, null, ['foo', '']);
+                template(1, null, null, null, ['foo', '']);
               }
             },
             [], [],
@@ -609,7 +609,7 @@ describe('query', () => {
             'cmpt',
             function(rf: RenderFlags, ctx: any) {
               if (rf & RenderFlags.Create) {
-                container(1, null, null, null, ['foo', '']);
+                template(1, null, null, null, ['foo', '']);
               }
             },
             [], [],
@@ -987,7 +987,7 @@ describe('query', () => {
             'cmpt',
             function(rf: RenderFlags, ctx: any) {
               if (rf & RenderFlags.Create) {
-                container(1, (rf1: RenderFlags, ctx1: any) => {
+                template(1, (rf1: RenderFlags, ctx1: any) => {
                   if (rf1 & RenderFlags.Create) {
                     element(0, 'div', null, ['foo', '']);
                   }
@@ -1041,7 +1041,7 @@ describe('query', () => {
             selectors: [['my-app']],
             template: function(rf: RenderFlags, ctx: any) {
               if (rf & RenderFlags.Create) {
-                container(1, (rf1: RenderFlags, row: NgForOfContext<string>) => {
+                template(1, (rf1: RenderFlags, row: NgForOfContext<string>) => {
                   if (rf1 & RenderFlags.Create) {
                     element(0, 'div', null, ['foo', '']);
                   }
@@ -1109,7 +1109,7 @@ describe('query', () => {
                'cmpt',
                function(rf: RenderFlags, ctx: any) {
                  if (rf & RenderFlags.Create) {
-                   container(1, (rf: RenderFlags, ctx: {idx: number}) => {
+                   template(1, (rf: RenderFlags, ctx: {idx: number}) => {
                      if (rf & RenderFlags.Create) {
                        element(0, 'div', null, ['foo', '']);
                      }
@@ -1120,7 +1120,7 @@ describe('query', () => {
 
                    element(2, 'div', ['id', 'middle'], ['foo', '']);
 
-                   container(4, (rf: RenderFlags, ctx: {idx: number}) => {
+                   template(4, (rf: RenderFlags, ctx: {idx: number}) => {
                      if (rf & RenderFlags.Create) {
                        element(0, 'div', null, ['foo', '']);
                      }
@@ -1129,7 +1129,7 @@ describe('query', () => {
                      }
                    }, null, []);
 
-                   container(5, null, null, [AttributeMarker.SelectOnly, 'vc']);
+                   template(5, null, null, [AttributeMarker.SelectOnly, 'vc']);
                  }
 
                  if (rf & RenderFlags.Update) {
@@ -1212,7 +1212,7 @@ describe('query', () => {
                template: function(rf: RenderFlags, ctx: any) {
                  let tmp: any;
                  if (rf & RenderFlags.Create) {
-                   container(1, (rf: RenderFlags, ctx: {idx: number, container_idx: number}) => {
+                   template(1, (rf: RenderFlags, ctx: {idx: number, container_idx: number}) => {
                      if (rf & RenderFlags.Create) {
                        element(0, 'div', null, ['foo', '']);
                      }
@@ -1221,8 +1221,8 @@ describe('query', () => {
                      }
                    }, null, []);
 
-                   container(2, null, null, [AttributeMarker.SelectOnly, 'vc']);
+                   template(2, null, null, [AttributeMarker.SelectOnly, 'vc']);
-                   container(3, null, null, [AttributeMarker.SelectOnly, 'vc']);
+                   template(3, null, null, [AttributeMarker.SelectOnly, 'vc']);
                  }
 
                  if (rf & RenderFlags.Update) {
@@ -1283,12 +1283,12 @@ describe('query', () => {
              */
             template: (rf: RenderFlags, myApp: MyApp) => {
               if (rf & RenderFlags.Create) {
-                container(1, (rf1: RenderFlags) => {
+                template(1, (rf1: RenderFlags) => {
                   if (rf1 & RenderFlags.Create) {
                     element(0, 'span', ['id', 'from_tpl'], ['foo', '']);
                   }
                 }, undefined, undefined, ['tpl', '']);
-                container(3, null, null, [AttributeMarker.SelectOnly, 'ngTemplateOutlet']);
+                template(3, null, null, [AttributeMarker.SelectOnly, 'ngTemplateOutlet']);
               }
               if (rf & RenderFlags.Update) {
                 const tplRef = getOrCreateTemplateRef(getOrCreateNodeInjectorForNode(load(1)));
@@ -1793,7 +1793,7 @@ describe('query', () => {
       });
     }
 
-    function template(rf: RenderFlags, ctx: any) {
+    function AppComponent_Template_1(rf: RenderFlags, ctx: any) {
       if (rf & RenderFlags.Create) {
         element(0, 'div');
       }
@@ -1807,7 +1807,7 @@ describe('query', () => {
         'app',
         function(rf: RenderFlags, ctx: any) {
           if (rf & RenderFlags.Create) {
-            container(1, template, null, [AttributeMarker.SelectOnly, 'someDir']);
+            template(1, AppComponent_Template_1, null, [AttributeMarker.SelectOnly, 'someDir']);
             element(2, 'div', null, ['foo', '']);
           }
         },
@@ -1942,7 +1942,7 @@ describe('query', () => {
       const AppComponent = createComponent('app-component', function(rf: RenderFlags, ctx: any) {
         if (rf & RenderFlags.Create) {
           elementStart(0, 'shallow-comp');
-          { container(1, IfTemplate, null, [AttributeMarker.SelectOnly, 'ngIf', '']); }
+          { template(1, IfTemplate, null, [AttributeMarker.SelectOnly, 'ngIf', '']); }
           elementEnd();
         }
         if (rf & RenderFlags.Update) {

packages/core/test/render3/view_container_ref_spec.ts

@@ -9,7 +9,7 @@
 import {Component, ComponentFactoryResolver, ElementRef, EmbeddedViewRef, NgModuleRef, Pipe, PipeTransform, RendererFactory2, TemplateRef, ViewContainerRef, createInjector, defineInjector, ɵAPP_ROOT as APP_ROOT, ɵNgModuleDef as NgModuleDef} from '../../src/core';
 import {getOrCreateNodeInjectorForNode, getOrCreateTemplateRef} from '../../src/render3/di';
 import {AttributeMarker, NgOnChangesFeature, defineComponent, defineDirective, definePipe, injectComponentFactoryResolver, injectTemplateRef, injectViewContainerRef} from '../../src/render3/index';
-import {bind, container, containerRefreshEnd, containerRefreshStart, element, elementEnd, elementProperty, elementStart, embeddedViewEnd, embeddedViewStart, interpolation1, interpolation3, load, loadDirective, nextContext, projection, projectionDef, reserveSlots, text, textBinding} from '../../src/render3/instructions';
+import {bind, container, containerRefreshEnd, containerRefreshStart, element, elementEnd, elementProperty, elementStart, embeddedViewEnd, embeddedViewStart, interpolation1, interpolation3, load, loadDirective, nextContext, projection, projectionDef, reserveSlots, template, text, textBinding} from '../../src/render3/instructions';
 import {RenderFlags} from '../../src/render3/interfaces/definition';
 import {NgModuleFactory} from '../../src/render3/ng_module_ref';
 import {pipe, pipeBind1} from '../../src/render3/pipe';
@@ -63,7 +63,7 @@ describe('ViewContainerRef', () => {
      * </p>
      */
     function createTemplate() {
-      container(0, embeddedTemplate);
+      template(0, embeddedTemplate);
       element(1, 'p', ['vcref', '']);
     }
 
@@ -75,7 +75,7 @@ describe('ViewContainerRef', () => {
     describe('createEmbeddedView (incl. insert)', () => {
       it('should work on elements', () => {
         function createTemplate() {
-          container(0, embeddedTemplate);
+          template(0, embeddedTemplate);
           element(1, 'header', ['vcref', '']);
           element(2, 'footer');
         }
@@ -105,7 +105,7 @@ describe('ViewContainerRef', () => {
             createComponent('header-cmp', function(rf: RenderFlags, ctx: any) {});
 
         function createTemplate() {
-          container(0, embeddedTemplate);
+          template(0, embeddedTemplate);
           element(1, 'header-cmp', ['vcref', '']);
           element(2, 'footer');
         }
@@ -136,7 +136,7 @@ describe('ViewContainerRef', () => {
         let secondDir: DirectiveWithVCRef;
 
         function createTemplate() {
-          container(0, embeddedTemplate);
+          template(0, embeddedTemplate);
           element(1, 'div', ['vcref', '']);
           element(2, 'div', ['vcref', '']);
 
@@ -161,9 +161,9 @@ describe('ViewContainerRef', () => {
         expect(fixture.html).toEqual('<div vcref=""></div>A<div vcref=""></div>B');
       });
 
-      it('should work on containers', () => {
+      it('should work on templates', () => {
         function createTemplate() {
-          container(0, embeddedTemplate, null, ['vcref', '']);
+          template(0, embeddedTemplate, null, ['vcref', '']);
           element(1, 'footer');
         }
 
@@ -246,8 +246,8 @@ describe('ViewContainerRef', () => {
                template: (rf: RenderFlags, cmp: TestComponent) => {
                  if (rf & RenderFlags.Create) {
                    text(0, 'before|');
-                   container(1, EmbeddedTemplateA, null, ['testdir', '']);
+                   template(1, EmbeddedTemplateA, null, ['testdir', '']);
-                   container(2, EmbeddedTemplateB, null, ['testdir', '']);
+                   template(2, EmbeddedTemplateB, null, ['testdir', '']);
                    text(3, '|after');
                  }
                },
@@ -315,7 +315,7 @@ describe('ViewContainerRef', () => {
                template: (rf: RenderFlags, cmp: TestComponent) => {
                  if (rf & RenderFlags.Create) {
                    text(0, 'before|');
-                   container(1, EmbeddedTemplateA, null, ['testdir', '']);
+                   template(1, EmbeddedTemplateA, null, ['testdir', '']);
                    container(2);
                    text(3, '|after');
                  }
@@ -410,7 +410,7 @@ describe('ViewContainerRef', () => {
             factory: () => new SomeComponent(),
             template: (rf: RenderFlags, cmp: SomeComponent) => {
               if (rf & RenderFlags.Create) {
-                container(0, (rf: RenderFlags, ctx: any) => {
+                template(0, (rf: RenderFlags, ctx: any) => {
                   if (rf & RenderFlags.Create) {
                     element(0, 'child');
                     pipe(1, 'starPipe');
@@ -508,7 +508,7 @@ describe('ViewContainerRef', () => {
             */
            const Parent = createComponent('parent', function(rf: RenderFlags, parent: any) {
              if (rf & RenderFlags.Create) {
-               container(0, fooTemplate);
+               template(0, fooTemplate);
                elementStart(1, 'child');
                elementEnd();
              }
@@ -569,7 +569,7 @@ describe('ViewContainerRef', () => {
             factory: () => new LoopComp(),
             template: function(rf: RenderFlags, loop: any) {
               if (rf & RenderFlags.Create) {
-                container(0, () => {}, null, [AttributeMarker.SelectOnly, 'ngForOf']);
+                template(0, () => {}, null, [AttributeMarker.SelectOnly, 'ngForOf']);
               }
 
               if (rf & RenderFlags.Update) {
@@ -599,7 +599,7 @@ describe('ViewContainerRef', () => {
          */
         const Parent = createComponent('parent', function(rf: RenderFlags, parent: any) {
           if (rf & RenderFlags.Create) {
-            container(0, rowTemplate);
+            template(0, rowTemplate);
             elementStart(1, 'loop-comp');
             elementEnd();
           }
@@ -615,7 +615,7 @@ describe('ViewContainerRef', () => {
 
         function rowTemplate(rf: RenderFlags, ctx: any) {
           if (rf & RenderFlags.Create) {
-            container(0, cellTemplate);
+            template(0, cellTemplate);
             elementStart(1, 'loop-comp');
             elementEnd();
           }
@@ -1072,18 +1072,13 @@ describe('ViewContainerRef', () => {
         expect(() => directiveInstance !.vcref.parentInjector.get(ElementRef)).toThrow();
       });
 
-      it('should work on containers', () => {
+      it('should work on templates', () => {
         function createTemplate() {
-          container(0, embeddedTemplate, null, ['vcref', '']);
+          template(0, embeddedTemplate, null, ['vcref', '']);
           element(1, 'footer');
         }
 
-        function updateTemplate() {
+        new TemplateFixture(createTemplate, () => {}, [DirectiveWithVCRef]);
-          containerRefreshStart(0);
-          containerRefreshEnd();
-        }
-
-        new TemplateFixture(createTemplate, updateTemplate, [DirectiveWithVCRef]);
         expect(directiveInstance !.vcref.element.nativeElement.textContent).toEqual('container');
         expect(directiveInstance !.vcref.injector.get(ElementRef).nativeElement.textContent)
             .toEqual('container');
@@ -1136,7 +1131,7 @@ describe('ViewContainerRef', () => {
           factory: () => new Parent(),
           template: (rf: RenderFlags, cmp: Parent) => {
             if (rf & RenderFlags.Create) {
-              container(0, embeddedTemplate);
+              template(0, embeddedTemplate);
               elementStart(1, 'child');
               elementStart(2, 'header', ['vcref', '']);
               text(3, 'blah');
@@ -1222,7 +1217,7 @@ describe('ViewContainerRef', () => {
           factory: () => new Parent(),
           template: (rf: RenderFlags, cmp: Parent) => {
             if (rf & RenderFlags.Create) {
-              container(0, embeddedTemplate);
+              template(0, embeddedTemplate);
               elementStart(1, 'child-with-view');
               text(2, 'Before projected');
               elementStart(3, 'header', ['vcref', '']);
@@ -1299,7 +1294,7 @@ describe('ViewContainerRef', () => {
                template: (rf: RenderFlags, cmp: Parent) => {
                  let tplRef: any;
                  if (rf & RenderFlags.Create) {
-                   container(0, embeddedTemplate);
+                   template(0, embeddedTemplate);
                    elementStart(1, 'child-with-selector');
                    elementStart(2, 'header', ['vcref', '']);
                    text(3, 'blah');
@@ -1348,7 +1343,7 @@ describe('ViewContainerRef', () => {
                template: (rf: RenderFlags, cmp: Parent) => {
                  let tplRef: any;
                  if (rf & RenderFlags.Create) {
-                   container(0, embeddedTemplate);
+                   template(0, embeddedTemplate);
                    elementStart(1, 'child-with-selector');
                    elementStart(2, 'footer', ['vcref', '']);
                    text(3, 'blah');
@@ -1438,7 +1433,7 @@ describe('ViewContainerRef', () => {
           factory: () => new SomeComponent(),
           template: (rf: RenderFlags, cmp: SomeComponent) => {
             if (rf & RenderFlags.Create) {
-              container(0, (rf: RenderFlags, ctx: any) => {
+              template(0, (rf: RenderFlags, ctx: any) => {
                 if (rf & RenderFlags.Create) {
                   element(0, 'hooks');
                 }