@angular/compiler 17.0.0-rc.1 → 17.0.0-rc.3

package/fesm2022/compiler.mjs

@@ -1,5 +1,5 @@
 /**
- * @license Angular v17.0.0-rc.1
+ * @license Angular v17.0.0-rc.3
  * (c) 2010-2022 Google LLC. https://angular.io/
  * License: MIT
  */
@@ -3792,16 +3792,21 @@ class Element$1 {
     }
 }
 class DeferredTrigger {
-    constructor(sourceSpan) {
+    constructor(nameSpan, sourceSpan, prefetchSpan, whenOrOnSourceSpan) {
+        this.nameSpan = nameSpan;
         this.sourceSpan = sourceSpan;
+        this.prefetchSpan = prefetchSpan;
+        this.whenOrOnSourceSpan = whenOrOnSourceSpan;
     }
     visit(visitor) {
         return visitor.visitDeferredTrigger(this);
     }
 }
 class BoundDeferredTrigger extends DeferredTrigger {
-    constructor(value, sourceSpan) {
-        super(sourceSpan);
+    constructor(value, sourceSpan, prefetchSpan, whenSourceSpan) {
+        // BoundDeferredTrigger is for 'when' triggers. These aren't really "triggers" and don't have a
+        // nameSpan. Trigger names are the built in event triggers like hover, interaction, etc.
+        super(/** nameSpan */ null, sourceSpan, prefetchSpan, whenSourceSpan);
         this.value = value;
     }
 }
@@ -3810,75 +3815,75 @@ class IdleDeferredTrigger extends DeferredTrigger {
 class ImmediateDeferredTrigger extends DeferredTrigger {
 }
 class HoverDeferredTrigger extends DeferredTrigger {
-    constructor(reference, sourceSpan) {
-        super(sourceSpan);
+    constructor(reference, nameSpan, sourceSpan, prefetchSpan, onSourceSpan) {
+        super(nameSpan, sourceSpan, prefetchSpan, onSourceSpan);
         this.reference = reference;
     }
 }
 class TimerDeferredTrigger extends DeferredTrigger {
-    constructor(delay, sourceSpan) {
-        super(sourceSpan);
+    constructor(delay, nameSpan, sourceSpan, prefetchSpan, onSourceSpan) {
+        super(nameSpan, sourceSpan, prefetchSpan, onSourceSpan);
         this.delay = delay;
     }
 }
 class InteractionDeferredTrigger extends DeferredTrigger {
-    constructor(reference, sourceSpan) {
-        super(sourceSpan);
+    constructor(reference, nameSpan, sourceSpan, prefetchSpan, onSourceSpan) {
+        super(nameSpan, sourceSpan, prefetchSpan, onSourceSpan);
         this.reference = reference;
     }
 }
 class ViewportDeferredTrigger extends DeferredTrigger {
-    constructor(reference, sourceSpan) {
-        super(sourceSpan);
+    constructor(reference, nameSpan, sourceSpan, prefetchSpan, onSourceSpan) {
+        super(nameSpan, sourceSpan, prefetchSpan, onSourceSpan);
         this.reference = reference;
     }
 }
-class DeferredBlockPlaceholder {
-    constructor(children, minimumTime, sourceSpan, startSourceSpan, endSourceSpan) {
-        this.children = children;
-        this.minimumTime = minimumTime;
+class BlockNode {
+    constructor(nameSpan, sourceSpan, startSourceSpan, endSourceSpan) {
+        this.nameSpan = nameSpan;
         this.sourceSpan = sourceSpan;
         this.startSourceSpan = startSourceSpan;
         this.endSourceSpan = endSourceSpan;
     }
+}
+class DeferredBlockPlaceholder extends BlockNode {
+    constructor(children, minimumTime, nameSpan, sourceSpan, startSourceSpan, endSourceSpan) {
+        super(nameSpan, sourceSpan, startSourceSpan, endSourceSpan);
+        this.children = children;
+        this.minimumTime = minimumTime;
+    }
     visit(visitor) {
         return visitor.visitDeferredBlockPlaceholder(this);
     }
 }
-class DeferredBlockLoading {
-    constructor(children, afterTime, minimumTime, sourceSpan, startSourceSpan, endSourceSpan) {
+class DeferredBlockLoading extends BlockNode {
+    constructor(children, afterTime, minimumTime, nameSpan, sourceSpan, startSourceSpan, endSourceSpan) {
+        super(nameSpan, sourceSpan, startSourceSpan, endSourceSpan);
         this.children = children;
         this.afterTime = afterTime;
         this.minimumTime = minimumTime;
-        this.sourceSpan = sourceSpan;
-        this.startSourceSpan = startSourceSpan;
-        this.endSourceSpan = endSourceSpan;
     }
     visit(visitor) {
         return visitor.visitDeferredBlockLoading(this);
     }
 }
-class DeferredBlockError {
-    constructor(children, sourceSpan, startSourceSpan, endSourceSpan) {
+class DeferredBlockError extends BlockNode {
+    constructor(children, nameSpan, sourceSpan, startSourceSpan, endSourceSpan) {
+        super(nameSpan, sourceSpan, startSourceSpan, endSourceSpan);
         this.children = children;
-        this.sourceSpan = sourceSpan;
-        this.startSourceSpan = startSourceSpan;
-        this.endSourceSpan = endSourceSpan;
     }
     visit(visitor) {
         return visitor.visitDeferredBlockError(this);
     }
 }
-class DeferredBlock {
-    constructor(children, triggers, prefetchTriggers, placeholder, loading, error, sourceSpan, mainBlockSpan, startSourceSpan, endSourceSpan) {
+class DeferredBlock extends BlockNode {
+    constructor(children, triggers, prefetchTriggers, placeholder, loading, error, nameSpan, sourceSpan, mainBlockSpan, startSourceSpan, endSourceSpan) {
+        super(nameSpan, sourceSpan, startSourceSpan, endSourceSpan);
         this.children = children;
         this.placeholder = placeholder;
         this.loading = loading;
         this.error = error;
-        this.sourceSpan = sourceSpan;
         this.mainBlockSpan = mainBlockSpan;
-        this.startSourceSpan = startSourceSpan;
-        this.endSourceSpan = endSourceSpan;
         this.triggers = triggers;
         this.prefetchTriggers = prefetchTriggers;
         // We cache the keys since we know that they won't change and we
@@ -3900,83 +3905,72 @@ class DeferredBlock {
         visitAll$1(visitor, keys.map(k => triggers[k]));
     }
 }
-class SwitchBlock {
+class SwitchBlock extends BlockNode {
     constructor(expression, cases, 
     /**
      * These blocks are only captured to allow for autocompletion in the language service. They
      * aren't meant to be processed in any other way.
      */
-    unknownBlocks, sourceSpan, startSourceSpan, endSourceSpan) {
+    unknownBlocks, sourceSpan, startSourceSpan, endSourceSpan, nameSpan) {
+        super(nameSpan, sourceSpan, startSourceSpan, endSourceSpan);
         this.expression = expression;
         this.cases = cases;
         this.unknownBlocks = unknownBlocks;
-        this.sourceSpan = sourceSpan;
-        this.startSourceSpan = startSourceSpan;
-        this.endSourceSpan = endSourceSpan;
     }
     visit(visitor) {
         return visitor.visitSwitchBlock(this);
     }
 }
-class SwitchBlockCase {
-    constructor(expression, children, sourceSpan, startSourceSpan, endSourceSpan) {
+class SwitchBlockCase extends BlockNode {
+    constructor(expression, children, sourceSpan, startSourceSpan, endSourceSpan, nameSpan) {
+        super(nameSpan, sourceSpan, startSourceSpan, endSourceSpan);
         this.expression = expression;
         this.children = children;
-        this.sourceSpan = sourceSpan;
-        this.startSourceSpan = startSourceSpan;
-        this.endSourceSpan = endSourceSpan;
     }
     visit(visitor) {
         return visitor.visitSwitchBlockCase(this);
     }
 }
-class ForLoopBlock {
-    constructor(item, expression, trackBy, contextVariables, children, empty, sourceSpan, mainBlockSpan, startSourceSpan, endSourceSpan) {
+class ForLoopBlock extends BlockNode {
+    constructor(item, expression, trackBy, trackKeywordSpan, contextVariables, children, empty, sourceSpan, mainBlockSpan, startSourceSpan, endSourceSpan, nameSpan) {
+        super(nameSpan, sourceSpan, startSourceSpan, endSourceSpan);
         this.item = item;
         this.expression = expression;
         this.trackBy = trackBy;
+        this.trackKeywordSpan = trackKeywordSpan;
         this.contextVariables = contextVariables;
         this.children = children;
         this.empty = empty;
-        this.sourceSpan = sourceSpan;
         this.mainBlockSpan = mainBlockSpan;
-        this.startSourceSpan = startSourceSpan;
-        this.endSourceSpan = endSourceSpan;
     }
     visit(visitor) {
         return visitor.visitForLoopBlock(this);
     }
 }
-class ForLoopBlockEmpty {
-    constructor(children, sourceSpan, startSourceSpan, endSourceSpan) {
+class ForLoopBlockEmpty extends BlockNode {
+    constructor(children, sourceSpan, startSourceSpan, endSourceSpan, nameSpan) {
+        super(nameSpan, sourceSpan, startSourceSpan, endSourceSpan);
         this.children = children;
-        this.sourceSpan = sourceSpan;
-        this.startSourceSpan = startSourceSpan;
-        this.endSourceSpan = endSourceSpan;
     }
     visit(visitor) {
         return visitor.visitForLoopBlockEmpty(this);
     }
 }
-class IfBlock {
-    constructor(branches, sourceSpan, startSourceSpan, endSourceSpan) {
+class IfBlock extends BlockNode {
+    constructor(branches, sourceSpan, startSourceSpan, endSourceSpan, nameSpan) {
+        super(nameSpan, sourceSpan, startSourceSpan, endSourceSpan);
         this.branches = branches;
-        this.sourceSpan = sourceSpan;
-        this.startSourceSpan = startSourceSpan;
-        this.endSourceSpan = endSourceSpan;
     }
     visit(visitor) {
         return visitor.visitIfBlock(this);
     }
 }
-class IfBlockBranch {
-    constructor(expression, children, expressionAlias, sourceSpan, startSourceSpan, endSourceSpan) {
+class IfBlockBranch extends BlockNode {
+    constructor(expression, children, expressionAlias, sourceSpan, startSourceSpan, endSourceSpan, nameSpan) {
+        super(nameSpan, sourceSpan, startSourceSpan, endSourceSpan);
         this.expression = expression;
         this.children = children;
         this.expressionAlias = expressionAlias;
-        this.sourceSpan = sourceSpan;
-        this.startSourceSpan = startSourceSpan;
-        this.endSourceSpan = endSourceSpan;
     }
     visit(visitor) {
         return visitor.visitIfBlockBranch(this);
@@ -8800,17 +8794,17 @@ var OpKind;
      */
     OpKind[OpKind["Defer"] = 26] = "Defer";
     /**
-     * An IR operation that provides secondary templates of a `@defer` block.
+     * An operation that controls when a `@defer` loads.
      */
-    OpKind[OpKind["DeferSecondaryBlock"] = 27] = "DeferSecondaryBlock";
+    OpKind[OpKind["DeferOn"] = 27] = "DeferOn";
     /**
-     * An operation that controls when a `@defer` loads.
+     * An operation that controls when a `@defer` loads, using a custom expression as the condition.
      */
-    OpKind[OpKind["DeferOn"] = 28] = "DeferOn";
+    OpKind[OpKind["DeferWhen"] = 28] = "DeferWhen";
     /**
      * An i18n message that has been extracted for inclusion in the consts array.
      */
-    OpKind[OpKind["ExtractedMessage"] = 29] = "ExtractedMessage";
+    OpKind[OpKind["I18nMessage"] = 29] = "I18nMessage";
     /**
      * A host binding property.
      */
@@ -8863,6 +8857,10 @@ var OpKind;
      * An instruction to update an ICU expression.
      */
     OpKind[OpKind["IcuUpdate"] = 42] = "IcuUpdate";
+    /**
+     * An i18n context containing information needed to generate an i18n message.
+     */
+    OpKind[OpKind["I18nContext"] = 43] = "I18nContext";
 })(OpKind || (OpKind = {}));
 /**
  * Distinguishes different kinds of IR expressions.
@@ -8966,6 +8964,10 @@ var ExpressionKind;
      * properties ($even, $first, etc.).
      */
     ExpressionKind[ExpressionKind["DerivedRepeaterVar"] = 23] = "DerivedRepeaterVar";
+    /**
+     * An expression that will be automatically extracted to the component const array.
+     */
+    ExpressionKind[ExpressionKind["ConstCollected"] = 24] = "ConstCollected";
 })(ExpressionKind || (ExpressionKind = {}));
 var VariableFlags;
 (function (VariableFlags) {
@@ -9080,6 +9082,61 @@ var I18nParamResolutionTime;
      */
     I18nParamResolutionTime[I18nParamResolutionTime["Postproccessing"] = 1] = "Postproccessing";
 })(I18nParamResolutionTime || (I18nParamResolutionTime = {}));
+/**
+ * Flags that describe what an i18n param value. These determine how the value is serialized into
+ * the final map.
+ */
+var I18nParamValueFlags;
+(function (I18nParamValueFlags) {
+    I18nParamValueFlags[I18nParamValueFlags["None"] = 0] = "None";
+    /**
+     *  This value represtents an element tag.
+     */
+    I18nParamValueFlags[I18nParamValueFlags["ElementTag"] = 1] = "ElementTag";
+    /**
+     * This value represents a template tag.
+     */
+    I18nParamValueFlags[I18nParamValueFlags["TemplateTag"] = 2] = "TemplateTag";
+    /**
+     * This value represents the opening of a tag.
+     */
+    I18nParamValueFlags[I18nParamValueFlags["OpenTag"] = 4] = "OpenTag";
+    /**
+     * This value represents the closing of a tag.
+     */
+    I18nParamValueFlags[I18nParamValueFlags["CloseTag"] = 8] = "CloseTag";
+})(I18nParamValueFlags || (I18nParamValueFlags = {}));
+/**
+ * Whether the active namespace is HTML, MathML, or SVG mode.
+ */
+var Namespace;
+(function (Namespace) {
+    Namespace[Namespace["HTML"] = 0] = "HTML";
+    Namespace[Namespace["SVG"] = 1] = "SVG";
+    Namespace[Namespace["Math"] = 2] = "Math";
+})(Namespace || (Namespace = {}));
+/**
+ * The type of a `@defer` trigger, for use in the ir.
+ */
+var DeferTriggerKind;
+(function (DeferTriggerKind) {
+    DeferTriggerKind[DeferTriggerKind["Idle"] = 0] = "Idle";
+    DeferTriggerKind[DeferTriggerKind["Immediate"] = 1] = "Immediate";
+    DeferTriggerKind[DeferTriggerKind["Timer"] = 2] = "Timer";
+    DeferTriggerKind[DeferTriggerKind["Hover"] = 3] = "Hover";
+    DeferTriggerKind[DeferTriggerKind["Interaction"] = 4] = "Interaction";
+    DeferTriggerKind[DeferTriggerKind["Viewport"] = 5] = "Viewport";
+})(DeferTriggerKind || (DeferTriggerKind = {}));
+/**
+ * Repeaters implicitly define these derived variables, and child nodes may read them.
+ */
+var DerivedRepeaterVarIdentity;
+(function (DerivedRepeaterVarIdentity) {
+    DerivedRepeaterVarIdentity[DerivedRepeaterVarIdentity["First"] = 0] = "First";
+    DerivedRepeaterVarIdentity[DerivedRepeaterVarIdentity["Last"] = 1] = "Last";
+    DerivedRepeaterVarIdentity[DerivedRepeaterVarIdentity["Even"] = 2] = "Even";
+    DerivedRepeaterVarIdentity[DerivedRepeaterVarIdentity["Odd"] = 3] = "Odd";
+})(DerivedRepeaterVarIdentity || (DerivedRepeaterVarIdentity = {}));
 
 /**
  * Marker symbol for `ConsumesSlotOpTrait`.
@@ -9089,10 +9146,6 @@ const ConsumesSlot = Symbol('ConsumesSlot');
  * Marker symbol for `DependsOnSlotContextOpTrait`.
  */
 const DependsOnSlotContext = Symbol('DependsOnSlotContext');
-/**
- * Marker symbol for `UsesSlotIndex` trait.
- */
-const UsesSlotIndex = Symbol('UsesSlotIndex');
 /**
  * Marker symbol for `ConsumesVars` trait.
  */
@@ -9101,27 +9154,14 @@ const ConsumesVarsTrait = Symbol('ConsumesVars');
  * Marker symbol for `UsesVarOffset` trait.
  */
 const UsesVarOffset = Symbol('UsesVarOffset');
-/**
- * Marker symbol for `HasConst` trait.
- */
-const HasConst = Symbol('HasConst');
 /**
  * Default values for most `ConsumesSlotOpTrait` fields (used with the spread operator to initialize
  * implementors of the trait).
  */
 const TRAIT_CONSUMES_SLOT = {
     [ConsumesSlot]: true,
-    slot: null,
     numSlotsUsed: 1,
 };
-/**
- * Default values for most `UsesSlotIndexTrait` fields (used with the spread operator to initialize
- * implementors of the trait).
- */
-const TRAIT_USES_SLOT_INDEX = {
-    [UsesSlotIndex]: true,
-    targetSlot: null,
-};
 /**
  * Default values for most `DependsOnSlotContextOpTrait` fields (used with the spread operator to
  * initialize implementors of the trait).
@@ -9144,14 +9184,6 @@ const TRAIT_USES_VAR_OFFSET = {
     [UsesVarOffset]: true,
     varOffset: null,
 };
-/**
- * Default values for `HasConst` fields (used with the spread operator to initialize
- * implementors of this trait).
- */
-const TRAIT_HAS_CONST = {
-    [HasConst]: true,
-    constIndex: null,
-};
 /**
  * Test whether an operation implements `ConsumesSlotOpTrait`.
  */
@@ -9173,12 +9205,6 @@ function hasConsumesVarsTrait(value) {
 function hasUsesVarOffsetTrait(expr) {
     return expr[UsesVarOffset] === true;
 }
-function hasUsesSlotIndexTrait(value) {
-    return value[UsesSlotIndex] === true;
-}
-function hasConstTrait(value) {
-    return value[HasConst] === true;
-}
 
 /**
  * Create a `StatementOp`.
@@ -9361,39 +9387,51 @@ function createAdvanceOp(delta, sourceSpan) {
 /**
  * Create a conditional op, which will display an embedded view according to a condtion.
  */
-function createConditionalOp(target, test, conditions, sourceSpan) {
+function createConditionalOp(target, targetSlot, test, conditions, sourceSpan) {
     return {
         kind: OpKind.Conditional,
         target,
+        targetSlot,
         test,
         conditions,
         processed: null,
         sourceSpan,
         contextValue: null,
         ...NEW_OP,
-        ...TRAIT_USES_SLOT_INDEX,
         ...TRAIT_DEPENDS_ON_SLOT_CONTEXT,
         ...TRAIT_CONSUMES_VARS,
     };
 }
-function createRepeaterOp(repeaterCreate, collection, sourceSpan) {
+function createRepeaterOp(repeaterCreate, targetSlot, collection, sourceSpan) {
     return {
         kind: OpKind.Repeater,
         target: repeaterCreate,
+        targetSlot,
         collection,
         sourceSpan,
         ...NEW_OP,
-        ...TRAIT_USES_SLOT_INDEX,
+    };
+}
+function createDeferWhenOp(target, expr, prefetch, sourceSpan) {
+    return {
+        kind: OpKind.DeferWhen,
+        target,
+        expr,
+        prefetch,
+        sourceSpan,
+        ...NEW_OP,
+        ...TRAIT_DEPENDS_ON_SLOT_CONTEXT,
     };
 }
 /**
  * Create an i18n expression op.
  */
-function createI18nExpressionOp(owner, expression, i18nPlaceholder, resolutionTime, sourceSpan) {
+function createI18nExpressionOp(context, target, handle, expression, i18nPlaceholder, resolutionTime, sourceSpan) {
     return {
         kind: OpKind.I18nExpression,
-        owner,
-        target: owner,
+        context,
+        target,
+        handle,
         expression,
         i18nPlaceholder,
         resolutionTime,
@@ -9406,13 +9444,13 @@ function createI18nExpressionOp(owner, expression, i18nPlaceholder, resolutionTi
 /**
  *Creates an op to apply i18n expression ops
  */
-function createI18nApplyOp(target, sourceSpan) {
+function createI18nApplyOp(target, handle, sourceSpan) {
     return {
         kind: OpKind.I18nApply,
         target,
+        handle,
         sourceSpan,
         ...NEW_OP,
-        ...TRAIT_USES_SLOT_INDEX,
     };
 }
 /**
@@ -9427,7 +9465,7 @@ function createIcuUpdateOp(xref, sourceSpan) {
     };
 }
 
-var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+var _a, _b, _c, _d, _e, _f;
 /**
  * Check whether a given `o.Expression` is a logical IR expression type.
  */
@@ -9470,14 +9508,12 @@ class LexicalReadExpr extends ExpressionBase {
  * Runtime operation to retrieve the value of a local reference.
  */
 class ReferenceExpr extends ExpressionBase {
-    static { _a = UsesSlotIndex; }
-    constructor(target, offset) {
+    constructor(target, targetSlot, offset) {
         super();
         this.target = target;
+        this.targetSlot = targetSlot;
         this.offset = offset;
         this.kind = ExpressionKind.Reference;
-        this[_a] = true;
-        this.targetSlot = null;
     }
     visitExpression() { }
     isEquivalent(e) {
@@ -9488,9 +9524,7 @@ class ReferenceExpr extends ExpressionBase {
     }
     transformInternalExpressions() { }
     clone() {
-        const expr = new ReferenceExpr(this.target, this.offset);
-        expr.targetSlot = this.targetSlot;
-        return expr;
+        return new ReferenceExpr(this.target, this.targetSlot, this.offset);
     }
 }
 /**
@@ -9668,12 +9702,12 @@ class ReadVariableExpr extends ExpressionBase {
     }
 }
 class PureFunctionExpr extends ExpressionBase {
-    static { _b = ConsumesVarsTrait, _c = UsesVarOffset; }
+    static { _a = ConsumesVarsTrait, _b = UsesVarOffset; }
     constructor(expression, args) {
         super();
         this.kind = ExpressionKind.PureFunctionExpr;
+        this[_a] = true;
         this[_b] = true;
-        this[_c] = true;
         this.varOffset = null;
         /**
          * Once extracted to the `ConstantPool`, a reference to the function which defines the computation
@@ -9737,17 +9771,16 @@ class PureFunctionParameterExpr extends ExpressionBase {
     }
 }
 class PipeBindingExpr extends ExpressionBase {
-    static { _d = UsesSlotIndex, _e = ConsumesVarsTrait, _f = UsesVarOffset; }
-    constructor(target, name, args) {
+    static { _c = ConsumesVarsTrait, _d = UsesVarOffset; }
+    constructor(target, targetSlot, name, args) {
         super();
         this.target = target;
+        this.targetSlot = targetSlot;
         this.name = name;
         this.args = args;
         this.kind = ExpressionKind.PipeBinding;
+        this[_c] = true;
         this[_d] = true;
-        this[_e] = true;
-        this[_f] = true;
-        this.targetSlot = null;
         this.varOffset = null;
     }
     visitExpression(visitor, context) {
@@ -9767,25 +9800,23 @@ class PipeBindingExpr extends ExpressionBase {
         }
     }
     clone() {
-        const r = new PipeBindingExpr(this.target, this.name, this.args.map(a => a.clone()));
-        r.targetSlot = this.targetSlot;
+        const r = new PipeBindingExpr(this.target, this.targetSlot, this.name, this.args.map(a => a.clone()));
         r.varOffset = this.varOffset;
         return r;
     }
 }
 class PipeBindingVariadicExpr extends ExpressionBase {
-    static { _g = UsesSlotIndex, _h = ConsumesVarsTrait, _j = UsesVarOffset; }
-    constructor(target, name, args, numArgs) {
+    static { _e = ConsumesVarsTrait, _f = UsesVarOffset; }
+    constructor(target, targetSlot, name, args, numArgs) {
         super();
         this.target = target;
+        this.targetSlot = targetSlot;
         this.name = name;
         this.args = args;
         this.numArgs = numArgs;
         this.kind = ExpressionKind.PipeBindingVariadic;
-        this[_g] = true;
-        this[_h] = true;
-        this[_j] = true;
-        this.targetSlot = null;
+        this[_e] = true;
+        this[_f] = true;
         this.varOffset = null;
     }
     visitExpression(visitor, context) {
@@ -9801,8 +9832,7 @@ class PipeBindingVariadicExpr extends ExpressionBase {
         this.args = transformExpressionsInExpression(this.args, transform, flags);
     }
     clone() {
-        const r = new PipeBindingVariadicExpr(this.target, this.name, this.args.clone(), this.numArgs);
-        r.targetSlot = this.targetSlot;
+        const r = new PipeBindingVariadicExpr(this.target, this.targetSlot, this.name, this.args.clone(), this.numArgs);
         r.varOffset = this.varOffset;
         return r;
     }
@@ -9996,26 +10026,20 @@ class SanitizerExpr extends ExpressionBase {
     transformInternalExpressions() { }
 }
 class SlotLiteralExpr extends ExpressionBase {
-    static { _k = UsesSlotIndex; }
-    constructor(target) {
+    constructor(slot) {
         super();
-        this.target = target;
+        this.slot = slot;
         this.kind = ExpressionKind.SlotLiteralExpr;
-        this[_k] = true;
-        this.targetSlot = null;
     }
     visitExpression(visitor, context) { }
     isEquivalent(e) {
-        return e instanceof SlotLiteralExpr && e.target === this.target &&
-            e.targetSlot === this.targetSlot;
+        return e instanceof SlotLiteralExpr && e.slot === this.slot;
     }
     isConstant() {
         return true;
     }
     clone() {
-        const copy = new SlotLiteralExpr(this.target);
-        copy.targetSlot = this.targetSlot;
-        return copy;
+        return new SlotLiteralExpr(this.slot);
     }
     transformInternalExpressions() { }
 }
@@ -10025,10 +10049,11 @@ class ConditionalCaseExpr extends ExpressionBase {
      * @param expr The expression to be tested for this case. Might be null, as in an `else` case.
      * @param target The Xref of the view to be displayed if this condition is true.
      */
-    constructor(expr, target, alias = null) {
+    constructor(expr, target, targetSlot, alias = null) {
         super();
         this.expr = expr;
         this.target = target;
+        this.targetSlot = targetSlot;
         this.alias = alias;
         this.kind = ExpressionKind.ConditionalCase;
     }
@@ -10044,7 +10069,7 @@ class ConditionalCaseExpr extends ExpressionBase {
         return true;
     }
     clone() {
-        return new ConditionalCaseExpr(this.expr, this.target);
+        return new ConditionalCaseExpr(this.expr, this.target, this.targetSlot);
     }
     transformInternalExpressions(transform, flags) {
         if (this.expr !== null) {
@@ -10052,13 +10077,6 @@ class ConditionalCaseExpr extends ExpressionBase {
         }
     }
 }
-var DerivedRepeaterVarIdentity;
-(function (DerivedRepeaterVarIdentity) {
-    DerivedRepeaterVarIdentity[DerivedRepeaterVarIdentity["First"] = 0] = "First";
-    DerivedRepeaterVarIdentity[DerivedRepeaterVarIdentity["Last"] = 1] = "Last";
-    DerivedRepeaterVarIdentity[DerivedRepeaterVarIdentity["Even"] = 2] = "Even";
-    DerivedRepeaterVarIdentity[DerivedRepeaterVarIdentity["Odd"] = 3] = "Odd";
-})(DerivedRepeaterVarIdentity || (DerivedRepeaterVarIdentity = {}));
 class DerivedRepeaterVarExpr extends ExpressionBase {
     constructor(xref, identity) {
         super();
@@ -10079,6 +10097,31 @@ class DerivedRepeaterVarExpr extends ExpressionBase {
         return new DerivedRepeaterVarExpr(this.xref, this.identity);
     }
 }
+class ConstCollectedExpr extends ExpressionBase {
+    constructor(expr) {
+        super();
+        this.expr = expr;
+        this.kind = ExpressionKind.ConstCollected;
+    }
+    transformInternalExpressions(transform, flags) {
+        this.expr = transform(this.expr, flags);
+    }
+    visitExpression(visitor, context) {
+        this.expr.visitExpression(visitor, context);
+    }
+    isEquivalent(e) {
+        if (!(e instanceof ConstCollectedExpr)) {
+            return false;
+        }
+        return this.expr.isEquivalent(e.expr);
+    }
+    isConstant() {
+        return this.expr.isConstant();
+    }
+    clone() {
+        return new ConstCollectedExpr(this.expr);
+    }
+}
 /**
  * Visits all `Expression`s in the AST of `op` with the `visitor` function.
  */
@@ -10167,12 +10210,6 @@ function transformExpressionsInOp(op, transform, flags) {
             op.expression =
                 op.expression && transformExpressionsInExpression(op.expression, transform, flags);
             break;
-        case OpKind.ExtractedMessage:
-            op.expression = transformExpressionsInExpression(op.expression, transform, flags);
-            for (const statement of op.statements) {
-                transformExpressionsInStatement(statement, transform, flags);
-            }
-            break;
         case OpKind.RepeaterCreate:
             op.track = transformExpressionsInExpression(op.track, transform, flags);
             if (op.trackByFn !== null) {
@@ -10182,34 +10219,49 @@ function transformExpressionsInOp(op, transform, flags) {
         case OpKind.Repeater:
             op.collection = transformExpressionsInExpression(op.collection, transform, flags);
             break;
-        case OpKind.I18n:
-        case OpKind.I18nStart:
-            for (const [placeholder, expression] of op.params) {
-                op.params.set(placeholder, transformExpressionsInExpression(expression, transform, flags));
+        case OpKind.Defer:
+            if (op.loadingConfig !== null) {
+                op.loadingConfig = transformExpressionsInExpression(op.loadingConfig, transform, flags);
+            }
+            if (op.placeholderConfig !== null) {
+                op.placeholderConfig =
+                    transformExpressionsInExpression(op.placeholderConfig, transform, flags);
             }
             break;
-        case OpKind.Defer:
-        case OpKind.DeferSecondaryBlock:
-        case OpKind.DeferOn:
-        case OpKind.Projection:
-        case OpKind.ProjectionDef:
-        case OpKind.Element:
-        case OpKind.ElementStart:
-        case OpKind.ElementEnd:
-        case OpKind.I18nEnd:
+        case OpKind.I18nMessage:
+            for (const [placeholder, expr] of op.params) {
+                op.params.set(placeholder, transformExpressionsInExpression(expr, transform, flags));
+            }
+            for (const [placeholder, expr] of op.postprocessingParams) {
+                op.postprocessingParams.set(placeholder, transformExpressionsInExpression(expr, transform, flags));
+            }
+            break;
+        case OpKind.DeferWhen:
+            op.expr = transformExpressionsInExpression(op.expr, transform, flags);
+            break;
+        case OpKind.Advance:
         case OpKind.Container:
-        case OpKind.ContainerStart:
         case OpKind.ContainerEnd:
-        case OpKind.Template:
+        case OpKind.ContainerStart:
+        case OpKind.DeferOn:
         case OpKind.DisableBindings:
+        case OpKind.Element:
+        case OpKind.ElementEnd:
+        case OpKind.ElementStart:
         case OpKind.EnableBindings:
-        case OpKind.Text:
-        case OpKind.Pipe:
-        case OpKind.Advance:
-        case OpKind.Namespace:
+        case OpKind.I18n:
         case OpKind.I18nApply:
+        case OpKind.I18nContext:
+        case OpKind.I18nEnd:
+        case OpKind.I18nStart:
         case OpKind.Icu:
         case OpKind.IcuUpdate:
+        case OpKind.Namespace:
+        case OpKind.Pipe:
+        case OpKind.Projection:
+        case OpKind.ProjectionDef:
+        case OpKind.Template:
+        case OpKind.Text:
             // These operations contain no expressions.
             break;
         default:
@@ -10581,6 +10633,12 @@ class OpList {
     }
 }
 
+class SlotHandle {
+    constructor() {
+        this.slot = null;
+    }
+}
+
 /**
  * The set of OpKinds that represent the creation of an element or container
  */
@@ -10602,6 +10660,7 @@ function createElementStartOp(tag, xref, namespace, i18nPlaceholder, sourceSpan)
         kind: OpKind.ElementStart,
         xref,
         tag,
+        handle: new SlotHandle(),
         attributes: null,
         localRefs: [],
         nonBindable: false,
@@ -10615,13 +10674,14 @@ function createElementStartOp(tag, xref, namespace, i18nPlaceholder, sourceSpan)
 /**
  * Create a `TemplateOp`.
  */
-function createTemplateOp(xref, tag, namespace, generatedInBlock, i18nPlaceholder, sourceSpan) {
+function createTemplateOp(xref, tag, functionNameSuffix, namespace, i18nPlaceholder, sourceSpan) {
     return {
         kind: OpKind.Template,
         xref,
         attributes: null,
         tag,
-        block: generatedInBlock,
+        handle: new SlotHandle(),
+        functionNameSuffix,
         decls: null,
         vars: null,
         localRefs: [],
@@ -10633,15 +10693,17 @@ function createTemplateOp(xref, tag, namespace, generatedInBlock, i18nPlaceholde
         ...NEW_OP,
     };
 }
-function createRepeaterCreateOp(primaryView, emptyView, track, varNames, sourceSpan) {
+function createRepeaterCreateOp(primaryView, emptyView, tag, track, varNames, sourceSpan) {
     return {
         kind: OpKind.RepeaterCreate,
         attributes: null,
         xref: primaryView,
+        handle: new SlotHandle(),
         emptyView,
         track,
         trackByFn: null,
-        tag: 'For',
+        tag,
+        functionNameSuffix: 'For',
         namespace: Namespace.HTML,
         nonBindable: false,
         localRefs: [],
@@ -10687,6 +10749,7 @@ function createTextOp(xref, initialValue, sourceSpan) {
     return {
         kind: OpKind.Text,
         xref,
+        handle: new SlotHandle(),
         initialValue,
         sourceSpan,
         ...TRAIT_CONSUMES_SLOT,
@@ -10696,10 +10759,11 @@ function createTextOp(xref, initialValue, sourceSpan) {
 /**
  * Create a `ListenerOp`. Host bindings reuse all the listener logic.
  */
-function createListenerOp(target, name, tag, animationPhase, hostListener, sourceSpan) {
+function createListenerOp(target, targetSlot, name, tag, animationPhase, hostListener, sourceSpan) {
     return {
         kind: OpKind.Listener,
         target,
+        targetSlot,
         tag,
         hostListener,
         name,
@@ -10710,27 +10774,18 @@ function createListenerOp(target, name, tag, animationPhase, hostListener, sourc
         animationPhase: animationPhase,
         sourceSpan,
         ...NEW_OP,
-        ...TRAIT_USES_SLOT_INDEX,
     };
 }
-function createPipeOp(xref, name) {
+function createPipeOp(xref, slot, name) {
     return {
         kind: OpKind.Pipe,
         xref,
+        handle: slot,
         name,
         ...NEW_OP,
         ...TRAIT_CONSUMES_SLOT,
     };
 }
-/**
- * Whether the active namespace is HTML, MathML, or SVG mode.
- */
-var Namespace;
-(function (Namespace) {
-    Namespace[Namespace["HTML"] = 0] = "HTML";
-    Namespace[Namespace["SVG"] = 1] = "SVG";
-    Namespace[Namespace["Math"] = 2] = "Math";
-})(Namespace || (Namespace = {}));
 function createNamespaceOp(namespace) {
     return {
         kind: OpKind.Namespace,
@@ -10749,6 +10804,7 @@ function createProjectionOp(xref, selector, sourceSpan) {
     return {
         kind: OpKind.Projection,
         xref,
+        handle: new SlotHandle(),
         selector,
         projectionSlotIndex: 0,
         attributes: [],
@@ -10771,51 +10827,56 @@ function createExtractedAttributeOp(target, bindingKind, name, expression) {
         ...NEW_OP,
     };
 }
-function createDeferOp(xref, main, sourceSpan) {
+function createDeferOp(xref, main, mainSlot, metadata, sourceSpan) {
     return {
         kind: OpKind.Defer,
         xref,
-        target: main,
-        loading: null,
-        placeholder: null,
-        error: null,
+        handle: new SlotHandle(),
+        mainView: main,
+        mainSlot,
+        loadingView: null,
+        loadingSlot: null,
+        loadingConfig: null,
+        loadingMinimumTime: null,
+        loadingAfterTime: null,
+        placeholderView: null,
+        placeholderSlot: null,
+        placeholderConfig: null,
+        placeholderMinimumTime: null,
+        errorView: null,
+        errorSlot: null,
+        metadata,
+        resolverFn: null,
         sourceSpan,
         ...NEW_OP,
         ...TRAIT_CONSUMES_SLOT,
-        ...TRAIT_USES_SLOT_INDEX,
-    };
-}
-function createDeferSecondaryOp(deferOp, secondaryView, secondaryBlockKind) {
-    return {
-        kind: OpKind.DeferSecondaryBlock,
-        deferOp,
-        target: secondaryView,
-        secondaryBlockKind,
-        constValue: null,
-        makeExpression: literalOrArrayLiteral$1,
-        ...NEW_OP,
-        ...TRAIT_USES_SLOT_INDEX,
-        ...TRAIT_HAS_CONST,
+        numSlotsUsed: 2,
     };
 }
-function createDeferOnOp(xref, sourceSpan) {
+function createDeferOnOp(defer, trigger, prefetch, sourceSpan) {
     return {
         kind: OpKind.DeferOn,
-        xref,
+        defer,
+        trigger,
+        prefetch,
         sourceSpan,
         ...NEW_OP,
-        ...TRAIT_CONSUMES_SLOT,
     };
 }
 /**
  * Create an `ExtractedMessageOp`.
  */
-function createExtractedMessageOp(owner, expression, statements) {
+function createI18nMessageOp(xref, i18nBlock, message, messagePlaceholder, params, postprocessingParams, needsPostprocessing) {
     return {
-        kind: OpKind.ExtractedMessage,
-        owner,
-        expression,
-        statements,
+        kind: OpKind.I18nMessage,
+        xref,
+        i18nBlock,
+        message,
+        messagePlaceholder,
+        params,
+        postprocessingParams,
+        needsPostprocessing,
+        subMessages: [],
         ...NEW_OP,
     };
 }
@@ -10826,13 +10887,12 @@ function createI18nStartOp(xref, message, root) {
     return {
         kind: OpKind.I18nStart,
         xref,
+        handle: new SlotHandle(),
         root: root ?? xref,
         message,
-        params: new Map(),
-        postprocessingParams: new Map(),
         messageIndex: null,
         subTemplateIndex: null,
-        needsPostprocessing: false,
+        context: null,
         ...NEW_OP,
         ...TRAIT_CONSUMES_SLOT,
     };
@@ -10850,12 +10910,27 @@ function createI18nEndOp(xref) {
 /**
  * Creates an op to create an ICU expression.
  */
-function createIcuOp(xref, message, sourceSpan) {
+function createIcuOp(xref, message, icu, messagePlaceholder, sourceSpan) {
     return {
         kind: OpKind.Icu,
         xref,
         message,
+        icu,
+        messagePlaceholder,
+        context: null,
+        sourceSpan,
+        ...NEW_OP,
+    };
+}
+function createI18nContextOp(xref, i18nBlock, message, sourceSpan) {
+    return {
+        kind: OpKind.I18nContext,
+        xref,
+        i18nBlock,
+        message,
         sourceSpan,
+        params: new Map(),
+        postprocessingParams: new Map(),
         ...NEW_OP,
     };
 }
@@ -10917,10 +10992,11 @@ class CompilationJob {
  * embedded views or host bindings.
  */
 class ComponentCompilationJob extends CompilationJob {
-    constructor(componentName, pool, compatibility, relativeContextFilePath, i18nUseExternalIds) {
+    constructor(componentName, pool, compatibility, relativeContextFilePath, i18nUseExternalIds, deferBlocksMeta) {
         super(componentName, pool, compatibility);
         this.relativeContextFilePath = relativeContextFilePath;
         this.i18nUseExternalIds = i18nUseExternalIds;
+        this.deferBlocksMeta = deferBlocksMeta;
         this.kind = CompilationJobKind.Tmpl;
         this.fnSuffix = 'Template';
         this.views = new Map();
@@ -11069,9 +11145,10 @@ class HostBindingCompilationUnit extends CompilationUnit {
 }
 
 /**
- * Find any function calls to `$any`, excluding `this.$any`, and delete them.
+ * Find any function calls to `$any`, excluding `this.$any`, and delete them, since they have no
+ * runtime effects.
  */
-function phaseFindAnyCasts(job) {
+function deleteAnyCasts(job) {
     for (const unit of job.units) {
         for (const op of unit.ops()) {
             transformExpressionsInOp(op, removeAnys, VisitorContextFlag.None);
@@ -11092,13 +11169,13 @@ function removeAnys(e) {
 /**
  * Adds apply operations after i18n expressions.
  */
-function phaseApplyI18nExpressions(job) {
+function applyI18nExpressions(job) {
     for (const unit of job.units) {
         for (const op of unit.update) {
             // Only add apply after expressions that are not followed by more expressions.
             if (op.kind === OpKind.I18nExpression && needsApplication(op)) {
                 // TODO: what should be the source span for the apply op?
-                OpList.insertAfter(createI18nApplyOp(op.owner, null), op);
+                OpList.insertAfter(createI18nApplyOp(op.target, op.handle, null), op);
             }
         }
     }
@@ -11111,8 +11188,8 @@ function needsApplication(op) {
     if (op.next?.kind !== OpKind.I18nExpression) {
         return true;
     }
-    // If the next op is an expression targeting a different i18n block, we need to apply.
-    if (op.next.owner !== op.owner) {
+    // If the next op is an expression targeting a different i18n context, we need to apply.
+    if (op.next.context !== op.context) {
         return true;
     }
     return false;
@@ -11121,46 +11198,35 @@ function needsApplication(op) {
 /**
  * Updates i18n expression ops to depend on the last slot in their owning i18n block.
  */
-function phaseAssignI18nSlotDependencies(job) {
+function assignI18nSlotDependencies(job) {
     const i18nLastSlotConsumers = new Map();
+    const i18nContexts = new Map();
     let lastSlotConsumer = null;
+    let currentI18nOp = null;
     for (const unit of job.units) {
         // Record the last consumed slot before each i18n end instruction.
         for (const op of unit.create) {
-            if (op.kind === OpKind.I18nEnd) {
-                i18nLastSlotConsumers.set(op.xref, lastSlotConsumer);
-            }
             if (hasConsumesSlotTrait(op)) {
                 lastSlotConsumer = op.xref;
             }
+            switch (op.kind) {
+                case OpKind.I18nStart:
+                    currentI18nOp = op;
+                    break;
+                case OpKind.I18nEnd:
+                    i18nLastSlotConsumers.set(currentI18nOp.xref, lastSlotConsumer);
+                    currentI18nOp = null;
+                    break;
+                case OpKind.I18nContext:
+                    i18nContexts.set(op.xref, op);
+                    break;
+            }
         }
         // Assign i18n expressions to target the last slot in its owning block.
         for (const op of unit.update) {
             if (op.kind === OpKind.I18nExpression) {
-                op.target = i18nLastSlotConsumers.get(op.owner);
-            }
-        }
-    }
-}
-
-/**
- * Attribute interpolations of the form `[attr.foo]="{{foo}}""` should be "collapsed" into a plain
- * attribute instruction, instead of an `attributeInterpolate` instruction.
- *
- * (We cannot do this for singleton property interpolations, because `propertyInterpolate`
- * stringifies its expression.)
- *
- * The reification step is also capable of performing this transformation, but doing it early in the
- * pipeline allows other phases to accurately know what instruction will be emitted.
- */
-function phaseCollapseSingletonInterpolations(job) {
-    for (const unit of job.units) {
-        for (const op of unit.update) {
-            const eligibleOpKind = op.kind === OpKind.Attribute;
-            if (eligibleOpKind && op.expression instanceof Interpolation &&
-                op.expression.strings.length === 2 &&
-                op.expression.strings.every((s) => s === '')) {
-                op.expression = op.expression.expressions[0];
+                const i18nContext = i18nContexts.get(op.context);
+                op.target = i18nLastSlotConsumers.get(i18nContext.i18nBlock);
             }
         }
     }
@@ -11184,7 +11250,7 @@ function createOpXrefMap(unit) {
  * Find all extractable attribute and binding ops, and create ExtractedAttributeOps for them.
  * In cases where no instruction needs to be generated for the attribute or binding, it is removed.
  */
-function phaseAttributeExtraction(job) {
+function extractAttributes(job) {
     for (const unit of job.units) {
         const elements = createOpXrefMap(unit);
         for (const op of unit.ops()) {
@@ -11282,7 +11348,7 @@ function lookupElement$1(elements, xref) {
     }
     return el;
 }
-function phaseBindingSpecialization(job) {
+function specializeBindings(job) {
     const elements = new Map();
     for (const unit of job.units) {
         for (const op of unit.create) {
@@ -11371,7 +11437,7 @@ const CHAINABLE = new Set([
  * elementStart(0, 'div')(1, 'span');
  * ```
  */
-function phaseChaining(job) {
+function chain(job) {
     for (const unit of job.units) {
         chainOperationsInList(unit.create);
         chainOperationsInList(unit.update);
@@ -11418,9 +11484,32 @@ function chainOperationsInList(opList) {
 }
 
 /**
- * Collapse the various conditions of conditional ops into a single test expression.
- */
-function phaseConditionals(job) {
+ * Attribute interpolations of the form `[attr.foo]="{{foo}}""` should be "collapsed" into a plain
+ * attribute instruction, instead of an `attributeInterpolate` instruction.
+ *
+ * (We cannot do this for singleton property interpolations, because `propertyInterpolate`
+ * stringifies its expression.)
+ *
+ * The reification step is also capable of performing this transformation, but doing it early in the
+ * pipeline allows other phases to accurately know what instruction will be emitted.
+ */
+function collapseSingletonInterpolations(job) {
+    for (const unit of job.units) {
+        for (const op of unit.update) {
+            const eligibleOpKind = op.kind === OpKind.Attribute;
+            if (eligibleOpKind && op.expression instanceof Interpolation &&
+                op.expression.strings.length === 2 &&
+                op.expression.strings.every((s) => s === '')) {
+                op.expression = op.expression.expressions[0];
+            }
+        }
+    }
+}
+
+/**
+ * Collapse the various conditions of conditional ops (if, switch) into a single test expression.
+ */
+function generateConditionalExpressions(job) {
     for (const unit of job.units) {
         for (const op of unit.ops()) {
             if (op.kind !== OpKind.Conditional) {
@@ -11430,8 +11519,8 @@ function phaseConditionals(job) {
             // Any case with a `null` condition is `default`. If one exists, default to it instead.
             const defaultCase = op.conditions.findIndex((cond) => cond.expr === null);
             if (defaultCase >= 0) {
-                const xref = op.conditions.splice(defaultCase, 1)[0].target;
-                test = new SlotLiteralExpr(xref);
+                const slot = op.conditions.splice(defaultCase, 1)[0].targetSlot;
+                test = new SlotLiteralExpr(slot);
             }
             else {
                 // By default, a switch evaluates to `-1`, causing no template to be displayed.
@@ -11457,7 +11546,7 @@ function phaseConditionals(job) {
                         new AssignTemporaryExpr(conditionalCase.expr, caseExpressionTemporaryXref);
                     op.contextValue = new ReadTemporaryExpr(caseExpressionTemporaryXref);
                 }
-                test = new ConditionalExpr(conditionalCase.expr, new SlotLiteralExpr(conditionalCase.target), test);
+                test = new ConditionalExpr(conditionalCase.expr, new SlotLiteralExpr(conditionalCase.targetSlot), test);
             }
             // Save the resulting aggregate Joost-expression.
             op.processed = test;
@@ -11548,14 +11637,14 @@ function literalOrArrayLiteral(value) {
     if (Array.isArray(value)) {
         return literalArr(value.map(literalOrArrayLiteral));
     }
-    return literal(value, INFERRED_TYPE);
+    return literal(value);
 }
 
 /**
  * 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) {
+function collectElementConsts(job) {
     // Collect all extracted attributes.
     const allElementAttributes = new Map();
     for (const unit of job.units) {
@@ -11701,6 +11790,259 @@ function serializeAttributes({ attributes, bindings, classes, i18n, projectAs, s
     return literalArr(attrArray);
 }
 
+/**
+ * Create extracted deps functions for defer ops.
+ */
+function createDeferDepsFns(job) {
+    for (const unit of job.units) {
+        for (const op of unit.create) {
+            if (op.kind === OpKind.Defer) {
+                if (op.metadata.deps.length === 0) {
+                    continue;
+                }
+                const dependencies = [];
+                for (const dep of op.metadata.deps) {
+                    if (dep.isDeferrable) {
+                        // Callback function, e.g. `m () => m.MyCmp;`.
+                        const innerFn = arrowFn([new FnParam('m', DYNAMIC_TYPE)], variable('m').prop(dep.symbolName));
+                        // Dynamic import, e.g. `import('./a').then(...)`.
+                        const importExpr = (new DynamicImportExpr(dep.importPath)).prop('then').callFn([innerFn]);
+                        dependencies.push(importExpr);
+                    }
+                    else {
+                        // Non-deferrable symbol, just use a reference to the type.
+                        dependencies.push(dep.type);
+                    }
+                }
+                const depsFnExpr = arrowFn([], literalArr(dependencies));
+                if (op.handle.slot === null) {
+                    throw new Error('AssertionError: slot must be assigned bfore extracting defer deps functions');
+                }
+                op.resolverFn = job.pool.getSharedFunctionReference(depsFnExpr, `${job.componentName}_Defer_${op.handle.slot}_DepsFn`);
+            }
+        }
+    }
+}
+
+/**
+ * Create one helper context op per i18n block (including generate descending blocks).
+ *
+ * Also, if an ICU exists inside an i18n block that also contains other localizable content (such as
+ * string), create an additional helper context op for the ICU.
+ *
+ * These context ops are later used for generating i18n messages. (Although we generate at least one
+ * context op per nested view, we will collect them up the tree later, to generate a top-level
+ * message.)
+ */
+function createI18nContexts(job) {
+    let currentI18nOp = null;
+    let xref;
+    for (const unit of job.units) {
+        for (const op of unit.create) {
+            switch (op.kind) {
+                case OpKind.I18nStart:
+                    // Each i18n block gets its own context.
+                    xref = job.allocateXrefId();
+                    unit.create.push(createI18nContextOp(xref, op.xref, op.message, null));
+                    op.context = xref;
+                    currentI18nOp = op;
+                    break;
+                case OpKind.I18nEnd:
+                    currentI18nOp = null;
+                    break;
+                case OpKind.Icu:
+                    // If an ICU represents a different message than its containing block, we give it its own
+                    // i18n context.
+                    if (currentI18nOp === null) {
+                        throw Error('Unexpected ICU outside of an i18n block.');
+                    }
+                    if (op.message.id !== currentI18nOp.message.id) {
+                        // There was an enclosing i18n block around this ICU somewhere.
+                        xref = job.allocateXrefId();
+                        unit.create.push(createI18nContextOp(xref, currentI18nOp.xref, op.message, null));
+                        op.context = xref;
+                    }
+                    else {
+                        // The i18n block was generated because of this ICU, OR it was explicit, but the ICU is
+                        // the only localizable content inside of it.
+                        op.context = currentI18nOp.context;
+                    }
+                    break;
+            }
+        }
+    }
+}
+
+/**
+ * Replace the ICU update ops with i18n expression ops.
+ */
+function createI18nIcuExpressions(job) {
+    const icus = new Map();
+    const i18nContexts = new Map();
+    const i18nBlocks = new Map();
+    // Collect maps of ops that need to be referenced to create the I18nExpressionOps.
+    for (const unit of job.units) {
+        for (const op of unit.create) {
+            switch (op.kind) {
+                case OpKind.Icu:
+                    icus.set(op.xref, op);
+                    break;
+                case OpKind.I18nContext:
+                    i18nContexts.set(op.xref, op);
+                    break;
+                case OpKind.I18nStart:
+                    i18nBlocks.set(op.xref, op);
+                    break;
+            }
+        }
+        // Replace each IcuUpdateOp with an I18nExpressionOp.
+        for (const op of unit.update) {
+            switch (op.kind) {
+                case OpKind.IcuUpdate:
+                    const icuOp = icus.get(op.xref);
+                    if (icuOp?.icu.expressionPlaceholder === undefined) {
+                        throw Error('ICU should have an i18n placeholder');
+                    }
+                    if (icuOp.context === null) {
+                        throw Error('ICU should have its i18n context set');
+                    }
+                    const i18nContext = i18nContexts.get(icuOp.context);
+                    const i18nBlock = i18nBlocks.get(i18nContext.i18nBlock);
+                    OpList.replace(op, createI18nExpressionOp(i18nContext.xref, i18nBlock.xref, i18nBlock.handle, new LexicalReadExpr(icuOp.icu.expression), icuOp.icu.expressionPlaceholder, 
+                    // ICU-based i18n Expressions are resolved during post-processing.
+                    I18nParamResolutionTime.Postproccessing, null));
+                    break;
+            }
+        }
+    }
+}
+
+/**
+ * Defer instructions take a configuration array, which should be collected into the component
+ * consts. This phase finds the config options, and creates the corresponding const array.
+ */
+function configureDeferInstructions(job) {
+    for (const unit of job.units) {
+        for (const op of unit.create) {
+            if (op.kind !== OpKind.Defer) {
+                continue;
+            }
+            if (op.placeholderMinimumTime !== null) {
+                op.placeholderConfig =
+                    new ConstCollectedExpr(literalOrArrayLiteral([op.placeholderMinimumTime]));
+            }
+            if (op.loadingMinimumTime !== null || op.loadingAfterTime !== null) {
+                op.loadingConfig = new ConstCollectedExpr(literalOrArrayLiteral([op.loadingMinimumTime, op.loadingAfterTime]));
+            }
+        }
+    }
+}
+
+/**
+ * Some `defer` conditions can reference other elements in the template, using their local reference
+ * names. However, the semantics are quite different from the normal local reference system: in
+ * particular, we need to look at local reference names in enclosing views. This phase resolves
+ * all such references to actual xrefs.
+ */
+function resolveDeferTargetNames(job) {
+    const scopes = new Map();
+    function getScopeForView(view) {
+        if (scopes.has(view.xref)) {
+            return scopes.get(view.xref);
+        }
+        const scope = new Scope$1();
+        for (const op of view.create) {
+            // add everything that can be referenced.
+            if (!isElementOrContainerOp(op) || op.localRefs === null) {
+                continue;
+            }
+            if (!Array.isArray(op.localRefs)) {
+                throw new Error('LocalRefs were already processed, but were needed to resolve defer targets.');
+            }
+            for (const ref of op.localRefs) {
+                if (ref.target !== '') {
+                    continue;
+                }
+                scope.targets.set(ref.name, { xref: op.xref, slot: op.handle });
+            }
+        }
+        scopes.set(view.xref, scope);
+        return scope;
+    }
+    function resolveTrigger(deferOwnerView, op, placeholderView) {
+        switch (op.trigger.kind) {
+            case DeferTriggerKind.Idle:
+            case DeferTriggerKind.Immediate:
+            case DeferTriggerKind.Timer:
+                return;
+            case DeferTriggerKind.Hover:
+            case DeferTriggerKind.Interaction:
+            case DeferTriggerKind.Viewport:
+                if (op.trigger.targetName === null) {
+                    // A `null` target name indicates we should default to the first element in the
+                    // placeholder block.
+                    if (placeholderView === null) {
+                        throw new Error('defer on trigger with no target name must have a placeholder block');
+                    }
+                    const placeholder = job.views.get(placeholderView);
+                    if (placeholder == undefined) {
+                        throw new Error('AssertionError: could not find placeholder view for defer on trigger');
+                    }
+                    for (const placeholderOp of placeholder.create) {
+                        if (hasConsumesSlotTrait(placeholderOp) &&
+                            (isElementOrContainerOp(placeholderOp) ||
+                                placeholderOp.kind === OpKind.Projection)) {
+                            op.trigger.targetXref = placeholderOp.xref;
+                            op.trigger.targetView = placeholderView;
+                            op.trigger.targetSlotViewSteps = -1;
+                            op.trigger.targetSlot = placeholderOp.handle;
+                            return;
+                        }
+                    }
+                    return;
+                }
+                let view = placeholderView !== null ? job.views.get(placeholderView) : deferOwnerView;
+                let step = placeholderView !== null ? -1 : 0;
+                while (view !== null) {
+                    const scope = getScopeForView(view);
+                    if (scope.targets.has(op.trigger.targetName)) {
+                        const { xref, slot } = scope.targets.get(op.trigger.targetName);
+                        op.trigger.targetXref = xref;
+                        op.trigger.targetView = view.xref;
+                        op.trigger.targetSlotViewSteps = step;
+                        op.trigger.targetSlot = slot;
+                        return;
+                    }
+                    view = view.parent !== null ? job.views.get(view.parent) : null;
+                    step++;
+                }
+                break;
+            default:
+                throw new Error(`Trigger kind ${op.trigger.kind} not handled`);
+        }
+    }
+    // Find the defer ops, and assign the data about their targets.
+    for (const unit of job.units) {
+        const defers = new Map();
+        for (const op of unit.create) {
+            switch (op.kind) {
+                case OpKind.Defer:
+                    defers.set(op.xref, op);
+                    break;
+                case OpKind.DeferOn:
+                    const deferOp = defers.get(op.defer);
+                    resolveTrigger(unit, op, deferOp.placeholderView);
+                    break;
+            }
+        }
+    }
+}
+class Scope$1 {
+    constructor() {
+        this.targets = new Map();
+    }
+}
+
 const REPLACEMENTS = new Map([
     [OpKind.ElementEnd, [OpKind.ElementStart, OpKind.Element]],
     [OpKind.ContainerEnd, [OpKind.ContainerStart, OpKind.Container]],
@@ -11711,10 +12053,10 @@ const REPLACEMENTS = new Map([
  */
 const IGNORED_OP_KINDS = new Set([OpKind.Pipe]);
 /**
- * Replace sequences of mergable elements (e.g. `ElementStart` and `ElementEnd`) with a consolidated
- * element (e.g. `Element`).
+ * Replace sequences of mergable instructions (e.g. `ElementStart` and `ElementEnd`) with a
+ * consolidated instruction (e.g. `Element`).
  */
-function phaseEmptyElements(job) {
+function collapseEmptyInstructions(job) {
     for (const unit of job.units) {
         for (const op of unit.create) {
             // Find end ops that may be able to be merged.
@@ -11741,10 +12083,13 @@ function phaseEmptyElements(job) {
 }
 
 /**
- * Finds all unresolved safe read expressions, and converts them into the appropriate output AST
- * reads, guarded by null checks.
+ * Safe read expressions such as `a?.b` have different semantics in Angular templates as
+ * compared to JavaScript. In particular, they default to `null` instead of `undefined`. This phase
+ * finds all unresolved safe read expressions, and converts them into the appropriate output AST
+ * reads, guarded by null checks. We generate temporaries as needed, to avoid re-evaluating the same
+ * sub-expression multiple times.
  */
-function phaseExpandSafeReads(job) {
+function expandSafeReads(job) {
     for (const unit of job.units) {
         for (const op of unit.ops()) {
             transformExpressionsInOp(op, e => safeTransform(e, { job }), VisitorContextFlag.None);
@@ -11915,42 +12260,159 @@ function ternaryTransform(e) {
     return new ConditionalExpr(new BinaryOperatorExpr(BinaryOperator.Equals, e.guard, NULL_EXPR), NULL_EXPR, e.expr);
 }
 
-function phaseRepeaterDerivedVars(job) {
-    const repeaters = new Map();
+/**
+ * The escape sequence used indicate message param values.
+ */
+const ESCAPE = '\uFFFD';
+/**
+ * Marker used to indicate an element tag.
+ */
+const ELEMENT_MARKER = '#';
+/**
+ * Marker used to indicate a template tag.
+ */
+const TEMPLATE_MARKER = '*';
+/**
+ * Marker used to indicate closing of an element or template tag.
+ */
+const TAG_CLOSE_MARKER = '/';
+/**
+ * Marker used to indicate the sub-template context.
+ */
+const CONTEXT_MARKER = ':';
+/**
+ * Marker used to indicate the start of a list of values.
+ */
+const LIST_START_MARKER = '[';
+/**
+ * Marker used to indicate the end of a list of values.
+ */
+const LIST_END_MARKER = ']';
+/**
+ * Delimiter used to separate multiple values in a list.
+ */
+const LIST_DELIMITER = '|';
+/**
+ * Formats the param maps on extracted message ops into a maps of `Expression` objects that can be
+ * used in the final output.
+ */
+function extractI18nMessages(job) {
+    // Save the i18n context ops for later use.
+    const i18nContexts = new Map();
+    // Record which contexts represent i18n blocks (any other contexts are assumed to have been
+    // created from ICUs).
+    const i18nBlockContexts = new Set();
     for (const unit of job.units) {
-        for (const op of unit.ops()) {
-            if (op.kind === OpKind.RepeaterCreate) {
-                repeaters.set(op.xref, op);
+        for (const op of unit.create) {
+            switch (op.kind) {
+                case OpKind.I18nContext:
+                    i18nContexts.set(op.xref, op);
+                    break;
+                case OpKind.I18nStart:
+                    i18nBlockContexts.add(op.context);
+                    break;
             }
         }
     }
+    // Extract messages from root i18n blocks.
+    const i18nBlockMessages = new Map();
     for (const unit of job.units) {
-        for (const op of unit.ops()) {
-            transformExpressionsInOp(op, expr => {
-                if (!(expr instanceof DerivedRepeaterVarExpr)) {
-                    return expr;
+        for (const op of unit.create) {
+            if (op.kind === OpKind.I18nStart && op.xref === op.root) {
+                if (!op.context) {
+                    throw Error('I18n start op should have its context set.');
                 }
-                const repeaterOp = repeaters.get(expr.xref);
-                switch (expr.identity) {
-                    case DerivedRepeaterVarIdentity.First:
-                        return new BinaryOperatorExpr(BinaryOperator.Identical, new LexicalReadExpr(repeaterOp.varNames.$index), literal(0));
-                    case DerivedRepeaterVarIdentity.Last:
-                        return new BinaryOperatorExpr(BinaryOperator.Identical, new LexicalReadExpr(repeaterOp.varNames.$index), new BinaryOperatorExpr(BinaryOperator.Minus, new LexicalReadExpr(repeaterOp.varNames.$count), literal(1)));
-                    case DerivedRepeaterVarIdentity.Even:
-                        return new BinaryOperatorExpr(BinaryOperator.Identical, new BinaryOperatorExpr(BinaryOperator.Modulo, new LexicalReadExpr(repeaterOp.varNames.$index), literal(2)), literal(0));
-                    case DerivedRepeaterVarIdentity.Odd:
-                        return new BinaryOperatorExpr(BinaryOperator.NotIdentical, new BinaryOperatorExpr(BinaryOperator.Modulo, new LexicalReadExpr(repeaterOp.varNames.$index), literal(2)), literal(0));
+                const i18nMessageOp = createI18nMessage(job, i18nContexts.get(op.context));
+                i18nBlockMessages.set(op.xref, i18nMessageOp);
+                unit.create.push(i18nMessageOp);
+            }
+        }
+    }
+    // Extract messages from ICUs with their own sub-context.
+    for (const unit of job.units) {
+        for (const op of unit.create) {
+            if (op.kind === OpKind.Icu) {
+                if (!op.context) {
+                    throw Error('ICU op should have its context set.');
                 }
-            }, VisitorContextFlag.None);
+                if (!i18nBlockContexts.has(op.context)) {
+                    const i18nContext = i18nContexts.get(op.context);
+                    const subMessage = createI18nMessage(job, i18nContext, op.messagePlaceholder);
+                    unit.create.push(subMessage);
+                    const parentMessage = i18nBlockMessages.get(i18nContext.i18nBlock);
+                    parentMessage?.subMessages.push(subMessage.xref);
+                }
+                OpList.remove(op);
+            }
         }
     }
 }
+/**
+ * Create an i18n message op from an i18n context op.
+ */
+function createI18nMessage(job, context, messagePlaceholder) {
+    let needsPostprocessing = context.postprocessingParams.size > 0;
+    for (const values of context.params.values()) {
+        if (values.length > 1) {
+            needsPostprocessing = true;
+        }
+    }
+    return createI18nMessageOp(job.allocateXrefId(), context.i18nBlock, context.message, messagePlaceholder ?? null, formatParams(context.params), formatParams(context.postprocessingParams), needsPostprocessing);
+}
+/**
+ * Formats a map of `I18nParamValue[]` values into a map of `Expression` values.
+ */
+function formatParams(params) {
+    const result = new Map();
+    for (const [placeholder, placeholderValues] of [...params].sort()) {
+        const serializedValues = formatParamValues(placeholderValues);
+        if (serializedValues !== null) {
+            result.set(placeholder, literal(formatParamValues(placeholderValues)));
+        }
+    }
+    return result;
+}
+/**
+ * Formats an `I18nParamValue[]` into a string (or null for empty array).
+ */
+function formatParamValues(values) {
+    if (values.length === 0) {
+        return null;
+    }
+    const serializedValues = values.map(value => formatValue(value));
+    return serializedValues.length === 1 ?
+        serializedValues[0] :
+        `${LIST_START_MARKER}${serializedValues.join(LIST_DELIMITER)}${LIST_END_MARKER}`;
+}
+/**
+ * Formats a single `I18nParamValue` into a string
+ */
+function formatValue(value) {
+    let tagMarker = '';
+    let closeMarker = '';
+    if (value.flags & I18nParamValueFlags.ElementTag) {
+        tagMarker = ELEMENT_MARKER;
+    }
+    else if (value.flags & I18nParamValueFlags.TemplateTag) {
+        tagMarker = TEMPLATE_MARKER;
+    }
+    if (tagMarker !== '') {
+        closeMarker = value.flags & I18nParamValueFlags.CloseTag ? TAG_CLOSE_MARKER : '';
+    }
+    const context = value.subTemplateIndex === null ? '' : `${CONTEXT_MARKER}${value.subTemplateIndex}`;
+    // Self-closing tags use a special form that concatenates the start and close tag values.
+    if ((value.flags & I18nParamValueFlags.OpenTag) &&
+        (value.flags & I18nParamValueFlags.CloseTag)) {
+        return `${ESCAPE}${tagMarker}${value.value}${context}${ESCAPE}${ESCAPE}${closeMarker}${tagMarker}${value.value}${context}${ESCAPE}`;
+    }
+    return `${ESCAPE}${closeMarker}${tagMarker}${value.value}${context}${ESCAPE}`;
+}
 
 /**
  * Generate `ir.AdvanceOp`s in between `ir.UpdateOp`s that ensure the runtime's implicit slot
  * context will be advanced correctly.
  */
-function phaseGenerateAdvance(job) {
+function generateAdvance(job) {
     for (const unit of job.units) {
         // First build a map of all of the declarations in the view that have assigned slots.
         const slotMap = new Map();
@@ -11958,10 +12420,10 @@ function phaseGenerateAdvance(job) {
             if (!hasConsumesSlotTrait(op)) {
                 continue;
             }
-            else if (op.slot === null) {
+            else if (op.handle.slot === null) {
                 throw new Error(`AssertionError: expected slots to have been allocated before generating advance() calls`);
             }
-            slotMap.set(op.xref, op.slot);
+            slotMap.set(op.xref, op.handle.slot);
         }
         // Next, step through the update operations and generate `ir.AdvanceOp`s as required to ensure
         // the runtime's implicit slot counter will be set to the correct slot before executing each
@@ -11999,7 +12461,7 @@ function phaseGenerateAdvance(job) {
  * populate `project` arguments, and generate the required `projectionDef` instruction for the job's
  * root view.
  */
-function phaseGenerateProjectionDef(job) {
+function generateProjectionDefs(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
@@ -12044,7 +12506,7 @@ function phaseGenerateProjectionDef(job) {
  * Variables are generated here unconditionally, and may optimized away in future operations if it
  * turns out their values (and any side effects) are unused.
  */
-function phaseGenerateVariables(job) {
+function generateVariables(job) {
     recursivelyProcessView(job.root, /* there is no parent scope for the root view */ null);
 }
 /**
@@ -12110,6 +12572,7 @@ function getScopeForView(view, parent) {
                     scope.references.push({
                         name: op.localRefs[offset].name,
                         targetId: op.xref,
+                        targetSlot: op.handle,
                         offset,
                         variable: {
                             kind: SemanticVariableKind.Identifier,
@@ -12151,7 +12614,7 @@ function generateVariablesInScopeForView(view, scope) {
     }
     // Add variables for all local references declared for elements in this scope.
     for (const ref of scope.references) {
-        newOps.push(createVariableOp(view.job.allocateXrefId(), ref.variable, new ReferenceExpr(ref.targetId, ref.offset), VariableFlags.None));
+        newOps.push(createVariableOp(view.job.allocateXrefId(), ref.variable, new ReferenceExpr(ref.targetId, ref.targetSlot, ref.offset), VariableFlags.None));
     }
     if (scope.parent !== null) {
         // Recursively add variables from the parent scope.
@@ -12161,27 +12624,20 @@ function generateVariablesInScopeForView(view, scope) {
 }
 
 /**
- * Looks for the HasConst trait, indicating that an op or expression has some data which
- * should be collected into the constant array. Capable of collecting either a single literal value,
- * or an array literal.
+ * `ir.ConstCollectedExpr` may be present in any IR expression. This means that expression needs to
+ * be lifted into the component const array, and replaced with a reference to the const array at its
+ *
+ * usage site. This phase walks the IR and performs this transformation.
  */
-function phaseConstTraitCollection(job) {
-    const collectGlobalConsts = (e) => {
-        if (e instanceof ExpressionBase && hasConstTrait(e)) {
-            // TODO: Figure out how to make this type narrowing work.
-            const ea = e;
-            if (ea.constValue !== null) {
-                ea.constIndex = job.addConst(ea.constValue);
-            }
-        }
-        return e;
-    };
+function collectConstExpressions(job) {
     for (const unit of job.units) {
         for (const op of unit.ops()) {
-            if (hasConstTrait(op) && op.constValue !== null) {
-                op.constIndex = job.addConst(op.makeExpression(op.constValue));
-            }
-            transformExpressionsInOp(op, collectGlobalConsts, VisitorContextFlag.None);
+            transformExpressionsInOp(op, expr => {
+                if (!(expr instanceof ConstCollectedExpr)) {
+                    return expr;
+                }
+                return literal(job.addConst(expr.expr));
+            }, VisitorContextFlag.None);
         }
     }
 }
@@ -12191,7 +12647,13 @@ const CLASS_DOT = 'class.';
 const STYLE_BANG = 'style!';
 const CLASS_BANG = 'class!';
 const BANG_IMPORTANT = '!important';
-function phaseHostStylePropertyParsing(job) {
+/**
+ * Host bindings are compiled using a different parser entrypoint, and are parsed quite differently
+ * as a result. Therefore, we need to do some extra parsing for host style properties, as compared
+ * to non-host style properties.
+ * TODO: Unify host bindings and non-host bindings in the parser.
+ */
+function parseHostStyleProperties(job) {
     for (const op of job.root.update) {
         if (op.kind !== OpKind.Binding) {
             continue;
@@ -12253,31 +12715,6 @@ function parseProperty$1(name) {
     return { property, suffix };
 }
 
-/**
- * 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) {
-                op.messageIndex = messageConstIndices[op.root];
-            }
-        }
-    }
-}
-
 function mapEntry(key, value) {
     return { key, value, quoted: false };
 }
@@ -19155,38 +19592,73 @@ const NG_I18N_CLOSURE_MODE$1 = 'ngI18nClosureMode';
  * considers variables like `I18N_0` as constants and throws an error when their value changes.
  */
 const TRANSLATION_VAR_PREFIX = 'i18n_';
-/** Extracts i18n messages into the consts array. */
-function phaseI18nMessageExtraction(job) {
+/**
+ * Lifts i18n properties into the consts array.
+ * TODO: Can we use `ConstCollectedExpr`?
+ */
+function collectI18nConsts(job) {
     const fileBasedI18nSuffix = job.relativeContextFilePath.replace(/[^A-Za-z0-9]/g, '_').toUpperCase() + '_';
+    const messageConstIndices = new Map();
+    // Remove all of the i18n message ops into a map.
+    const messages = new Map();
+    for (const unit of job.units) {
+        for (const op of unit.create) {
+            if (op.kind === OpKind.I18nMessage) {
+                messages.set(op.xref, op);
+                OpList.remove(op);
+            }
+        }
+    }
+    // Serialize the extracted messages for root i18n blocks into the const array.
+    for (const op of messages.values()) {
+        if (op.kind === OpKind.I18nMessage && op.messagePlaceholder === null) {
+            const { mainVar, statements } = collectMessage(job, fileBasedI18nSuffix, messages, op);
+            messageConstIndices.set(op.i18nBlock, job.addConst(mainVar, statements));
+        }
+    }
+    // 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) {
-                // Only extract messages from root i18n ops, not sub-template ones.
-                if (op.xref === op.root) {
-                    // Sort the params map to match the ordering in TemplateDefinitionBuilder.
-                    const params = new Map([...op.params.entries()].sort());
-                    const mainVar = variable(job.pool.uniqueName(TRANSLATION_VAR_PREFIX));
-                    // Closure Compiler requires const names to start with `MSG_` but disallows any other
-                    // const to start with `MSG_`. We define a variable starting with `MSG_` just for the
-                    // `goog.getMsg` call
-                    const closureVar = i18nGenerateClosureVar(job.pool, op.message.id, fileBasedI18nSuffix, job.i18nUseExternalIds);
-                    let transformFn = undefined;
-                    // If nescessary, add a post-processing step and resolve any placeholder params that are
-                    // set in post-processing.
-                    if (op.needsPostprocessing) {
-                        const extraTransformFnParams = [];
-                        if (op.postprocessingParams.size > 0) {
-                            extraTransformFnParams.push(literalMap([...op.postprocessingParams.entries()].map(([key, value]) => ({ key, value, quoted: true }))));
-                        }
-                        transformFn = (expr) => importExpr(Identifiers.i18nPostprocess).callFn([expr, ...extraTransformFnParams]);
-                    }
-                    const statements = getTranslationDeclStmts$1(op.message, mainVar, closureVar, params, transformFn);
-                    unit.create.push(createExtractedMessageOp(op.xref, mainVar, statements));
-                }
+                op.messageIndex = messageConstIndices.get(op.root);
             }
         }
     }
 }
+/**
+ * Collects the given message into a set of statements that can be added to the const array.
+ * This will recursively collect any sub-messages referenced from the parent message as well.
+ */
+function collectMessage(job, fileBasedI18nSuffix, messages, messageOp) {
+    // Recursively collect any sub-messages, and fill in their placeholders in this message.
+    const statements = [];
+    for (const subMessageId of messageOp.subMessages) {
+        const subMessage = messages.get(subMessageId);
+        const { mainVar: subMessageVar, statements: subMessageStatements } = collectMessage(job, fileBasedI18nSuffix, messages, subMessage);
+        statements.push(...subMessageStatements);
+        messageOp.params.set(subMessage.messagePlaceholder, subMessageVar);
+    }
+    // Check that the message has all of its parameters filled out.
+    assertAllParamsResolved(messageOp);
+    const mainVar = variable(job.pool.uniqueName(TRANSLATION_VAR_PREFIX));
+    // Closure Compiler requires const names to start with `MSG_` but disallows any other
+    // const to start with `MSG_`. We define a variable starting with `MSG_` just for the
+    // `goog.getMsg` call
+    const closureVar = i18nGenerateClosureVar(job.pool, messageOp.message.id, fileBasedI18nSuffix, job.i18nUseExternalIds);
+    let transformFn = undefined;
+    // If nescessary, add a post-processing step and resolve any placeholder params that are
+    // set in post-processing.
+    if (messageOp.needsPostprocessing) {
+        const extraTransformFnParams = [];
+        if (messageOp.postprocessingParams.size > 0) {
+            extraTransformFnParams.push(literalMap([...messageOp.postprocessingParams].map(([key, value]) => ({ key, value, quoted: true }))));
+        }
+        transformFn = (expr) => importExpr(Identifiers.i18nPostprocess).callFn([expr, ...extraTransformFnParams]);
+    }
+    // Add the message's statements
+    statements.push(...getTranslationDeclStmts$1(messageOp.message, mainVar, closureVar, messageOp.params, transformFn));
+    return { mainVar, statements };
+}
 /**
  * Generate statements that define a given translation message.
  *
@@ -19254,27 +19726,45 @@ function i18nGenerateClosureVar(pool, messageId, fileBasedI18nSuffix, useExterna
     }
     return variable(name);
 }
+/**
+ * Asserts that all of the message's placeholders have values.
+ */
+function assertAllParamsResolved(op) {
+    for (const placeholder in op.message.placeholders) {
+        if (!op.params.has(placeholder) && !op.postprocessingParams.has(placeholder)) {
+            throw Error(`Failed to resolve i18n placeholder: ${placeholder}`);
+        }
+    }
+    for (const placeholder in op.message.placeholderToMessage) {
+        if (!op.params.has(placeholder) && !op.postprocessingParams.has(placeholder)) {
+            throw Error(`Failed to resolve i18n message placeholder: ${placeholder}`);
+        }
+    }
+}
 
 /**
  * Removes text nodes within i18n blocks since they are already hardcoded into the i18n message.
  */
-function phaseI18nTextExtraction(job) {
+function extractI18nText(job) {
     for (const unit of job.units) {
         // Remove all text nodes within i18n blocks, their content is already captured in the i18n
         // message.
-        let currentI18nId = null;
-        const textNodes = new Map();
+        let currentI18n = null;
+        const textNodeI18nBlocks = new Map();
         for (const op of unit.create) {
             switch (op.kind) {
                 case OpKind.I18nStart:
-                    currentI18nId = op.xref;
+                    if (op.context === null) {
+                        throw Error('I18n op should have its context set.');
+                    }
+                    currentI18n = op;
                     break;
                 case OpKind.I18nEnd:
-                    currentI18nId = null;
+                    currentI18n = null;
                     break;
                 case OpKind.Text:
-                    if (currentI18nId !== null) {
-                        textNodes.set(op.xref, currentI18nId);
+                    if (currentI18n !== null) {
+                        textNodeI18nBlocks.set(op.xref, currentI18n);
                         OpList.remove(op);
                     }
                     break;
@@ -19285,18 +19775,17 @@ function phaseI18nTextExtraction(job) {
         for (const op of unit.update) {
             switch (op.kind) {
                 case OpKind.InterpolateText:
-                    if (!textNodes.has(op.target)) {
+                    if (!textNodeI18nBlocks.has(op.target)) {
                         continue;
                     }
-                    const i18nBlockId = textNodes.get(op.target);
+                    const i18nOp = textNodeI18nBlocks.get(op.target);
                     const ops = [];
                     for (let i = 0; i < op.interpolation.expressions.length; i++) {
                         const expr = op.interpolation.expressions[i];
                         const placeholder = op.i18nPlaceholders[i];
-                        ops.push(createI18nExpressionOp(i18nBlockId, expr, placeholder.name, I18nParamResolutionTime.Creation, expr.sourceSpan ?? op.sourceSpan));
-                    }
-                    if (ops.length > 0) {
-                        // ops.push(ir.createI18nApplyOp(i18nBlockId, op.i18nPlaceholders, op.sourceSpan));
+                        // For now, this i18nExpression depends on the slot context of the enclosing i18n block.
+                        // Later, we will modify this, and advance to a different point.
+                        ops.push(createI18nExpressionOp(i18nOp.context, i18nOp.xref, i18nOp.handle, expr, placeholder.name, I18nParamResolutionTime.Creation, expr.sourceSpan ?? op.sourceSpan));
                     }
                     OpList.replaceWithMany(op, ops);
                     break;
@@ -19305,55 +19794,11 @@ function phaseI18nTextExtraction(job) {
     }
 }
 
-/**
- * Extracts ICUs into i18n expressions.
- */
-function phaseIcuExtraction(job) {
-    for (const unit of job.units) {
-        // Build a map of ICU to the i18n block they belong to, then remove the `Icu` ops.
-        const icus = new Map();
-        let currentI18nId = null;
-        for (const op of unit.create) {
-            switch (op.kind) {
-                case OpKind.I18nStart:
-                    currentI18nId = op.xref;
-                    break;
-                case OpKind.I18nEnd:
-                    currentI18nId = null;
-                    break;
-                case OpKind.Icu:
-                    if (currentI18nId === null) {
-                        throw Error('Unexpected ICU outside of an i18n block.');
-                    }
-                    icus.set(op.xref, { message: op.message, i18nBlockId: currentI18nId });
-                    OpList.remove(op);
-                    break;
-            }
-        }
-        // Replace the `IcuUpdate` ops with `i18nExpr` ops.
-        for (const op of unit.update) {
-            switch (op.kind) {
-                case OpKind.IcuUpdate:
-                    const { message, i18nBlockId } = icus.get(op.xref);
-                    const icuNode = message.nodes.find((n) => n instanceof Icu);
-                    if (icuNode === undefined) {
-                        throw Error('Could not find ICU in i18n AST');
-                    }
-                    if (icuNode.expressionPlaceholder === undefined) {
-                        throw Error('ICU is missing an i18n placeholder');
-                    }
-                    OpList.replace(op, createI18nExpressionOp(i18nBlockId, new LexicalReadExpr(icuNode.expression), icuNode.expressionPlaceholder, I18nParamResolutionTime.Postproccessing, null));
-                    break;
-            }
-        }
-    }
-}
-
 /**
  * Lifts local reference declarations on element-like structures within each view into an entry in
  * the `consts` array for the whole component.
  */
-function phaseLocalRefs(job) {
+function liftLocalRefs(job) {
     for (const unit of job.units) {
         for (const op of unit.create) {
             switch (op.kind) {
@@ -19383,10 +19828,61 @@ function serializeLocalRefs(refs) {
     return literalArr(constRefs);
 }
 
+/**
+ * Merge i18n contexts for child i18n blocks into their ancestor root contexts.
+ */
+function mergeI18nContexts(job) {
+    // Record all of the i18n and extracted message ops for use later.
+    const i18nOps = new Map();
+    const i18nContexts = new Map();
+    for (const unit of job.units) {
+        for (const op of unit.create) {
+            switch (op.kind) {
+                case OpKind.I18nStart:
+                    if (!op.context) {
+                        throw Error('I18n op should have its context set.');
+                    }
+                    i18nOps.set(op.xref, op);
+                    break;
+                case OpKind.I18nContext:
+                    i18nContexts.set(op.xref, op);
+                    break;
+            }
+        }
+    }
+    // For each non-root i18n op, merge its context into the root i18n op's context.
+    for (const childI18nOp of i18nOps.values()) {
+        if (childI18nOp.xref !== childI18nOp.root) {
+            const childContext = i18nContexts.get(childI18nOp.context);
+            const rootI18nOp = i18nOps.get(childI18nOp.root);
+            const rootContext = i18nContexts.get(rootI18nOp.context);
+            mergeParams(rootContext.params, childContext.params);
+            mergeParams(rootContext.postprocessingParams, childContext.postprocessingParams);
+        }
+    }
+}
+/**
+ * Merges the params in the `from` map to into the `to` map.
+ */
+function mergeParams(to, from) {
+    for (const [placeholder, fromValues] of from) {
+        const toValues = to.get(placeholder) || [];
+        // TODO(mmalerba): Child element close tag params should be prepended to maintain the same order
+        // as TemplateDefinitionBuilder. Can be cleaned up when compatibility is no longer required.
+        const flags = fromValues[0].flags;
+        if ((flags & I18nParamValueFlags.CloseTag) && !(flags & I18nParamValueFlags.OpenTag)) {
+            to.set(placeholder, [...fromValues, ...toValues]);
+        }
+        else {
+            to.set(placeholder, [...toValues, ...fromValues]);
+        }
+    }
+}
+
 /**
  * Change namespaces between HTML, SVG and MathML, depending on the next element.
  */
-function phaseNamespace(job) {
+function emitNamespaceChanges(job) {
     for (const unit of job.units) {
         let activeNamespace = Namespace.HTML;
         for (const op of unit.create) {
@@ -19486,8 +19982,8 @@ function hyphenate(value) {
  * This includes propagating those names into any `ir.ReadVariableExpr`s of those variables, so that
  * the reads can be emitted correctly.
  */
-function phaseNaming(cpl) {
-    addNamesToView(cpl.root, cpl.componentName, { index: 0 }, cpl.compatibility === CompatibilityMode.TemplateDefinitionBuilder);
+function nameFunctionsAndVariables(job) {
+    addNamesToView(job.root, job.componentName, { index: 0 }, job.compatibility === CompatibilityMode.TemplateDefinitionBuilder);
 }
 function addNamesToView(unit, baseName, state, compatibility) {
     if (unit.fnName === null) {
@@ -19508,7 +20004,7 @@ function addNamesToView(unit, baseName, state, compatibility) {
                 if (op.handlerFnName !== null) {
                     break;
                 }
-                if (!op.hostListener && op.targetSlot === null) {
+                if (!op.hostListener && op.targetSlot.slot === null) {
                     throw new Error(`Expected a slot to be assigned`);
                 }
                 let animation = '';
@@ -19520,7 +20016,7 @@ function addNamesToView(unit, baseName, state, compatibility) {
                     op.handlerFnName = `${baseName}_${animation}${op.name}_HostBindingHandler`;
                 }
                 else {
-                    op.handlerFnName = `${unit.fnName}_${op.tag.replace('-', '_')}_${animation}${op.name}_${op.targetSlot}_listener`;
+                    op.handlerFnName = `${unit.fnName}_${op.tag.replace('-', '_')}_${animation}${op.name}_${op.targetSlot.slot}_listener`;
                 }
                 op.handlerFnName = sanitizeIdentifier(op.handlerFnName);
                 break;
@@ -19531,28 +20027,27 @@ function addNamesToView(unit, baseName, state, compatibility) {
                 if (!(unit instanceof ViewCompilationUnit)) {
                     throw new Error(`AssertionError: must be compiling a component`);
                 }
-                if (op.slot === null) {
+                if (op.handle.slot === null) {
                     throw new Error(`Expected slot to be assigned`);
                 }
                 if (op.emptyView !== null) {
                     const emptyView = unit.job.views.get(op.emptyView);
                     // Repeater empty view function is at slot +2 (metadata is in the first slot).
-                    addNamesToView(emptyView, `${baseName}_${prefixWithNamespace(`${op.tag}Empty`, op.namespace)}_${op.slot + 2}`, state, compatibility);
+                    addNamesToView(emptyView, `${baseName}_${`${op.functionNameSuffix}Empty`}_${op.handle.slot + 2}`, state, compatibility);
                 }
-                const repeaterToken = op.tag === null ? '' : '_' + prefixWithNamespace(op.tag, op.namespace);
                 // Repeater primary view function is at slot +1 (metadata is in the first slot).
-                addNamesToView(unit.job.views.get(op.xref), `${baseName}${repeaterToken}_${op.slot + 1}`, state, compatibility);
+                addNamesToView(unit.job.views.get(op.xref), `${baseName}_${op.functionNameSuffix}_${op.handle.slot + 1}`, state, compatibility);
                 break;
             case OpKind.Template:
                 if (!(unit instanceof ViewCompilationUnit)) {
                     throw new Error(`AssertionError: must be compiling a component`);
                 }
                 const childView = unit.job.views.get(op.xref);
-                if (op.slot === null) {
+                if (op.handle.slot === null) {
                     throw new Error(`Expected slot to be assigned`);
                 }
-                const tagToken = op.tag === null ? '' : '_' + prefixWithNamespace(op.tag, op.namespace);
-                addNamesToView(childView, `${baseName}${tagToken}_${op.slot}`, state, compatibility);
+                const suffix = op.functionNameSuffix.length === 0 ? '' : `_${op.functionNameSuffix}`;
+                addNamesToView(childView, `${baseName}${suffix}_${op.handle.slot}`, state, compatibility);
                 break;
             case OpKind.StyleProp:
                 op.name = normalizeStylePropName(op.name);
@@ -19628,7 +20123,7 @@ function stripImportant(name) {
  *     is, the call is purely side-effectful).
  *   * No operations in between them uses the implicit context.
  */
-function phaseMergeNextContext(job) {
+function mergeNextContextExpressions(job) {
     for (const unit of job.units) {
         for (const op of unit.create) {
             if (op.kind === OpKind.Listener) {
@@ -19684,7 +20179,7 @@ const CONTAINER_TAG = 'ng-container';
 /**
  * Replace an `Element` or `ElementStart` whose tag is `ng-container` with a specific op.
  */
-function phaseNgContainer(job) {
+function generateNgContainerOps(job) {
     for (const unit of job.units) {
         const updatedElementXrefs = new Set();
         for (const op of unit.create) {
@@ -19716,7 +20211,7 @@ function lookupElement(elements, xref) {
  * all descendants of that container. Therefore, we must emit `disableBindings` and `enableBindings`
  * instructions for every such container.
  */
-function phaseNonbindable(job) {
+function disableBindings$1(job) {
     const elements = new Map();
     for (const view of job.units) {
         for (const op of view.create) {
@@ -19740,7 +20235,13 @@ function phaseNonbindable(job) {
     }
 }
 
-function phaseNullishCoalescing(job) {
+/**
+ * Nullish coalescing expressions such as `a ?? b` have different semantics in Angular templates as
+ * compared to JavaScript. In particular, they default to `null` instead of `undefined`. Therefore,
+ * we replace them with ternary expressions, assigning temporaries as needed to avoid re-evaluating
+ * the same sub-expression multiple times.
+ */
+function generateNullishCoalesceExpressions(job) {
     for (const unit of job.units) {
         for (const op of unit.ops()) {
             transformExpressionsInOp(op, expr => {
@@ -19798,7 +20299,12 @@ const handledOpKinds = new Set([
     OpKind.Listener, OpKind.StyleMap, OpKind.ClassMap, OpKind.StyleProp,
     OpKind.ClassProp, OpKind.Property, OpKind.HostProperty, OpKind.Attribute
 ]);
-function phaseOrdering(job) {
+/**
+ * Many type of operations have ordering constraints that must be respected. For example, a
+ * `ClassMap` instruction must be ordered after a `StyleMap` instruction, in order to have
+ * predictable semantics that match TemplateDefinitionBuilder and don't break applications.
+ */
+function orderOps(job) {
     for (const unit of job.units) {
         // First, we pull out ops that need to be ordered. Then, when we encounter an op that shouldn't
         // be reordered, put the ones we've pulled so far back in the correct order. Finally, if we
@@ -19860,8 +20366,8 @@ function keepLast(ops) {
  * Parses extracted style and class attributes into separate ExtractedAttributeOps per style or
  * class property.
  */
-function phaseParseExtractedStyles(cpl) {
-    for (const unit of cpl.units) {
+function parseExtractedStyles(job) {
+    for (const unit of job.units) {
         for (const op of unit.create) {
             if (op.kind === OpKind.ExtractedAttribute && op.bindingKind === BindingKind.Attribute &&
                 isStringLiteral(op.expression)) {
@@ -19888,7 +20394,7 @@ function phaseParseExtractedStyles(cpl) {
  * 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) {
+function removeContentSelectors(job) {
     for (const unit of job.units) {
         const elements = createOpXrefMap(unit);
         for (const op of unit.update) {
@@ -19914,7 +20420,14 @@ function lookupInXrefMap(map, xref) {
     return el;
 }
 
-function phasePipeCreation(job) {
+/**
+ * This phase generates pipe creation instructions. We do this based on the pipe bindings found in
+ * the update block, in the order we see them.
+ *
+ * When not in compatibility mode, we can simply group all these creation instructions together, to
+ * maximize chaining opportunities.
+ */
+function createPipes(job) {
     for (const unit of job.units) {
         processPipeBindingsInView(unit);
     }
@@ -19931,21 +20444,19 @@ function processPipeBindingsInView(unit) {
             if (flags & VisitorContextFlag.InChildOperation) {
                 throw new Error(`AssertionError: pipe bindings should not appear in child expressions`);
             }
-            // This update op must be associated with a create op that consumes a slot (either by
-            // depending on the ambient context of `target`, or merely referencing that create op via
-            // `target`).
-            if (!hasDependsOnSlotContextTrait(updateOp) &&
-                !hasUsesSlotIndexTrait(updateOp)) {
-                throw new Error(`AssertionError: pipe binding associated with non-slot operation ${OpKind[updateOp.kind]}`);
-            }
             if (unit.job.compatibility) {
+                // TODO: We can delete this cast and check once compatibility mode is removed.
+                const slotHandle = updateOp.target;
+                if (slotHandle == undefined) {
+                    throw new Error(`AssertionError: expected slot handle to be assigned for pipe creation`);
+                }
                 addPipeToCreationBlock(unit, updateOp.target, expr);
             }
             else {
                 // When not in compatibility mode, we just add the pipe to the end of the create block. This
                 // is not only simpler and faster, but allows more chaining opportunities for other
                 // instructions.
-                unit.create.push(createPipeOp(expr.target, expr.name));
+                unit.create.push(createPipeOp(expr.target, expr.targetSlot, expr.name));
             }
         });
     }
@@ -19966,7 +20477,7 @@ function addPipeToCreationBlock(unit, afterTargetXref, binding) {
         while (op.next.kind === OpKind.Pipe) {
             op = op.next;
         }
-        const pipe = createPipeOp(binding.target, binding.name);
+        const pipe = createPipeOp(binding.target, binding.targetSlot, binding.name);
         OpList.insertBefore(pipe, op.next);
         // This completes adding the pipe to the creation block.
         return;
@@ -19975,7 +20486,11 @@ function addPipeToCreationBlock(unit, afterTargetXref, binding) {
     throw new Error(`AssertionError: unable to find insertion point for pipe ${binding.name}`);
 }
 
-function phasePipeVariadic(job) {
+/**
+ * Pipes that accept more than 4 arguments are variadic, and are handled with a different runtime
+ * instruction.
+ */
+function createVariadicPipes(job) {
     for (const unit of job.units) {
         for (const op of unit.update) {
             transformExpressionsInOp(op, expr => {
@@ -19986,7 +20501,7 @@ function phasePipeVariadic(job) {
                 if (expr.args.length <= 4) {
                     return expr;
                 }
-                return new PipeBindingVariadicExpr(expr.target, expr.name, literalArr(expr.args), expr.args.length);
+                return new PipeBindingVariadicExpr(expr.target, expr.targetSlot, expr.name, literalArr(expr.args), expr.args.length);
             }, VisitorContextFlag.None);
         }
     }
@@ -19994,9 +20509,11 @@ function phasePipeVariadic(job) {
 
 /**
  * Propagate i18n blocks down through child templates that act as placeholders in the root i18n
- * message.
+ * message. Specifically, perform an in-order traversal of all the views, and add i18nStart/i18nEnd
+ * op pairs into descending views. Also, assign an increasing sub-template index to each
+ * descending view.
  */
-function phasePropagateI18nBlocks(job) {
+function propagateI18nBlocks(job) {
     propagateI18nBlocksToTemplates(job.root, 0);
 }
 /**
@@ -20041,7 +20558,7 @@ function wrapTemplateWithI18n(unit, parentI18n) {
     }
 }
 
-function phasePureFunctionExtraction(job) {
+function extractPureFunctions(job) {
     for (const view of job.units) {
         for (const op of view.ops()) {
             visitExpressionsInOp(op, expr => {
@@ -20086,9 +20603,9 @@ class PureFunctionConstant extends GenericKeyFn {
     }
 }
 
-function phasePureLiteralStructures(job) {
-    for (const view of job.units) {
-        for (const op of view.update) {
+function generatePureLiteralStructures(job) {
+    for (const unit of job.units) {
+        for (const op of unit.update) {
             transformExpressionsInOp(op, (expr, flags) => {
                 if (flags & VisitorContextFlag.InChildOperation) {
                     return expr;
@@ -20170,13 +20687,21 @@ function elementContainer(slot, constIndex, localRefIndex, sourceSpan) {
 function elementContainerEnd() {
     return call(Identifiers.elementContainerEnd, [], null);
 }
-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));
-        if (constIndex !== null) {
-            args.push(literal(constIndex));
-        }
+function template(slot, templateFnRef, decls, vars, tag, constIndex, localRefs, sourceSpan) {
+    const args = [
+        literal(slot),
+        templateFnRef,
+        literal(decls),
+        literal(vars),
+        literal(tag),
+        literal(constIndex),
+    ];
+    if (localRefs !== null) {
+        args.push(literal(localRefs));
+        args.push(importExpr(Identifiers.templateRefExtractor));
+    }
+    while (args[args.length - 1].isEquivalent(NULL_EXPR)) {
+        args.pop();
     }
     return call(Identifiers.templateCreate, args, sourceSpan);
 }
@@ -20246,24 +20771,48 @@ function text(slot, initialValue, sourceSpan) {
     }
     return call(Identifiers.text, args, sourceSpan);
 }
-function defer(selfSlot, primarySlot, dependencyResolverFn, loadingSlot, placeholderSlot, errorSlot, loadingConfigIndex, placeholderConfigIndex, sourceSpan) {
+function defer(selfSlot, primarySlot, dependencyResolverFn, loadingSlot, placeholderSlot, errorSlot, loadingConfig, placeholderConfig, enableTimerScheduling, sourceSpan) {
     const args = [
         literal(selfSlot),
         literal(primarySlot),
-        literal(dependencyResolverFn),
+        dependencyResolverFn ?? literal(null),
         literal(loadingSlot),
         literal(placeholderSlot),
         literal(errorSlot),
-        literal(loadingConfigIndex),
-        literal(placeholderConfigIndex),
+        loadingConfig ?? literal(null),
+        placeholderConfig ?? literal(null),
+        enableTimerScheduling ? importExpr(Identifiers.deferEnableTimerScheduling) : literal(null),
     ];
-    while (args[args.length - 1].value === null) {
+    let expr;
+    while ((expr = args[args.length - 1]) !== null && expr instanceof LiteralExpr &&
+        expr.value === null) {
         args.pop();
     }
     return call(Identifiers.defer, args, sourceSpan);
 }
-function deferOn(sourceSpan) {
-    return call(Identifiers.deferOnIdle, [], sourceSpan);
+const deferTriggerToR3TriggerInstructionsMap = new Map([
+    [DeferTriggerKind.Idle, [Identifiers.deferOnIdle, Identifiers.deferPrefetchOnIdle]],
+    [
+        DeferTriggerKind.Immediate,
+        [Identifiers.deferOnImmediate, Identifiers.deferPrefetchOnImmediate]
+    ],
+    [DeferTriggerKind.Timer, [Identifiers.deferOnTimer, Identifiers.deferPrefetchOnTimer]],
+    [DeferTriggerKind.Hover, [Identifiers.deferOnHover, Identifiers.deferPrefetchOnHover]],
+    [
+        DeferTriggerKind.Interaction,
+        [Identifiers.deferOnInteraction, Identifiers.deferPrefetchOnInteraction]
+    ],
+    [
+        DeferTriggerKind.Viewport, [Identifiers.deferOnViewport, Identifiers.deferPrefetchOnViewport]
+    ],
+]);
+function deferOn(trigger, args, prefetch, sourceSpan) {
+    const instructions = deferTriggerToR3TriggerInstructionsMap.get(trigger);
+    if (instructions === undefined) {
+        throw new Error(`Unable to determine instruction for trigger ${trigger}`);
+    }
+    const instructionToCall = prefetch ? instructions[1] : instructions[0];
+    return call(instructionToCall, args.map(a => literal(a)), sourceSpan);
 }
 function projectionDef(def) {
     return call(Identifiers.projectionDef, def ? [def] : [], null);
@@ -20285,20 +20834,20 @@ function i18nStart(slot, constIndex, subTemplateIndex) {
     }
     return call(Identifiers.i18nStart, args, null);
 }
-function repeaterCreate(slot, viewFnName, decls, vars, trackByFn, trackByUsesComponentInstance, emptyViewFnName, emptyDecls, emptyVars, sourceSpan) {
-    let args = [
+function repeaterCreate(slot, viewFnName, decls, vars, tag, constIndex, trackByFn, trackByUsesComponentInstance, emptyViewFnName, emptyDecls, emptyVars, sourceSpan) {
+    const args = [
         literal(slot),
         variable(viewFnName),
         literal(decls),
         literal(vars),
+        literal(tag),
+        literal(constIndex),
         trackByFn,
     ];
     if (trackByUsesComponentInstance || emptyViewFnName !== null) {
         args.push(literal(trackByUsesComponentInstance));
         if (emptyViewFnName !== null) {
-            args.push(variable(emptyViewFnName));
-            args.push(literal(emptyDecls));
-            args.push(literal(emptyVars));
+            args.push(variable(emptyViewFnName), literal(emptyDecls), literal(emptyVars));
         }
     }
     return call(Identifiers.repeaterCreate, args, sourceSpan);
@@ -20306,6 +20855,9 @@ function repeaterCreate(slot, viewFnName, decls, vars, trackByFn, trackByUsesCom
 function repeater(metadataSlot, collection, sourceSpan) {
     return call(Identifiers.repeater, [literal(metadataSlot), collection], sourceSpan);
 }
+function deferWhen(prefetch, expr, sourceSpan) {
+    return call(prefetch ? Identifiers.deferPrefetchWhen : Identifiers.deferWhen, [expr], sourceSpan);
+}
 function i18n(slot, constIndex, subTemplateIndex) {
     const args = [literal(slot), literal(constIndex)];
     if (subTemplateIndex) {
@@ -20662,8 +21214,8 @@ const sanitizerIdentifierMap = new Map([
  * structures. After reification, the create/update operation lists of all views should only contain
  * `ir.StatementOp`s (which wrap generated `o.Statement`s).
  */
-function phaseReify(cpl) {
-    for (const unit of cpl.units) {
+function reify(job) {
+    for (const unit of job.units) {
         reifyCreateOperations(unit, unit.create);
         reifyUpdateOperations(unit, unit.update);
     }
@@ -20673,41 +21225,44 @@ function reifyCreateOperations(unit, ops) {
         transformExpressionsInOp(op, reifyIrExpression, VisitorContextFlag.None);
         switch (op.kind) {
             case OpKind.Text:
-                OpList.replace(op, text(op.slot, op.initialValue, op.sourceSpan));
+                OpList.replace(op, text(op.handle.slot, op.initialValue, op.sourceSpan));
                 break;
             case OpKind.ElementStart:
-                OpList.replace(op, elementStart(op.slot, op.tag, op.attributes, op.localRefs, op.sourceSpan));
+                OpList.replace(op, elementStart(op.handle.slot, op.tag, op.attributes, op.localRefs, op.sourceSpan));
                 break;
             case OpKind.Element:
-                OpList.replace(op, element(op.slot, op.tag, op.attributes, op.localRefs, op.sourceSpan));
+                OpList.replace(op, element(op.handle.slot, op.tag, op.attributes, op.localRefs, op.sourceSpan));
                 break;
             case OpKind.ElementEnd:
                 OpList.replace(op, elementEnd(op.sourceSpan));
                 break;
             case OpKind.ContainerStart:
-                OpList.replace(op, elementContainerStart(op.slot, op.attributes, op.localRefs, op.sourceSpan));
+                OpList.replace(op, elementContainerStart(op.handle.slot, op.attributes, op.localRefs, op.sourceSpan));
                 break;
             case OpKind.Container:
-                OpList.replace(op, elementContainer(op.slot, op.attributes, op.localRefs, op.sourceSpan));
+                OpList.replace(op, elementContainer(op.handle.slot, op.attributes, op.localRefs, op.sourceSpan));
                 break;
             case OpKind.ContainerEnd:
                 OpList.replace(op, elementContainerEnd());
                 break;
             case OpKind.I18nStart:
-                OpList.replace(op, i18nStart(op.slot, op.messageIndex, op.subTemplateIndex));
+                OpList.replace(op, i18nStart(op.handle.slot, op.messageIndex, op.subTemplateIndex));
                 break;
             case OpKind.I18nEnd:
                 OpList.replace(op, i18nEnd());
                 break;
             case OpKind.I18n:
-                OpList.replace(op, i18n(op.slot, op.messageIndex, op.subTemplateIndex));
+                OpList.replace(op, i18n(op.handle.slot, op.messageIndex, op.subTemplateIndex));
                 break;
             case OpKind.Template:
                 if (!(unit instanceof ViewCompilationUnit)) {
                     throw new Error(`AssertionError: must be compiling a component`);
                 }
+                if (Array.isArray(op.localRefs)) {
+                    throw new Error(`AssertionError: local refs array should have been extracted into a constant`);
+                }
                 const childView = unit.job.views.get(op.xref);
-                OpList.replace(op, template(op.slot, variable(childView.fnName), childView.decls, childView.vars, op.block ? null : op.tag, op.attributes, op.sourceSpan));
+                OpList.replace(op, template(op.handle.slot, variable(childView.fnName), childView.decls, childView.vars, op.tag, op.attributes, op.localRefs, op.sourceSpan));
                 break;
             case OpKind.DisableBindings:
                 OpList.replace(op, disableBindings());
@@ -20716,7 +21271,7 @@ function reifyCreateOperations(unit, ops) {
                 OpList.replace(op, enableBindings());
                 break;
             case OpKind.Pipe:
-                OpList.replace(op, pipe(op.slot, op.name));
+                OpList.replace(op, pipe(op.handle.slot, op.name));
                 break;
             case OpKind.Listener:
                 const listenerFn = reifyListenerHandler(unit, op.handlerFnName, op.handlerOps, op.consumesDollarEvent);
@@ -20745,25 +21300,45 @@ function reifyCreateOperations(unit, ops) {
                 }
                 break;
             case OpKind.Defer:
-                OpList.replace(op, defer(op.slot, op.targetSlot, null, op.loading && op.loading.targetSlot, op.placeholder && op.placeholder.targetSlot, op.error && op.error.targetSlot, op.loading?.constIndex ?? null, op.placeholder?.constIndex ?? null, op.sourceSpan));
-                break;
-            case OpKind.DeferSecondaryBlock:
-                OpList.remove(op);
+                const timerScheduling = !!op.loadingMinimumTime || !!op.loadingAfterTime || !!op.placeholderMinimumTime;
+                OpList.replace(op, defer(op.handle.slot, op.mainSlot.slot, op.resolverFn, op.loadingSlot?.slot ?? null, op.placeholderSlot?.slot ?? null, op.errorSlot?.slot ?? null, op.loadingConfig, op.placeholderConfig, timerScheduling, op.sourceSpan));
                 break;
             case OpKind.DeferOn:
-                OpList.replace(op, deferOn(op.sourceSpan));
+                let args = [];
+                switch (op.trigger.kind) {
+                    case DeferTriggerKind.Idle:
+                    case DeferTriggerKind.Immediate:
+                        break;
+                    case DeferTriggerKind.Timer:
+                        args = [op.trigger.delay];
+                        break;
+                    case DeferTriggerKind.Interaction:
+                    case DeferTriggerKind.Hover:
+                    case DeferTriggerKind.Viewport:
+                        if (op.trigger.targetSlot?.slot == null || op.trigger.targetSlotViewSteps === null) {
+                            throw new Error(`Slot or view steps not set in trigger reification for trigger kind ${op.trigger.kind}`);
+                        }
+                        args = [op.trigger.targetSlot.slot];
+                        if (op.trigger.targetSlotViewSteps !== 0) {
+                            args.push(op.trigger.targetSlotViewSteps);
+                        }
+                        break;
+                    default:
+                        throw new Error(`AssertionError: Unsupported reification of defer trigger kind ${op.trigger.kind}`);
+                }
+                OpList.replace(op, deferOn(op.trigger.kind, args, op.prefetch, op.sourceSpan));
                 break;
             case OpKind.ProjectionDef:
                 OpList.replace(op, projectionDef(op.def));
                 break;
             case OpKind.Projection:
-                if (op.slot === null) {
+                if (op.handle.slot === null) {
                     throw new Error('No slot was assigned for project instruction');
                 }
-                OpList.replace(op, projection(op.slot, op.projectionSlotIndex, op.attributes, op.sourceSpan));
+                OpList.replace(op, projection(op.handle.slot, op.projectionSlotIndex, op.attributes, op.sourceSpan));
                 break;
             case OpKind.RepeaterCreate:
-                if (op.slot === null) {
+                if (op.handle.slot === null) {
                     throw new Error('No slot was assigned for repeater instruction');
                 }
                 if (!(unit instanceof ViewCompilationUnit)) {
@@ -20788,7 +21363,7 @@ function reifyCreateOperations(unit, ops) {
                     emptyDecls = emptyView.decls;
                     emptyVars = emptyView.vars;
                 }
-                OpList.replace(op, repeaterCreate(op.slot, repeaterView.fnName, op.decls, op.vars, op.trackByFn, op.usesComponentInstance, emptyViewFnName, emptyDecls, emptyVars, op.sourceSpan));
+                OpList.replace(op, repeaterCreate(op.handle.slot, repeaterView.fnName, op.decls, op.vars, op.tag, op.attributes, op.trackByFn, op.usesComponentInstance, emptyViewFnName, emptyDecls, emptyVars, op.sourceSpan));
                 break;
             case OpKind.Statement:
                 // Pass statement operations directly through.
@@ -20844,7 +21419,7 @@ function reifyUpdateOperations(_unit, ops) {
                 OpList.replace(op, i18nExp(op.expression, op.sourceSpan));
                 break;
             case OpKind.I18nApply:
-                OpList.replace(op, i18nApply(op.targetSlot, op.sourceSpan));
+                OpList.replace(op, i18nApply(op.handle.slot, op.sourceSpan));
                 break;
             case OpKind.InterpolateText:
                 OpList.replace(op, textInterpolate(op.interpolation.strings, op.interpolation.expressions, op.sourceSpan));
@@ -20880,13 +21455,16 @@ function reifyUpdateOperations(_unit, ops) {
                 if (op.processed === null) {
                     throw new Error(`Conditional test was not set.`);
                 }
-                if (op.targetSlot === null) {
+                if (op.targetSlot.slot === null) {
                     throw new Error(`Conditional slot was not set.`);
                 }
-                OpList.replace(op, conditional(op.targetSlot, op.processed, op.contextValue, op.sourceSpan));
+                OpList.replace(op, conditional(op.targetSlot.slot, op.processed, op.contextValue, op.sourceSpan));
                 break;
             case OpKind.Repeater:
-                OpList.replace(op, repeater(op.targetSlot, op.collection, op.sourceSpan));
+                OpList.replace(op, repeater(op.targetSlot.slot, op.collection, op.sourceSpan));
+                break;
+            case OpKind.DeferWhen:
+                OpList.replace(op, deferWhen(op.prefetch, op.expr, op.sourceSpan));
                 break;
             case OpKind.Statement:
                 // Pass statement operations directly through.
@@ -20904,7 +21482,7 @@ function reifyIrExpression(expr) {
         case ExpressionKind.NextContext:
             return nextContext(expr.steps);
         case ExpressionKind.Reference:
-            return reference(expr.targetSlot + 1 + expr.offset);
+            return reference(expr.targetSlot.slot + 1 + expr.offset);
         case ExpressionKind.LexicalRead:
             throw new Error(`AssertionError: unresolved LexicalRead of ${expr.name}`);
         case ExpressionKind.RestoreView:
@@ -20939,13 +21517,13 @@ function reifyIrExpression(expr) {
         case ExpressionKind.PureFunctionParameterExpr:
             throw new Error(`AssertionError: expected PureFunctionParameterExpr to have been extracted`);
         case ExpressionKind.PipeBinding:
-            return pipeBind(expr.targetSlot, expr.varOffset, expr.args);
+            return pipeBind(expr.targetSlot.slot, expr.varOffset, expr.args);
         case ExpressionKind.PipeBindingVariadic:
-            return pipeBindV(expr.targetSlot, expr.varOffset, expr.args);
+            return pipeBindV(expr.targetSlot.slot, expr.varOffset, expr.args);
         case ExpressionKind.SanitizerExpr:
             return importExpr(sanitizerIdentifierMap.get(expr.fn));
         case ExpressionKind.SlotLiteralExpr:
-            return literal(expr.targetSlot);
+            return literal(expr.slot.slot);
         default:
             throw new Error(`AssertionError: Unsupported reification of ir.Expression kind: ${ExpressionKind[expr.kind]}`);
     }
@@ -20975,7 +21553,10 @@ function reifyListenerHandler(unit, name, handlerOps, consumesDollarEvent) {
     return fn(params, handlerStmts, undefined, undefined, name);
 }
 
-function phaseRemoveEmptyBindings(job) {
+/**
+ * Bidningd with no content can be safely deleted.
+ */
+function removeEmptyBindings(job) {
     for (const unit of job.units) {
         for (const op of unit.update) {
             switch (op.kind) {
@@ -20995,13 +21576,68 @@ function phaseRemoveEmptyBindings(job) {
     }
 }
 
+/**
+ * Remove the i18n context ops after they are no longer needed, and null out references to them to
+ * be safe.
+ */
+function removeI18nContexts(job) {
+    for (const unit of job.units) {
+        for (const op of unit.create) {
+            switch (op.kind) {
+                case OpKind.I18nContext:
+                    OpList.remove(op);
+                    break;
+                case OpKind.I18nStart:
+                    op.context = null;
+                    break;
+            }
+        }
+    }
+}
+
+/**
+ * Inside the body of a repeater, certain context variables (such as `$first`) are ambiently
+ * available. This phase finds those variable usages, and replaces them with the appropriate
+ * expression.
+ */
+function generateRepeaterDerivedVars(job) {
+    const repeaters = new Map();
+    for (const unit of job.units) {
+        for (const op of unit.ops()) {
+            if (op.kind === OpKind.RepeaterCreate) {
+                repeaters.set(op.xref, op);
+            }
+        }
+    }
+    for (const unit of job.units) {
+        for (const op of unit.ops()) {
+            transformExpressionsInOp(op, expr => {
+                if (!(expr instanceof DerivedRepeaterVarExpr)) {
+                    return expr;
+                }
+                const repeaterOp = repeaters.get(expr.xref);
+                switch (expr.identity) {
+                    case DerivedRepeaterVarIdentity.First:
+                        return new BinaryOperatorExpr(BinaryOperator.Identical, new LexicalReadExpr(repeaterOp.varNames.$index), literal(0));
+                    case DerivedRepeaterVarIdentity.Last:
+                        return new BinaryOperatorExpr(BinaryOperator.Identical, new LexicalReadExpr(repeaterOp.varNames.$index), new BinaryOperatorExpr(BinaryOperator.Minus, new LexicalReadExpr(repeaterOp.varNames.$count), literal(1)));
+                    case DerivedRepeaterVarIdentity.Even:
+                        return new BinaryOperatorExpr(BinaryOperator.Identical, new BinaryOperatorExpr(BinaryOperator.Modulo, new LexicalReadExpr(repeaterOp.varNames.$index), literal(2)), literal(0));
+                    case DerivedRepeaterVarIdentity.Odd:
+                        return new BinaryOperatorExpr(BinaryOperator.NotIdentical, new BinaryOperatorExpr(BinaryOperator.Modulo, new LexicalReadExpr(repeaterOp.varNames.$index), literal(2)), literal(0));
+                }
+            }, VisitorContextFlag.None);
+        }
+    }
+}
+
 /**
  * Resolves `ir.ContextExpr` expressions (which represent embedded view or component contexts) to
  * either the `ctx` parameter to component functions (for the current view context) or to variables
  * that store those contexts (for contexts accessed via the `nextContext()` instruction).
  */
-function phaseResolveContexts(cpl) {
-    for (const unit of cpl.units) {
+function resolveContexts(job) {
+    for (const unit of job.units) {
         processLexicalScope$1(unit, unit.create);
         processLexicalScope$1(unit, unit.update);
     }
@@ -21049,13 +21685,13 @@ function processLexicalScope$1(view, ops) {
  * Any variable inside a listener with the name `$event` will be transformed into a output lexical
  * read immediately, and does not participate in any of the normal logic for handling variables.
  */
-function phaseResolveDollarEvent(job) {
+function resolveDollarEvent(job) {
     for (const unit of job.units) {
-        resolveDollarEvent(unit, unit.create);
-        resolveDollarEvent(unit, unit.update);
+        transformDollarEvent(unit, unit.create);
+        transformDollarEvent(unit, unit.update);
     }
 }
-function resolveDollarEvent(unit, ops) {
+function transformDollarEvent(unit, ops) {
     for (const op of ops) {
         if (op.kind === OpKind.Listener) {
             transformExpressionsInOp(op, (expr) => {
@@ -21070,201 +21706,46 @@ function resolveDollarEvent(unit, ops) {
 }
 
 /**
- * The escape sequence used indicate message param values.
+ * Resolve the element placeholders in i18n messages.
  */
-const ESCAPE = '\uFFFD';
-/**
- * Marker used to indicate an element tag.
- */
-const ELEMENT_MARKER = '#';
-/**
- * Marker used to indicate a template tag.
- */
-const TEMPLATE_MARKER = '*';
-/**
- * Marker used to indicate closing of an element or template tag.
- */
-const TAG_CLOSE_MARKER = '/';
-/**
- * Marker used to indicate the sub-template context.
- */
-const CONTEXT_MARKER = ':';
-/**
- * Marker used to indicate the start of a list of values.
- */
-const LIST_START_MARKER = '[';
-/**
- * Marker used to indicate the end of a list of values.
- */
-const LIST_END_MARKER = ']';
-/**
- * Delimiter used to separate multiple values in a list.
- */
-const LIST_DELIMITER = '|';
-/**
- * Flags that describe what an i18n param value. These determine how the value is serialized into
- * the final map.
- */
-var I18nParamValueFlags;
-(function (I18nParamValueFlags) {
-    I18nParamValueFlags[I18nParamValueFlags["None"] = 0] = "None";
-    /**
-     *  This value represtents an element tag.
-     */
-    I18nParamValueFlags[I18nParamValueFlags["ElementTag"] = 1] = "ElementTag";
-    /**
-     * This value represents a template tag.
-     */
-    I18nParamValueFlags[I18nParamValueFlags["TemplateTag"] = 2] = "TemplateTag";
-    /**
-     * This value represents the opening of a tag.
-     */
-    I18nParamValueFlags[I18nParamValueFlags["OpenTag"] = 4] = "OpenTag";
-    /**
-     * This value represents the closing of a tag.
-     */
-    I18nParamValueFlags[I18nParamValueFlags["CloseTag"] = 8] = "CloseTag";
-})(I18nParamValueFlags || (I18nParamValueFlags = {}));
-/**
- * Represents the complete i18n params map for an i18n op.
- */
-class I18nPlaceholderParams {
-    constructor() {
-        this.values = new Map();
-    }
-    /**
-     * Adds a new value to the params map.
-     */
-    addValue(placeholder, value, subTemplateIndex, resolutionTime, flags) {
-        const placeholderValues = this.values.get(placeholder) ?? [];
-        placeholderValues.push({ value, subTemplateIndex, resolutionTime, flags });
-        this.values.set(placeholder, placeholderValues);
-    }
-    /**
-     * Saves the params map, in serialized form, into the given i18n op.
-     */
-    saveToOp(op) {
-        for (const [placeholder, placeholderValues] of this.values) {
-            // We need to run post-processing for any 1i8n ops that contain parameters with more than
-            // one value, even if there are no parameters resolved at post-processing time.
-            const creationValues = placeholderValues.filter(({ resolutionTime }) => resolutionTime === I18nParamResolutionTime.Creation);
-            if (creationValues.length > 1) {
-                op.needsPostprocessing = true;
-            }
-            // Save creation time params to op.
-            const serializedCreationValues = this.serializeValues(creationValues);
-            if (serializedCreationValues !== null) {
-                op.params.set(placeholder, literal(serializedCreationValues));
-            }
-            // Save post-processing time params to op.
-            const serializedPostprocessingValues = this.serializeValues(placeholderValues.filter(({ resolutionTime }) => resolutionTime === I18nParamResolutionTime.Postproccessing));
-            if (serializedPostprocessingValues !== null) {
-                op.needsPostprocessing = true;
-                op.postprocessingParams.set(placeholder, literal(serializedPostprocessingValues));
-            }
-        }
-    }
-    /**
-     * Merges another param map into this one.
-     */
-    merge(other) {
-        for (const [placeholder, otherValues] of other.values) {
-            const currentValues = this.values.get(placeholder) || [];
-            // Child element close tag params should be prepended to maintain the same order as
-            // TemplateDefinitionBuilder.
-            const flags = otherValues[0].flags;
-            if ((flags & I18nParamValueFlags.CloseTag) && !(flags & I18nParamValueFlags.OpenTag)) {
-                this.values.set(placeholder, [...otherValues, ...currentValues]);
-            }
-            else {
-                this.values.set(placeholder, [...currentValues, ...otherValues]);
-            }
-        }
-    }
-    /**
-     * Serializes a list of i18n placeholder values.
-     */
-    serializeValues(values) {
-        if (values.length === 0) {
-            return null;
-        }
-        const serializedValues = values.map(value => this.serializeValue(value));
-        return serializedValues.length === 1 ?
-            serializedValues[0] :
-            `${LIST_START_MARKER}${serializedValues.join(LIST_DELIMITER)}${LIST_END_MARKER}`;
-    }
-    /**
-     * Serializes a single i18n placeholder value.
-     */
-    serializeValue(value) {
-        let tagMarker = '';
-        let closeMarker = '';
-        if (value.flags & I18nParamValueFlags.ElementTag) {
-            tagMarker = ELEMENT_MARKER;
-        }
-        else if (value.flags & I18nParamValueFlags.TemplateTag) {
-            tagMarker = TEMPLATE_MARKER;
-        }
-        if (tagMarker !== '') {
-            closeMarker = value.flags & I18nParamValueFlags.CloseTag ? TAG_CLOSE_MARKER : '';
-        }
-        const context = value.subTemplateIndex === null ? '' : `${CONTEXT_MARKER}${value.subTemplateIndex}`;
-        // Self-closing tags use a special form that concatenates the start and close tag values.
-        if ((value.flags & I18nParamValueFlags.OpenTag) &&
-            (value.flags & I18nParamValueFlags.CloseTag)) {
-            return `${ESCAPE}${tagMarker}${value.value}${context}${ESCAPE}${ESCAPE}${closeMarker}${tagMarker}${value.value}${context}${ESCAPE}`;
-        }
-        return `${ESCAPE}${closeMarker}${tagMarker}${value.value}${context}${ESCAPE}`;
-    }
-}
-/**
- * Resolve the placeholders in i18n messages.
- */
-function phaseResolveI18nPlaceholders(job) {
-    const params = new Map();
-    const i18nOps = new Map();
-    resolvePlaceholders(job, params, i18nOps);
-    propagatePlaceholders(params, i18nOps);
-    // After colleccting all params, save them to the i18n ops.
-    for (const [xref, i18nOpParams] of params) {
-        i18nOpParams.saveToOp(i18nOps.get(xref));
-    }
-    // Validate the root i18n ops have all placeholders filled in.
-    for (const op of i18nOps.values()) {
-        if (op.xref === op.root) {
-            for (const placeholder in op.message.placeholders) {
-                if (!op.params.has(placeholder) && !op.postprocessingParams.has(placeholder)) {
-                    throw Error(`Failed to resolve i18n placeholder: ${placeholder}`);
-                }
+function resolveI18nElementPlaceholders(job) {
+    // Record all of the element and i18n context ops for use later.
+    const i18nContexts = new Map();
+    const elements = new Map();
+    for (const unit of job.units) {
+        for (const op of unit.create) {
+            switch (op.kind) {
+                case OpKind.I18nContext:
+                    i18nContexts.set(op.xref, op);
+                    break;
+                case OpKind.ElementStart:
+                    elements.set(op.xref, op);
+                    break;
             }
         }
     }
-}
-/**
- * Resolve placeholders for each i18n op.
- */
-function resolvePlaceholders(job, params, i18nOps) {
     for (const unit of job.units) {
-        const elements = new Map();
-        let currentI18nOp = null;
-        // Record slots for tag name placeholders.
+        // Track the current i18n op and corresponding i18n context op as we step through the creation
+        // IR.
+        let currentOps = null;
         for (const op of unit.create) {
             switch (op.kind) {
                 case OpKind.I18nStart:
-                    i18nOps.set(op.xref, op);
-                    currentI18nOp = op.kind === OpKind.I18nStart ? op : null;
+                    if (!op.context) {
+                        throw Error('Could not find i18n context for i18n op');
+                    }
+                    currentOps = { i18nBlock: op, i18nContext: i18nContexts.get(op.context) };
                     break;
                 case OpKind.I18nEnd:
-                    currentI18nOp = null;
+                    currentOps = null;
                     break;
                 case OpKind.ElementStart:
                     // For elements with i18n placeholders, record its slot value in the params map under the
                     // corresponding tag start placeholder.
                     if (op.i18nPlaceholder !== undefined) {
-                        if (currentI18nOp === null) {
+                        if (currentOps === null) {
                             throw Error('i18n tag placeholder should only occur inside an i18n block');
                         }
-                        elements.set(op.xref, op);
                         const { startName, closeName } = op.i18nPlaceholder;
                         let flags = I18nParamValueFlags.ElementTag | I18nParamValueFlags.OpenTag;
                         // For self-closing tags, there is no close tag placeholder. Instead, the start tag
@@ -21272,57 +21753,40 @@ function resolvePlaceholders(job, params, i18nOps) {
                         if (closeName === '') {
                             flags |= I18nParamValueFlags.CloseTag;
                         }
-                        addParam(params, currentI18nOp, startName, op.slot, currentI18nOp.subTemplateIndex, I18nParamResolutionTime.Creation, flags);
+                        addParam(currentOps.i18nContext.params, startName, op.handle.slot, currentOps.i18nBlock.subTemplateIndex, flags);
                     }
                     break;
                 case OpKind.ElementEnd:
+                    // For elements with i18n placeholders, record its slot value in the params map under the
+                    // corresponding tag close placeholder.
                     const startOp = elements.get(op.xref);
                     if (startOp && startOp.i18nPlaceholder !== undefined) {
-                        if (currentI18nOp === null) {
+                        if (currentOps === null) {
                             throw Error('i18n tag placeholder should only occur inside an i18n block');
                         }
                         const { closeName } = startOp.i18nPlaceholder;
                         // Self-closing tags don't have a closing tag placeholder.
                         if (closeName !== '') {
-                            addParam(params, currentI18nOp, closeName, startOp.slot, currentI18nOp.subTemplateIndex, I18nParamResolutionTime.Creation, I18nParamValueFlags.ElementTag | I18nParamValueFlags.CloseTag);
+                            addParam(currentOps.i18nContext.params, closeName, startOp.handle.slot, currentOps.i18nBlock.subTemplateIndex, I18nParamValueFlags.ElementTag | I18nParamValueFlags.CloseTag);
                         }
                     }
                     break;
                 case OpKind.Template:
+                    // For templates with i18n placeholders, record its slot value in the params map under the
+                    // corresponding template start and close placeholders.
                     if (op.i18nPlaceholder !== undefined) {
-                        if (currentI18nOp === null) {
+                        if (currentOps === null) {
                             throw Error('i18n tag placeholder should only occur inside an i18n block');
                         }
-                        const subTemplateIndex = getSubTemplateIndexForTemplateTag(job, currentI18nOp, op);
-                        addParam(params, currentI18nOp, op.i18nPlaceholder.startName, op.slot, subTemplateIndex, I18nParamResolutionTime.Creation, I18nParamValueFlags.TemplateTag);
-                        addParam(params, currentI18nOp, op.i18nPlaceholder.closeName, op.slot, subTemplateIndex, I18nParamResolutionTime.Creation, I18nParamValueFlags.TemplateTag | I18nParamValueFlags.CloseTag);
+                        const subTemplateIndex = getSubTemplateIndexForTemplateTag(job, currentOps.i18nBlock, op);
+                        addParam(currentOps.i18nContext.params, op.i18nPlaceholder.startName, op.handle.slot, subTemplateIndex, I18nParamValueFlags.TemplateTag);
+                        addParam(currentOps.i18nContext.params, op.i18nPlaceholder.closeName, op.handle.slot, subTemplateIndex, I18nParamValueFlags.TemplateTag | I18nParamValueFlags.CloseTag);
                     }
                     break;
             }
         }
-        // Fill in values for each of the i18n expression placeholders.
-        const i18nBlockPlaceholderIndices = new Map();
-        for (const op of unit.update) {
-            if (op.kind === OpKind.I18nExpression) {
-                const i18nOp = i18nOps.get(op.owner);
-                let index = i18nBlockPlaceholderIndices.get(op.owner) || 0;
-                if (!i18nOp) {
-                    throw Error('Cannot find corresponding i18nStart for i18nExpr');
-                }
-                addParam(params, i18nOp, op.i18nPlaceholder, index++, i18nOp.subTemplateIndex, op.resolutionTime);
-                i18nBlockPlaceholderIndices.set(op.owner, index);
-            }
-        }
     }
 }
-/**
- * Add a param to the params map for the given i18n op.
- */
-function addParam(params, i18nOp, placeholder, value, subTemplateIndex, resolutionTime, flags = I18nParamValueFlags.None) {
-    const i18nOpParams = params.get(i18nOp.xref) || new I18nPlaceholderParams();
-    i18nOpParams.addValue(placeholder, value, subTemplateIndex, resolutionTime, flags);
-    params.set(i18nOp.xref, i18nOpParams);
-}
 /**
  * Get the subTemplateIndex for the given template op. For template ops, use the subTemplateIndex of
  * the child i18n block inside the template.
@@ -21335,15 +21799,49 @@ function getSubTemplateIndexForTemplateTag(job, i18nOp, op) {
     }
     return i18nOp.subTemplateIndex;
 }
+/** Add a param value to the given params map. */
+function addParam(params, placeholder, value, subTemplateIndex, flags = I18nParamValueFlags.None) {
+    const values = params.get(placeholder) ?? [];
+    values.push({ value, subTemplateIndex, flags });
+    params.set(placeholder, values);
+}
+
 /**
- * Propagate placeholders up to their root i18n op.
+ * Resolve the i18n expression placeholders in i18n messages.
  */
-function propagatePlaceholders(params, i18nOps) {
-    for (const [xref, opParams] of params) {
-        const op = i18nOps.get(xref);
-        if (op.xref !== op.root) {
-            const rootParams = params.get(op.root) || new I18nPlaceholderParams();
-            rootParams.merge(opParams);
+function resolveI18nExpressionPlaceholders(job) {
+    // Record all of the i18n context ops, and the sub-template index for each i18n op.
+    const subTemplateIndicies = new Map();
+    const i18nContexts = new Map();
+    for (const unit of job.units) {
+        for (const op of unit.create) {
+            switch (op.kind) {
+                case OpKind.I18nStart:
+                    subTemplateIndicies.set(op.xref, op.subTemplateIndex);
+                    break;
+                case OpKind.I18nContext:
+                    i18nContexts.set(op.xref, op);
+                    break;
+            }
+        }
+    }
+    // Keep track of the next available expression index per i18n context.
+    const expressionIndices = new Map();
+    for (const unit of job.units) {
+        for (const op of unit.update) {
+            if (op.kind === OpKind.I18nExpression) {
+                const index = expressionIndices.get(op.context) || 0;
+                const i18nContext = i18nContexts.get(op.context);
+                const subTemplateIndex = subTemplateIndicies.get(i18nContext.i18nBlock);
+                // Add the expression index in the appropriate params map.
+                const params = op.resolutionTime === I18nParamResolutionTime.Creation ?
+                    i18nContext.params :
+                    i18nContext.postprocessingParams;
+                const values = params.get(op.i18nPlaceholder) || [];
+                values.push({ value: index, subTemplateIndex: subTemplateIndex, flags: I18nParamValueFlags.None });
+                params.set(op.i18nPlaceholder, values);
+                expressionIndices.set(op.context, index + 1);
+            }
         }
     }
 }
@@ -21355,8 +21853,8 @@ function propagatePlaceholders(params, i18nOps) {
  * Also matches `ir.RestoreViewExpr` expressions with the variables of their corresponding saved
  * views.
  */
-function phaseResolveNames(cpl) {
-    for (const unit of cpl.units) {
+function resolveNames(job) {
+    for (const unit of job.units) {
         processLexicalScope(unit, unit.create, null);
         processLexicalScope(unit, unit.update, null);
     }
@@ -21457,7 +21955,7 @@ const sanitizers = new Map([
 /**
  * Resolves sanitization functions for ops that need them.
  */
-function phaseResolveSanitizers(job) {
+function resolveSanitizers(job) {
     for (const unit of job.units) {
         const elements = createOpXrefMap(unit);
         let sanitizerFn;
@@ -21492,21 +21990,26 @@ function isIframeElement$1(op) {
     return op.kind === OpKind.ElementStart && op.tag?.toLowerCase() === 'iframe';
 }
 
-function phaseSaveRestoreView(job) {
-    for (const view of job.views.values()) {
-        view.create.prepend([
-            createVariableOp(view.job.allocateXrefId(), {
+/**
+ * When inside of a listener, we may need access to one or more enclosing views. Therefore, each
+ * view should save the current view, and each listener must have the ability to restore the
+ * appropriate view. We eagerly generate all save view variables; they will be optimized away later.
+ */
+function saveAndRestoreView(job) {
+    for (const unit of job.units) {
+        unit.create.prepend([
+            createVariableOp(unit.job.allocateXrefId(), {
                 kind: SemanticVariableKind.SavedView,
                 name: null,
-                view: view.xref,
+                view: unit.xref,
             }, new GetCurrentViewExpr(), VariableFlags.None),
         ]);
-        for (const op of view.create) {
+        for (const op of unit.create) {
             if (op.kind !== OpKind.Listener) {
                 continue;
             }
             // Embedded views always need the save/restore view operation.
-            let needsRestoreView = view !== job.root;
+            let needsRestoreView = unit !== job.root;
             if (!needsRestoreView) {
                 for (const handlerOp of op.handlerOps) {
                     visitExpressionsInOp(handlerOp, expr => {
@@ -21518,7 +22021,7 @@ function phaseSaveRestoreView(job) {
                 }
             }
             if (needsRestoreView) {
-                addSaveRestoreViewOperationToListener(view, op);
+                addSaveRestoreViewOperationToListener(unit, op);
             }
         }
     }
@@ -21550,7 +22053,7 @@ function addSaveRestoreViewOperationToListener(unit, op) {
  * This phase is also responsible for counting the number of slots used for each view (its `decls`)
  * and propagating that number into the `Template` operations which declare embedded views.
  */
-function phaseSlotAllocation(job) {
+function allocateSlots(job) {
     // Map of all declarations in all views within the component which require an assigned slot index.
     // This map needs to be global (across all views within the component) since it's possible to
     // reference a slot from one view from an expression within another (e.g. local references work
@@ -21566,9 +22069,9 @@ function phaseSlotAllocation(job) {
                 continue;
             }
             // Assign slots to this declaration starting at the current `slotCount`.
-            op.slot = slotCount;
+            op.handle.slot = slotCount;
             // And track its assigned slot in the `slotMap`.
-            slotMap.set(op.xref, op.slot);
+            slotMap.set(op.xref, op.handle.slot);
             // Each declaration may use more than 1 slot, so increment `slotCount` to reserve the number
             // of slots required.
             slotCount += op.numSlotsUsed;
@@ -21590,31 +22093,6 @@ function phaseSlotAllocation(job) {
                 const childView = job.views.get(op.xref);
                 op.decls = childView.decls;
             }
-            if (hasUsesSlotIndexTrait(op) && op.target !== null && op.targetSlot === null) {
-                if (!slotMap.has(op.target)) {
-                    // We do expect to find a slot allocated for everything which might be referenced.
-                    throw new Error(`AssertionError: no slot allocated for ${OpKind[op.kind]} target ${op.target}`);
-                }
-                op.targetSlot = slotMap.get(op.target);
-            }
-            // Process all `ir.Expression`s within this view, and look for `usesSlotIndexExprTrait`.
-            visitExpressionsInOp(op, expr => {
-                if (!isIrExpression(expr)) {
-                    return;
-                }
-                if (!hasUsesSlotIndexTrait(expr) || expr.targetSlot !== null) {
-                    return;
-                }
-                // The `UsesSlotIndexExprTrait` indicates that this expression references something declared
-                // in this component template by its slot index. Use the `target` `ir.XrefId` to find the
-                // allocated slot for that declaration in `slotMap`.
-                if (!slotMap.has(expr.target)) {
-                    // We do expect to find a slot allocated for everything which might be referenced.
-                    throw new Error(`AssertionError: no slot allocated for ${expr.constructor.name} target ${expr.target}`);
-                }
-                // Record the allocated slot on the expression.
-                expr.targetSlot = slotMap.get(expr.target);
-            });
         }
     }
 }
@@ -21623,8 +22101,8 @@ function phaseSlotAllocation(job) {
  * Transforms special-case bindings with 'style' or 'class' in their names. Must run before the
  * main binding specialization pass.
  */
-function phaseStyleBindingSpecialization(cpl) {
-    for (const unit of cpl.units) {
+function specializeStyleBindings(job) {
+    for (const unit of job.units) {
         for (const op of unit.update) {
             if (op.kind !== OpKind.Binding) {
                 continue;
@@ -21662,8 +22140,8 @@ function phaseStyleBindingSpecialization(cpl) {
  * in the double keyed read `a?.[f()]?.[f()]`, the two function calls have non-overlapping scopes.
  * Implement an algorithm for reuse.
  */
-function phaseTemporaryVariables(cpl) {
-    for (const unit of cpl.units) {
+function generateTemporaryVariables(job) {
+    for (const unit of job.units) {
         unit.create.prepend(generateTemporaries(unit.create));
         unit.update.prepend(generateTemporaries(unit.update));
     }
@@ -21703,40 +22181,178 @@ function generateTemporaries(ops) {
                 }
                 assignName(defs, expr);
             }
-            else if (expr instanceof ReadTemporaryExpr) {
-                if (finalReads.get(expr.xref) === expr) {
-                    released.add(expr.xref);
-                    count--;
+            else if (expr instanceof ReadTemporaryExpr) {
+                if (finalReads.get(expr.xref) === expr) {
+                    released.add(expr.xref);
+                    count--;
+                }
+                assignName(defs, expr);
+            }
+        });
+        // Add declarations for the temp vars.
+        generatedStatements.push(...Array.from(new Set(defs.values()))
+            .map(name => createStatementOp(new DeclareVarStmt(name))));
+        opCount++;
+        if (op.kind === OpKind.Listener) {
+            op.handlerOps.prepend(generateTemporaries(op.handlerOps));
+        }
+    }
+    return generatedStatements;
+}
+/**
+ * Assigns a name to the temporary variable in the given temporary variable expression.
+ */
+function assignName(names, expr) {
+    const name = names.get(expr.xref);
+    if (name === undefined) {
+        throw new Error(`Found xref with unassigned name: ${expr.xref}`);
+    }
+    expr.name = name;
+}
+
+/**
+ * Generate track functions that need to be extracted to the constant pool. This entails wrapping
+ * them in an arrow (or traditional) function, replacing context reads with `this.`, and storing
+ * them in the constant pool.
+ *
+ * Note that, if a track function was previously optimized, it will not need to be extracted, and
+ * this phase is a no-op.
+ */
+function generateTrackFns(job) {
+    for (const unit of job.units) {
+        for (const op of unit.create) {
+            if (op.kind !== OpKind.RepeaterCreate) {
+                continue;
+            }
+            if (op.trackByFn !== null) {
+                // The final track function was already set, probably because it was optimized.
+                continue;
+            }
+            // Find all component context reads.
+            let usesComponentContext = false;
+            op.track = transformExpressionsInExpression(op.track, expr => {
+                if (expr instanceof TrackContextExpr) {
+                    usesComponentContext = true;
+                    return variable('this');
+                }
+                return expr;
+            }, VisitorContextFlag.None);
+            let fn;
+            const fnParams = [new FnParam('$index'), new FnParam('$item')];
+            if (usesComponentContext) {
+                fn = new FunctionExpr(fnParams, [new ReturnStatement(op.track)]);
+            }
+            else {
+                fn = arrowFn(fnParams, op.track);
+            }
+            op.trackByFn = job.pool.getSharedFunctionReference(fn, '_forTrack');
+        }
+    }
+}
+
+/**
+ * `track` functions in `for` repeaters can sometimes be "optimized," i.e. transformed into inline
+ * expressions, in lieu of an external function call. For example, tracking by `$index` can be be
+ * optimized into an inline `trackByIndex` reference. This phase checks track expressions for
+ * optimizable cases.
+ */
+function optimizeTrackFns(job) {
+    for (const unit of job.units) {
+        for (const op of unit.create) {
+            if (op.kind !== OpKind.RepeaterCreate) {
+                continue;
+            }
+            if (op.track instanceof ReadVarExpr && op.track.name === '$index') {
+                // Top-level access of `$index` uses the built in `repeaterTrackByIndex`.
+                op.trackByFn = importExpr(Identifiers.repeaterTrackByIndex);
+            }
+            else if (op.track instanceof ReadVarExpr && op.track.name === '$item') {
+                // Top-level access of the item uses the built in `repeaterTrackByIdentity`.
+                op.trackByFn = importExpr(Identifiers.repeaterTrackByIdentity);
+            }
+            else if (isTrackByFunctionCall(job.root.xref, op.track)) {
+                // Top-level method calls in the form of `fn($index, item)` can be passed in directly.
+                if (op.track.receiver.receiver.view === unit.xref) {
+                    // TODO: this may be wrong
+                    op.trackByFn = op.track.receiver;
+                }
+                else {
+                    // This is a plain method call, but not in the component's root view.
+                    // We need to get the component instance, and then call the method on it.
+                    op.trackByFn =
+                        importExpr(Identifiers.componentInstance).callFn([]).prop(op.track.receiver.name);
+                    // Because the context is not avaiable (without a special function), we don't want to
+                    // try to resolve it later. Let's get rid of it by overwriting the original track
+                    // expression (which won't be used anyway).
+                    op.track = op.trackByFn;
                 }
-                assignName(defs, expr);
             }
-        });
-        // Add declarations for the temp vars.
-        generatedStatements.push(...Array.from(new Set(defs.values()))
-            .map(name => createStatementOp(new DeclareVarStmt(name))));
-        opCount++;
-        if (op.kind === OpKind.Listener) {
-            op.handlerOps.prepend(generateTemporaries(op.handlerOps));
+            else {
+                // The track function could not be optimized.
+                // Replace context reads with a special IR expression, since context reads in a track
+                // function are emitted specially.
+                op.track = transformExpressionsInExpression(op.track, expr => {
+                    if (expr instanceof ContextExpr) {
+                        op.usesComponentInstance = true;
+                        return new TrackContextExpr(expr.view);
+                    }
+                    return expr;
+                }, VisitorContextFlag.None);
+            }
         }
     }
-    return generatedStatements;
 }
+function isTrackByFunctionCall(rootView, expr) {
+    if (!(expr instanceof InvokeFunctionExpr) || expr.args.length !== 2) {
+        return false;
+    }
+    if (!(expr.receiver instanceof ReadPropExpr &&
+        expr.receiver.receiver instanceof ContextExpr) ||
+        expr.receiver.receiver.view !== rootView) {
+        return false;
+    }
+    const [arg0, arg1] = expr.args;
+    if (!(arg0 instanceof ReadVarExpr) || arg0.name !== '$index') {
+        return false;
+    }
+    if (!(arg1 instanceof ReadVarExpr) || arg1.name !== '$item') {
+        return false;
+    }
+    return true;
+}
+
 /**
- * Assigns a name to the temporary variable in the given temporary variable expression.
+ * Inside the `track` expression on a `for` repeater, the `$index` and `$item` variables are
+ * ambiently available. In this phase, we find those variable usages, and replace them with the
+ * appropriate output read.
  */
-function assignName(names, expr) {
-    const name = names.get(expr.xref);
-    if (name === undefined) {
-        throw new Error(`Found xref with unassigned name: ${expr.xref}`);
+function generateTrackVariables(job) {
+    for (const unit of job.units) {
+        for (const op of unit.create) {
+            if (op.kind !== OpKind.RepeaterCreate) {
+                continue;
+            }
+            op.track = transformExpressionsInExpression(op.track, expr => {
+                if (expr instanceof LexicalReadExpr) {
+                    if (expr.name === op.varNames.$index) {
+                        return variable('$index');
+                    }
+                    else if (expr.name === op.varNames.$implicit) {
+                        return variable('$item');
+                    }
+                    // TODO: handle prohibited context variables (emit as globals?)
+                }
+                return expr;
+            }, VisitorContextFlag.None);
+        }
     }
-    expr.name = name;
 }
 
 /**
  * Counts the number of variable slots used within each view, and stores that on the view itself, as
  * well as propagates it to the `ir.TemplateOp` for embedded views.
  */
-function phaseVarCounting(job) {
+function countVariables(job) {
     // First, count the vars used in each view, and update the view-level counter.
     for (const unit of job.units) {
         let varCount = 0;
@@ -21881,7 +22497,7 @@ function isSingletonInterpolation(expr) {
  * To guarantee correctness, analysis of "fences" in the instruction lists is used to determine
  * which optimizations are safe to perform.
  */
-function phaseVariableOptimization(job) {
+function optimizeVariables(job) {
     for (const unit of job.units) {
         inlineAlwaysInlineVariables(unit.create);
         inlineAlwaysInlineVariables(unit.update);
@@ -21923,7 +22539,7 @@ var Fence;
      * Note that all `ContextWrite` fences are implicitly `ContextRead` fences as operations which
      * change the view context do so based on the current one.
      */
-    Fence[Fence["ViewContextWrite"] = 3] = "ViewContextWrite";
+    Fence[Fence["ViewContextWrite"] = 2] = "ViewContextWrite";
     /**
      * Indicates that a call is required for its side-effects, even if nothing reads its result.
      *
@@ -22103,9 +22719,9 @@ function optimizeVariablesInOpList(ops, compatibility) {
 function fencesForIrExpression(expr) {
     switch (expr.kind) {
         case ExpressionKind.NextContext:
-            return Fence.ViewContextWrite;
+            return Fence.ViewContextRead | Fence.ViewContextWrite;
         case ExpressionKind.RestoreView:
-            return Fence.ViewContextWrite | Fence.SideEffectful;
+            return Fence.ViewContextRead | Fence.ViewContextWrite | Fence.SideEffectful;
         case ExpressionKind.Reference:
             return Fence.ViewContextRead;
         default:
@@ -22277,7 +22893,7 @@ function allowConservativeInlining(decl, target) {
 /**
  * Wraps ICUs that do not already belong to an i18n block in a new i18n block.
  */
-function phaseWrapIcus(job) {
+function wrapI18nIcus(job) {
     for (const unit of job.units) {
         let currentI18nOp = null;
         for (const op of unit.create) {
@@ -22300,133 +22916,6 @@ function phaseWrapIcus(job) {
     }
 }
 
-function phaseTrackVariables(job) {
-    for (const unit of job.units) {
-        for (const op of unit.create) {
-            if (op.kind !== OpKind.RepeaterCreate) {
-                continue;
-            }
-            op.track = transformExpressionsInExpression(op.track, expr => {
-                if (expr instanceof LexicalReadExpr) {
-                    if (expr.name === op.varNames.$index) {
-                        return variable('$index');
-                    }
-                    else if (expr.name === op.varNames.$implicit) {
-                        return variable('$item');
-                    }
-                    // TODO: handle prohibited context variables (emit as globals?)
-                }
-                return expr;
-            }, VisitorContextFlag.None);
-        }
-    }
-}
-
-/**
- * Generate track functions that need to be extracted to the constant pool. This entails wrapping
- * them in an arrow (or traditional) function, replacing context reads with `this.`, and storing
- * them in the constant pool.
- *
- * Note that, if a track function was previously optimized, it will not need to be extracted, and
- * this phase is a no-op.
- */
-function phaseTrackFnGeneration(job) {
-    for (const unit of job.units) {
-        for (const op of unit.create) {
-            if (op.kind !== OpKind.RepeaterCreate) {
-                continue;
-            }
-            if (op.trackByFn !== null) {
-                // The final track function was already set, probably because it was optimized.
-                continue;
-            }
-            // Find all component context reads.
-            let usesComponentContext = false;
-            op.track = transformExpressionsInExpression(op.track, expr => {
-                if (expr instanceof TrackContextExpr) {
-                    usesComponentContext = true;
-                    return variable('this');
-                }
-                return expr;
-            }, VisitorContextFlag.None);
-            let fn;
-            const fnParams = [new FnParam('$index'), new FnParam('$item')];
-            if (usesComponentContext) {
-                fn = new FunctionExpr(fnParams, [new ReturnStatement(op.track)]);
-            }
-            else {
-                fn = arrowFn(fnParams, op.track);
-            }
-            op.trackByFn = job.pool.getSharedFunctionReference(fn, '_forTrack');
-        }
-    }
-}
-
-function phaseTrackFnOptimization(job) {
-    for (const unit of job.units) {
-        for (const op of unit.create) {
-            if (op.kind !== OpKind.RepeaterCreate) {
-                continue;
-            }
-            if (op.track instanceof ReadVarExpr && op.track.name === '$index') {
-                // Top-level access of `$index` uses the built in `repeaterTrackByIndex`.
-                op.trackByFn = importExpr(Identifiers.repeaterTrackByIndex);
-            }
-            else if (op.track instanceof ReadVarExpr && op.track.name === '$item') {
-                // Top-level access of the item uses the built in `repeaterTrackByIdentity`.
-                op.trackByFn = importExpr(Identifiers.repeaterTrackByIdentity);
-            }
-            else if (isTrackByFunctionCall(job.root.xref, op.track)) {
-                // Top-level method calls in the form of `fn($index, item)` can be passed in directly.
-                if (op.track.receiver.receiver.view === unit.xref) {
-                    // TODO: this may be wrong
-                    op.trackByFn = op.track.receiver;
-                }
-                else {
-                    // This is a plain method call, but not in the component's root view.
-                    // We need to get the component instance, and then call the method on it.
-                    op.trackByFn =
-                        importExpr(Identifiers.componentInstance).callFn([]).prop(op.track.receiver.name);
-                    // Because the context is not avaiable (without a special function), we don't want to
-                    // try to resolve it later. Let's get rid of it by overwriting the original track
-                    // expression (which won't be used anyway).
-                    op.track = op.trackByFn;
-                }
-            }
-            else {
-                // The track function could not be optimized.
-                // Replace context reads with a special IR expression, since context reads in a track
-                // function are emitted specially.
-                op.track = transformExpressionsInExpression(op.track, expr => {
-                    if (expr instanceof ContextExpr) {
-                        op.usesComponentInstance = true;
-                        return new TrackContextExpr(expr.view);
-                    }
-                    return expr;
-                }, VisitorContextFlag.None);
-            }
-        }
-    }
-}
-function isTrackByFunctionCall(rootView, expr) {
-    if (!(expr instanceof InvokeFunctionExpr) || expr.args.length !== 2) {
-        return false;
-    }
-    if (!(expr.receiver instanceof ReadPropExpr &&
-        expr.receiver.receiver instanceof ContextExpr) ||
-        expr.receiver.receiver.view !== rootView) {
-        return false;
-    }
-    const [arg0, arg1] = expr.args;
-    if (!(arg0 instanceof ReadVarExpr) || arg0.name !== '$index') {
-        return false;
-    }
-    if (!(arg1 instanceof ReadVarExpr) || arg1.name !== '$item') {
-        return false;
-    }
-    return true;
-}
-
 /**
  *
  * @license
@@ -22436,59 +22925,66 @@ function isTrackByFunctionCall(rootView, expr) {
  * found in the LICENSE file at https://angular.io/license
  */
 const phases = [
-    { kind: CompilationJobKind.Tmpl, fn: phaseRemoveContentSelectors },
-    { kind: CompilationJobKind.Host, fn: phaseHostStylePropertyParsing },
-    { kind: CompilationJobKind.Tmpl, fn: phaseNamespace },
-    { kind: CompilationJobKind.Both, fn: phaseStyleBindingSpecialization },
-    { kind: CompilationJobKind.Both, fn: phaseBindingSpecialization },
-    { kind: CompilationJobKind.Tmpl, fn: phasePropagateI18nBlocks },
-    { kind: CompilationJobKind.Tmpl, fn: phaseWrapIcus },
-    { kind: CompilationJobKind.Both, fn: phaseAttributeExtraction },
-    { kind: CompilationJobKind.Both, fn: phaseParseExtractedStyles },
-    { kind: CompilationJobKind.Tmpl, fn: phaseRemoveEmptyBindings },
-    { kind: CompilationJobKind.Both, fn: phaseCollapseSingletonInterpolations },
-    { kind: CompilationJobKind.Both, fn: phaseOrdering },
-    { kind: CompilationJobKind.Tmpl, fn: phaseConditionals },
-    { kind: CompilationJobKind.Tmpl, fn: phasePipeCreation },
-    { kind: CompilationJobKind.Tmpl, fn: phaseI18nTextExtraction },
-    { kind: CompilationJobKind.Tmpl, fn: phaseIcuExtraction },
-    { kind: CompilationJobKind.Tmpl, fn: phaseApplyI18nExpressions },
-    { 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 },
-    { kind: CompilationJobKind.Both, fn: phaseResolveDollarEvent },
-    { kind: CompilationJobKind.Tmpl, fn: phaseRepeaterDerivedVars },
-    { kind: CompilationJobKind.Tmpl, fn: phaseTrackVariables },
-    { kind: CompilationJobKind.Both, fn: phaseResolveNames },
-    { kind: CompilationJobKind.Tmpl, fn: phaseTrackFnOptimization },
-    { kind: CompilationJobKind.Both, fn: phaseResolveContexts },
-    { kind: CompilationJobKind.Tmpl, fn: phaseResolveSanitizers },
-    { kind: CompilationJobKind.Tmpl, fn: phaseLocalRefs },
-    { kind: CompilationJobKind.Both, fn: phaseNullishCoalescing },
-    { kind: CompilationJobKind.Both, fn: phaseExpandSafeReads },
-    { kind: CompilationJobKind.Both, fn: phaseTemporaryVariables },
-    { kind: CompilationJobKind.Tmpl, fn: phaseSlotAllocation },
-    { kind: CompilationJobKind.Tmpl, fn: phaseResolveI18nPlaceholders },
-    { kind: CompilationJobKind.Tmpl, fn: phaseTrackFnGeneration },
-    { kind: CompilationJobKind.Tmpl, fn: phaseI18nMessageExtraction },
-    { kind: CompilationJobKind.Tmpl, fn: phaseI18nConstCollection },
-    { kind: CompilationJobKind.Tmpl, fn: phaseConstTraitCollection },
-    { kind: CompilationJobKind.Both, fn: phaseConstCollection },
-    { kind: CompilationJobKind.Tmpl, fn: phaseAssignI18nSlotDependencies },
-    { kind: CompilationJobKind.Both, fn: phaseVarCounting },
-    { kind: CompilationJobKind.Tmpl, fn: phaseGenerateAdvance },
-    { kind: CompilationJobKind.Both, fn: phaseVariableOptimization },
-    { kind: CompilationJobKind.Both, fn: phaseNaming },
-    { kind: CompilationJobKind.Tmpl, fn: phaseMergeNextContext },
-    { kind: CompilationJobKind.Tmpl, fn: phaseNgContainer },
-    { kind: CompilationJobKind.Tmpl, fn: phaseEmptyElements },
-    { kind: CompilationJobKind.Tmpl, fn: phaseNonbindable },
-    { kind: CompilationJobKind.Both, fn: phasePureFunctionExtraction },
-    { kind: CompilationJobKind.Both, fn: phaseReify },
-    { kind: CompilationJobKind.Both, fn: phaseChaining },
+    { kind: CompilationJobKind.Tmpl, fn: removeContentSelectors },
+    { kind: CompilationJobKind.Host, fn: parseHostStyleProperties },
+    { kind: CompilationJobKind.Tmpl, fn: emitNamespaceChanges },
+    { kind: CompilationJobKind.Both, fn: specializeStyleBindings },
+    { kind: CompilationJobKind.Both, fn: specializeBindings },
+    { kind: CompilationJobKind.Tmpl, fn: propagateI18nBlocks },
+    { kind: CompilationJobKind.Tmpl, fn: wrapI18nIcus },
+    { kind: CompilationJobKind.Tmpl, fn: createI18nContexts },
+    { kind: CompilationJobKind.Both, fn: extractAttributes },
+    { kind: CompilationJobKind.Both, fn: parseExtractedStyles },
+    { kind: CompilationJobKind.Tmpl, fn: removeEmptyBindings },
+    { kind: CompilationJobKind.Both, fn: collapseSingletonInterpolations },
+    { kind: CompilationJobKind.Both, fn: orderOps },
+    { kind: CompilationJobKind.Tmpl, fn: generateConditionalExpressions },
+    { kind: CompilationJobKind.Tmpl, fn: createPipes },
+    { kind: CompilationJobKind.Tmpl, fn: configureDeferInstructions },
+    { kind: CompilationJobKind.Tmpl, fn: extractI18nText },
+    { kind: CompilationJobKind.Tmpl, fn: createI18nIcuExpressions },
+    { kind: CompilationJobKind.Tmpl, fn: applyI18nExpressions },
+    { kind: CompilationJobKind.Tmpl, fn: createVariadicPipes },
+    { kind: CompilationJobKind.Both, fn: generatePureLiteralStructures },
+    { kind: CompilationJobKind.Tmpl, fn: generateProjectionDefs },
+    { kind: CompilationJobKind.Tmpl, fn: generateVariables },
+    { kind: CompilationJobKind.Tmpl, fn: saveAndRestoreView },
+    { kind: CompilationJobKind.Tmpl, fn: deleteAnyCasts },
+    { kind: CompilationJobKind.Both, fn: resolveDollarEvent },
+    { kind: CompilationJobKind.Tmpl, fn: generateRepeaterDerivedVars },
+    { kind: CompilationJobKind.Tmpl, fn: generateTrackVariables },
+    { kind: CompilationJobKind.Both, fn: resolveNames },
+    { kind: CompilationJobKind.Tmpl, fn: resolveDeferTargetNames },
+    { kind: CompilationJobKind.Tmpl, fn: optimizeTrackFns },
+    { kind: CompilationJobKind.Both, fn: resolveContexts },
+    { kind: CompilationJobKind.Tmpl, fn: resolveSanitizers },
+    { kind: CompilationJobKind.Tmpl, fn: liftLocalRefs },
+    { kind: CompilationJobKind.Both, fn: generateNullishCoalesceExpressions },
+    { kind: CompilationJobKind.Both, fn: expandSafeReads },
+    { kind: CompilationJobKind.Both, fn: generateTemporaryVariables },
+    { kind: CompilationJobKind.Tmpl, fn: allocateSlots },
+    { kind: CompilationJobKind.Tmpl, fn: createDeferDepsFns },
+    { kind: CompilationJobKind.Tmpl, fn: resolveI18nElementPlaceholders },
+    { kind: CompilationJobKind.Tmpl, fn: resolveI18nExpressionPlaceholders },
+    { kind: CompilationJobKind.Tmpl, fn: mergeI18nContexts },
+    { kind: CompilationJobKind.Tmpl, fn: extractI18nMessages },
+    { kind: CompilationJobKind.Tmpl, fn: generateTrackFns },
+    { kind: CompilationJobKind.Tmpl, fn: collectI18nConsts },
+    { kind: CompilationJobKind.Tmpl, fn: collectConstExpressions },
+    { kind: CompilationJobKind.Both, fn: collectElementConsts },
+    { kind: CompilationJobKind.Tmpl, fn: assignI18nSlotDependencies },
+    { kind: CompilationJobKind.Tmpl, fn: removeI18nContexts },
+    { kind: CompilationJobKind.Both, fn: countVariables },
+    { kind: CompilationJobKind.Tmpl, fn: generateAdvance },
+    { kind: CompilationJobKind.Both, fn: optimizeVariables },
+    { kind: CompilationJobKind.Both, fn: nameFunctionsAndVariables },
+    { kind: CompilationJobKind.Tmpl, fn: mergeNextContextExpressions },
+    { kind: CompilationJobKind.Tmpl, fn: generateNgContainerOps },
+    { kind: CompilationJobKind.Tmpl, fn: collapseEmptyInstructions },
+    { kind: CompilationJobKind.Tmpl, fn: disableBindings$1 },
+    { kind: CompilationJobKind.Both, fn: extractPureFunctions },
+    { kind: CompilationJobKind.Both, fn: reify },
+    { kind: CompilationJobKind.Both, fn: chain },
 ];
 /**
  * Run all transformation phases in the correct order against a compilation job. After this
@@ -22603,10 +23099,10 @@ const compatibilityMode = CompatibilityMode.TemplateDefinitionBuilder;
  * representation.
  * TODO: Refactor more of the ingestion code into phases.
  */
-function ingestComponent(componentName, template, constantPool, relativeContextFilePath, i18nUseExternalIds) {
-    const cpl = new ComponentCompilationJob(componentName, constantPool, compatibilityMode, relativeContextFilePath, i18nUseExternalIds);
-    ingestNodes(cpl.root, template);
-    return cpl;
+function ingestComponent(componentName, template, constantPool, relativeContextFilePath, i18nUseExternalIds, deferBlocksMeta) {
+    const job = new ComponentCompilationJob(componentName, constantPool, compatibilityMode, relativeContextFilePath, i18nUseExternalIds, deferBlocksMeta);
+    ingestNodes(job.root, template);
+    return job;
 }
 /**
  * Process a host binding AST and convert it into a `HostBindingCompilationJob` in the intermediate
@@ -22654,7 +23150,7 @@ function ingestHostAttribute(job, name, value) {
     job.root.update.push(attrBinding);
 }
 function ingestHostEvent(job, event) {
-    const eventBinding = createListenerOp(job.root.xref, event.name, null, event.targetOrPhase, true, event.sourceSpan);
+    const eventBinding = createListenerOp(job.root.xref, new SlotHandle(), event.name, null, event.targetOrPhase, true, event.sourceSpan);
     // TODO: Can this be a chain?
     eventBinding.handlerOps.push(createStatementOp(new ReturnStatement(convertAst(event.handler.ast, job, event.sourceSpan), event.handlerSpan)));
     job.root.create.push(eventBinding);
@@ -22707,10 +23203,6 @@ function ingestElement(unit, element) {
         !(element.i18n instanceof Message || element.i18n instanceof TagPlaceholder)) {
         throw Error(`Unhandled i18n metadata type for element: ${element.i18n.constructor.name}`);
     }
-    const staticAttributes = {};
-    for (const attr of element.attributes) {
-        staticAttributes[attr.name] = attr.value;
-    }
     const id = unit.job.allocateXrefId();
     const [namespaceKey, elementName] = splitNsName(element.name);
     const startOp = createElementStartOp(elementName, id, namespaceForKey(namespaceKey), element.i18n instanceof TagPlaceholder ? element.i18n : undefined, element.startSourceSpan);
@@ -22718,7 +23210,12 @@ function ingestElement(unit, element) {
     ingestBindings(unit, startOp, element);
     ingestReferences(startOp, element);
     ingestNodes(unit, element.children);
-    const endOp = createElementEndOp(id, element.endSourceSpan);
+    // The source span for the end op is typically the element closing tag. However, if no closing tag
+    // exists, such as in `<input>`, we use the start source span instead. Usually the start and end
+    // instructions will be collapsed into one `element` instruction, negating the purpose of this
+    // fallback, but in cases when it is not collapsed (such as an input with a binding), we still
+    // want to map the end instruction to the main element.
+    const endOp = createElementEndOp(id, element.endSourceSpan ?? element.startSourceSpan);
     unit.create.push(endOp);
     // If there is an i18n message associated with this element, insert i18n start and end ops.
     if (element.i18n instanceof Message) {
@@ -22742,7 +23239,11 @@ function ingestTemplate(unit, tmpl) {
         [namespacePrefix, tagNameWithoutNamespace] = splitNsName(tmpl.tagName);
     }
     const i18nPlaceholder = tmpl.i18n instanceof TagPlaceholder ? tmpl.i18n : undefined;
-    const tplOp = createTemplateOp(childView.xref, tagNameWithoutNamespace, namespaceForKey(namespacePrefix), false, i18nPlaceholder, tmpl.startSourceSpan);
+    const namespace = namespaceForKey(namespacePrefix);
+    const functionNameSuffix = tagNameWithoutNamespace === null ?
+        '' :
+        prefixWithNamespace(tagNameWithoutNamespace, namespace);
+    const tplOp = createTemplateOp(childView.xref, tagNameWithoutNamespace, functionNameSuffix, namespace, i18nPlaceholder, tmpl.startSourceSpan);
     unit.create.push(tplOp);
     ingestBindings(unit, tplOp, tmpl);
     ingestReferences(tplOp, tmpl);
@@ -22805,22 +23306,32 @@ function ingestBoundText(unit, text) {
  */
 function ingestIfBlock(unit, ifBlock) {
     let firstXref = null;
+    let firstSlotHandle = null;
     let conditions = [];
-    for (const ifCase of ifBlock.branches) {
+    for (let i = 0; i < ifBlock.branches.length; i++) {
+        const ifCase = ifBlock.branches[i];
         const cView = unit.job.allocateView(unit.xref);
+        let tagName = null;
+        // Only the first branch can be used for projection, because the conditional
+        // uses the container of the first branch as the insertion point for all branches.
+        if (i === 0) {
+            tagName = ingestControlFlowInsertionPoint(unit, cView.xref, ifCase);
+        }
         if (ifCase.expressionAlias !== null) {
             cView.contextVariables.set(ifCase.expressionAlias.name, CTX_REF);
         }
+        const tmplOp = createTemplateOp(cView.xref, tagName, 'Conditional', Namespace.HTML, undefined /* TODO: figure out how i18n works with new control flow */, ifCase.sourceSpan);
+        unit.create.push(tmplOp);
         if (firstXref === null) {
             firstXref = cView.xref;
+            firstSlotHandle = tmplOp.handle;
         }
-        unit.create.push(createTemplateOp(cView.xref, 'Conditional', Namespace.HTML, true, undefined /* TODO: figure out how i18n works with new control flow */, ifCase.sourceSpan));
         const caseExpr = ifCase.expression ? convertAst(ifCase.expression, unit.job, null) : null;
-        const conditionalCaseExpr = new ConditionalCaseExpr(caseExpr, cView.xref, ifCase.expressionAlias);
+        const conditionalCaseExpr = new ConditionalCaseExpr(caseExpr, tmplOp.xref, tmplOp.handle, ifCase.expressionAlias);
         conditions.push(conditionalCaseExpr);
         ingestNodes(cView, ifCase.children);
     }
-    const conditional = createConditionalOp(firstXref, null, conditions, ifBlock.sourceSpan);
+    const conditional = createConditionalOp(firstXref, firstSlotHandle, null, conditions, ifBlock.sourceSpan);
     unit.update.push(conditional);
 }
 /**
@@ -22828,21 +23339,24 @@ function ingestIfBlock(unit, ifBlock) {
  */
 function ingestSwitchBlock(unit, switchBlock) {
     let firstXref = null;
+    let firstSlotHandle = null;
     let conditions = [];
     for (const switchCase of switchBlock.cases) {
         const cView = unit.job.allocateView(unit.xref);
+        const tmplOp = createTemplateOp(cView.xref, null, 'Case', Namespace.HTML, undefined /* TODO: figure out how i18n works with new control flow */, switchCase.sourceSpan);
+        unit.create.push(tmplOp);
         if (firstXref === null) {
             firstXref = cView.xref;
+            firstSlotHandle = tmplOp.handle;
         }
-        unit.create.push(createTemplateOp(cView.xref, 'Case', Namespace.HTML, true, undefined /* TODO: figure out how i18n works with new control flow */, switchCase.sourceSpan));
         const caseExpr = switchCase.expression ?
             convertAst(switchCase.expression, unit.job, switchBlock.startSourceSpan) :
             null;
-        const conditionalCaseExpr = new ConditionalCaseExpr(caseExpr, cView.xref);
+        const conditionalCaseExpr = new ConditionalCaseExpr(caseExpr, tmplOp.xref, tmplOp.handle);
         conditions.push(conditionalCaseExpr);
         ingestNodes(cView, switchCase.children);
     }
-    const conditional = createConditionalOp(firstXref, convertAst(switchBlock.expression, unit.job, null), conditions, switchBlock.sourceSpan);
+    const conditional = createConditionalOp(firstXref, firstSlotHandle, convertAst(switchBlock.expression, unit.job, null), conditions, switchBlock.sourceSpan);
     unit.update.push(conditional);
 }
 function ingestDeferView(unit, suffix, children, sourceSpan) {
@@ -22851,48 +23365,100 @@ function ingestDeferView(unit, suffix, children, sourceSpan) {
     }
     const secondaryView = unit.job.allocateView(unit.xref);
     ingestNodes(secondaryView, children);
-    const templateOp = createTemplateOp(secondaryView.xref, `Defer${suffix}`, Namespace.HTML, true, undefined, sourceSpan);
+    const templateOp = createTemplateOp(secondaryView.xref, null, `Defer${suffix}`, Namespace.HTML, undefined, sourceSpan);
     unit.create.push(templateOp);
     return templateOp;
 }
 function ingestDeferBlock(unit, deferBlock) {
+    const blockMeta = unit.job.deferBlocksMeta.get(deferBlock);
+    if (blockMeta === undefined) {
+        throw new Error(`AssertionError: unable to find metadata for deferred block`);
+    }
     // Generate the defer main view and all secondary views.
     const main = ingestDeferView(unit, '', deferBlock.children, deferBlock.sourceSpan);
     const loading = ingestDeferView(unit, 'Loading', deferBlock.loading?.children, deferBlock.loading?.sourceSpan);
     const placeholder = ingestDeferView(unit, 'Placeholder', deferBlock.placeholder?.children, deferBlock.placeholder?.sourceSpan);
     const error = ingestDeferView(unit, 'Error', deferBlock.error?.children, deferBlock.error?.sourceSpan);
     // Create the main defer op, and ops for all secondary views.
-    const deferOp = createDeferOp(unit.job.allocateXrefId(), main.xref, deferBlock.sourceSpan);
+    const deferXref = unit.job.allocateXrefId();
+    const deferOp = createDeferOp(deferXref, main.xref, main.handle, blockMeta, deferBlock.sourceSpan);
+    deferOp.placeholderView = placeholder?.xref ?? null;
+    deferOp.placeholderSlot = placeholder?.handle ?? null;
+    deferOp.loadingSlot = loading?.handle ?? null;
+    deferOp.errorSlot = error?.handle ?? null;
+    deferOp.placeholderMinimumTime = deferBlock.placeholder?.minimumTime ?? null;
+    deferOp.loadingMinimumTime = deferBlock.loading?.minimumTime ?? null;
+    deferOp.loadingAfterTime = deferBlock.loading?.afterTime ?? null;
     unit.create.push(deferOp);
-    if (loading && deferBlock.loading) {
-        deferOp.loading =
-            createDeferSecondaryOp(deferOp.xref, loading.xref, DeferSecondaryKind.Loading);
-        if (deferBlock.loading.afterTime !== null || deferBlock.loading.minimumTime !== null) {
-            deferOp.loading.constValue = [deferBlock.loading.minimumTime, deferBlock.loading.afterTime];
-        }
-        unit.create.push(deferOp.loading);
-    }
-    if (placeholder && deferBlock.placeholder) {
-        deferOp.placeholder = createDeferSecondaryOp(deferOp.xref, placeholder.xref, DeferSecondaryKind.Placeholder);
-        if (deferBlock.placeholder.minimumTime !== null) {
-            deferOp.placeholder.constValue = [deferBlock.placeholder.minimumTime];
-        }
-        unit.create.push(deferOp.placeholder);
-    }
-    if (error && deferBlock.error) {
-        deferOp.error =
-            createDeferSecondaryOp(deferOp.xref, error.xref, DeferSecondaryKind.Error);
-        unit.create.push(deferOp.error);
-    }
-    // Configure all defer conditions.
-    const deferOnOp = createDeferOnOp(unit.job.allocateXrefId(), null);
-    // Add all ops to the view.
-    unit.create.push(deferOnOp);
+    // Configure all defer `on` conditions.
+    // TODO: refactor prefetch triggers to use a separate op type, with a shared superclass. This will
+    // make it easier to refactor prefetch behavior in the future.
+    let prefetch = false;
+    let deferOnOps = [];
+    let deferWhenOps = [];
+    for (const triggers of [deferBlock.triggers, deferBlock.prefetchTriggers]) {
+        if (triggers.idle !== undefined) {
+            const deferOnOp = createDeferOnOp(deferXref, { kind: DeferTriggerKind.Idle }, prefetch, triggers.idle.sourceSpan);
+            deferOnOps.push(deferOnOp);
+        }
+        if (triggers.immediate !== undefined) {
+            const deferOnOp = createDeferOnOp(deferXref, { kind: DeferTriggerKind.Immediate }, prefetch, triggers.immediate.sourceSpan);
+            deferOnOps.push(deferOnOp);
+        }
+        if (triggers.timer !== undefined) {
+            const deferOnOp = createDeferOnOp(deferXref, { kind: DeferTriggerKind.Timer, delay: triggers.timer.delay }, prefetch, triggers.timer.sourceSpan);
+            deferOnOps.push(deferOnOp);
+        }
+        if (triggers.hover !== undefined) {
+            const deferOnOp = createDeferOnOp(deferXref, {
+                kind: DeferTriggerKind.Hover,
+                targetName: triggers.hover.reference,
+                targetXref: null,
+                targetSlot: null,
+                targetView: null,
+                targetSlotViewSteps: null,
+            }, prefetch, triggers.hover.sourceSpan);
+            deferOnOps.push(deferOnOp);
+        }
+        if (triggers.interaction !== undefined) {
+            const deferOnOp = createDeferOnOp(deferXref, {
+                kind: DeferTriggerKind.Interaction,
+                targetName: triggers.interaction.reference,
+                targetXref: null,
+                targetSlot: null,
+                targetView: null,
+                targetSlotViewSteps: null,
+            }, prefetch, triggers.interaction.sourceSpan);
+            deferOnOps.push(deferOnOp);
+        }
+        if (triggers.viewport !== undefined) {
+            const deferOnOp = createDeferOnOp(deferXref, {
+                kind: DeferTriggerKind.Viewport,
+                targetName: triggers.viewport.reference,
+                targetXref: null,
+                targetSlot: null,
+                targetView: null,
+                targetSlotViewSteps: null,
+            }, prefetch, triggers.viewport.sourceSpan);
+            deferOnOps.push(deferOnOp);
+        }
+        if (triggers.when !== undefined) {
+            const deferOnOp = createDeferWhenOp(deferXref, convertAst(triggers.when.value, unit.job, triggers.when.sourceSpan), prefetch, triggers.when.sourceSpan);
+            deferWhenOps.push(deferOnOp);
+        }
+        // If no (non-prefetching) defer triggers were provided, default to `idle`.
+        if (deferOnOps.length === 0 && deferWhenOps.length === 0) {
+            deferOnOps.push(createDeferOnOp(deferXref, { kind: DeferTriggerKind.Idle }, false, null));
+        }
+        prefetch = true;
+    }
+    unit.create.push(deferOnOps);
+    unit.update.push(deferWhenOps);
 }
 function ingestIcu(unit, icu) {
-    if (icu.i18n instanceof Message) {
+    if (icu.i18n instanceof Message && isSingleI18nIcu(icu.i18n)) {
         const xref = unit.job.allocateXrefId();
-        unit.create.push(createIcuOp(xref, icu.i18n, null));
+        unit.create.push(createIcuOp(xref, icu.i18n, icu.i18n.nodes[0], icuFromI18nMessage(icu.i18n).name, null));
         unit.update.push(createIcuUpdateOp(xref, null));
     }
     else {
@@ -22937,10 +23503,11 @@ function ingestForBlock(unit, forBlock) {
         $odd: forBlock.contextVariables.$odd.name,
         $implicit: forBlock.item.name,
     };
-    const repeaterCreate = createRepeaterCreateOp(repeaterView.xref, emptyView?.xref ?? null, track, varNames, forBlock.sourceSpan);
+    const tagName = ingestControlFlowInsertionPoint(unit, repeaterView.xref, forBlock);
+    const repeaterCreate = createRepeaterCreateOp(repeaterView.xref, emptyView?.xref ?? null, tagName, track, varNames, forBlock.sourceSpan);
     unit.create.push(repeaterCreate);
     const expression = convertAst(forBlock.expression, unit.job, convertSourceSpan(forBlock.expression.span, forBlock.sourceSpan));
-    const repeater = createRepeaterOp(repeaterCreate.xref, expression, forBlock.sourceSpan);
+    const repeater = createRepeaterOp(repeaterCreate.xref, repeaterCreate.handle, expression, forBlock.sourceSpan);
     unit.update.push(repeater);
 }
 /**
@@ -22959,6 +23526,11 @@ function convertAst(ast, job, baseSourceSpan) {
         }
     }
     else if (ast instanceof PropertyWrite) {
+        if (ast.receiver instanceof ImplicitReceiver) {
+            return new WritePropExpr(
+            // TODO: Is it correct to always use the root context in place of the implicit receiver?
+            new ContextExpr(job.root.xref), ast.name, convertAst(ast.value, job, baseSourceSpan), null, convertSourceSpan(ast.span, baseSourceSpan));
+        }
         return new WritePropExpr(convertAst(ast.receiver, job, baseSourceSpan), ast.name, convertAst(ast.value, job, baseSourceSpan), undefined, convertSourceSpan(ast.span, baseSourceSpan));
     }
     else if (ast instanceof KeyedWrite) {
@@ -23014,7 +23586,7 @@ function convertAst(ast, job, baseSourceSpan) {
     }
     else if (ast instanceof BindingPipe) {
         // TODO: pipes should probably have source maps; figure out details.
-        return new PipeBindingExpr(job.allocateXrefId(), ast.name, [
+        return new PipeBindingExpr(job.allocateXrefId(), new SlotHandle(), ast.name, [
             convertAst(ast.exp, job, baseSourceSpan),
             ...ast.args.map(arg => convertAst(arg, job, baseSourceSpan)),
         ]);
@@ -23034,7 +23606,7 @@ function convertAst(ast, job, baseSourceSpan) {
         return new EmptyExpr(convertSourceSpan(ast.span, baseSourceSpan));
     }
     else {
-        throw new Error(`Unhandled expression type: ${ast.constructor.name}`);
+        throw new Error(`Unhandled expression type "${ast.constructor.name}" in file "${baseSourceSpan?.start.file.url}"`);
     }
 }
 /**
@@ -23098,8 +23670,7 @@ function ingestBindings(unit, op, element) {
             unit.create.push(createExtractedAttributeOp(op.xref, BindingKind.Property, output.name, null));
             continue;
         }
-        listenerOp =
-            createListenerOp(op.xref, output.name, op.tag, output.phase, false, output.sourceSpan);
+        listenerOp = createListenerOp(op.xref, op.handle, output.name, op.tag, output.phase, false, output.sourceSpan);
         // if output.handler is a chain, then push each statement from the chain separately, and
         // return the last one?
         let handlerExprs;
@@ -23220,6 +23791,59 @@ function convertSourceSpan(span, baseSourceSpan) {
     const fullStart = baseSourceSpan.fullStart.moveBy(span.start);
     return new ParseSourceSpan(start, end, fullStart);
 }
+/**
+ * With the directive-based control flow users were able to conditionally project content using
+ * the `*` syntax. E.g. `<div *ngIf="expr" projectMe></div>` will be projected into
+ * `<ng-content select="[projectMe]"/>`, because the attributes and tag name from the `div` are
+ * copied to the template via the template creation instruction. With `@if` and `@for` that is
+ * not the case, because the conditional is placed *around* elements, rather than *on* them.
+ * The result is that content projection won't work in the same way if a user converts from
+ * `*ngIf` to `@if`.
+ *
+ * This function aims to cover the most common case by doing the same copying when a control flow
+ * node has *one and only one* root element or template node.
+ *
+ * This approach comes with some caveats:
+ * 1. As soon as any other node is added to the root, the copying behavior won't work anymore.
+ *    A diagnostic will be added to flag cases like this and to explain how to work around it.
+ * 2. If `preserveWhitespaces` is enabled, it's very likely that indentation will break this
+ *    workaround, because it'll include an additional text node as the first child. We can work
+ *    around it here, but in a discussion it was decided not to, because the user explicitly opted
+ *    into preserving the whitespace and we would have to drop it from the generated code.
+ *    The diagnostic mentioned point #1 will flag such cases to users.
+ *
+ * @returns Tag name to be used for the control flow template.
+ */
+function ingestControlFlowInsertionPoint(unit, xref, node) {
+    let root = null;
+    for (const child of node.children) {
+        // Skip over comment nodes.
+        if (child instanceof Comment$1) {
+            continue;
+        }
+        // We can only infer the tag name/attributes if there's a single root node.
+        if (root !== null) {
+            return null;
+        }
+        // Root nodes can only elements or templates with a tag name (e.g. `<div *foo></div>`).
+        if (child instanceof Element$1 || (child instanceof Template && child.tagName !== null)) {
+            root = child;
+        }
+    }
+    // If we've found a single root node, its tag name and *static* attributes can be copied
+    // to the surrounding template to be used for content projection. Note that it's important
+    // that we don't copy any bound attributes since they don't participate in content projection
+    // and they can be used in directive matching (in the case of `Template.templateAttrs`).
+    if (root !== null) {
+        for (const attr of root.attributes) {
+            ingestBinding(unit, xref, attr.name, literal(attr.value), 1 /* e.BindingType.Attribute */, null, SecurityContext.NONE, attr.sourceSpan, BindingFlags.TextValue);
+        }
+        const tagName = root instanceof Element$1 ? root.name : root.tagName;
+        // Don't pass along `ng-template` tag name since it enables directive matching.
+        return tagName === 'ng-template' ? null : tagName;
+    }
+    return null;
+}
 
 const USE_TEMPLATE_PIPELINE = false;
 
@@ -24356,7 +24980,7 @@ function normalizeNgContentSelect(selectAttr) {
 }
 
 /** Pattern for the expression in a for loop block. */
-const FOR_LOOP_EXPRESSION_PATTERN = /^\s*([0-9A-Za-z_$]*)\s+of\s+(.*)/;
+const FOR_LOOP_EXPRESSION_PATTERN = /^\s*([0-9A-Za-z_$]*)\s+of\s+([\S\s]*)/;
 /** Pattern for the tracking expression in a for loop block. */
 const FOR_LOOP_TRACK_PATTERN = /^track\s+([\S\s]*)/;
 /** Pattern for the `as` expression in a conditional block. */
@@ -24387,19 +25011,19 @@ function createIfBlock(ast, connectedBlocks, visitor, bindingParser) {
     const branches = [];
     const mainBlockParams = parseConditionalBlockParameters(ast, errors, bindingParser);
     if (mainBlockParams !== null) {
-        branches.push(new IfBlockBranch(mainBlockParams.expression, visitAll(visitor, ast.children, ast.children), mainBlockParams.expressionAlias, ast.sourceSpan, ast.startSourceSpan, ast.endSourceSpan));
+        branches.push(new IfBlockBranch(mainBlockParams.expression, visitAll(visitor, ast.children, ast.children), mainBlockParams.expressionAlias, ast.sourceSpan, ast.startSourceSpan, ast.endSourceSpan, ast.nameSpan));
     }
     for (const block of connectedBlocks) {
         if (ELSE_IF_PATTERN.test(block.name)) {
             const params = parseConditionalBlockParameters(block, errors, bindingParser);
             if (params !== null) {
                 const children = visitAll(visitor, block.children, block.children);
-                branches.push(new IfBlockBranch(params.expression, children, params.expressionAlias, block.sourceSpan, block.startSourceSpan, block.endSourceSpan));
+                branches.push(new IfBlockBranch(params.expression, children, params.expressionAlias, block.sourceSpan, block.startSourceSpan, block.endSourceSpan, block.nameSpan));
             }
         }
         else if (block.name === 'else') {
             const children = visitAll(visitor, block.children, block.children);
-            branches.push(new IfBlockBranch(null, children, null, block.sourceSpan, block.startSourceSpan, block.endSourceSpan));
+            branches.push(new IfBlockBranch(null, children, null, block.sourceSpan, block.startSourceSpan, block.endSourceSpan, block.nameSpan));
         }
     }
     // The outer IfBlock should have a span that encapsulates all branches.
@@ -24411,7 +25035,7 @@ function createIfBlock(ast, connectedBlocks, visitor, bindingParser) {
         wholeSourceSpan = new ParseSourceSpan(ifBlockStartSourceSpan.start, lastBranch.sourceSpan.end);
     }
     return {
-        node: new IfBlock(branches, wholeSourceSpan, ast.startSourceSpan, ifBlockEndSourceSpan),
+        node: new IfBlock(branches, wholeSourceSpan, ast.startSourceSpan, ifBlockEndSourceSpan, ast.nameSpan),
         errors,
     };
 }
@@ -24430,7 +25054,7 @@ function createForLoop(ast, connectedBlocks, visitor, bindingParser) {
                 errors.push(new ParseError(block.sourceSpan, '@empty block cannot have parameters'));
             }
             else {
-                empty = new ForLoopBlockEmpty(visitAll(visitor, block.children, block.children), block.sourceSpan, block.startSourceSpan, block.endSourceSpan);
+                empty = new ForLoopBlockEmpty(visitAll(visitor, block.children, block.children), block.sourceSpan, block.startSourceSpan, block.endSourceSpan, block.nameSpan);
             }
         }
         else {
@@ -24448,7 +25072,7 @@ function createForLoop(ast, connectedBlocks, visitor, bindingParser) {
             // main `for` body, use `mainSourceSpan`.
             const endSpan = empty?.endSourceSpan ?? ast.endSourceSpan;
             const sourceSpan = new ParseSourceSpan(ast.sourceSpan.start, endSpan?.end ?? ast.sourceSpan.end);
-            node = new ForLoopBlock(params.itemName, params.expression, params.trackBy, params.context, visitAll(visitor, ast.children, ast.children), empty, sourceSpan, ast.sourceSpan, ast.startSourceSpan, endSpan);
+            node = new ForLoopBlock(params.itemName, params.expression, params.trackBy.expression, params.trackBy.keywordSpan, params.context, visitAll(visitor, ast.children, ast.children), empty, sourceSpan, ast.sourceSpan, ast.startSourceSpan, endSpan, ast.nameSpan);
         }
     }
     return { node, errors };
@@ -24474,7 +25098,7 @@ function createSwitchBlock(ast, visitor, bindingParser) {
         const expression = node.name === 'case' ?
             parseBlockParameterToBinding(node.parameters[0], bindingParser) :
             null;
-        const ast = new SwitchBlockCase(expression, visitAll(visitor, node.children, node.children), node.sourceSpan, node.startSourceSpan, node.endSourceSpan);
+        const ast = new SwitchBlockCase(expression, visitAll(visitor, node.children, node.children), node.sourceSpan, node.startSourceSpan, node.endSourceSpan, node.nameSpan);
         if (expression === null) {
             defaultCase = ast;
         }
@@ -24487,7 +25111,7 @@ function createSwitchBlock(ast, visitor, bindingParser) {
         cases.push(defaultCase);
     }
     return {
-        node: new SwitchBlock(primaryExpression, cases, unknownBlocks, ast.sourceSpan, ast.startSourceSpan, ast.endSourceSpan),
+        node: new SwitchBlock(primaryExpression, cases, unknownBlocks, ast.sourceSpan, ast.startSourceSpan, ast.endSourceSpan, ast.nameSpan),
         errors
     };
 }
@@ -24522,7 +25146,9 @@ function parseForLoopParameters(block, errors, bindingParser) {
                 errors.push(new ParseError(param.sourceSpan, '@for loop can only have one "track" expression'));
             }
             else {
-                result.trackBy = parseBlockParameterToBinding(param, bindingParser, trackMatch[1]);
+                const expression = parseBlockParameterToBinding(param, bindingParser, trackMatch[1]);
+                const keywordSpan = new ParseSourceSpan(param.sourceSpan.start, param.sourceSpan.start.moveBy('track'.length));
+                result.trackBy = { expression, keywordSpan };
             }
             continue;
         }
@@ -24596,8 +25222,10 @@ function validateSwitchBlock(ast) {
         return errors;
     }
     for (const node of ast.children) {
-        // Skip over empty text nodes inside the switch block since they can be used for formatting.
-        if (node instanceof Text && node.value.trim().length === 0) {
+        // Skip over comments and empty text nodes inside the switch block.
+        // Empty text nodes can be used for formatting while comments don't affect the runtime.
+        if (node instanceof Comment ||
+            (node instanceof Text && node.value.trim().length === 0)) {
             continue;
         }
         if (!(node instanceof Block) || (node.name !== 'case' && node.name !== 'default')) {
@@ -24720,7 +25348,7 @@ function stripOptionalParentheses(param, errors) {
 }
 
 /** Pattern for a timing value in a trigger. */
-const TIME_PATTERN = /^\d+(ms|s)?$/;
+const TIME_PATTERN = /^\d+\.?\d*(ms|s)?$/;
 /** Pattern for a separator between keywords in a trigger expression. */
 const SEPARATOR_PATTERN = /^\s$/;
 /** Pairs of characters that form syntax that is comma-delimited. */
@@ -24742,6 +25370,8 @@ var OnTriggerType;
 /** Parses a `when` deferred trigger. */
 function parseWhenTrigger({ expression, sourceSpan }, bindingParser, triggers, errors) {
     const whenIndex = expression.indexOf('when');
+    const whenSourceSpan = new ParseSourceSpan(sourceSpan.start.moveBy(whenIndex), sourceSpan.start.moveBy(whenIndex + 'when'.length));
+    const prefetchSpan = getPrefetchSpan(expression, sourceSpan);
     // This is here just to be safe, we shouldn't enter this function
     // in the first place if a block doesn't have the "when" keyword.
     if (whenIndex === -1) {
@@ -24750,12 +25380,14 @@ function parseWhenTrigger({ expression, sourceSpan }, bindingParser, triggers, e
     else {
         const start = getTriggerParametersStart(expression, whenIndex + 1);
         const parsed = bindingParser.parseBinding(expression.slice(start), false, sourceSpan, sourceSpan.start.offset + start);
-        trackTrigger('when', triggers, errors, new BoundDeferredTrigger(parsed, sourceSpan));
+        trackTrigger('when', triggers, errors, new BoundDeferredTrigger(parsed, sourceSpan, prefetchSpan, whenSourceSpan));
     }
 }
 /** Parses an `on` trigger */
 function parseOnTrigger({ expression, sourceSpan }, triggers, errors, placeholder) {
     const onIndex = expression.indexOf('on');
+    const onSourceSpan = new ParseSourceSpan(sourceSpan.start.moveBy(onIndex), sourceSpan.start.moveBy(onIndex + 'on'.length));
+    const prefetchSpan = getPrefetchSpan(expression, sourceSpan);
     // This is here just to be safe, we shouldn't enter this function
     // in the first place if a block doesn't have the "on" keyword.
     if (onIndex === -1) {
@@ -24763,18 +25395,26 @@ function parseOnTrigger({ expression, sourceSpan }, triggers, errors, placeholde
     }
     else {
         const start = getTriggerParametersStart(expression, onIndex + 1);
-        const parser = new OnTriggerParser(expression, start, sourceSpan, triggers, errors, placeholder);
+        const parser = new OnTriggerParser(expression, start, sourceSpan, triggers, errors, placeholder, prefetchSpan, onSourceSpan);
         parser.parse();
     }
 }
+function getPrefetchSpan(expression, sourceSpan) {
+    if (!expression.startsWith('prefetch')) {
+        return null;
+    }
+    return new ParseSourceSpan(sourceSpan.start, sourceSpan.start.moveBy('prefetch'.length));
+}
 class OnTriggerParser {
-    constructor(expression, start, span, triggers, errors, placeholder) {
+    constructor(expression, start, span, triggers, errors, placeholder, prefetchSpan, onSourceSpan) {
         this.expression = expression;
         this.start = start;
         this.span = span;
         this.triggers = triggers;
         this.errors = errors;
         this.placeholder = placeholder;
+        this.prefetchSpan = prefetchSpan;
+        this.onSourceSpan = onSourceSpan;
         this.index = 0;
         this.tokens = new Lexer().tokenize(expression.slice(start));
     }
@@ -24820,28 +25460,35 @@ class OnTriggerParser {
         return this.tokens[Math.min(this.index, this.tokens.length - 1)];
     }
     consumeTrigger(identifier, parameters) {
-        const startSpan = this.span.start.moveBy(this.start + identifier.index - this.tokens[0].index);
-        const endSpan = startSpan.moveBy(this.token().end - identifier.index);
-        const sourceSpan = new ParseSourceSpan(startSpan, endSpan);
+        const triggerNameStartSpan = this.span.start.moveBy(this.start + identifier.index - this.tokens[0].index);
+        const nameSpan = new ParseSourceSpan(triggerNameStartSpan, triggerNameStartSpan.moveBy(identifier.strValue.length));
+        const endSpan = triggerNameStartSpan.moveBy(this.token().end - identifier.index);
+        // Put the prefetch and on spans with the first trigger
+        // This should maybe be refactored to have something like an outer OnGroup AST
+        // Since triggers can be grouped with commas "on hover(x), interaction(y)"
+        const isFirstTrigger = identifier.index === 0;
+        const onSourceSpan = isFirstTrigger ? this.onSourceSpan : null;
+        const prefetchSourceSpan = isFirstTrigger ? this.prefetchSpan : null;
+        const sourceSpan = new ParseSourceSpan(isFirstTrigger ? this.span.start : triggerNameStartSpan, endSpan);
         try {
             switch (identifier.toString()) {
                 case OnTriggerType.IDLE:
-                    this.trackTrigger('idle', createIdleTrigger(parameters, sourceSpan));
+                    this.trackTrigger('idle', createIdleTrigger(parameters, nameSpan, sourceSpan, prefetchSourceSpan, onSourceSpan));
                     break;
                 case OnTriggerType.TIMER:
-                    this.trackTrigger('timer', createTimerTrigger(parameters, sourceSpan));
+                    this.trackTrigger('timer', createTimerTrigger(parameters, nameSpan, sourceSpan, this.prefetchSpan, this.onSourceSpan));
                     break;
                 case OnTriggerType.INTERACTION:
-                    this.trackTrigger('interaction', createInteractionTrigger(parameters, sourceSpan, this.placeholder));
+                    this.trackTrigger('interaction', createInteractionTrigger(parameters, nameSpan, sourceSpan, this.prefetchSpan, this.onSourceSpan, this.placeholder));
                     break;
                 case OnTriggerType.IMMEDIATE:
-                    this.trackTrigger('immediate', createImmediateTrigger(parameters, sourceSpan));
+                    this.trackTrigger('immediate', createImmediateTrigger(parameters, nameSpan, sourceSpan, this.prefetchSpan, this.onSourceSpan));
                     break;
                 case OnTriggerType.HOVER:
-                    this.trackTrigger('hover', createHoverTrigger(parameters, sourceSpan, this.placeholder));
+                    this.trackTrigger('hover', createHoverTrigger(parameters, nameSpan, sourceSpan, this.prefetchSpan, this.onSourceSpan, this.placeholder));
                     break;
                 case OnTriggerType.VIEWPORT:
-                    this.trackTrigger('viewport', createViewportTrigger(parameters, sourceSpan, this.placeholder));
+                    this.trackTrigger('viewport', createViewportTrigger(parameters, nameSpan, sourceSpan, this.prefetchSpan, this.onSourceSpan, this.placeholder));
                     break;
                 default:
                     throw new Error(`Unrecognized trigger type "${identifier}"`);
@@ -24931,13 +25578,13 @@ function trackTrigger(name, allTriggers, errors, trigger) {
         allTriggers[name] = trigger;
     }
 }
-function createIdleTrigger(parameters, sourceSpan) {
+function createIdleTrigger(parameters, nameSpan, sourceSpan, prefetchSpan, onSourceSpan) {
     if (parameters.length > 0) {
         throw new Error(`"${OnTriggerType.IDLE}" trigger cannot have parameters`);
     }
-    return new IdleDeferredTrigger(sourceSpan);
+    return new IdleDeferredTrigger(nameSpan, sourceSpan, prefetchSpan, onSourceSpan);
 }
-function createTimerTrigger(parameters, sourceSpan) {
+function createTimerTrigger(parameters, nameSpan, sourceSpan, prefetchSpan, onSourceSpan) {
     if (parameters.length !== 1) {
         throw new Error(`"${OnTriggerType.TIMER}" trigger must have exactly one parameter`);
     }
@@ -24945,25 +25592,25 @@ function createTimerTrigger(parameters, sourceSpan) {
     if (delay === null) {
         throw new Error(`Could not parse time value of trigger "${OnTriggerType.TIMER}"`);
     }
-    return new TimerDeferredTrigger(delay, sourceSpan);
+    return new TimerDeferredTrigger(delay, nameSpan, sourceSpan, prefetchSpan, onSourceSpan);
 }
-function createImmediateTrigger(parameters, sourceSpan) {
+function createImmediateTrigger(parameters, nameSpan, sourceSpan, prefetchSpan, onSourceSpan) {
     if (parameters.length > 0) {
         throw new Error(`"${OnTriggerType.IMMEDIATE}" trigger cannot have parameters`);
     }
-    return new ImmediateDeferredTrigger(sourceSpan);
+    return new ImmediateDeferredTrigger(nameSpan, sourceSpan, prefetchSpan, onSourceSpan);
 }
-function createHoverTrigger(parameters, sourceSpan, placeholder) {
+function createHoverTrigger(parameters, nameSpan, sourceSpan, prefetchSpan, onSourceSpan, placeholder) {
     validateReferenceBasedTrigger(OnTriggerType.HOVER, parameters, placeholder);
-    return new HoverDeferredTrigger(parameters[0] ?? null, sourceSpan);
+    return new HoverDeferredTrigger(parameters[0] ?? null, nameSpan, sourceSpan, prefetchSpan, onSourceSpan);
 }
-function createInteractionTrigger(parameters, sourceSpan, placeholder) {
+function createInteractionTrigger(parameters, nameSpan, sourceSpan, prefetchSpan, onSourceSpan, placeholder) {
     validateReferenceBasedTrigger(OnTriggerType.INTERACTION, parameters, placeholder);
-    return new InteractionDeferredTrigger(parameters[0] ?? null, sourceSpan);
+    return new InteractionDeferredTrigger(parameters[0] ?? null, nameSpan, sourceSpan, prefetchSpan, onSourceSpan);
 }
-function createViewportTrigger(parameters, sourceSpan, placeholder) {
+function createViewportTrigger(parameters, nameSpan, sourceSpan, prefetchSpan, onSourceSpan, placeholder) {
     validateReferenceBasedTrigger(OnTriggerType.VIEWPORT, parameters, placeholder);
-    return new ViewportDeferredTrigger(parameters[0] ?? null, sourceSpan);
+    return new ViewportDeferredTrigger(parameters[0] ?? null, nameSpan, sourceSpan, prefetchSpan, onSourceSpan);
 }
 function validateReferenceBasedTrigger(type, parameters, placeholder) {
     if (parameters.length > 1) {
@@ -25002,7 +25649,7 @@ function parseDeferredTime(value) {
         return null;
     }
     const [time, units] = match;
-    return parseInt(time) * (units === 's' ? 1000 : 1);
+    return parseFloat(time) * (units === 's' ? 1000 : 1);
 }
 
 /** Pattern to identify a `prefetch when` trigger. */
@@ -25029,8 +25676,7 @@ function createDeferredBlock(ast, connectedBlocks, visitor, bindingParser) {
     const errors = [];
     const { placeholder, loading, error } = parseConnectedBlocks(connectedBlocks, errors, visitor);
     const { triggers, prefetchTriggers } = parsePrimaryTriggers(ast.parameters, bindingParser, errors, placeholder);
-    // The `defer` block has a main span encompassing all of the connected branches as well. For the
-    // span of only the first "main" branch, use `mainSourceSpan`.
+    // The `defer` block has a main span encompassing all of the connected branches as well.
     let lastEndSourceSpan = ast.endSourceSpan;
     let endOfLastSourceSpan = ast.sourceSpan.end;
     if (connectedBlocks.length > 0) {
@@ -25038,8 +25684,8 @@ function createDeferredBlock(ast, connectedBlocks, visitor, bindingParser) {
         lastEndSourceSpan = lastConnectedBlock.endSourceSpan;
         endOfLastSourceSpan = lastConnectedBlock.sourceSpan.end;
     }
-    const mainDeferredSourceSpan = new ParseSourceSpan(ast.sourceSpan.start, endOfLastSourceSpan);
-    const node = new DeferredBlock(visitAll(visitor, ast.children, ast.children), triggers, prefetchTriggers, placeholder, loading, error, mainDeferredSourceSpan, ast.sourceSpan, ast.startSourceSpan, lastEndSourceSpan);
+    const sourceSpanWithConnectedBlocks = new ParseSourceSpan(ast.sourceSpan.start, endOfLastSourceSpan);
+    const node = new DeferredBlock(visitAll(visitor, ast.children, ast.children), triggers, prefetchTriggers, placeholder, loading, error, ast.nameSpan, sourceSpanWithConnectedBlocks, ast.sourceSpan, ast.startSourceSpan, lastEndSourceSpan);
     return { node, errors };
 }
 function parseConnectedBlocks(connectedBlocks, errors, visitor) {
@@ -25102,7 +25748,7 @@ function parsePlaceholderBlock(ast, visitor) {
             throw new Error(`Unrecognized parameter in @placeholder block: "${param.expression}"`);
         }
     }
-    return new DeferredBlockPlaceholder(visitAll(visitor, ast.children, ast.children), minimumTime, ast.sourceSpan, ast.startSourceSpan, ast.endSourceSpan);
+    return new DeferredBlockPlaceholder(visitAll(visitor, ast.children, ast.children), minimumTime, ast.nameSpan, ast.sourceSpan, ast.startSourceSpan, ast.endSourceSpan);
 }
 function parseLoadingBlock(ast, visitor) {
     let afterTime = null;
@@ -25132,13 +25778,13 @@ function parseLoadingBlock(ast, visitor) {
             throw new Error(`Unrecognized parameter in @loading block: "${param.expression}"`);
         }
     }
-    return new DeferredBlockLoading(visitAll(visitor, ast.children, ast.children), afterTime, minimumTime, ast.sourceSpan, ast.startSourceSpan, ast.endSourceSpan);
+    return new DeferredBlockLoading(visitAll(visitor, ast.children, ast.children), afterTime, minimumTime, ast.nameSpan, ast.sourceSpan, ast.startSourceSpan, ast.endSourceSpan);
 }
 function parseErrorBlock(ast, visitor) {
     if (ast.parameters.length > 0) {
         throw new Error(`@error block cannot have parameters`);
     }
-    return new DeferredBlockError(visitAll(visitor, ast.children, ast.children), ast.sourceSpan, ast.startSourceSpan, ast.endSourceSpan);
+    return new DeferredBlockError(visitAll(visitor, ast.children, ast.children), ast.nameSpan, ast.sourceSpan, ast.startSourceSpan, ast.endSourceSpan);
 }
 function parsePrimaryTriggers(params, bindingParser, errors, placeholder) {
     const triggers = {};
@@ -25887,6 +26533,8 @@ const NG_CONTENT_SELECT_ATTR = 'select';
 const NG_PROJECT_AS_ATTR_NAME = 'ngProjectAs';
 // Global symbols available only inside event bindings.
 const EVENT_BINDING_SCOPE_GLOBALS = new Set(['$event']);
+// Tag name of the `ng-template` element.
+const NG_TEMPLATE_TAG_NAME = 'ng-template';
 // List of supported global targets for event listeners
 const GLOBAL_TARGET_RESOLVERS = new Map([['window', Identifiers.resolveWindow], ['document', Identifiers.resolveDocument], ['body', Identifiers.resolveBody]]);
 const LEADING_TRIVIA_CHARS = [' ', '\n', '\r', '\t'];
@@ -26658,7 +27306,6 @@ class TemplateDefinitionBuilder {
         // it based on the parent nodes inside the template instruction.
         const tagNameWithoutNamespace = template.tagName ? splitNsName(template.tagName)[1] : template.tagName;
         const contextNameSuffix = template.tagName ? '_' + sanitizeIdentifier(template.tagName) : '';
-        const NG_TEMPLATE_TAG_NAME = 'ng-template';
         // prepare attributes parameter (including attributes used for directive matching)
         const attrsExprs = this.getAttributeExpressions(NG_TEMPLATE_TAG_NAME, template.attributes, template.inputs, template.outputs, undefined /* styles */, template.templateAttrs);
         const templateIndex = this.createEmbeddedTemplateFn(tagNameWithoutNamespace, template.children, contextNameSuffix, template.sourceSpan, template.variables, attrsExprs, template.references, template.i18n);
@@ -26761,18 +27408,28 @@ class TemplateDefinitionBuilder {
         // We have to process the block in two steps: once here and again in the update instruction
         // callback in order to generate the correct expressions when pipes or pure functions are
         // used inside the branch expressions.
-        const branchData = block.branches.map(({ expression, expressionAlias, children, sourceSpan }) => {
+        const branchData = block.branches.map((branch, branchIndex) => {
+            const { expression, expressionAlias, children, sourceSpan } = branch;
             // 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 !== null ?
                 [new Variable(expressionAlias.name, DIRECT_CONTEXT_REFERENCE, expressionAlias.sourceSpan, expressionAlias.keySpan)] :
                 undefined;
+            let tagName = null;
+            let attrsExprs;
+            // Only the first branch can be used for projection, because the conditional
+            // uses the container of the first branch as the insertion point for all branches.
+            if (branchIndex === 0) {
+                const inferredData = this.inferProjectionDataFromInsertionPoint(branch);
+                tagName = inferredData.tagName;
+                attrsExprs = inferredData.attrsExprs;
+            }
             // Note: the template needs to be created *before* we process the expression,
             // otherwise pipes injecting some symbols won't work (see #52102).
-            const index = this.createEmbeddedTemplateFn(null, children, '_Conditional', sourceSpan, variables);
+            const templateIndex = this.createEmbeddedTemplateFn(tagName, children, '_Conditional', sourceSpan, variables, attrsExprs);
             const processedExpression = expression === null ? null : expression.visit(this._valueConverter);
-            return { index, expression: processedExpression, alias: expressionAlias };
+            return { index: templateIndex, expression: processedExpression, alias: expressionAlias };
         });
         // Use the index of the first block as the index for the entire container.
         const containerIndex = branchData[0].index;
@@ -26994,6 +27651,43 @@ class TemplateDefinitionBuilder {
             return params;
         });
     }
+    /**
+     * Infers the data used for content projection (tag name and attributes) from the content of a
+     * node.
+     * @param node Node for which to infer the projection data.
+     */
+    inferProjectionDataFromInsertionPoint(node) {
+        let root = null;
+        let tagName = null;
+        let attrsExprs;
+        for (const child of node.children) {
+            // Skip over comment nodes.
+            if (child instanceof Comment$1) {
+                continue;
+            }
+            // We can only infer the tag name/attributes if there's a single root node.
+            if (root !== null) {
+                root = null;
+                break;
+            }
+            // Root nodes can only elements or templates with a tag name (e.g. `<div *foo></div>`).
+            if (child instanceof Element$1 || (child instanceof Template && child.tagName !== null)) {
+                root = child;
+            }
+        }
+        // If we've found a single root node, its tag name and *static* attributes can be copied
+        // to the surrounding template to be used for content projection. Note that it's important
+        // that we don't copy any bound attributes since they don't participate in content projection
+        // and they can be used in directive matching (in the case of `Template.templateAttrs`).
+        if (root !== null) {
+            const name = root instanceof Element$1 ? root.name : root.tagName;
+            // Don't pass along `ng-template` tag name since it enables directive matching.
+            tagName = name === NG_TEMPLATE_TAG_NAME ? null : name;
+            attrsExprs =
+                this.getAttributeExpressions(NG_TEMPLATE_TAG_NAME, root.attributes, root.inputs, []);
+        }
+        return { tagName, attrsExprs };
+    }
     allocateDataSlot() {
         return this._dataIndex++;
     }
@@ -27001,6 +27695,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 { tagName, attrsExprs } = this.inferProjectionDataFromInsertionPoint(block);
         const primaryData = this.prepareEmbeddedTemplateFn(block.children, '_For', [block.item, block.contextVariables.$index, block.contextVariables.$count]);
         const { expression: trackByExpression, usesComponentInstance: trackByUsesComponentInstance } = this.createTrackByFunction(block);
         let emptyData = null;
@@ -27017,6 +27712,8 @@ class TemplateDefinitionBuilder {
                 variable(primaryData.name),
                 literal(primaryData.getConstCount()),
                 literal(primaryData.getVarCount()),
+                literal(tagName),
+                this.addAttrsToConsts(attrsExprs || null),
                 trackByExpression,
             ];
             if (emptyData !== null) {
@@ -28251,7 +28948,7 @@ function compileComponentFromMetadata(meta, constantPool, bindingParser) {
     else {
         // This path compiles the template using the prototype template pipeline. First the template is
         // ingested into IR:
-        const tpl = ingestComponent(meta.name, meta.template.nodes, constantPool, meta.relativeContextFilePath, meta.i18nUseExternalIds);
+        const tpl = ingestComponent(meta.name, meta.template.nodes, constantPool, meta.relativeContextFilePath, meta.i18nUseExternalIds, meta.deferBlocks);
         // Then the IR is transformed to prepare it for cod egeneration.
         transform(tpl, CompilationJobKind.Tmpl);
         // Finally we emit the template function:
@@ -29549,13 +30246,25 @@ class R3BoundTarget {
         }
         const name = trigger.reference;
         if (name === null) {
-            const children = block.placeholder ? block.placeholder.children : null;
-            // If the trigger doesn't have a reference, it is inferred as the root element node of the
-            // placeholder, if it only has one root node. Otherwise it's ambiguous so we don't
-            // attempt to resolve further.
-            return children !== null && children.length === 1 && children[0] instanceof Element$1 ?
-                children[0] :
-                null;
+            let trigger = null;
+            if (block.placeholder !== null) {
+                for (const child of block.placeholder.children) {
+                    // Skip over comment nodes. Currently by default the template parser doesn't capture
+                    // comments, but we have a safeguard here just in case since it can be enabled.
+                    if (child instanceof Comment$1) {
+                        continue;
+                    }
+                    // We can only infer the trigger if there's one root element node. Any other
+                    // nodes at the root make it so that we can't infer the trigger anymore.
+                    if (trigger !== null) {
+                        return null;
+                    }
+                    if (child instanceof Element$1) {
+                        trigger = child;
+                    }
+                }
+            }
+            return trigger;
         }
         const outsideRef = this.findEntityInScope(block, name);
         // First try to resolve the target in the scope of the main deferred block. Note that we
@@ -29567,7 +30276,7 @@ class R3BoundTarget {
             }
         }
         // If the trigger couldn't be found in the main block, check the
-        // placeholder  block which is shown before the main block has loaded.
+        // 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;
@@ -30262,7 +30971,7 @@ function publishFacade(global) {
  * @description
  * Entry point for all public APIs of the compiler package.
  */
-const VERSION = new Version('17.0.0-rc.1');
+const VERSION = new Version('17.0.0-rc.3');
 
 class CompilerConfig {
     constructor({ defaultEncapsulation = ViewEncapsulation.Emulated, preserveWhitespaces, strictInjectionParameters } = {}) {
@@ -31792,7 +32501,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-rc.1'));
+    definitionMap.set('version', literal('17.0.0-rc.3'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', metadata.type);
     definitionMap.set('decorators', metadata.decorators);
@@ -31900,7 +32609,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-rc.1'));
+    definitionMap.set('version', literal('17.0.0-rc.3'));
     // e.g. `type: MyDirective`
     definitionMap.set('type', meta.type.value);
     if (meta.isStandalone) {
@@ -32177,7 +32886,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-rc.1'));
+    definitionMap.set('version', literal('17.0.0-rc.3'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', meta.type.value);
     definitionMap.set('deps', compileDependencies(meta.deps));
@@ -32212,7 +32921,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-rc.1'));
+    definitionMap.set('version', literal('17.0.0-rc.3'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', meta.type.value);
     // Only generate providedIn property if it has a non-null value
@@ -32263,7 +32972,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-rc.1'));
+    definitionMap.set('version', literal('17.0.0-rc.3'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', meta.type.value);
     definitionMap.set('providers', meta.providers);
@@ -32296,7 +33005,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-rc.1'));
+    definitionMap.set('version', literal('17.0.0-rc.3'));
     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.
@@ -32347,7 +33056,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-rc.1'));
+    definitionMap.set('version', literal('17.0.0-rc.3'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     // e.g. `type: MyPipe`
     definitionMap.set('type', meta.type.value);