From a7ba05ad82003742f5211316cead40622f124b76 Mon Sep 17 00:00:00 2001
From: Kara Erickson <karakara@google.com>
Date: Mon, 26 Nov 2018 14:57:45 -0800
Subject: [PATCH] fix(ivy): fix directive instantiation at slots above 2^12
 (#27280)

PR Close #27280
---
 packages/core/src/render3/instructions.ts    |  2 +-
 packages/core/test/render3/component_spec.ts | 44 ++++++++++++++++++++
 2 files changed, 45 insertions(+), 1 deletion(-)

diff --git a/packages/core/src/render3/instructions.ts b/packages/core/src/render3/instructions.ts
index 6413b77c2d..79d6688545 100644
--- a/packages/core/src/render3/instructions.ts
+++ b/packages/core/src/render3/instructions.ts
@@ -1451,7 +1451,7 @@ function resolveDirectives(
  */
 function instantiateAllDirectives(tView: TView, viewData: LViewData, previousOrParentTNode: TNode) {
   const start = previousOrParentTNode.flags >> TNodeFlags.DirectiveStartingIndexShift;
-  const end = start + previousOrParentTNode.flags & TNodeFlags.DirectiveCountMask;
+  const end = start + (previousOrParentTNode.flags & TNodeFlags.DirectiveCountMask);
   if (!getFirstTemplatePass() && start < end) {
     getOrCreateNodeInjectorForNode(
         previousOrParentTNode as TElementNode | TContainerNode | TElementContainerNode, viewData);
diff --git a/packages/core/test/render3/component_spec.ts b/packages/core/test/render3/component_spec.ts
index 6dd4596214..d0e9a4ead6 100644
--- a/packages/core/test/render3/component_spec.ts
+++ b/packages/core/test/render3/component_spec.ts
@@ -106,6 +106,50 @@ describe('component', () => {
 
   });
 
+  it('should instantiate components at high indices', () => {
+
+    // {{ name }}
+    class Comp {
+      // @Input
+      name = '';
+
+      static ngComponentDef = defineComponent({
+        type: Comp,
+        selectors: [['comp']],
+        factory: () => new Comp(),
+        consts: 1,
+        vars: 1,
+        template: (rf: RenderFlags, ctx: Comp) => {
+          if (rf & RenderFlags.Create) {
+            text(0);
+          }
+          if (rf & RenderFlags.Update) {
+            textBinding(0, bind(ctx.name));
+          }
+        },
+        inputs: {name: 'name'}
+      });
+    }
+
+    // Artificially inflating the slot IDs of this app component to mimic an app
+    // with a very large view
+    const App = createComponent('app', (rf: RenderFlags, ctx: any) => {
+      if (rf & RenderFlags.Create) {
+        element(4097, 'comp');
+      }
+      if (rf & RenderFlags.Update) {
+        elementProperty(4097, 'name', bind(ctx.name));
+      }
+    }, 4098, 1, [Comp]);
+
+    const fixture = new ComponentFixture(App);
+    expect(fixture.html).toEqual('<comp></comp>');
+
+    fixture.component.name = 'some name';
+    fixture.update();
+    expect(fixture.html).toEqual('<comp>some name</comp>');
+  });
+
 });
 
 describe('component with a container', () => {