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('');
+
+ fixture.component.name = 'some name';
+ fixture.update();
+ expect(fixture.html).toEqual('some name');
+ });
+
});
describe('component with a container', () => {