fix(ivy): fix directive instantiation at slots above 2^12 (#27280)

PR Close #27280

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);

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', () => {