@angular/compiler 17.0.0-next.4 → 17.0.0-next.5

package/fesm2022/compiler.mjs

@@ -1,5 +1,5 @@
 /**
- * @license Angular v17.0.0-next.4
+ * @license Angular v17.0.0-next.5
  * (c) 2010-2022 Google LLC. https://angular.io/
  * License: MIT
  */
@@ -3801,6 +3801,10 @@ class IdleDeferredTrigger extends DeferredTrigger {
 class ImmediateDeferredTrigger extends DeferredTrigger {
 }
 class HoverDeferredTrigger extends DeferredTrigger {
+    constructor(reference, sourceSpan) {
+        super(sourceSpan);
+        this.reference = reference;
+    }
 }
 class TimerDeferredTrigger extends DeferredTrigger {
     constructor(delay, sourceSpan) {
@@ -3913,8 +3917,8 @@ class SwitchBlockCase {
     }
 }
 class ForLoopBlock {
-    constructor(itemName, expression, trackBy, contextVariables, children, empty, sourceSpan, startSourceSpan, endSourceSpan) {
-        this.itemName = itemName;
+    constructor(item, expression, trackBy, contextVariables, children, empty, sourceSpan, startSourceSpan, endSourceSpan) {
+        this.item = item;
         this.expression = expression;
         this.trackBy = trackBy;
         this.contextVariables = contextVariables;
@@ -4067,6 +4071,8 @@ class RecursiveVisitor$1 {
         visitAll$1(this, block.children);
     }
     visitForLoopBlock(block) {
+        block.item.visit(this);
+        visitAll$1(this, Object.values(block.contextVariables));
         visitAll$1(this, block.children);
         block.empty?.visit(this);
     }
@@ -4078,6 +4084,7 @@ class RecursiveVisitor$1 {
     }
     visitIfBlockBranch(block) {
         visitAll$1(this, block.children);
+        block.expressionAlias?.visit(this);
     }
     visitContent(content) { }
     visitVariable(variable) { }
@@ -5876,16 +5883,11 @@ function compileNgModule(meta) {
     const statements = [];
     const definitionMap = new DefinitionMap();
     definitionMap.set('type', meta.type.value);
-    // Assign bootstrap definition
-    if (meta.kind === R3NgModuleMetadataKind.Global) {
-        if (meta.bootstrap.length > 0) {
-            definitionMap.set('bootstrap', refsToArray(meta.bootstrap, meta.containsForwardDecls));
-        }
-    }
-    else {
-        if (meta.bootstrapExpression) {
-            definitionMap.set('bootstrap', meta.bootstrapExpression);
-        }
+    // Assign bootstrap definition. In local compilation mode (i.e., for
+    // `R3NgModuleMetadataKind.LOCAL`) we assign the bootstrap field using the runtime
+    // `ɵɵsetNgModuleScope`.
+    if (meta.kind === R3NgModuleMetadataKind.Global && meta.bootstrap.length > 0) {
+        definitionMap.set('bootstrap', refsToArray(meta.bootstrap, meta.containsForwardDecls));
     }
     if (meta.selectorScopeMode === R3SelectorScopeMode.Inline) {
         // If requested to emit scope information inline, pass the `declarations`, `imports` and
@@ -6004,6 +6006,9 @@ function generateSetNgModuleScopeCall(meta) {
             scopeMap.set('exports', meta.exportsExpression);
         }
     }
+    if (meta.kind === R3NgModuleMetadataKind.Local && meta.bootstrapExpression) {
+        scopeMap.set('bootstrap', meta.bootstrapExpression);
+    }
     if (Object.keys(scopeMap.values).length === 0) {
         return null;
     }
@@ -8766,19 +8771,26 @@ var OpKind;
      * A namespace change, which causes the subsequent elements to be processed as either HTML or SVG.
      */
     OpKind[OpKind["Namespace"] = 28] = "Namespace";
+    /**
+     * Configure a content projeciton definition for the view.
+     */
+    OpKind[OpKind["ProjectionDef"] = 29] = "ProjectionDef";
+    /**
+     * Create a content projection slot.
+     */
+    OpKind[OpKind["Projection"] = 30] = "Projection";
     /**
      * The start of an i18n block.
      */
-    OpKind[OpKind["I18nStart"] = 29] = "I18nStart";
+    OpKind[OpKind["I18nStart"] = 31] = "I18nStart";
     /**
      * A self-closing i18n on a single element.
      */
-    OpKind[OpKind["I18n"] = 30] = "I18n";
+    OpKind[OpKind["I18n"] = 32] = "I18n";
     /**
      * The end of an i18n block.
      */
-    OpKind[OpKind["I18nEnd"] = 31] = "I18nEnd";
-    // TODO: Add Host Listeners, and possibly other host ops also.
+    OpKind[OpKind["I18nEnd"] = 33] = "I18nEnd";
 })(OpKind || (OpKind = {}));
 /**
  * Distinguishes different kinds of IR expressions.
@@ -8890,8 +8902,8 @@ var SemanticVariableKind;
 })(SemanticVariableKind || (SemanticVariableKind = {}));
 /**
  * Whether to compile in compatibilty mode. In compatibility mode, the template pipeline will
- * attempt to match the output of `TemplateDefinitionBuilder` as exactly as possible, at the cost of
- * producing quirky or larger code in some cases.
+ * attempt to match the output of `TemplateDefinitionBuilder` as exactly as possible, at the cost
+ * of producing quirky or larger code in some cases.
  */
 var CompatibilityMode;
 (function (CompatibilityMode) {
@@ -9881,6 +9893,8 @@ function transformExpressionsInOp(op, transform, flags) {
                     transformExpressionsInExpression(op.tagNameParams[placeholder], transform, flags);
             }
             break;
+        case OpKind.Projection:
+        case OpKind.ProjectionDef:
         case OpKind.Element:
         case OpKind.ElementStart:
         case OpKind.ElementEnd:
@@ -10271,7 +10285,8 @@ class OpList {
  * The set of OpKinds that represent the creation of an element or container
  */
 const elementContainerOpKinds = new Set([
-    OpKind.Element, OpKind.ElementStart, OpKind.Container, OpKind.ContainerStart, OpKind.Template
+    OpKind.Element, OpKind.ElementStart, OpKind.Container, OpKind.ContainerStart, OpKind.Template,
+    OpKind.Projection
 ]);
 /**
  * Checks whether the given operation represents the creation of an element or container.
@@ -10300,12 +10315,13 @@ function createElementStartOp(tag, xref, namespace, i18n, sourceSpan) {
 /**
  * Create a `TemplateOp`.
  */
-function createTemplateOp(xref, tag, namespace, i18n, sourceSpan) {
+function createTemplateOp(xref, tag, namespace, controlFlow, i18n, sourceSpan) {
     return {
         kind: OpKind.Template,
         xref,
         attributes: null,
         tag,
+        controlFlow,
         decls: null,
         vars: null,
         localRefs: [],
@@ -10399,6 +10415,29 @@ function createNamespaceOp(namespace) {
         ...NEW_OP,
     };
 }
+function createProjectionDefOp(def) {
+    return {
+        kind: OpKind.ProjectionDef,
+        def,
+        ...NEW_OP,
+    };
+}
+function createProjectionOp(xref, selector) {
+    return {
+        kind: OpKind.Projection,
+        xref,
+        selector,
+        projectionSlotIndex: 0,
+        attributes: null,
+        localRefs: [],
+        nonBindable: false,
+        i18n: undefined,
+        sourceSpan: null,
+        ...NEW_OP,
+        ...TRAIT_CONSUMES_SLOT,
+        ...TRAIT_USES_SLOT_INDEX,
+    };
+}
 /**
  * Create an `ExtractedAttributeOp`.
  */
@@ -10501,6 +10540,11 @@ class ComponentCompilationJob extends CompilationJob {
         this.kind = CompilationJobKind.Tmpl;
         this.fnSuffix = 'Template';
         this.views = new Map();
+        /**
+         * Causes ngContentSelectors to be emitted, for content projection slots in the view. Possibly a
+         * reference into the constant pool.
+         */
+        this.contentSelectors = null;
         /**
          * Constant expressions used by operations within this component's compilation.
          *
@@ -10806,7 +10850,7 @@ function phaseAttributeExtraction(job) {
                     break;
                 case OpKind.Property:
                     if (!op.isAnimationTrigger) {
-                        OpList.insertBefore(createExtractedAttributeOp(op.target, op.isTemplate ? BindingKind.Template : BindingKind.Property, op.name, null), lookupElement$2(elements, op.target));
+                        OpList.insertBefore(createExtractedAttributeOp(op.target, op.isTemplate ? BindingKind.Template : BindingKind.Property, op.name, null), lookupElement$3(elements, op.target));
                     }
                     break;
                 case OpKind.StyleProp:
@@ -10816,7 +10860,7 @@ function phaseAttributeExtraction(job) {
                     // mode.
                     if (unit.job.compatibility === CompatibilityMode.TemplateDefinitionBuilder &&
                         op.expression instanceof EmptyExpr) {
-                        OpList.insertBefore(createExtractedAttributeOp(op.target, BindingKind.Property, op.name, null), lookupElement$2(elements, op.target));
+                        OpList.insertBefore(createExtractedAttributeOp(op.target, BindingKind.Property, op.name, null), lookupElement$3(elements, op.target));
                     }
                     break;
                 case OpKind.Listener:
@@ -10828,7 +10872,7 @@ function phaseAttributeExtraction(job) {
                             unit.create.push(extractedAttributeOp);
                         }
                         else {
-                            OpList.insertBefore(extractedAttributeOp, lookupElement$2(elements, op.target));
+                            OpList.insertBefore(extractedAttributeOp, lookupElement$3(elements, op.target));
                         }
                     }
                     break;
@@ -10839,7 +10883,7 @@ function phaseAttributeExtraction(job) {
 /**
  * Looks up an element in the given map by xref ID.
  */
-function lookupElement$2(elements, xref) {
+function lookupElement$3(elements, xref) {
     const el = elements.get(xref);
     if (el === undefined) {
         throw new Error('All attributes should have an element-like target.');
@@ -10877,7 +10921,7 @@ function extractAttributeOp(unit, op, elements) {
             unit.create.push(extractedAttributeOp);
         }
         else {
-            const ownerOp = lookupElement$2(elements, op.target);
+            const ownerOp = lookupElement$3(elements, op.target);
             OpList.insertBefore(extractedAttributeOp, ownerOp);
         }
         OpList.remove(op);
@@ -10887,7 +10931,7 @@ function extractAttributeOp(unit, op, elements) {
 /**
  * Looks up an element in the given map by xref ID.
  */
-function lookupElement$1(elements, xref) {
+function lookupElement$2(elements, xref) {
     const el = elements.get(xref);
     if (el === undefined) {
         throw new Error('All attributes should have an element-like target.');
@@ -10913,7 +10957,7 @@ function phaseBindingSpecialization(job) {
                 case BindingKind.Attribute:
                     if (op.name === 'ngNonBindable') {
                         OpList.remove(op);
-                        const target = lookupElement$1(elements, op.target);
+                        const target = lookupElement$2(elements, op.target);
                         target.nonBindable = true;
                     }
                     else {
@@ -11098,38 +11142,65 @@ function mergeNsAndName(prefix, localName) {
     return prefix ? `:${prefix}:${localName}` : localName;
 }
 
+const BINARY_OPERATORS = new Map([
+    ['&&', BinaryOperator.And],
+    ['>', BinaryOperator.Bigger],
+    ['>=', BinaryOperator.BiggerEquals],
+    ['&', BinaryOperator.BitwiseAnd],
+    ['/', BinaryOperator.Divide],
+    ['==', BinaryOperator.Equals],
+    ['===', BinaryOperator.Identical],
+    ['<', BinaryOperator.Lower],
+    ['<=', BinaryOperator.LowerEquals],
+    ['-', BinaryOperator.Minus],
+    ['%', BinaryOperator.Modulo],
+    ['*', BinaryOperator.Multiply],
+    ['!=', BinaryOperator.NotEquals],
+    ['!==', BinaryOperator.NotIdentical],
+    ['??', BinaryOperator.NullishCoalesce],
+    ['||', BinaryOperator.Or],
+    ['+', BinaryOperator.Plus],
+]);
+const NAMESPACES = new Map([['svg', Namespace.SVG], ['math', Namespace.Math]]);
+function namespaceForKey(namespacePrefixKey) {
+    if (namespacePrefixKey === null) {
+        return Namespace.HTML;
+    }
+    return NAMESPACES.get(namespacePrefixKey) ?? Namespace.HTML;
+}
+function keyForNamespace(namespace) {
+    for (const [k, n] of NAMESPACES.entries()) {
+        if (n === namespace) {
+            return k;
+        }
+    }
+    return null; // No namespace prefix for HTML
+}
+function prefixWithNamespace(strippedTag, namespace) {
+    if (namespace === Namespace.HTML) {
+        return strippedTag;
+    }
+    return `:${keyForNamespace(namespace)}:${strippedTag}`;
+}
+function literalOrArrayLiteral(value) {
+    if (Array.isArray(value)) {
+        return literalArr(value.map(literalOrArrayLiteral));
+    }
+    return literal(value, INFERRED_TYPE);
+}
+
 /**
  * Converts the semantic attributes of element-like operations (elements, templates) into constant
  * array expressions, and lifts them into the overall component `consts`.
  */
 function phaseConstCollection(job) {
-    if (job instanceof ComponentCompilationJob) {
-        // Serialize the extracted messages into the const array.
-        const messageConstIndices = {};
-        for (const unit of job.units) {
-            for (const op of unit.create) {
-                if (op.kind === OpKind.ExtractedMessage) {
-                    messageConstIndices[op.owner] = job.addConst(op.expression, op.statements);
-                    OpList.remove(op);
-                }
-            }
-        }
-        // Assign const index to i18n ops that messages were extracted from.
-        for (const unit of job.units) {
-            for (const op of unit.create) {
-                if (op.kind === OpKind.I18nStart && messageConstIndices[op.xref] !== undefined) {
-                    op.messageIndex = messageConstIndices[op.xref];
-                }
-            }
-        }
-    }
     // Collect all extracted attributes.
-    const elementAttributes = new Map();
+    const allElementAttributes = new Map();
     for (const unit of job.units) {
         for (const op of unit.create) {
             if (op.kind === OpKind.ExtractedAttribute) {
-                const attributes = elementAttributes.get(op.target) || new ElementAttributes();
-                elementAttributes.set(op.target, attributes);
+                const attributes = allElementAttributes.get(op.target) || new ElementAttributes();
+                allElementAttributes.set(op.target, attributes);
                 attributes.add(op.bindingKind, op.name, op.expression);
                 OpList.remove(op);
             }
@@ -11139,9 +11210,8 @@ function phaseConstCollection(job) {
     if (job instanceof ComponentCompilationJob) {
         for (const unit of job.units) {
             for (const op of unit.create) {
-                if (op.kind === OpKind.Element || op.kind === OpKind.ElementStart ||
-                    op.kind === OpKind.Template) {
-                    const attributes = elementAttributes.get(op.xref);
+                if (isElementOrContainerOp(op)) {
+                    const attributes = allElementAttributes.get(op.xref);
                     if (attributes !== undefined) {
                         const attrArray = serializeAttributes(attributes);
                         if (attrArray.entries.length > 0) {
@@ -11155,7 +11225,7 @@ function phaseConstCollection(job) {
     else if (job instanceof HostBindingCompilationJob) {
         // TODO: If the host binding case further diverges, we may want to split it into its own
         // phase.
-        for (const [xref, attributes] of elementAttributes.entries()) {
+        for (const [xref, attributes] of allElementAttributes.entries()) {
             if (xref !== job.root.xref) {
                 throw new Error(`An attribute would be const collected into the host binding's template function, but is not associated with the root xref.`);
             }
@@ -11202,6 +11272,15 @@ class ElementAttributes {
             return;
         }
         this.known.add(name);
+        if (name === 'ngProjectAs') {
+            if (value === null || !(value instanceof LiteralExpr) || (value.value == null) ||
+                (typeof value.value?.toString() !== 'string')) {
+                throw Error('ngProjectAs must have a string literal value');
+            }
+            this.projectAs = value.value.toString();
+            // TODO: TemplateDefinitionBuilder allows `ngProjectAs` to also be assigned as a literal
+            // attribute. Is this sane?
+        }
         const array = this.arrayFor(kind);
         array.push(...getAttributeNameLiterals$1(name));
         if (kind === BindingKind.Attribute || kind === BindingKind.StyleProperty) {
@@ -11237,7 +11316,10 @@ function getAttributeNameLiterals$1(name) {
 function serializeAttributes({ attributes, bindings, classes, i18n, projectAs, styles, template }) {
     const attrArray = [...attributes];
     if (projectAs !== null) {
-        attrArray.push(literal(5 /* core.AttributeMarker.ProjectAs */), literal(projectAs));
+        // Parse the attribute value into a CssSelectorList. Note that we only take the
+        // first selector, because we don't support multiple selectors in ngProjectAs.
+        const parsedR3Selector = parseSelectorToR3Selector(projectAs)[0];
+        attrArray.push(literal(5 /* core.AttributeMarker.ProjectAs */), literalOrArrayLiteral(parsedR3Selector));
     }
     if (classes.length > 0) {
         attrArray.push(literal(1 /* core.AttributeMarker.Classes */), ...classes);
@@ -18882,47 +18964,6 @@ function hyphenate(value) {
         .toLowerCase();
 }
 
-const BINARY_OPERATORS = new Map([
-    ['&&', BinaryOperator.And],
-    ['>', BinaryOperator.Bigger],
-    ['>=', BinaryOperator.BiggerEquals],
-    ['&', BinaryOperator.BitwiseAnd],
-    ['/', BinaryOperator.Divide],
-    ['==', BinaryOperator.Equals],
-    ['===', BinaryOperator.Identical],
-    ['<', BinaryOperator.Lower],
-    ['<=', BinaryOperator.LowerEquals],
-    ['-', BinaryOperator.Minus],
-    ['%', BinaryOperator.Modulo],
-    ['*', BinaryOperator.Multiply],
-    ['!=', BinaryOperator.NotEquals],
-    ['!==', BinaryOperator.NotIdentical],
-    ['??', BinaryOperator.NullishCoalesce],
-    ['||', BinaryOperator.Or],
-    ['+', BinaryOperator.Plus],
-]);
-const NAMESPACES = new Map([['svg', Namespace.SVG], ['math', Namespace.Math]]);
-function namespaceForKey(namespacePrefixKey) {
-    if (namespacePrefixKey === null) {
-        return Namespace.HTML;
-    }
-    return NAMESPACES.get(namespacePrefixKey) ?? Namespace.HTML;
-}
-function keyForNamespace(namespace) {
-    for (const [k, n] of NAMESPACES.entries()) {
-        if (n === namespace) {
-            return k;
-        }
-    }
-    return null; // No namespace prefix for HTML
-}
-function prefixWithNamespace(strippedTag, namespace) {
-    if (namespace === Namespace.HTML) {
-        return strippedTag;
-    }
-    return `:${keyForNamespace(namespace)}:${strippedTag}`;
-}
-
 /**
  * Generate names for functions and variables across all views.
  *
@@ -19156,7 +19197,7 @@ function phaseNoListenersOnTemplates(job) {
 /**
  * Looks up an element in the given map by xref ID.
  */
-function lookupElement(elements, xref) {
+function lookupElement$1(elements, xref) {
     const el = elements.get(xref);
     if (el === undefined) {
         throw new Error('All attributes should have an element-like target.');
@@ -19185,7 +19226,7 @@ function phaseNonbindable(job) {
                 OpList.insertAfter(createDisableBindingsOp(op.xref), op);
             }
             if ((op.kind === OpKind.ElementEnd || op.kind === OpKind.ContainerEnd) &&
-                lookupElement(elements, op.xref).nonBindable) {
+                lookupElement$1(elements, op.xref).nonBindable) {
                 OpList.insertBefore(createEnableBindingsOp(op.xref), op);
             }
         }
@@ -19523,8 +19564,11 @@ function elementContainerEnd() {
 }
 function template(slot, templateFnRef, decls, vars, tag, constIndex, sourceSpan) {
     const args = [literal(slot), templateFnRef, literal(decls), literal(vars)];
-    if (tag != null && constIndex != null) {
-        args.push(literal(tag), literal(constIndex));
+    if (tag !== null) {
+        args.push(literal(tag));
+        if (constIndex !== null) {
+            args.push(literal(constIndex));
+        }
     }
     return call(Identifiers.templateCreate, args, sourceSpan);
 }
@@ -19594,6 +19638,19 @@ function text(slot, initialValue, sourceSpan) {
     }
     return call(Identifiers.text, args, sourceSpan);
 }
+function projectionDef(def) {
+    return call(Identifiers.projectionDef, def ? [def] : [], null);
+}
+function projection(slot, projectionSlotIndex, attributes) {
+    const args = [literal(slot)];
+    if (projectionSlotIndex !== 0 || attributes !== null) {
+        args.push(literal(projectionSlotIndex));
+        if (attributes != null) {
+            args.push(literal(attributes));
+        }
+    }
+    return call(Identifiers.projection, args, null);
+}
 function i18nStart(slot, constIndex) {
     return call(Identifiers.i18nStart, [literal(slot), literal(constIndex)], null);
 }
@@ -19984,7 +20041,7 @@ function reifyCreateOperations(unit, ops) {
                     throw new Error(`AssertionError: must be compiling a component`);
                 }
                 const childView = unit.job.views.get(op.xref);
-                OpList.replace(op, template(op.slot, variable(childView.fnName), childView.decls, childView.vars, op.tag, op.attributes, op.sourceSpan));
+                OpList.replace(op, template(op.slot, variable(childView.fnName), childView.decls, childView.vars, op.controlFlow ? null : op.tag, op.attributes, op.sourceSpan));
                 break;
             case OpKind.DisableBindings:
                 OpList.replace(op, disableBindings());
@@ -20021,6 +20078,15 @@ function reifyCreateOperations(unit, ops) {
                         break;
                 }
                 break;
+            case OpKind.ProjectionDef:
+                OpList.replace(op, projectionDef(op.def));
+                break;
+            case OpKind.Projection:
+                if (op.slot === null) {
+                    throw new Error('No slot was assigned for project instruction');
+                }
+                OpList.replace(op, projection(op.slot, op.projectionSlotIndex, op.attributes));
+                break;
             case OpKind.Statement:
                 // Pass statement operations directly through.
                 break;
@@ -21073,7 +21139,99 @@ function allowConservativeInlining(decl, target) {
     }
 }
 
+/**
+ * Locate projection slots, populate the each component's `ngContentSelectors` literal field,
+ * populate `project` arguments, and generate the required `projectionDef` instruction for the job's
+ * root view.
+ */
+function phaseGenerateProjectionDef(job) {
+    // TODO: Why does TemplateDefinitionBuilder force a shared constant?
+    const share = job.compatibility === CompatibilityMode.TemplateDefinitionBuilder;
+    // Collect all selectors from this component, and its nested views. Also, assign each projection a
+    // unique ascending projection slot index.
+    const selectors = [];
+    let projectionSlotIndex = 0;
+    for (const unit of job.units) {
+        for (const op of unit.create) {
+            if (op.kind === OpKind.Projection) {
+                selectors.push(op.selector);
+                op.projectionSlotIndex = projectionSlotIndex++;
+            }
+        }
+    }
+    if (selectors.length > 0) {
+        // Create the projectionDef array. If we only found a single wildcard selector, then we use the
+        // default behavior with no arguments instead.
+        let defExpr = null;
+        if (selectors.length > 1 || selectors[0] !== '*') {
+            const def = selectors.map(s => s === '*' ? s : parseSelectorToR3Selector(s));
+            defExpr = job.pool.getConstLiteral(literalOrArrayLiteral(def), share);
+        }
+        // Create the ngContentSelectors constant.
+        job.contentSelectors = job.pool.getConstLiteral(literalOrArrayLiteral(selectors), share);
+        // The projection def instruction goes at the beginning of the root view, before any
+        // `projection` instructions.
+        job.root.create.prepend([createProjectionDefOp(defExpr)]);
+    }
+}
+
+/**
+ * Lifts i18n properties into the consts array.
+ */
+function phaseI18nConstCollection(job) {
+    // Serialize the extracted messages into the const array.
+    // TODO: Use `Map` instead of object.
+    const messageConstIndices = {};
+    for (const unit of job.units) {
+        for (const op of unit.create) {
+            if (op.kind === OpKind.ExtractedMessage) {
+                messageConstIndices[op.owner] = job.addConst(op.expression, op.statements);
+                OpList.remove(op);
+            }
+        }
+    }
+    // Assign const index to i18n ops that messages were extracted from.
+    for (const unit of job.units) {
+        for (const op of unit.create) {
+            if (op.kind === OpKind.I18nStart && messageConstIndices[op.xref] !== undefined) {
+                op.messageIndex = messageConstIndices[op.xref];
+            }
+        }
+    }
+}
+
+/**
+ * Attributes of `ng-content` named 'select' are specifically removed, because they control which
+ * content matches as a property of the `projection`, and are not a plain attribute.
+ */
+function phaseRemoveContentSelectors(job) {
+    for (const unit of job.units) {
+        const elements = getElementsByXrefId(unit);
+        for (const op of unit.update) {
+            switch (op.kind) {
+                case OpKind.Binding:
+                    const target = lookupElement(elements, op.target);
+                    if (op.name.toLowerCase() === 'select' && target.kind === OpKind.Projection) {
+                        OpList.remove(op);
+                    }
+                    continue;
+            }
+        }
+    }
+}
+/**
+ * Looks up an element in the given map by xref ID.
+ */
+function lookupElement(elements, xref) {
+    const el = elements.get(xref);
+    if (el === undefined) {
+        throw new Error('All attributes should have an element-like target.');
+    }
+    return el;
+}
+
 const phases = [
+    { kind: CompilationJobKind.Tmpl, fn: phaseRemoveContentSelectors },
     { kind: CompilationJobKind.Tmpl, fn: phaseGenerateI18nBlocks },
     { kind: CompilationJobKind.Tmpl, fn: phaseI18nTextExtraction },
     { kind: CompilationJobKind.Host, fn: phaseHostStylePropertyParsing },
@@ -21088,6 +21246,7 @@ const phases = [
     { kind: CompilationJobKind.Tmpl, fn: phasePipeCreation },
     { kind: CompilationJobKind.Tmpl, fn: phasePipeVariadic },
     { kind: CompilationJobKind.Both, fn: phasePureLiteralStructures },
+    { kind: CompilationJobKind.Tmpl, fn: phaseGenerateProjectionDef },
     { kind: CompilationJobKind.Tmpl, fn: phaseGenerateVariables },
     { kind: CompilationJobKind.Tmpl, fn: phaseSaveRestoreView },
     { kind: CompilationJobKind.Tmpl, fn: phaseFindAnyCasts },
@@ -21102,6 +21261,7 @@ const phases = [
     { kind: CompilationJobKind.Tmpl, fn: phaseSlotAllocation },
     { kind: CompilationJobKind.Tmpl, fn: phaseResolveI18nPlaceholders },
     { kind: CompilationJobKind.Tmpl, fn: phaseI18nMessageExtraction },
+    { kind: CompilationJobKind.Tmpl, fn: phaseI18nConstCollection },
     { kind: CompilationJobKind.Both, fn: phaseConstCollection },
     { kind: CompilationJobKind.Both, fn: phaseVarCounting },
     { kind: CompilationJobKind.Tmpl, fn: phaseGenerateAdvance },
@@ -21297,6 +21457,9 @@ function ingestNodes(unit, template) {
         else if (node instanceof Template) {
             ingestTemplate(unit, node);
         }
+        else if (node instanceof Content) {
+            ingestContent(unit, node);
+        }
         else if (node instanceof Text$3) {
             ingestText(unit, node);
         }
@@ -21339,7 +21502,7 @@ function ingestTemplate(unit, tmpl) {
         [namespacePrefix, tagNameWithoutNamespace] = splitNsName(tmpl.tagName);
     }
     // TODO: validate the fallback tag name here.
-    const tplOp = createTemplateOp(childView.xref, tagNameWithoutNamespace ?? 'ng-template', namespaceForKey(namespacePrefix), tmpl.i18n, tmpl.startSourceSpan);
+    const tplOp = createTemplateOp(childView.xref, tagNameWithoutNamespace ?? 'ng-template', namespaceForKey(namespacePrefix), false, tmpl.i18n, tmpl.startSourceSpan);
     unit.create.push(tplOp);
     ingestBindings(unit, tplOp, tmpl);
     ingestReferences(tplOp, tmpl);
@@ -21348,6 +21511,16 @@ function ingestTemplate(unit, tmpl) {
         childView.contextVariables.set(name, value);
     }
 }
+/**
+ * Ingest a literal text node from the AST into the given `ViewCompilation`.
+ */
+function ingestContent(unit, content) {
+    const op = createProjectionOp(unit.job.allocateXrefId(), content.selector);
+    for (const attr of content.attributes) {
+        ingestBinding(unit, op.xref, attr.name, literal(attr.value), 1 /* e.BindingType.Attribute */, null, SecurityContext.NONE, attr.sourceSpan, true, false);
+    }
+    unit.create.push(op);
+}
 /**
  * Ingest a literal text node from the AST into the given `ViewCompilation`.
  */
@@ -21379,7 +21552,7 @@ function ingestSwitchBlock(unit, switchBlock) {
         const cView = unit.job.allocateView(unit.xref);
         if (!firstXref)
             firstXref = cView.xref;
-        unit.create.push(createTemplateOp(cView.xref, 'Case', Namespace.HTML, undefined, null));
+        unit.create.push(createTemplateOp(cView.xref, 'Case', Namespace.HTML, true, undefined, null));
         const caseExpr = switchCase.expression ? convertAst(switchCase.expression, unit.job) : null;
         conditions.push([cView.xref, caseExpr]);
         ingestNodes(cView, switchCase.children);
@@ -22832,16 +23005,15 @@ function parseForLoopParameters(block, errors, bindingParser) {
     }
     const [, itemName, rawExpression] = match;
     const result = {
-        itemName,
+        itemName: new Variable(itemName, '$implicit', expressionParam.sourceSpan, expressionParam.sourceSpan),
         trackBy: null,
         expression: parseBlockParameterToBinding(expressionParam, bindingParser, rawExpression),
-        context: null,
+        context: {},
     };
     for (const param of secondaryParams) {
         const letMatch = param.expression.match(FOR_LOOP_LET_PATTERN);
         if (letMatch !== null) {
-            result.context = result.context || {};
-            parseLetParameter(param.sourceSpan, letMatch[1], result.context, errors);
+            parseLetParameter(param.sourceSpan, letMatch[1], param.sourceSpan, result.context, errors);
             continue;
         }
         const trackMatch = param.expression.match(FOR_LOOP_TRACK_PATTERN);
@@ -22856,15 +23028,22 @@ function parseForLoopParameters(block, errors, bindingParser) {
         }
         errors.push(new ParseError(param.sourceSpan, `Unrecognized loop paramater "${param.expression}"`));
     }
+    // Fill out any variables that haven't been defined explicitly.
+    for (const variableName of ALLOWED_FOR_LOOP_LET_VARIABLES) {
+        if (!result.context.hasOwnProperty(variableName)) {
+            result.context[variableName] =
+                new Variable(variableName, variableName, block.startSourceSpan, block.startSourceSpan);
+        }
+    }
     return result;
 }
 /** Parses the `let` parameter of a `for` loop block. */
-function parseLetParameter(sourceSpan, expression, context, errors) {
+function parseLetParameter(sourceSpan, expression, span, context, errors) {
     const parts = expression.split(',');
     for (const part of parts) {
         const expressionParts = part.split('=');
         const name = expressionParts.length === 2 ? expressionParts[0].trim() : '';
-        const variableName = expressionParts.length === 2 ? expressionParts[1].trim() : '';
+        const variableName = (expressionParts.length === 2 ? expressionParts[1].trim() : '');
         if (name.length === 0 || variableName.length === 0) {
             errors.push(new ParseError(sourceSpan, `Invalid for loop "let" parameter. Parameter should match the pattern "<name> = <variable name>"`));
         }
@@ -22875,7 +23054,7 @@ function parseLetParameter(sourceSpan, expression, context, errors) {
             errors.push(new ParseError(sourceSpan, `Duplicate "let" parameter variable "${variableName}"`));
         }
         else {
-            context[variableName] = name;
+            context[variableName] = new Variable(name, variableName, span, span);
         }
     }
 }
@@ -22992,7 +23171,8 @@ function parseConditionalBlockParameters(block, errors, bindingParser) {
             errors.push(new ParseError(param.sourceSpan, 'Conditional can only have one "as" expression'));
         }
         else {
-            expressionAlias = aliasMatch[1].trim();
+            const name = aliasMatch[1].trim();
+            expressionAlias = new Variable(name, name, param.sourceSpan, param.sourceSpan);
         }
     }
     return { expression, expressionAlias };
@@ -23271,10 +23451,10 @@ function createTimerTrigger(parameters, sourceSpan) {
     return new TimerDeferredTrigger(delay, sourceSpan);
 }
 function createInteractionTrigger(parameters, sourceSpan) {
-    if (parameters.length > 1) {
-        throw new Error(`"${OnTriggerType.INTERACTION}" trigger can only have zero or one parameters`);
+    if (parameters.length !== 1) {
+        throw new Error(`"${OnTriggerType.INTERACTION}" trigger must have exactly one parameter`);
     }
-    return new InteractionDeferredTrigger(parameters[0] ?? null, sourceSpan);
+    return new InteractionDeferredTrigger(parameters[0], sourceSpan);
 }
 function createImmediateTrigger(parameters, sourceSpan) {
     if (parameters.length > 0) {
@@ -23283,10 +23463,10 @@ function createImmediateTrigger(parameters, sourceSpan) {
     return new ImmediateDeferredTrigger(sourceSpan);
 }
 function createHoverTrigger(parameters, sourceSpan) {
-    if (parameters.length > 0) {
-        throw new Error(`"${OnTriggerType.HOVER}" trigger cannot have parameters`);
+    if (parameters.length !== 1) {
+        throw new Error(`"${OnTriggerType.HOVER}" trigger must have exactly one parameter`);
     }
-    return new HoverDeferredTrigger(sourceSpan);
+    return new HoverDeferredTrigger(parameters[0], sourceSpan);
 }
 function createViewportTrigger(parameters, sourceSpan) {
     // TODO: the RFC has some more potential parameters for `viewport`.
@@ -25035,8 +25215,8 @@ class TemplateDefinitionBuilder {
             // If the branch has an alias, it'll be assigned directly to the container's context.
             // We define a variable referring directly to the context so that any nested usages can be
             // rewritten to refer to it.
-            const variables = expressionAlias ?
-                [new Variable(expressionAlias, DIRECT_CONTEXT_REFERENCE, sourceSpan, sourceSpan)] :
+            const variables = expressionAlias !== null ?
+                [new Variable(expressionAlias.name, DIRECT_CONTEXT_REFERENCE, expressionAlias.sourceSpan, expressionAlias.keySpan)] :
                 undefined;
             return {
                 index: this.createEmbeddedTemplateFn(null, children, '_Conditional', sourceSpan, variables),
@@ -25244,11 +25424,7 @@ class TemplateDefinitionBuilder {
         // Allocate one slot for the repeater metadata. The slots for the primary and empty block
         // are implicitly inferred by the runtime to index + 1 and index + 2.
         const blockIndex = this.allocateDataSlot();
-        const primaryData = this.prepareEmbeddedTemplateFn(block.children, '_For', [
-            new Variable(block.itemName, '$implicit', block.sourceSpan, block.sourceSpan),
-            new Variable(getLoopLocalName(block, '$index'), '$index', block.sourceSpan, block.sourceSpan),
-            new Variable(getLoopLocalName(block, '$count'), '$count', block.sourceSpan, block.sourceSpan),
-        ]);
+        const primaryData = this.prepareEmbeddedTemplateFn(block.children, '_For', [block.item, block.contextVariables.$index, block.contextVariables.$count]);
         const emptyData = block.empty === null ?
             null :
             this.prepareEmbeddedTemplateFn(block.empty.children, '_ForEmpty');
@@ -25278,34 +25454,35 @@ class TemplateDefinitionBuilder {
         this.updateInstruction(block.sourceSpan, Identifiers.repeater, () => [literal(blockIndex), this.convertPropertyBinding(value)]);
     }
     registerComputedLoopVariables(block, bindingScope) {
-        const indexLocalName = getLoopLocalName(block, '$index');
-        const countLocalName = getLoopLocalName(block, '$count');
+        const indexLocalName = block.contextVariables.$index.name;
+        const countLocalName = block.contextVariables.$count.name;
         const level = bindingScope.bindingLevel;
-        bindingScope.set(level, getLoopLocalName(block, '$odd'), scope => scope.get(indexLocalName).modulo(literal(2)).notIdentical(literal(0)));
-        bindingScope.set(level, getLoopLocalName(block, '$even'), scope => scope.get(indexLocalName).modulo(literal(2)).identical(literal(0)));
-        bindingScope.set(level, getLoopLocalName(block, '$first'), scope => scope.get(indexLocalName).identical(literal(0)));
-        bindingScope.set(level, getLoopLocalName(block, '$last'), scope => scope.get(indexLocalName).identical(scope.get(countLocalName).minus(literal(1))));
+        bindingScope.set(level, block.contextVariables.$odd.name, scope => scope.get(indexLocalName).modulo(literal(2)).notIdentical(literal(0)));
+        bindingScope.set(level, block.contextVariables.$even.name, scope => scope.get(indexLocalName).modulo(literal(2)).identical(literal(0)));
+        bindingScope.set(level, block.contextVariables.$first.name, scope => scope.get(indexLocalName).identical(literal(0)));
+        bindingScope.set(level, block.contextVariables.$last.name, scope => scope.get(indexLocalName).identical(scope.get(countLocalName).minus(literal(1))));
     }
     optimizeTrackByFunction(block) {
+        const indexLocalName = block.contextVariables.$index.name;
+        const itemName = block.item.name;
         const ast = block.trackBy.ast;
         // Top-level access of `$index` uses the built in `repeaterTrackByIndex`.
         if (ast instanceof PropertyRead && ast.receiver instanceof ImplicitReceiver &&
-            ast.name === getLoopLocalName(block, '$index')) {
+            ast.name === indexLocalName) {
             return { expression: importExpr(Identifiers.repeaterTrackByIndex), usesComponentInstance: false };
         }
         // Top-level access of the item uses the built in `repeaterTrackByIdentity`.
         if (ast instanceof PropertyRead && ast.receiver instanceof ImplicitReceiver &&
-            ast.name === block.itemName) {
+            ast.name === itemName) {
             return { expression: importExpr(Identifiers.repeaterTrackByIdentity), usesComponentInstance: false };
         }
         // Top-level calls in the form of `fn($index, item)` can be passed in directly.
         if (ast instanceof Call && ast.receiver instanceof PropertyRead &&
             ast.receiver.receiver instanceof ImplicitReceiver && ast.args.length === 2) {
             const firstIsIndex = ast.args[0] instanceof PropertyRead &&
-                ast.args[0].receiver instanceof ImplicitReceiver &&
-                ast.args[0].name === getLoopLocalName(block, '$index');
+                ast.args[0].receiver instanceof ImplicitReceiver && ast.args[0].name === indexLocalName;
             const secondIsItem = ast.args[1] instanceof PropertyRead &&
-                ast.args[1].receiver instanceof ImplicitReceiver && ast.args[1].name === block.itemName;
+                ast.args[1].receiver instanceof ImplicitReceiver && ast.args[1].name === itemName;
             if (firstIsIndex && secondIsItem) {
                 // If we're in the top-level component, we can access directly through `ctx`,
                 // otherwise we have to get a hold of the component through `componentInstance()`.
@@ -25322,20 +25499,22 @@ class TemplateDefinitionBuilder {
         if (optimizedFn !== null) {
             return optimizedFn;
         }
-        // Referencing these requires access to the context which the tracking function
-        // might not have. `$index` is special because of backwards compatibility.
-        const bannedGlobals = new Set([
-            getLoopLocalName(block, '$count'), getLoopLocalName(block, '$first'),
-            getLoopLocalName(block, '$last'), getLoopLocalName(block, '$even'),
-            getLoopLocalName(block, '$odd')
-        ]);
+        const contextVars = block.contextVariables;
         const scope = new TrackByBindingScope(this._bindingScope, {
             // Alias `$index` and the item name to `$index` and `$item` respectively.
             // This allows us to reuse pure functions that may have different item names,
             // but are otherwise identical.
-            [getLoopLocalName(block, '$index')]: '$index',
-            [block.itemName]: '$item',
-        }, bannedGlobals);
+            [contextVars.$index.name]: '$index',
+            [block.item.name]: '$item',
+            // Accessing these variables in a tracking function will result in a template diagnostic.
+            // We define them as globals so that their accesses are preserved verbatim instead of being
+            // rewritten to the actual accesses.
+            [contextVars.$count.name]: contextVars.$count.name,
+            [contextVars.$first.name]: contextVars.$first.name,
+            [contextVars.$last.name]: contextVars.$last.name,
+            [contextVars.$even.name]: contextVars.$even.name,
+            [contextVars.$odd.name]: contextVars.$odd.name,
+        });
         const params = [new FnParam('$index'), new FnParam('$item')];
         const stmts = convertPureComponentScopeFunction(block.trackBy.ast, scope, variable(CONTEXT_NAME), 'track');
         const usesComponentInstance = scope.getComponentAccessCount() > 0;
@@ -25351,6 +25530,7 @@ class TemplateDefinitionBuilder {
                     stmts[stmts.length - 1] = new ReturnStatement(lastStatement.expr);
                 }
             }
+            // This has to be a function expression, because `.bind` doesn't work on arrow functions.
             fn$1 = fn(params, stmts);
         }
         return {
@@ -25993,25 +26173,20 @@ class BindingScope {
 }
 /** Binding scope of a `track` function inside a `for` loop block. */
 class TrackByBindingScope extends BindingScope {
-    constructor(parentScope, globalAliases, bannedGlobals) {
+    constructor(parentScope, globalAliases) {
         super(parentScope.bindingLevel + 1, parentScope);
         this.globalAliases = globalAliases;
-        this.bannedGlobals = bannedGlobals;
         this.componentAccessCount = 0;
     }
     get(name) {
         let current = this.parent;
-        // Verify that the expression isn't trying to access a variable from a parent scope.
+        // Prevent accesses of template variables outside the `for` loop.
         while (current) {
             if (current.hasLocal(name)) {
-                this.forbiddenAccessError(name);
+                return null;
             }
             current = current.parent;
         }
-        // If the variable is one of the banned globals, we have to throw.
-        if (this.bannedGlobals.has(name)) {
-            this.forbiddenAccessError(name);
-        }
         // Intercept any aliased globals.
         if (this.globalAliases[name]) {
             return variable(this.globalAliases[name]);
@@ -26024,11 +26199,6 @@ class TrackByBindingScope extends BindingScope {
     getComponentAccessCount() {
         return this.componentAccessCount;
     }
-    forbiddenAccessError(propertyName) {
-        // TODO(crisbeto): this should be done through template type checking once it is available.
-        throw new Error(`Accessing ${propertyName} inside of a track expression is not allowed. ` +
-            `Tracking expressions can only access the item, $index and properties on the containing component.`);
-    }
 }
 /**
  * Creates a `CssSelector` given a tag name and a map of attributes
@@ -26346,10 +26516,6 @@ function createClosureModeGuard() {
         .notIdentical(literal('undefined', STRING_TYPE))
         .and(variable(NG_I18N_CLOSURE_MODE));
 }
-/** Determines the name that a built in loop context variable is available under. */
-function getLoopLocalName(block, name) {
-    return block.contextVariables?.[name] || name;
-}
 
 // This regex matches any binding names that contain the "attr." prefix, e.g. "attr.required"
 // If there is a match, the first matching group will contain the attribute name to bind.
@@ -26508,6 +26674,9 @@ function compileComponentFromMetadata(meta, constantPool, bindingParser) {
         transform(tpl, CompilationJobKind.Tmpl);
         // Finally we emit the template function:
         const templateFn = emitTemplateFn(tpl, constantPool);
+        if (tpl.contentSelectors !== null) {
+            definitionMap.set('ngContentSelectors', tpl.contentSelectors);
+        }
         definitionMap.set('decls', literal(tpl.root.decls));
         definitionMap.set('vars', literal(tpl.root.vars));
         if (tpl.consts.length > 0) {
@@ -27735,7 +27904,7 @@ function publishFacade(global) {
  * @description
  * Entry point for all public APIs of the compiler package.
  */
-const VERSION = new Version('17.0.0-next.4');
+const VERSION = new Version('17.0.0-next.5');
 
 class CompilerConfig {
     constructor({ defaultEncapsulation = ViewEncapsulation.Emulated, useJit = true, missingTranslation = null, preserveWhitespaces, strictInjectionParameters } = {}) {
@@ -29197,7 +29366,7 @@ class R3TargetBinder {
         // scopes in the template and makes them available for later use.
         const scope = Scope.apply(target.template);
         // Use the `Scope` to extract the entities present at every level of the template.
-        const templateEntities = extractTemplateEntities(scope);
+        const scopedNodeEntities = extractScopedNodeEntities(scope);
         // Next, perform directive matching on the template using the `DirectiveBinder`. This returns:
         //   - directives: Map of nodes (elements & ng-templates) to the directives on them.
         //   - bindings: Map of inputs, outputs, and attributes to the directive/element that claims
@@ -29207,7 +29376,7 @@ class R3TargetBinder {
         // Finally, run the TemplateBinder to bind references, variables, and other entities within the
         // template. This extracts all the metadata that doesn't depend on directive matching.
         const { expressions, symbols, nestingLevel, usedPipes, eagerPipes, deferBlocks } = TemplateBinder.applyWithScope(target.template, scope);
-        return new R3BoundTarget(target, directives, eagerDirectives, bindings, references, expressions, symbols, nestingLevel, templateEntities, usedPipes, eagerPipes, deferBlocks);
+        return new R3BoundTarget(target, directives, eagerDirectives, bindings, references, expressions, symbols, nestingLevel, scopedNodeEntities, usedPipes, eagerPipes, deferBlocks);
     }
 }
 /**
@@ -29218,17 +29387,19 @@ class R3TargetBinder {
  * be analyzed and have their child `Scope`s available in `childScopes`.
  */
 class Scope {
-    constructor(parentScope, template) {
+    constructor(parentScope, rootNode) {
         this.parentScope = parentScope;
-        this.template = template;
+        this.rootNode = rootNode;
         /**
          * Named members of the `Scope`, such as `Reference`s or `Variable`s.
          */
         this.namedEntities = new Map();
         /**
-         * Child `Scope`s for immediately nested `Template`s.
+         * Child `Scope`s for immediately nested `ScopedNode`s.
          */
         this.childScopes = new Map();
+        this.isDeferred =
+            parentScope !== null && parentScope.isDeferred ? true : rootNode instanceof DeferredBlock;
     }
     static newRootScope() {
         return new Scope(null, null);
@@ -29243,18 +29414,35 @@ class Scope {
         return scope;
     }
     /**
-     * Internal method to process the template and populate the `Scope`.
+     * Internal method to process the scoped node and populate the `Scope`.
      */
-    ingest(template) {
-        if (template instanceof Template) {
+    ingest(nodeOrNodes) {
+        if (nodeOrNodes instanceof Template) {
             // Variables on an <ng-template> are defined in the inner scope.
-            template.variables.forEach(node => this.visitVariable(node));
+            nodeOrNodes.variables.forEach(node => this.visitVariable(node));
             // Process the nodes of the template.
-            template.children.forEach(node => node.visit(this));
+            nodeOrNodes.children.forEach(node => node.visit(this));
+        }
+        else if (nodeOrNodes instanceof IfBlockBranch) {
+            if (nodeOrNodes.expressionAlias !== null) {
+                this.visitVariable(nodeOrNodes.expressionAlias);
+            }
+            nodeOrNodes.children.forEach(node => node.visit(this));
+        }
+        else if (nodeOrNodes instanceof ForLoopBlock) {
+            this.visitVariable(nodeOrNodes.item);
+            Object.values(nodeOrNodes.contextVariables).forEach(v => this.visitVariable(v));
+            nodeOrNodes.children.forEach(node => node.visit(this));
+        }
+        else if (nodeOrNodes instanceof SwitchBlockCase || nodeOrNodes instanceof ForLoopBlockEmpty ||
+            nodeOrNodes instanceof DeferredBlock || nodeOrNodes instanceof DeferredBlockError ||
+            nodeOrNodes instanceof DeferredBlockPlaceholder ||
+            nodeOrNodes instanceof DeferredBlockLoading) {
+            nodeOrNodes.children.forEach(node => node.visit(this));
         }
         else {
             // No overarching `Template` instance, so process the nodes directly.
-            template.forEach(node => node.visit(this));
+            nodeOrNodes.forEach(node => node.visit(this));
         }
     }
     visitElement(element) {
@@ -29268,9 +29456,7 @@ class Scope {
         // processing the template's child scope.
         template.references.forEach(node => this.visitReference(node));
         // Next, create an inner scope and process the template within it.
-        const scope = new Scope(this, template);
-        scope.ingest(template);
-        this.childScopes.set(template, scope);
+        this.ingestScopedNode(template);
     }
     visitVariable(variable) {
         // Declare the variable if it's not already.
@@ -29281,38 +29467,38 @@ class Scope {
         this.maybeDeclare(reference);
     }
     visitDeferredBlock(deferred) {
-        deferred.children.forEach(node => node.visit(this));
+        this.ingestScopedNode(deferred);
         deferred.placeholder?.visit(this);
         deferred.loading?.visit(this);
         deferred.error?.visit(this);
     }
     visitDeferredBlockPlaceholder(block) {
-        block.children.forEach(node => node.visit(this));
+        this.ingestScopedNode(block);
     }
     visitDeferredBlockError(block) {
-        block.children.forEach(node => node.visit(this));
+        this.ingestScopedNode(block);
     }
     visitDeferredBlockLoading(block) {
-        block.children.forEach(node => node.visit(this));
+        this.ingestScopedNode(block);
     }
     visitSwitchBlock(block) {
         block.cases.forEach(node => node.visit(this));
     }
     visitSwitchBlockCase(block) {
-        block.children.forEach(node => node.visit(this));
+        this.ingestScopedNode(block);
     }
     visitForLoopBlock(block) {
-        block.children.forEach(node => node.visit(this));
+        this.ingestScopedNode(block);
         block.empty?.visit(this);
     }
     visitForLoopBlockEmpty(block) {
-        block.children.forEach(node => node.visit(this));
+        this.ingestScopedNode(block);
     }
     visitIfBlock(block) {
         block.branches.forEach(node => node.visit(this));
     }
     visitIfBlockBranch(block) {
-        block.children.forEach(node => node.visit(this));
+        this.ingestScopedNode(block);
     }
     // Unused visitors.
     visitContent(content) { }
@@ -29349,17 +29535,22 @@ class Scope {
         }
     }
     /**
-     * Get the child scope for a `Template`.
+     * Get the child scope for a `ScopedNode`.
      *
      * This should always be defined.
      */
-    getChildScope(template) {
-        const res = this.childScopes.get(template);
+    getChildScope(node) {
+        const res = this.childScopes.get(node);
         if (res === undefined) {
-            throw new Error(`Assertion error: child scope for ${template} not found`);
+            throw new Error(`Assertion error: child scope for ${node} not found`);
         }
         return res;
     }
+    ingestScopedNode(node) {
+        const scope = new Scope(this, node);
+        scope.ingest(node);
+        this.childScopes.set(node, scope);
+    }
 }
 /**
  * Processes a template and matches directives on nodes (elements and templates).
@@ -29492,6 +29683,8 @@ class DirectiveBinder {
         block.children.forEach(node => node.visit(this));
     }
     visitForLoopBlock(block) {
+        block.item.visit(this);
+        Object.values(block.contextVariables).forEach(v => v.visit(this));
         block.children.forEach(node => node.visit(this));
         block.empty?.visit(this);
     }
@@ -29502,6 +29695,7 @@ class DirectiveBinder {
         block.branches.forEach(node => node.visit(this));
     }
     visitIfBlockBranch(block) {
+        block.expressionAlias?.visit(this);
         block.children.forEach(node => node.visit(this));
     }
     // Unused visitors.
@@ -29527,7 +29721,7 @@ class DirectiveBinder {
  * by overridden methods from that visitor.
  */
 class TemplateBinder extends RecursiveAstVisitor {
-    constructor(bindings, symbols, usedPipes, eagerPipes, deferBlocks, nestingLevel, scope, template, level) {
+    constructor(bindings, symbols, usedPipes, eagerPipes, deferBlocks, nestingLevel, scope, rootNode, level) {
         super();
         this.bindings = bindings;
         this.symbols = symbols;
@@ -29536,10 +29730,8 @@ class TemplateBinder extends RecursiveAstVisitor {
         this.deferBlocks = deferBlocks;
         this.nestingLevel = nestingLevel;
         this.scope = scope;
-        this.template = template;
+        this.rootNode = rootNode;
         this.level = level;
-        // Indicates whether we are visiting elements within a {#defer} block
-        this.isInDeferBlock = false;
         // Save a bit of processing time by constructing this closure in advance.
         this.visitNode = (node) => node.visit(this);
     }
@@ -29579,18 +29771,39 @@ class TemplateBinder extends RecursiveAstVisitor {
         binder.ingest(nodes);
         return { expressions, symbols, nestingLevel, usedPipes, eagerPipes, deferBlocks };
     }
-    ingest(template) {
-        if (template instanceof Template) {
+    ingest(nodeOrNodes) {
+        if (nodeOrNodes instanceof Template) {
             // For <ng-template>s, process only variables and child nodes. Inputs, outputs, templateAttrs,
             // and references were all processed in the scope of the containing template.
-            template.variables.forEach(this.visitNode);
-            template.children.forEach(this.visitNode);
+            nodeOrNodes.variables.forEach(this.visitNode);
+            nodeOrNodes.children.forEach(this.visitNode);
             // Set the nesting level.
-            this.nestingLevel.set(template, this.level);
+            this.nestingLevel.set(nodeOrNodes, this.level);
+        }
+        else if (nodeOrNodes instanceof IfBlockBranch) {
+            if (nodeOrNodes.expressionAlias !== null) {
+                this.visitNode(nodeOrNodes.expressionAlias);
+            }
+            nodeOrNodes.children.forEach(this.visitNode);
+            this.nestingLevel.set(nodeOrNodes, this.level);
+        }
+        else if (nodeOrNodes instanceof ForLoopBlock) {
+            this.visitNode(nodeOrNodes.item);
+            Object.values(nodeOrNodes.contextVariables).forEach(v => this.visitNode(v));
+            nodeOrNodes.trackBy.visit(this);
+            nodeOrNodes.children.forEach(this.visitNode);
+            this.nestingLevel.set(nodeOrNodes, this.level);
+        }
+        else if (nodeOrNodes instanceof SwitchBlockCase || nodeOrNodes instanceof ForLoopBlockEmpty ||
+            nodeOrNodes instanceof DeferredBlock || nodeOrNodes instanceof DeferredBlockError ||
+            nodeOrNodes instanceof DeferredBlockPlaceholder ||
+            nodeOrNodes instanceof DeferredBlockLoading) {
+            nodeOrNodes.children.forEach(node => node.visit(this));
+            this.nestingLevel.set(nodeOrNodes, this.level);
         }
         else {
             // Visit each node from the top-level template.
-            template.forEach(this.visitNode);
+            nodeOrNodes.forEach(this.visitNode);
         }
     }
     visitElement(element) {
@@ -29598,29 +29811,27 @@ class TemplateBinder extends RecursiveAstVisitor {
         element.inputs.forEach(this.visitNode);
         element.outputs.forEach(this.visitNode);
         element.children.forEach(this.visitNode);
+        element.references.forEach(this.visitNode);
     }
     visitTemplate(template) {
         // First, visit inputs, outputs and template attributes of the template node.
         template.inputs.forEach(this.visitNode);
         template.outputs.forEach(this.visitNode);
         template.templateAttrs.forEach(this.visitNode);
-        // References are also evaluated in the outer context.
         template.references.forEach(this.visitNode);
-        // Next, recurse into the template using its scope, and bumping the nesting level up by one.
-        const childScope = this.scope.getChildScope(template);
-        const binder = new TemplateBinder(this.bindings, this.symbols, this.usedPipes, this.eagerPipes, this.deferBlocks, this.nestingLevel, childScope, template, this.level + 1);
-        binder.ingest(template);
+        // Next, recurse into the template.
+        this.ingestScopedNode(template);
     }
     visitVariable(variable) {
         // Register the `Variable` as a symbol in the current `Template`.
-        if (this.template !== null) {
-            this.symbols.set(variable, this.template);
+        if (this.rootNode !== null) {
+            this.symbols.set(variable, this.rootNode);
         }
     }
     visitReference(reference) {
         // Register the `Reference` as a symbol in the current `Template`.
-        if (this.template !== null) {
-            this.symbols.set(reference, this.template);
+        if (this.rootNode !== null) {
+            this.symbols.set(reference, this.rootNode);
         }
     }
     // Unused template visitors
@@ -29640,10 +29851,7 @@ class TemplateBinder extends RecursiveAstVisitor {
     }
     visitDeferredBlock(deferred) {
         this.deferBlocks.add(deferred);
-        const wasInDeferBlock = this.isInDeferBlock;
-        this.isInDeferBlock = true;
-        deferred.children.forEach(this.visitNode);
-        this.isInDeferBlock = wasInDeferBlock;
+        this.ingestScopedNode(deferred);
         deferred.placeholder && this.visitNode(deferred.placeholder);
         deferred.loading && this.visitNode(deferred.loading);
         deferred.error && this.visitNode(deferred.error);
@@ -29654,13 +29862,13 @@ class TemplateBinder extends RecursiveAstVisitor {
         }
     }
     visitDeferredBlockPlaceholder(block) {
-        block.children.forEach(this.visitNode);
+        this.ingestScopedNode(block);
     }
     visitDeferredBlockError(block) {
-        block.children.forEach(this.visitNode);
+        this.ingestScopedNode(block);
     }
     visitDeferredBlockLoading(block) {
-        block.children.forEach(this.visitNode);
+        this.ingestScopedNode(block);
     }
     visitSwitchBlock(block) {
         block.expression.visit(this);
@@ -29668,29 +29876,29 @@ class TemplateBinder extends RecursiveAstVisitor {
     }
     visitSwitchBlockCase(block) {
         block.expression?.visit(this);
-        block.children.forEach(this.visitNode);
+        this.ingestScopedNode(block);
     }
     visitForLoopBlock(block) {
         block.expression.visit(this);
-        block.children.forEach(this.visitNode);
+        this.ingestScopedNode(block);
         block.empty?.visit(this);
     }
     visitForLoopBlockEmpty(block) {
-        block.children.forEach(this.visitNode);
+        this.ingestScopedNode(block);
     }
     visitIfBlock(block) {
         block.branches.forEach(node => node.visit(this));
     }
     visitIfBlockBranch(block) {
         block.expression?.visit(this);
-        block.children.forEach(node => node.visit(this));
+        this.ingestScopedNode(block);
     }
     visitBoundText(text) {
         text.value.visit(this);
     }
     visitPipe(ast, context) {
         this.usedPipes.add(ast.name);
-        if (!this.isInDeferBlock) {
+        if (!this.scope.isDeferred) {
             this.eagerPipes.add(ast.name);
         }
         return super.visitPipe(ast, context);
@@ -29698,18 +29906,23 @@ class TemplateBinder extends RecursiveAstVisitor {
     // These five types of AST expressions can refer to expression roots, which could be variables
     // or references in the current scope.
     visitPropertyRead(ast, context) {
-        this.maybeMap(context, ast, ast.name);
+        this.maybeMap(ast, ast.name);
         return super.visitPropertyRead(ast, context);
     }
     visitSafePropertyRead(ast, context) {
-        this.maybeMap(context, ast, ast.name);
+        this.maybeMap(ast, ast.name);
         return super.visitSafePropertyRead(ast, context);
     }
     visitPropertyWrite(ast, context) {
-        this.maybeMap(context, ast, ast.name);
+        this.maybeMap(ast, ast.name);
         return super.visitPropertyWrite(ast, context);
     }
-    maybeMap(scope, ast, name) {
+    ingestScopedNode(node) {
+        const childScope = this.scope.getChildScope(node);
+        const binder = new TemplateBinder(this.bindings, this.symbols, this.usedPipes, this.eagerPipes, this.deferBlocks, this.nestingLevel, childScope, node, this.level + 1);
+        binder.ingest(node);
+    }
+    maybeMap(ast, name) {
         // If the receiver of the expression isn't the `ImplicitReceiver`, this isn't the root of an
         // `AST` expression that maps to a `Variable` or `Reference`.
         if (!(ast.receiver instanceof ImplicitReceiver)) {
@@ -29729,7 +29942,7 @@ class TemplateBinder extends RecursiveAstVisitor {
  * See `BoundTarget` for documentation on the individual methods.
  */
 class R3BoundTarget {
-    constructor(target, directives, eagerDirectives, bindings, references, exprTargets, symbols, nestingLevel, templateEntities, usedPipes, eagerPipes, deferredBlocks) {
+    constructor(target, directives, eagerDirectives, bindings, references, exprTargets, symbols, nestingLevel, scopedNodeEntities, usedPipes, eagerPipes, deferredBlocks) {
         this.target = target;
         this.directives = directives;
         this.eagerDirectives = eagerDirectives;
@@ -29738,13 +29951,13 @@ class R3BoundTarget {
         this.exprTargets = exprTargets;
         this.symbols = symbols;
         this.nestingLevel = nestingLevel;
-        this.templateEntities = templateEntities;
+        this.scopedNodeEntities = scopedNodeEntities;
         this.usedPipes = usedPipes;
         this.eagerPipes = eagerPipes;
         this.deferredBlocks = deferredBlocks;
     }
-    getEntitiesInTemplateScope(template) {
-        return this.templateEntities.get(template) ?? new Set();
+    getEntitiesInScope(node) {
+        return this.scopedNodeEntities.get(node) ?? new Set();
     }
     getDirectivesOfNode(node) {
         return this.directives.get(node) || null;
@@ -29758,11 +29971,11 @@ class R3BoundTarget {
     getExpressionTarget(expr) {
         return this.exprTargets.get(expr) || null;
     }
-    getTemplateOfSymbol(symbol) {
+    getDefinitionNodeOfSymbol(symbol) {
         return this.symbols.get(symbol) || null;
     }
-    getNestingLevel(template) {
-        return this.nestingLevel.get(template) || 0;
+    getNestingLevel(node) {
+        return this.nestingLevel.get(node) || 0;
     }
     getUsedDirectives() {
         const set = new Set();
@@ -29782,23 +29995,79 @@ class R3BoundTarget {
     getDeferBlocks() {
         return Array.from(this.deferredBlocks);
     }
+    getDeferredTriggerTarget(block, trigger) {
+        // Only triggers that refer to DOM nodes can be resolved.
+        if (!(trigger instanceof InteractionDeferredTrigger) &&
+            !(trigger instanceof ViewportDeferredTrigger) &&
+            !(trigger instanceof HoverDeferredTrigger)) {
+            return null;
+        }
+        const name = trigger.reference;
+        // TODO(crisbeto): account for `viewport` trigger without a `reference`.
+        if (name === null) {
+            return null;
+        }
+        const outsideRef = this.findEntityInScope(block, name);
+        // First try to resolve the target in the scope of the main deferred block. Note that we
+        // skip triggers defined inside the main block itself, because they might not exist yet.
+        if (outsideRef instanceof Reference && this.getDefinitionNodeOfSymbol(outsideRef) !== block) {
+            const target = this.getReferenceTarget(outsideRef);
+            if (target !== null) {
+                return this.referenceTargetToElement(target);
+            }
+        }
+        // If the trigger couldn't be found in the main block, check the
+        // placeholder  block which is shown before the main block has loaded.
+        if (block.placeholder !== null) {
+            const refInPlaceholder = this.findEntityInScope(block.placeholder, name);
+            const targetInPlaceholder = refInPlaceholder instanceof Reference ? this.getReferenceTarget(refInPlaceholder) : null;
+            if (targetInPlaceholder !== null) {
+                return this.referenceTargetToElement(targetInPlaceholder);
+            }
+        }
+        return null;
+    }
+    /**
+     * Finds an entity with a specific name in a scope.
+     * @param rootNode Root node of the scope.
+     * @param name Name of the entity.
+     */
+    findEntityInScope(rootNode, name) {
+        const entities = this.getEntitiesInScope(rootNode);
+        for (const entitity of entities) {
+            if (entitity.name === name) {
+                return entitity;
+            }
+        }
+        return null;
+    }
+    /** Coerces a `ReferenceTarget` to an `Element`, if possible. */
+    referenceTargetToElement(target) {
+        if (target instanceof Element$1) {
+            return target;
+        }
+        if (target instanceof Template) {
+            return null;
+        }
+        return this.referenceTargetToElement(target.node);
+    }
 }
-function extractTemplateEntities(rootScope) {
+function extractScopedNodeEntities(rootScope) {
     const entityMap = new Map();
     function extractScopeEntities(scope) {
-        if (entityMap.has(scope.template)) {
-            return entityMap.get(scope.template);
+        if (entityMap.has(scope.rootNode)) {
+            return entityMap.get(scope.rootNode);
         }
         const currentEntities = scope.namedEntities;
-        let templateEntities;
+        let entities;
         if (scope.parentScope !== null) {
-            templateEntities = new Map([...extractScopeEntities(scope.parentScope), ...currentEntities]);
+            entities = new Map([...extractScopeEntities(scope.parentScope), ...currentEntities]);
         }
         else {
-            templateEntities = new Map(currentEntities);
+            entities = new Map(currentEntities);
         }
-        entityMap.set(scope.template, templateEntities);
-        return templateEntities;
+        entityMap.set(scope.rootNode, entities);
+        return entities;
     }
     const scopesToProcess = [rootScope];
     while (scopesToProcess.length > 0) {
@@ -29893,7 +30162,7 @@ const MINIMUM_PARTIAL_LINKER_VERSION$6 = '12.0.0';
 function compileDeclareClassMetadata(metadata) {
     const definitionMap = new DefinitionMap();
     definitionMap.set('minVersion', literal(MINIMUM_PARTIAL_LINKER_VERSION$6));
-    definitionMap.set('version', literal('17.0.0-next.4'));
+    definitionMap.set('version', literal('17.0.0-next.5'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', metadata.type);
     definitionMap.set('decorators', metadata.decorators);
@@ -30001,7 +30270,7 @@ function createDirectiveDefinitionMap(meta) {
     // in 16.1 is actually used.
     const minVersion = hasTransformFunctions ? MINIMUM_PARTIAL_LINKER_VERSION$5 : '14.0.0';
     definitionMap.set('minVersion', literal(minVersion));
-    definitionMap.set('version', literal('17.0.0-next.4'));
+    definitionMap.set('version', literal('17.0.0-next.5'));
     // e.g. `type: MyDirective`
     definitionMap.set('type', meta.type.value);
     if (meta.isStandalone) {
@@ -30232,7 +30501,7 @@ const MINIMUM_PARTIAL_LINKER_VERSION$4 = '12.0.0';
 function compileDeclareFactoryFunction(meta) {
     const definitionMap = new DefinitionMap();
     definitionMap.set('minVersion', literal(MINIMUM_PARTIAL_LINKER_VERSION$4));
-    definitionMap.set('version', literal('17.0.0-next.4'));
+    definitionMap.set('version', literal('17.0.0-next.5'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', meta.type.value);
     definitionMap.set('deps', compileDependencies(meta.deps));
@@ -30267,7 +30536,7 @@ function compileDeclareInjectableFromMetadata(meta) {
 function createInjectableDefinitionMap(meta) {
     const definitionMap = new DefinitionMap();
     definitionMap.set('minVersion', literal(MINIMUM_PARTIAL_LINKER_VERSION$3));
-    definitionMap.set('version', literal('17.0.0-next.4'));
+    definitionMap.set('version', literal('17.0.0-next.5'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', meta.type.value);
     // Only generate providedIn property if it has a non-null value
@@ -30318,7 +30587,7 @@ function compileDeclareInjectorFromMetadata(meta) {
 function createInjectorDefinitionMap(meta) {
     const definitionMap = new DefinitionMap();
     definitionMap.set('minVersion', literal(MINIMUM_PARTIAL_LINKER_VERSION$2));
-    definitionMap.set('version', literal('17.0.0-next.4'));
+    definitionMap.set('version', literal('17.0.0-next.5'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', meta.type.value);
     definitionMap.set('providers', meta.providers);
@@ -30351,7 +30620,7 @@ function createNgModuleDefinitionMap(meta) {
         throw new Error('Invalid path! Local compilation mode should not get into the partial compilation path');
     }
     definitionMap.set('minVersion', literal(MINIMUM_PARTIAL_LINKER_VERSION$1));
-    definitionMap.set('version', literal('17.0.0-next.4'));
+    definitionMap.set('version', literal('17.0.0-next.5'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', meta.type.value);
     // We only generate the keys in the metadata if the arrays contain values.
@@ -30402,7 +30671,7 @@ function compileDeclarePipeFromMetadata(meta) {
 function createPipeDefinitionMap(meta) {
     const definitionMap = new DefinitionMap();
     definitionMap.set('minVersion', literal(MINIMUM_PARTIAL_LINKER_VERSION));
-    definitionMap.set('version', literal('17.0.0-next.4'));
+    definitionMap.set('version', literal('17.0.0-next.5'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     // e.g. `type: MyPipe`
     definitionMap.set('type', meta.type.value);