@angular/compiler 17.1.0-next.2 → 17.1.0-next.3

package/fesm2022/compiler.mjs

@@ -1,5 +1,5 @@
 /**
- * @license Angular v17.1.0-next.2
+ * @license Angular v17.1.0-next.3
  * (c) 2010-2022 Google LLC. https://angular.io/
  * License: MIT
  */
@@ -4712,7 +4712,7 @@ const I18N_ATTR_PREFIX = 'i18n-';
 /** Prefix of var expressions used in ICUs */
 const I18N_ICU_VAR_PREFIX = 'VAR_';
 /** Prefix of ICU expressions for post processing */
-const I18N_ICU_MAPPING_PREFIX = 'I18N_EXP_';
+const I18N_ICU_MAPPING_PREFIX$1 = 'I18N_EXP_';
 /** Placeholder wrapper for i18n expressions **/
 const I18N_PLACEHOLDER_SYMBOL = '�';
 function isI18nAttribute(name) {
@@ -8970,6 +8970,10 @@ var OpKind;
      * An i18n context containing information needed to generate an i18n message.
      */
     OpKind[OpKind["I18nContext"] = 43] = "I18nContext";
+    /**
+     * A creation op that corresponds to i18n attributes on an element.
+     */
+    OpKind[OpKind["I18nAttributes"] = 44] = "I18nAttributes";
 })(OpKind || (OpKind = {}));
 /**
  * Distinguishes different kinds of IR expressions.
@@ -9191,6 +9195,20 @@ var I18nParamResolutionTime;
      */
     I18nParamResolutionTime[I18nParamResolutionTime["Postproccessing"] = 1] = "Postproccessing";
 })(I18nParamResolutionTime || (I18nParamResolutionTime = {}));
+/**
+ * The contexts in which an i18n expression can be used.
+ */
+var I18nExpressionFor;
+(function (I18nExpressionFor) {
+    /**
+     * This expression is used as a value (i.e. inside an i18n block).
+     */
+    I18nExpressionFor[I18nExpressionFor["I18nText"] = 0] = "I18nText";
+    /**
+     * This expression is used in a binding.
+     */
+    I18nExpressionFor[I18nExpressionFor["I18nAttribute"] = 1] = "I18nAttribute";
+})(I18nExpressionFor || (I18nExpressionFor = {}));
 /**
  * Flags that describe what an i18n param value. These determine how the value is serialized into
  * the final map.
@@ -9257,7 +9275,14 @@ var I18nContextKind;
 (function (I18nContextKind) {
     I18nContextKind[I18nContextKind["RootI18n"] = 0] = "RootI18n";
     I18nContextKind[I18nContextKind["Icu"] = 1] = "Icu";
+    I18nContextKind[I18nContextKind["Attr"] = 2] = "Attr";
 })(I18nContextKind || (I18nContextKind = {}));
+var TemplateKind;
+(function (TemplateKind) {
+    TemplateKind[TemplateKind["NgTemplate"] = 0] = "NgTemplate";
+    TemplateKind[TemplateKind["Structural"] = 1] = "Structural";
+    TemplateKind[TemplateKind["Block"] = 2] = "Block";
+})(TemplateKind || (TemplateKind = {}));
 
 /**
  * Marker symbol for `ConsumesSlotOpTrait`.
@@ -9365,12 +9390,11 @@ const NEW_OP = {
 /**
  * Create an `InterpolationTextOp`.
  */
-function createInterpolateTextOp(xref, interpolation, i18nPlaceholders, sourceSpan) {
+function createInterpolateTextOp(xref, interpolation, sourceSpan) {
     return {
         kind: OpKind.InterpolateText,
         target: xref,
         interpolation,
-        i18nPlaceholders,
         sourceSpan,
         ...TRAIT_DEPENDS_ON_SLOT_CONTEXT,
         ...TRAIT_CONSUMES_VARS,
@@ -9378,15 +9402,19 @@ function createInterpolateTextOp(xref, interpolation, i18nPlaceholders, sourceSp
     };
 }
 class Interpolation {
-    constructor(strings, expressions) {
+    constructor(strings, expressions, i18nPlaceholders) {
         this.strings = strings;
         this.expressions = expressions;
+        this.i18nPlaceholders = i18nPlaceholders;
+        if (i18nPlaceholders.length !== 0 && i18nPlaceholders.length !== expressions.length) {
+            throw new Error(`Expected ${expressions.length} placeholders to match interpolation expression count, but got ${i18nPlaceholders.length}`);
+        }
     }
 }
 /**
  * Create a `BindingOp`, not yet transformed into a particular type of binding.
  */
-function createBindingOp(target, kind, name, expression, unit, securityContext, isTextAttribute, isTemplate, sourceSpan) {
+function createBindingOp(target, kind, name, expression, unit, securityContext, isTextAttribute, isStructuralTemplate, i18nContext, sourceSpan) {
     return {
         kind: OpKind.Binding,
         bindingKind: kind,
@@ -9396,7 +9424,8 @@ function createBindingOp(target, kind, name, expression, unit, securityContext,
         unit,
         securityContext,
         isTextAttribute,
-        isTemplate,
+        isStructuralTemplate: isStructuralTemplate,
+        i18nContext,
         sourceSpan,
         ...NEW_OP,
     };
@@ -9404,7 +9433,7 @@ function createBindingOp(target, kind, name, expression, unit, securityContext,
 /**
  * Create a `PropertyOp`.
  */
-function createPropertyOp(target, name, expression, isAnimationTrigger, securityContext, isTemplate, sourceSpan) {
+function createPropertyOp(target, name, expression, isAnimationTrigger, securityContext, isStructuralTemplate, i18nContext, sourceSpan) {
     return {
         kind: OpKind.Property,
         target,
@@ -9413,7 +9442,8 @@ function createPropertyOp(target, name, expression, isAnimationTrigger, security
         isAnimationTrigger,
         securityContext,
         sanitizer: null,
-        isTemplate,
+        isStructuralTemplate,
+        i18nContext,
         sourceSpan,
         ...TRAIT_DEPENDS_ON_SLOT_CONTEXT,
         ...TRAIT_CONSUMES_VARS,
@@ -9478,7 +9508,7 @@ function createClassMapOp(xref, expression, sourceSpan) {
 /**
  * Create an `AttributeOp`.
  */
-function createAttributeOp(target, name, expression, securityContext, isTextAttribute, isTemplate, sourceSpan) {
+function createAttributeOp(target, name, expression, securityContext, isTextAttribute, isStructuralTemplate, i18nContext, sourceSpan) {
     return {
         kind: OpKind.Attribute,
         target,
@@ -9487,7 +9517,8 @@ function createAttributeOp(target, name, expression, securityContext, isTextAttr
         securityContext,
         sanitizer: null,
         isTextAttribute,
-        isTemplate,
+        isStructuralTemplate,
+        i18nContext,
         sourceSpan,
         ...TRAIT_DEPENDS_ON_SLOT_CONTEXT,
         ...TRAIT_CONSUMES_VARS,
@@ -9548,15 +9579,18 @@ function createDeferWhenOp(target, expr, prefetch, sourceSpan) {
 /**
  * Create an i18n expression op.
  */
-function createI18nExpressionOp(context, target, handle, expression, i18nPlaceholder, resolutionTime, sourceSpan) {
+function createI18nExpressionOp(context, target, i18nOwner, handle, expression, i18nPlaceholder, resolutionTime, usage, name, sourceSpan) {
     return {
         kind: OpKind.I18nExpression,
         context,
         target,
+        i18nOwner,
         handle,
         expression,
         i18nPlaceholder,
         resolutionTime,
+        usage,
+        name,
         sourceSpan,
         ...NEW_OP,
         ...TRAIT_CONSUMES_VARS,
@@ -9564,12 +9598,12 @@ function createI18nExpressionOp(context, target, handle, expression, i18nPlaceho
     };
 }
 /**
- *Creates an op to apply i18n expression ops
+ * Creates an op to apply i18n expression ops.
  */
-function createI18nApplyOp(target, handle, sourceSpan) {
+function createI18nApplyOp(owner, handle, sourceSpan) {
     return {
         kind: OpKind.I18nApply,
-        target,
+        owner,
         handle,
         sourceSpan,
         ...NEW_OP,
@@ -10373,6 +10407,7 @@ function transformExpressionsInOp(op, transform, flags) {
         case OpKind.ProjectionDef:
         case OpKind.Template:
         case OpKind.Text:
+        case OpKind.I18nAttributes:
             // These operations contain no expressions.
             break;
         default:
@@ -10393,6 +10428,9 @@ function transformExpressionsInExpression(expr, transform, flags) {
         expr.lhs = transformExpressionsInExpression(expr.lhs, transform, flags);
         expr.rhs = transformExpressionsInExpression(expr.rhs, transform, flags);
     }
+    else if (expr instanceof UnaryOperatorExpr) {
+        expr.expr = transformExpressionsInExpression(expr.expr, transform, flags);
+    }
     else if (expr instanceof ReadPropExpr) {
         expr.receiver = transformExpressionsInExpression(expr.receiver, transform, flags);
     }
@@ -10444,6 +10482,9 @@ function transformExpressionsInExpression(expr, transform, flags) {
             expr.expressions[i] = transformExpressionsInExpression(expr.expressions[i], transform, flags);
         }
     }
+    else if (expr instanceof NotExpr) {
+        expr.condition = transformExpressionsInExpression(expr.condition, transform, flags);
+    }
     else if (expr instanceof ReadVarExpr || expr instanceof ExternalExpr ||
         expr instanceof LiteralExpr) {
         // No action for these types.
@@ -10785,10 +10826,11 @@ function createElementStartOp(tag, xref, namespace, i18nPlaceholder, sourceSpan)
 /**
  * Create a `TemplateOp`.
  */
-function createTemplateOp(xref, tag, functionNameSuffix, namespace, i18nPlaceholder, sourceSpan) {
+function createTemplateOp(xref, templateKind, tag, functionNameSuffix, namespace, i18nPlaceholder, sourceSpan) {
     return {
         kind: OpKind.Template,
         xref,
+        templateKind,
         attributes: null,
         tag,
         handle: new SlotHandle(),
@@ -10911,14 +10953,15 @@ function createProjectionDefOp(def) {
         ...NEW_OP,
     };
 }
-function createProjectionOp(xref, selector, sourceSpan) {
+function createProjectionOp(xref, selector, i18nPlaceholder, attributes, sourceSpan) {
     return {
         kind: OpKind.Projection,
         xref,
         handle: new SlotHandle(),
         selector,
+        i18nPlaceholder,
         projectionSlotIndex: 0,
-        attributes: [],
+        attributes,
         localRefs: [],
         sourceSpan,
         ...NEW_OP,
@@ -10928,13 +10971,14 @@ function createProjectionOp(xref, selector, sourceSpan) {
 /**
  * Create an `ExtractedAttributeOp`.
  */
-function createExtractedAttributeOp(target, bindingKind, name, expression) {
+function createExtractedAttributeOp(target, bindingKind, name, expression, i18nContext) {
     return {
         kind: OpKind.ExtractedAttribute,
         target,
         bindingKind,
         name,
         expression,
+        i18nContext,
         ...NEW_OP,
     };
 }
@@ -10977,10 +11021,11 @@ function createDeferOnOp(defer, trigger, prefetch, sourceSpan) {
 /**
  * Create an `ExtractedMessageOp`.
  */
-function createI18nMessageOp(xref, i18nBlock, message, messagePlaceholder, params, postprocessingParams, needsPostprocessing) {
+function createI18nMessageOp(xref, i18nContext, i18nBlock, message, messagePlaceholder, params, postprocessingParams, needsPostprocessing) {
     return {
         kind: OpKind.I18nMessage,
         xref,
+        i18nContext,
         i18nBlock,
         message,
         messagePlaceholder,
@@ -11043,6 +11088,9 @@ function createIcuEndOp(xref) {
     };
 }
 function createI18nContextOp(contextKind, xref, i18nBlock, message, sourceSpan) {
+    if (i18nBlock === null && contextKind !== I18nContextKind.Attr) {
+        throw new Error('AssertionError: i18nBlock must be provided for non-attribute contexts.');
+    }
     return {
         kind: OpKind.I18nContext,
         contextKind,
@@ -11055,6 +11103,17 @@ function createI18nContextOp(contextKind, xref, i18nBlock, message, sourceSpan)
         ...NEW_OP,
     };
 }
+function createI18nAttributesOp(xref, handle, target) {
+    return {
+        kind: OpKind.I18nAttributes,
+        xref,
+        handle,
+        target,
+        i18nAttributesConfig: null,
+        ...NEW_OP,
+        ...TRAIT_CONSUMES_SLOT,
+    };
+}
 function literalOrArrayLiteral$1(value) {
     if (Array.isArray(value)) {
         return literalArr(value.map(literalOrArrayLiteral$1));
@@ -11062,12 +11121,13 @@ function literalOrArrayLiteral$1(value) {
     return literal(value, INFERRED_TYPE);
 }
 
-function createHostPropertyOp(name, expression, isAnimationTrigger, sourceSpan) {
+function createHostPropertyOp(name, expression, isAnimationTrigger, i18nContext, sourceSpan) {
     return {
         kind: OpKind.HostProperty,
         name,
         expression,
         isAnimationTrigger,
+        i18nContext,
         sourceSpan,
         ...TRAIT_CONSUMES_VARS,
         ...NEW_OP,
@@ -11304,7 +11364,7 @@ function applyI18nExpressions(job) {
             // Only add apply after expressions that are not followed by more expressions.
             if (op.kind === OpKind.I18nExpression && needsApplication(i18nContexts, op)) {
                 // TODO: what should be the source span for the apply op?
-                OpList.insertAfter(createI18nApplyOp(op.target, op.handle, null), op);
+                OpList.insertAfter(createI18nApplyOp(op.i18nOwner, op.handle, null), op);
             }
         }
     }
@@ -11317,17 +11377,34 @@ function needsApplication(i18nContexts, 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.
     const context = i18nContexts.get(op.context);
     const nextContext = i18nContexts.get(op.next.context);
-    if (context.i18nBlock !== nextContext.i18nBlock) {
+    if (context === undefined) {
+        throw new Error('AssertionError: expected an I18nContextOp to exist for the I18nExpressionOp\'s context');
+    }
+    if (nextContext === undefined) {
+        throw new Error('AssertionError: expected an I18nContextOp to exist for the next I18nExpressionOp\'s context');
+    }
+    // If the next op is an expression targeting a different i18n block (or different element, in the
+    // case of i18n attributes), we need to apply.
+    // First, handle the case of i18n blocks.
+    if (context.i18nBlock !== null) {
+        // This is a block context. Compare the blocks.
+        if (context.i18nBlock !== nextContext.i18nBlock) {
+            return true;
+        }
+        return false;
+    }
+    // Second, handle the case of i18n attributes.
+    if (op.i18nOwner !== op.next.i18nOwner) {
         return true;
     }
     return false;
 }
 
 /**
- * Updates i18n expression ops to depend on the last slot in their owning i18n block.
+ * Updates i18n expression ops to target the last slot in their owning i18n block, and moves them
+ * after the last update instruction that depends on that slot.
  */
 function assignI18nSlotDependencies(job) {
     const i18nLastSlotConsumers = new Map();
@@ -11344,17 +11421,54 @@ function assignI18nSlotDependencies(job) {
                     currentI18nOp = op;
                     break;
                 case OpKind.I18nEnd:
+                    if (currentI18nOp === null) {
+                        throw new Error('AssertionError: Expected an active I18n block while calculating last slot consumers');
+                    }
+                    if (lastSlotConsumer === null) {
+                        throw new Error('AssertionError: Expected a last slot consumer while calculating last slot consumers');
+                    }
                     i18nLastSlotConsumers.set(currentI18nOp.xref, lastSlotConsumer);
                     currentI18nOp = null;
                     break;
             }
         }
-        // Assign i18n expressions to target the last slot in its owning block.
+        // Expresions that are currently being moved.
+        let opsToMove = [];
+        // Previously we found the last slot-consuming create mode op in the i18n block. That op will be
+        // the new target for any moved i18n expresion inside the i18n block, and that op's slot is
+        // stored here.
+        let moveAfterTarget = null;
+        // This is the last target in the create IR that we saw during iteration. Eventally, it will be
+        // equal to moveAfterTarget. But wait! We need to find the *last* such op whose target is equal
+        // to `moveAfterTarget`.
+        let previousTarget = null;
         for (const op of unit.update) {
-            if (op.kind === OpKind.I18nExpression) {
-                op.target = i18nLastSlotConsumers.get(op.target);
+            if (hasDependsOnSlotContextTrait(op)) {
+                // We've found an op that depends on another slot other than the one that we want to move
+                // the expressions to, after previously having seen the one we want to move to.
+                if (moveAfterTarget !== null && previousTarget === moveAfterTarget &&
+                    op.target !== previousTarget) {
+                    OpList.insertBefore(opsToMove, op);
+                    moveAfterTarget = null;
+                    opsToMove = [];
+                }
+                previousTarget = op.target;
+            }
+            if (op.kind === OpKind.I18nExpression && op.usage === I18nExpressionFor.I18nText) {
+                // This is an I18nExpressionOps that is used for text (not attributes).
+                OpList.remove(op);
+                opsToMove.push(op);
+                const target = i18nLastSlotConsumers.get(op.i18nOwner);
+                if (target === undefined) {
+                    throw new Error('AssertionError: Expected to find a last slot consumer for an I18nExpressionOp');
+                }
+                op.target = target;
+                moveAfterTarget = op.target;
             }
         }
+        if (moveAfterTarget !== null) {
+            unit.update.push(opsToMove);
+        }
     }
 }
 
@@ -11386,22 +11500,36 @@ function extractAttributes(job) {
                     break;
                 case OpKind.Property:
                     if (!op.isAnimationTrigger) {
-                        OpList.insertBefore(createExtractedAttributeOp(op.target, op.isTemplate ? BindingKind.Template : BindingKind.Property, op.name, null), lookupElement$2(elements, op.target));
+                        let bindingKind;
+                        if (op.i18nContext !== null) {
+                            // If the binding has an i18n context, it is an i18n attribute, and should have that
+                            // kind in the consts array.
+                            bindingKind = BindingKind.I18n;
+                        }
+                        else if (op.isStructuralTemplate) {
+                            // TODO: How do i18n attributes on templates work?!
+                            bindingKind = BindingKind.Template;
+                        }
+                        else {
+                            bindingKind = BindingKind.Property;
+                        }
+                        OpList.insertBefore(createExtractedAttributeOp(op.target, bindingKind, op.name, null, null), lookupElement$2(elements, op.target));
                     }
                     break;
                 case OpKind.StyleProp:
                 case OpKind.ClassProp:
+                    // TODO: Can style or class bindings be i18n attributes?
                     // The old compiler treated empty style bindings as regular bindings for the purpose of
                     // directive matching. That behavior is incorrect, but we emulate it in compatibility
                     // mode.
                     if (unit.job.compatibility === CompatibilityMode.TemplateDefinitionBuilder &&
                         op.expression instanceof EmptyExpr) {
-                        OpList.insertBefore(createExtractedAttributeOp(op.target, BindingKind.Property, op.name, null), lookupElement$2(elements, op.target));
+                        OpList.insertBefore(createExtractedAttributeOp(op.target, BindingKind.Property, op.name, null, null), lookupElement$2(elements, op.target));
                     }
                     break;
                 case OpKind.Listener:
                     if (!op.isAnimationListener) {
-                        const extractedAttributeOp = createExtractedAttributeOp(op.target, BindingKind.Property, op.name, null);
+                        const extractedAttributeOp = createExtractedAttributeOp(op.target, BindingKind.Property, op.name, null, null);
                         if (job.kind === CompilationJobKind.Host) {
                             // This attribute will apply to the enclosing host binding compilation unit, so order
                             // doesn't matter.
@@ -11450,7 +11578,7 @@ function extractAttributeOp(unit, op, elements) {
         }
     }
     if (extractable) {
-        const extractedAttributeOp = createExtractedAttributeOp(op.target, op.isTemplate ? BindingKind.Template : BindingKind.Attribute, op.name, op.expression);
+        const extractedAttributeOp = createExtractedAttributeOp(op.target, op.isStructuralTemplate ? BindingKind.Template : BindingKind.Attribute, op.name, op.expression, op.i18nContext);
         if (unit.job.kind === CompilationJobKind.Host) {
             // This attribute will apply to the enclosing host binding compilation unit, so order doesn't
             // matter.
@@ -11497,16 +11625,16 @@ function specializeBindings(job) {
                         target.nonBindable = true;
                     }
                     else {
-                        OpList.replace(op, createAttributeOp(op.target, op.name, op.expression, op.securityContext, op.isTextAttribute, op.isTemplate, op.sourceSpan));
+                        OpList.replace(op, createAttributeOp(op.target, op.name, op.expression, op.securityContext, op.isTextAttribute, op.isStructuralTemplate, op.i18nContext, op.sourceSpan));
                     }
                     break;
                 case BindingKind.Property:
                 case BindingKind.Animation:
                     if (job.kind === CompilationJobKind.Host) {
-                        OpList.replace(op, createHostPropertyOp(op.name, op.expression, op.bindingKind === BindingKind.Animation, op.sourceSpan));
+                        OpList.replace(op, createHostPropertyOp(op.name, op.expression, op.bindingKind === BindingKind.Animation, op.i18nContext, op.sourceSpan));
                     }
                     else {
-                        OpList.replace(op, createPropertyOp(op.target, op.name, op.expression, op.bindingKind === BindingKind.Animation, op.securityContext, op.isTemplate, op.sourceSpan));
+                        OpList.replace(op, createPropertyOp(op.target, op.name, op.expression, op.bindingKind === BindingKind.Animation, op.securityContext, op.isStructuralTemplate, op.i18nContext, op.sourceSpan));
                     }
                     break;
                 case BindingKind.I18n:
@@ -11827,7 +11955,7 @@ class ElementAttributes {
         array.push(...getAttributeNameLiterals$1(name));
         if (kind === BindingKind.Attribute || kind === BindingKind.StyleProperty) {
             if (value === null) {
-                throw Error('Attribute & style element attributes must have a value');
+                throw Error('Attribute, i18n attribute, & style element attributes must have a value');
             }
             array.push(value);
         }
@@ -11881,6 +12009,50 @@ function serializeAttributes({ attributes, bindings, classes, i18n, projectAs, s
     return literalArr(attrArray);
 }
 
+/**
+ * Some binding instructions in the update block may actually correspond to i18n bindings. In that
+ * case, they should be replaced with i18nExp instructions for the dynamic portions.
+ */
+function convertI18nBindings(job) {
+    const i18nAttributesByElem = new Map();
+    for (const unit of job.units) {
+        for (const op of unit.create) {
+            if (op.kind === OpKind.I18nAttributes) {
+                i18nAttributesByElem.set(op.target, op);
+            }
+        }
+        for (const op of unit.update) {
+            switch (op.kind) {
+                case OpKind.Property:
+                case OpKind.Attribute:
+                    if (op.i18nContext === null) {
+                        continue;
+                    }
+                    if (!(op.expression instanceof Interpolation)) {
+                        continue;
+                    }
+                    const i18nAttributesForElem = i18nAttributesByElem.get(op.target);
+                    if (i18nAttributesForElem === undefined) {
+                        throw new Error('AssertionError: An i18n attribute binding instruction requires the owning element to have an I18nAttributes create instruction');
+                    }
+                    if (i18nAttributesForElem.target !== op.target) {
+                        throw new Error('AssertionError: Expected i18nAttributes target element to match binding target element');
+                    }
+                    const ops = [];
+                    for (let i = 0; i < op.expression.expressions.length; i++) {
+                        const expr = op.expression.expressions[i];
+                        if (op.expression.i18nPlaceholders.length !== op.expression.expressions.length) {
+                            throw new Error(`AssertionError: An i18n attribute binding instruction requires the same number of expressions and placeholders, but found ${op.expression.i18nPlaceholders.length} placeholders and ${op.expression.expressions.length} expressions`);
+                        }
+                        ops.push(createI18nExpressionOp(op.i18nContext, i18nAttributesForElem.target, i18nAttributesForElem.xref, i18nAttributesForElem.handle, expr, op.expression.i18nPlaceholders[i], I18nParamResolutionTime.Creation, I18nExpressionFor.I18nAttribute, op.name, op.sourceSpan));
+                    }
+                    OpList.replaceWithMany(op, ops);
+                    break;
+            }
+        }
+    }
+}
+
 /**
  * Create extracted deps functions for defer ops.
  */
@@ -12324,7 +12496,7 @@ function ternaryTransform(e) {
 /**
  * The escape sequence used indicate message param values.
  */
-const ESCAPE = '\uFFFD';
+const ESCAPE$1 = '\uFFFD';
 /**
  * Marker used to indicate an element tag.
  */
@@ -12373,6 +12545,18 @@ function extractI18nMessages(job) {
             }
         }
     }
+    // TODO: Miles and I think that contexts have a 1-to-1 correspondence with extracted messages, so
+    // this phase can probably be simplified.
+    // Extract messages from contexts of i18n attributes.
+    for (const unit of job.units) {
+        for (const op of unit.create) {
+            if (op.kind !== OpKind.I18nContext || op.contextKind !== I18nContextKind.Attr) {
+                continue;
+            }
+            const i18nMessageOp = createI18nMessage(job, op);
+            unit.create.push(i18nMessageOp);
+        }
+    }
     // Extract messages from root i18n blocks.
     const i18nBlockMessages = new Map();
     for (const unit of job.units) {
@@ -12397,6 +12581,9 @@ function extractI18nMessages(job) {
                     }
                     const i18nContext = i18nContexts.get(op.context);
                     if (i18nContext.contextKind === I18nContextKind.Icu) {
+                        if (i18nContext.i18nBlock === null) {
+                            throw Error('ICU context should have its i18n block set.');
+                        }
                         const subMessage = createI18nMessage(job, i18nContext, op.messagePlaceholder);
                         unit.create.push(subMessage);
                         const rootI18nId = i18nBlocks.get(i18nContext.i18nBlock).root;
@@ -12416,119 +12603,86 @@ function extractI18nMessages(job) {
  * Create an i18n message op from an i18n context op.
  */
 function createI18nMessage(job, context, messagePlaceholder) {
-    let [formattedParams, needsPostprocessing] = formatParams(context.params);
-    const [formattedPostprocessingParams] = formatParams(context.postprocessingParams);
-    needsPostprocessing ||= formattedPostprocessingParams.size > 0;
-    return createI18nMessageOp(job.allocateXrefId(), context.i18nBlock, context.message, messagePlaceholder ?? null, formattedParams, formattedPostprocessingParams, needsPostprocessing);
+    let formattedParams = formatParams(context.params);
+    const formattedPostprocessingParams = formatParams(context.postprocessingParams);
+    let needsPostprocessing = formattedPostprocessingParams.size > 0;
+    for (const values of context.params.values()) {
+        if (values.length > 1) {
+            needsPostprocessing = true;
+        }
+    }
+    return createI18nMessageOp(job.allocateXrefId(), context.xref, context.i18nBlock, context.message, messagePlaceholder ?? null, formattedParams, formattedPostprocessingParams, needsPostprocessing);
 }
 /**
  * Formats a map of `I18nParamValue[]` values into a map of `Expression` values.
- * @return A tuple of the formatted params and a boolean indicating whether postprocessing is needed
- *     for any of the params
  */
 function formatParams(params) {
     const formattedParams = new Map();
-    let needsPostprocessing = false;
     for (const [placeholder, placeholderValues] of params) {
-        const [serializedValues, paramNeedsPostprocessing] = formatParamValues(placeholderValues);
-        needsPostprocessing ||= paramNeedsPostprocessing;
+        const serializedValues = formatParamValues(placeholderValues);
         if (serializedValues !== null) {
             formattedParams.set(placeholder, literal(serializedValues));
         }
     }
-    return [formattedParams, needsPostprocessing];
+    return formattedParams;
 }
 /**
  * Formats an `I18nParamValue[]` into a string (or null for empty array).
- * @return A tuple of the formatted value and a boolean indicating whether postprocessing is needed
- *     for the value
  */
 function formatParamValues(values) {
     if (values.length === 0) {
-        return [null, false];
+        return null;
     }
-    collapseElementTemplatePairs(values);
     const serializedValues = values.map(value => formatValue(value));
     return serializedValues.length === 1 ?
-        [serializedValues[0], false] :
-        [`${LIST_START_MARKER}${serializedValues.join(LIST_DELIMITER)}${LIST_END_MARKER}`, true];
-}
-/**
- * Collapses element/template pairs that refer to the same subTemplateIndex, i.e. elements and
- * templates that refer to the same element instance.
- *
- * This accounts for the case of a structural directive inside an i18n block, e.g.:
- * ```
- * <div i18n>
- *   <div *ngIf="condition">
- * </div>
- * ```
- *
- * In this case, both the element start and template start placeholders are the same,
- * and we collapse them down into a single compound placeholder value. Rather than produce
- * `[\uFFFD#1:1\uFFFD|\uFFFD*2:1\uFFFD]`, we want to produce `\uFFFD#1:1\uFFFD\uFFFD*2:1\uFFFD`,
- * likewise for the closing of the element/template.
- */
-function collapseElementTemplatePairs(values) {
-    // Record the indicies of element and template values in the values array by subTemplateIndex.
-    const valueIndiciesBySubTemplateIndex = new Map();
-    for (let i = 0; i < values.length; i++) {
-        const value = values[i];
-        if (value.subTemplateIndex !== null &&
-            (value.flags & (I18nParamValueFlags.ElementTag | I18nParamValueFlags.TemplateTag))) {
-            const valueIndicies = valueIndiciesBySubTemplateIndex.get(value.subTemplateIndex) ?? [];
-            valueIndicies.push(i);
-            valueIndiciesBySubTemplateIndex.set(value.subTemplateIndex, valueIndicies);
-        }
-    }
-    // For each subTemplateIndex, check if any values can be collapsed.
-    for (const [subTemplateIndex, valueIndicies] of valueIndiciesBySubTemplateIndex) {
-        if (valueIndicies.length > 1) {
-            const elementIndex = valueIndicies.find(index => values[index].flags & I18nParamValueFlags.ElementTag);
-            const templateIndex = valueIndicies.find(index => values[index].flags & I18nParamValueFlags.TemplateTag);
-            // If the values list contains both an element and template value, we can collapse.
-            if (elementIndex !== undefined && templateIndex !== undefined) {
-                const elementValue = values[elementIndex];
-                const templateValue = values[templateIndex];
-                // To match the TemplateDefinitionBuilder output, flip the order depending on whether the
-                // values represent a closing or opening tag (or both).
-                // TODO(mmalerba): Figure out if this makes a difference in terms of either functionality,
-                // or the resulting message ID. If not, we can remove the special-casing in the future.
-                let compundValue;
-                if ((elementValue.flags & I18nParamValueFlags.OpenTag) &&
-                    (elementValue.flags & I18nParamValueFlags.CloseTag)) {
-                    // TODO(mmalerba): Is this a TDB bug? I don't understand why it would put the template
-                    // value twice.
-                    compundValue = `${formatValue(templateValue)}${formatValue(elementValue)}${formatValue(templateValue)}`;
-                }
-                else if (elementValue.flags & I18nParamValueFlags.OpenTag) {
-                    compundValue = `${formatValue(templateValue)}${formatValue(elementValue)}`;
-                }
-                else {
-                    compundValue = `${formatValue(elementValue)}${formatValue(templateValue)}`;
-                }
-                // Replace the element value with the combined value.
-                values.splice(elementIndex, 1, { value: compundValue, subTemplateIndex, flags: I18nParamValueFlags.None });
-                // Replace the template value with null to preserve the indicies we calculated earlier.
-                values.splice(templateIndex, 1, null);
-            }
-        }
-    }
-    // Strip out any nulled out values we introduced above.
-    for (let i = values.length - 1; i >= 0; i--) {
-        if (values[i] === null) {
-            values.splice(i, 1);
-        }
-    }
+        serializedValues[0] :
+        `${LIST_START_MARKER}${serializedValues.join(LIST_DELIMITER)}${LIST_END_MARKER}`;
 }
 /**
  * Formats a single `I18nParamValue` into a string
  */
 function formatValue(value) {
+    // Element tags with a structural directive use a special form that concatenates the element and
+    // template values.
+    if ((value.flags & I18nParamValueFlags.ElementTag) &&
+        (value.flags & I18nParamValueFlags.TemplateTag)) {
+        if (typeof value.value !== 'object') {
+            throw Error('AssertionError: Expected i18n param value to have an element and template slot');
+        }
+        const elementValue = formatValue({
+            ...value,
+            value: value.value.element,
+            flags: value.flags & ~I18nParamValueFlags.TemplateTag
+        });
+        const templateValue = formatValue({
+            ...value,
+            value: value.value.template,
+            flags: value.flags & ~I18nParamValueFlags.ElementTag
+        });
+        // TODO(mmalerba): This is likely a bug in TemplateDefinitionBuilder, we should not need to
+        // record the template value twice. For now I'm re-implementing the behavior here to keep the
+        // output consistent with TemplateDefinitionBuilder.
+        if ((value.flags & I18nParamValueFlags.OpenTag) &&
+            (value.flags & I18nParamValueFlags.CloseTag)) {
+            return `${templateValue}${elementValue}${templateValue}`;
+        }
+        // To match the TemplateDefinitionBuilder output, flip the order depending on whether the
+        // values represent a closing or opening tag (or both).
+        // TODO(mmalerba): Figure out if this makes a difference in terms of either functionality,
+        // or the resulting message ID. If not, we can remove the special-casing in the future.
+        return value.flags & I18nParamValueFlags.CloseTag ? `${elementValue}${templateValue}` :
+            `${templateValue}${elementValue}`;
+    }
+    // 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 `${formatValue({ ...value, flags: value.flags & ~I18nParamValueFlags.CloseTag })}${formatValue({ ...value, flags: value.flags & ~I18nParamValueFlags.OpenTag })}`;
+    }
     // If there are no special flags, just return the raw value.
     if (value.flags === I18nParamValueFlags.None) {
         return `${value.value}`;
     }
+    // Encode the remaining flags as part of the value.
     let tagMarker = '';
     let closeMarker = '';
     if (value.flags & I18nParamValueFlags.ElementTag) {
@@ -12541,12 +12695,7 @@ function formatValue(value) {
         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}`;
+    return `${ESCAPE$1}${closeMarker}${tagMarker}${value.value}${context}${ESCAPE$1}`;
 }
 
 /**
@@ -12580,7 +12729,7 @@ function generateAdvance(job) {
             else if (!slotMap.has(op.target)) {
                 // We expect ops that _do_ depend on the slot counter to point at declarations that exist in
                 // the `slotMap`.
-                throw new Error(`AssertionError: reference to unknown slot for var ${op.target}`);
+                throw new Error(`AssertionError: reference to unknown slot for target ${op.target}`);
             }
             const slot = slotMap.get(op.target);
             // Does the slot counter need to be adjusted?
@@ -19790,35 +19939,132 @@ 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_';
+/** Prefix of ICU expressions for post processing */
+const I18N_ICU_MAPPING_PREFIX = 'I18N_EXP_';
+/**
+ * The escape sequence used for message param values.
+ */
+const ESCAPE = '\uFFFD';
 /**
  * Lifts i18n properties into the consts array.
  * TODO: Can we use `ConstCollectedExpr`?
+ * TODO: The way the various attributes are linked together is very complex. Perhaps we could
+ * simplify the process, maybe by combining the context and message ops?
  */
 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.
+    // Step One: Build up various lookup maps we need to collect all the consts.
+    // Context Xref -> Extracted Attribute Op
+    const extractedAttributesByI18nContext = new Map();
+    // Element/ElementStart Xref -> I18n Attributes config op
+    const i18nAttributesByElement = new Map();
+    // Element/ElementStart Xref -> All I18n Expression ops for attrs on that target
+    const i18nExpressionsByElement = new Map();
+    // I18n Message Xref -> I18n Message Op (TODO: use a central op map)
     const messages = new Map();
+    for (const unit of job.units) {
+        for (const op of unit.ops()) {
+            if (op.kind === OpKind.ExtractedAttribute && op.i18nContext !== null) {
+                extractedAttributesByI18nContext.set(op.i18nContext, op);
+            }
+            else if (op.kind === OpKind.I18nAttributes) {
+                i18nAttributesByElement.set(op.target, op);
+            }
+            else if (op.kind === OpKind.I18nExpression && op.usage === I18nExpressionFor.I18nAttribute) {
+                const expressions = i18nExpressionsByElement.get(op.target) ?? [];
+                expressions.push(op);
+                i18nExpressionsByElement.set(op.target, expressions);
+            }
+            else if (op.kind === OpKind.I18nMessage) {
+                messages.set(op.xref, op);
+            }
+        }
+    }
+    // Step Two: Serialize the extracted i18n messages for root i18n blocks and i18n attributes into
+    // the const array.
+    //
+    // Also, each i18n message will have a variable expression that can refer to its
+    // value. Store these expressions in the appropriate place:
+    // 1. For normal i18n content, it also goes in the const array. We save the const index to use
+    // later.
+    // 2. For extracted attributes, it becomes the value of the extracted attribute instruction.
+    // 3. For i18n bindings, it will go in a separate const array instruction below; for now, we just
+    // save it.
+    const i18nValuesByContext = new Map();
+    const messageConstIndices = new Map();
     for (const unit of job.units) {
         for (const op of unit.create) {
             if (op.kind === OpKind.I18nMessage) {
-                messages.set(op.xref, op);
+                if (op.messagePlaceholder === null) {
+                    const { mainVar, statements } = collectMessage(job, fileBasedI18nSuffix, messages, op);
+                    if (op.i18nBlock !== null) {
+                        // This is a regular i18n message with a corresponding i18n block. Collect it into the
+                        // const array.
+                        const i18nConst = job.addConst(mainVar, statements);
+                        messageConstIndices.set(op.i18nBlock, i18nConst);
+                    }
+                    else {
+                        // This is an i18n attribute. Extract the initializers into the const pool.
+                        job.constsInitializers.push(...statements);
+                        // Save the i18n variable value for later.
+                        i18nValuesByContext.set(op.i18nContext, mainVar);
+                        // This i18n message may correspond to an individual extracted attribute. If so, The
+                        // value of that attribute is updated to read the extracted i18n variable.
+                        const attributeForMessage = extractedAttributesByI18nContext.get(op.i18nContext);
+                        if (attributeForMessage !== undefined) {
+                            attributeForMessage.expression = mainVar;
+                        }
+                    }
+                }
                 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));
+    // Step Three: Serialize I18nAttributes configurations into the const array. Each I18nAttributes
+    // instruction has a config array, which contains k-v pairs describing each binding name, and the
+    // i18n variable that provides the value.
+    for (const unit of job.units) {
+        for (const elem of unit.create) {
+            if (isElementOrContainerOp(elem)) {
+                const i18nAttributes = i18nAttributesByElement.get(elem.xref);
+                if (i18nAttributes === undefined) {
+                    // This element is not associated with an i18n attributes configuration instruction.
+                    continue;
+                }
+                let i18nExpressions = i18nExpressionsByElement.get(elem.xref);
+                if (i18nExpressions === undefined) {
+                    // Unused i18nAttributes should have already been removed.
+                    // TODO: Should the removal of those dead instructions be merged with this phase?
+                    throw new Error('AssertionError: Could not find any i18n expressions associated with an I18nAttributes instruction');
+                }
+                // Find expressions for all the unique property names, removing duplicates.
+                const seenPropertyNames = new Set();
+                i18nExpressions = i18nExpressions.filter(i18nExpr => {
+                    const seen = (seenPropertyNames.has(i18nExpr.name));
+                    seenPropertyNames.add(i18nExpr.name);
+                    return !seen;
+                });
+                const i18nAttributeConfig = i18nExpressions.flatMap(i18nExpr => {
+                    const i18nExprValue = i18nValuesByContext.get(i18nExpr.context);
+                    if (i18nExprValue === undefined) {
+                        throw new Error('AssertionError: Could not find i18n expression\'s value');
+                    }
+                    return [literal(i18nExpr.name), i18nExprValue];
+                });
+                i18nAttributes.i18nAttributesConfig =
+                    job.addConst(new LiteralArrayExpr(i18nAttributeConfig));
+            }
         }
     }
-    // Assign const index to i18n ops that messages were extracted from.
+    // Step Four: Propagate the extracted const index into 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.get(op.root);
+                const msgIndex = messageConstIndices.get(op.root);
+                if (msgIndex === undefined) {
+                    throw new Error('AssertionError: Could not find corresponding i18n block index for an i18n message op; was an i18n message incorrectly assumed to correspond to an attribute?');
+                }
+                op.messageIndex = msgIndex;
             }
         }
     }
@@ -19828,18 +20074,23 @@ function collectI18nConsts(job) {
  * 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.
+    // Recursively collect any sub-messages, record each sub-message's main variable under its
+    // placeholder so that we can add them to the params for the parent message. It is possible
+    // that multiple sub-messages will share the same placeholder, so we need to track an array of
+    // variables for each placeholder.
     const statements = [];
+    const subMessagePlaceholders = new Map();
     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);
+        const subMessages = subMessagePlaceholders.get(subMessage.messagePlaceholder) ?? [];
+        subMessages.push(subMessageVar);
+        subMessagePlaceholders.set(subMessage.messagePlaceholder, subMessages);
     }
+    addSubMessageParams(messageOp, subMessagePlaceholders);
     // Sort the params for consistency with TemaplateDefinitionBuilder output.
     messageOp.params = new Map([...messageOp.params.entries()].sort());
-    // 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
@@ -19850,10 +20101,11 @@ function collectMessage(job, fileBasedI18nSuffix, messages, messageOp) {
     // set in post-processing.
     if (messageOp.needsPostprocessing) {
         // Sort the post-processing params for consistency with TemaplateDefinitionBuilder output.
-        messageOp.postprocessingParams = new Map([...messageOp.postprocessingParams.entries()].sort());
+        const postprocessingParams = Object.fromEntries([...messageOp.postprocessingParams.entries()].sort());
+        const formattedPostprocessingParams = formatI18nPlaceholderNamesInMap(postprocessingParams, /* useCamelCase */ false);
         const extraTransformFnParams = [];
         if (messageOp.postprocessingParams.size > 0) {
-            extraTransformFnParams.push(literalMap([...messageOp.postprocessingParams].map(([key, value]) => ({ key, value, quoted: true }))));
+            extraTransformFnParams.push(mapLiteral(formattedPostprocessingParams, /* quoted */ true));
         }
         transformFn = (expr) => importExpr(Identifiers.i18nPostprocess).callFn([expr, ...extraTransformFnParams]);
     }
@@ -19861,6 +20113,26 @@ function collectMessage(job, fileBasedI18nSuffix, messages, messageOp) {
     statements.push(...getTranslationDeclStmts$1(messageOp.message, mainVar, closureVar, messageOp.params, transformFn));
     return { mainVar, statements };
 }
+/**
+ * Adds the given subMessage placeholders to the given message op.
+ *
+ * If a placeholder only corresponds to a single sub-message variable, we just set that variable
+ * as the param value. However, if the placeholder corresponds to multiple sub-message
+ * variables, we need to add a special placeholder value that is handled by the post-processing
+ * step. We then add the array of variables as a post-processing param.
+ */
+function addSubMessageParams(messageOp, subMessagePlaceholders) {
+    for (const [placeholder, subMessages] of subMessagePlaceholders) {
+        if (subMessages.length === 1) {
+            messageOp.params.set(placeholder, subMessages[0]);
+        }
+        else {
+            messageOp.params.set(placeholder, literal(`${ESCAPE}${I18N_ICU_MAPPING_PREFIX}${placeholder}${ESCAPE}`));
+            messageOp.postprocessingParams.set(placeholder, literalArr(subMessages));
+            messageOp.needsPostprocessing = true;
+        }
+    }
+}
 /**
  * Generate statements that define a given translation message.
  *
@@ -19883,7 +20155,8 @@ function collectMessage(job, fileBasedI18nSuffix, messages, messageOp) {
  * @param closureVar The variable for Closure `goog.getMsg` calls, e.g. `MSG_EXTERNAL_XXX`.
  * @param params Object mapping placeholder names to their values (e.g.
  * `{ "interpolation": "\uFFFD0\uFFFD" }`).
- * @param transformFn Optional transformation function that will be applied to the translation (e.g.
+ * @param transformFn Optional transformation function that will be applied to the translation
+ *     (e.g.
  * post-processing).
  * @returns An array of statements that defined a given translation.
  */
@@ -19928,28 +20201,13 @@ function i18nGenerateClosureVar(pool, messageId, fileBasedI18nSuffix, useExterna
     }
     return variable(name);
 }
-/**
- * Asserts that all of the message's placeholders have values.
- */
-function assertAllParamsResolved(op) {
-    for (let placeholder in op.message.placeholders) {
-        placeholder = placeholder.trimEnd();
-        if (!op.params.has(placeholder) && !op.postprocessingParams.has(placeholder)) {
-            throw Error(`Failed to resolve i18n placeholder: ${placeholder}`);
-        }
-    }
-    for (let placeholder in op.message.placeholderToMessage) {
-        placeholder = placeholder.trimEnd();
-        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.
+ * Also, replaces interpolations on these text nodes with i18n expressions of the non-text portions,
+ * which will be applied later.
  */
-function extractI18nText(job) {
+function convertI18nText(job) {
     for (const unit of job.units) {
         // Remove all text nodes within i18n blocks, their content is already captured in the i18n
         // message.
@@ -20004,7 +20262,7 @@ function extractI18nText(job) {
                         const expr = op.interpolation.expressions[i];
                         // 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(contextId, i18nOp.xref, i18nOp.handle, expr, op.i18nPlaceholders[i], resolutionTime, expr.sourceSpan ?? op.sourceSpan));
+                        ops.push(createI18nExpressionOp(contextId, i18nOp.xref, i18nOp.xref, i18nOp.handle, expr, op.interpolation.i18nPlaceholders[i], resolutionTime, I18nExpressionFor.I18nText, '', expr.sourceSpan ?? op.sourceSpan));
                     }
                     OpList.replaceWithMany(op, ops);
                     break;
@@ -20542,14 +20800,14 @@ function parseExtractedStyles(job) {
                 if (op.name === 'style') {
                     const parsedStyles = parse(op.expression.value);
                     for (let i = 0; i < parsedStyles.length - 1; i += 2) {
-                        OpList.insertBefore(createExtractedAttributeOp(op.target, BindingKind.StyleProperty, parsedStyles[i], literal(parsedStyles[i + 1])), op);
+                        OpList.insertBefore(createExtractedAttributeOp(op.target, BindingKind.StyleProperty, parsedStyles[i], literal(parsedStyles[i + 1]), null), op);
                     }
                     OpList.remove(op);
                 }
                 else if (op.name === 'class') {
                     const parsedClasses = op.expression.value.trim().split(/\s+/g);
                     for (const parsedClass of parsedClasses) {
-                        OpList.insertBefore(createExtractedAttributeOp(op.target, BindingKind.ClassName, parsedClass, null), op);
+                        OpList.insertBefore(createExtractedAttributeOp(op.target, BindingKind.ClassName, parsedClass, null, null), op);
                     }
                     OpList.remove(op);
                 }
@@ -20565,18 +20823,30 @@ function parseExtractedStyles(job) {
 function removeContentSelectors(job) {
     for (const unit of job.units) {
         const elements = createOpXrefMap(unit);
-        for (const op of unit.update) {
+        for (const op of unit.ops()) {
             switch (op.kind) {
                 case OpKind.Binding:
                     const target = lookupInXrefMap(elements, op.target);
-                    if (op.name.toLowerCase() === 'select' && target.kind === OpKind.Projection) {
+                    if (isSelectAttribute(op.name) && target.kind === OpKind.Projection) {
                         OpList.remove(op);
                     }
                     break;
+                case OpKind.Projection:
+                    // op.attributes is an array of [attr1-name, attr1-value, attr2-name, attr2-value, ...],
+                    // find the "select" attribute and remove its name and corresponding value.
+                    for (let i = op.attributes.length - 2; i >= 0; i -= 2) {
+                        if (isSelectAttribute(op.attributes[i])) {
+                            op.attributes.splice(i, 2);
+                        }
+                    }
+                    break;
             }
         }
     }
 }
+function isSelectAttribute(name) {
+    return name.toLowerCase() === 'select';
+}
 /**
  * Looks up an element in the given map by xref ID.
  */
@@ -20696,6 +20966,10 @@ function propagateI18nBlocksToTemplates(unit, subTemplateIndex) {
                 i18nBlock = op;
                 break;
             case OpKind.I18nEnd:
+                // When we exit a root-level i18n block, reset the sub-template index counter.
+                if (i18nBlock.subTemplateIndex === null) {
+                    subTemplateIndex = 0;
+                }
                 i18nBlock = null;
                 break;
             case OpKind.Template:
@@ -21037,6 +21311,10 @@ function i18n(slot, constIndex, subTemplateIndex) {
 function i18nEnd() {
     return call(Identifiers.i18nEnd, [], null);
 }
+function i18nAttributes(slot, i18nAttributesConfig) {
+    const args = [literal(slot), literal(i18nAttributesConfig)];
+    return call(Identifiers.i18nAttributes, args, null);
+}
 function property(name, expression, sanitizer, sourceSpan) {
     const args = [literal(name), expression];
     if (sanitizer !== null) {
@@ -21423,6 +21701,12 @@ function reifyCreateOperations(unit, ops) {
             case OpKind.I18n:
                 OpList.replace(op, i18n(op.handle.slot, op.messageIndex, op.subTemplateIndex));
                 break;
+            case OpKind.I18nAttributes:
+                if (op.i18nAttributesConfig === null) {
+                    throw new Error(`AssertionError: i18nAttributesConfig was not set`);
+                }
+                OpList.replace(op, i18nAttributes(op.handle.slot, op.i18nAttributesConfig));
+                break;
             case OpKind.Template:
                 if (!(unit instanceof ViewCompilationUnit)) {
                     throw new Error(`AssertionError: must be compiling a component`);
@@ -21764,6 +22048,31 @@ function removeI18nContexts(job) {
     }
 }
 
+/**
+ * i18nAttributes ops will be generated for each i18n attribute. However, not all i18n attribues
+ * will contain dynamic content, and so some of these i18nAttributes ops may be unnecessary.
+ */
+function removeUnusedI18nAttributesOps(job) {
+    for (const unit of job.units) {
+        const ownersWithI18nExpressions = new Set();
+        for (const op of unit.update) {
+            switch (op.kind) {
+                case OpKind.I18nExpression:
+                    ownersWithI18nExpressions.add(op.i18nOwner);
+            }
+        }
+        for (const op of unit.create) {
+            switch (op.kind) {
+                case OpKind.I18nAttributes:
+                    if (ownersWithI18nExpressions.has(op.xref)) {
+                        continue;
+                    }
+                    OpList.remove(op);
+            }
+        }
+    }
+}
+
 /**
  * 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
@@ -21895,10 +22204,14 @@ function resolveI18nElementPlaceholders(job) {
     }
     resolvePlaceholdersForView(job, job.root, i18nContexts, elements);
 }
-function resolvePlaceholdersForView(job, unit, i18nContexts, elements) {
+/**
+ * Recursively resolves element and template tag placeholders in the given view.
+ */
+function resolvePlaceholdersForView(job, unit, i18nContexts, elements, pendingStructuralDirective) {
     // Track the current i18n op and corresponding i18n context op as we step through the creation
     // IR.
     let currentOps = null;
+    let pendingStructuralDirectiveCloses = new Map();
     for (const op of unit.create) {
         switch (op.kind) {
             case OpKind.I18nStart:
@@ -21917,14 +22230,14 @@ function resolvePlaceholdersForView(job, unit, i18nContexts, elements) {
                     if (currentOps === null) {
                         throw Error('i18n tag placeholder should only occur inside an i18n block');
                     }
-                    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
-                    // placeholder accounts for the start and close of the element.
-                    if (closeName === '') {
-                        flags |= I18nParamValueFlags.CloseTag;
+                    recordElementStart(op, currentOps.i18nContext, currentOps.i18nBlock, pendingStructuralDirective);
+                    // If there is a separate close tag placeholder for this element, save the pending
+                    // structural directive so we can pass it to the closing tag as well.
+                    if (pendingStructuralDirective && op.i18nPlaceholder.closeName) {
+                        pendingStructuralDirectiveCloses.set(op.xref, pendingStructuralDirective);
                     }
-                    addParam(currentOps.i18nContext.params, startName, op.handle.slot, currentOps.i18nBlock.subTemplateIndex, flags);
+                    // Clear out the pending structural directive now that its been accounted for.
+                    pendingStructuralDirective = undefined;
                 }
                 break;
             case OpKind.ElementEnd:
@@ -21933,42 +22246,134 @@ function resolvePlaceholdersForView(job, unit, i18nContexts, elements) {
                 const startOp = elements.get(op.xref);
                 if (startOp && startOp.i18nPlaceholder !== undefined) {
                     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(currentOps.i18nContext.params, closeName, startOp.handle.slot, currentOps.i18nBlock.subTemplateIndex, I18nParamValueFlags.ElementTag | I18nParamValueFlags.CloseTag);
+                        throw Error('AssertionError: i18n tag placeholder should only occur inside an i18n block');
                     }
+                    recordElementClose(startOp, currentOps.i18nContext, currentOps.i18nBlock, pendingStructuralDirectiveCloses.get(op.xref));
+                    // Clear out the pending structural directive close that was accounted for.
+                    pendingStructuralDirectiveCloses.delete(op.xref);
                 }
                 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.
+            case OpKind.Projection:
+                // For content projections with i18n placeholders, record its slot value in the params map
+                // under the corresponding tag start and close placeholders.
                 if (op.i18nPlaceholder !== undefined) {
                     if (currentOps === null) {
                         throw Error('i18n tag placeholder should only occur inside an i18n block');
                     }
-                    let startFlags = I18nParamValueFlags.TemplateTag | I18nParamValueFlags.OpenTag;
-                    const subTemplateIndex = getSubTemplateIndexForTemplateTag(job, currentOps.i18nBlock, op);
-                    const { startName, closeName } = op.i18nPlaceholder;
-                    const isSelfClosing = closeName === '';
-                    if (isSelfClosing) {
-                        startFlags |= I18nParamValueFlags.CloseTag;
-                    }
-                    addParam(currentOps.i18nContext.params, startName, op.handle.slot, subTemplateIndex, startFlags);
+                    recordElementStart(op, currentOps.i18nContext, currentOps.i18nBlock, pendingStructuralDirective);
+                    recordElementClose(op, currentOps.i18nContext, currentOps.i18nBlock, pendingStructuralDirective);
+                    // Clear out the pending structural directive now that its been accounted for.
+                    pendingStructuralDirective = undefined;
+                }
+                break;
+            case OpKind.Template:
+                if (op.i18nPlaceholder === undefined) {
+                    // If there is no i18n placeholder, just recurse into the view in case it contains i18n
+                    // blocks.
                     resolvePlaceholdersForView(job, job.views.get(op.xref), i18nContexts, elements);
-                    if (!isSelfClosing) {
-                        addParam(currentOps.i18nContext.params, closeName, op.handle.slot, subTemplateIndex, I18nParamValueFlags.TemplateTag | I18nParamValueFlags.CloseTag);
-                    }
                 }
                 else {
-                    resolvePlaceholdersForView(job, job.views.get(op.xref), i18nContexts, elements);
+                    if (currentOps === null) {
+                        throw Error('i18n tag placeholder should only occur inside an i18n block');
+                    }
+                    if (op.templateKind === TemplateKind.Structural) {
+                        // If this is a structural directive template, don't record anything yet. Instead pass
+                        // the current template as a pending structural directive to be recorded when we find
+                        // the element, content, or template it belongs to. This allows us to create combined
+                        // values that represent, e.g. the start of a template and element at the same time.
+                        resolvePlaceholdersForView(job, job.views.get(op.xref), i18nContexts, elements, op);
+                    }
+                    else {
+                        // If this is some other kind of template, we can record its start, recurse into its
+                        // view, and then record its end.
+                        recordTemplateStart(job, op, currentOps.i18nContext, currentOps.i18nBlock, pendingStructuralDirective);
+                        resolvePlaceholdersForView(job, job.views.get(op.xref), i18nContexts, elements);
+                        recordTemplateClose(job, op, currentOps.i18nContext, currentOps.i18nBlock, pendingStructuralDirective);
+                        pendingStructuralDirective = undefined;
+                    }
                 }
                 break;
         }
     }
 }
+/**
+ * Records an i18n param value for the start of an element.
+ */
+function recordElementStart(op, i18nContext, i18nBlock, structuralDirective) {
+    const { startName, closeName } = op.i18nPlaceholder;
+    let flags = I18nParamValueFlags.ElementTag | I18nParamValueFlags.OpenTag;
+    let value = op.handle.slot;
+    // If the element is associated with a structural directive, start it as well.
+    if (structuralDirective !== undefined) {
+        flags |= I18nParamValueFlags.TemplateTag;
+        value = { element: value, template: structuralDirective.handle.slot };
+    }
+    // For self-closing tags, there is no close tag placeholder. Instead, the start tag
+    // placeholder accounts for the start and close of the element.
+    if (!closeName) {
+        flags |= I18nParamValueFlags.CloseTag;
+    }
+    addParam(i18nContext.params, startName, value, i18nBlock.subTemplateIndex, flags);
+}
+/**
+ * Records an i18n param value for the closing of an element.
+ */
+function recordElementClose(op, i18nContext, i18nBlock, structuralDirective) {
+    const { closeName } = op.i18nPlaceholder;
+    // Self-closing tags don't have a closing tag placeholder, instead the element closing is
+    // recorded via an additional flag on the element start value.
+    if (closeName) {
+        let flags = I18nParamValueFlags.ElementTag | I18nParamValueFlags.CloseTag;
+        let value = op.handle.slot;
+        // If the element is associated with a structural directive, close it as well.
+        if (structuralDirective !== undefined) {
+            flags |= I18nParamValueFlags.TemplateTag;
+            value = { element: value, template: structuralDirective.handle.slot };
+        }
+        addParam(i18nContext.params, closeName, value, i18nBlock.subTemplateIndex, flags);
+    }
+}
+/**
+ * Records an i18n param value for the start of a template.
+ */
+function recordTemplateStart(job, op, i18nContext, i18nBlock, structuralDirective) {
+    let { startName, closeName } = op.i18nPlaceholder;
+    let flags = I18nParamValueFlags.TemplateTag | I18nParamValueFlags.OpenTag;
+    // For self-closing tags, there is no close tag placeholder. Instead, the start tag
+    // placeholder accounts for the start and close of the element.
+    if (!closeName) {
+        flags |= I18nParamValueFlags.CloseTag;
+    }
+    // If the template is associated with a structural directive, record the structural directive's
+    // start first. Since this template must be in the structural directive's view, we can just
+    // directly use the current i18n block's sub-template index.
+    if (structuralDirective !== undefined) {
+        addParam(i18nContext.params, startName, structuralDirective.handle.slot, i18nBlock.subTemplateIndex, flags);
+    }
+    // Record the start of the template. For the sub-template index, pass the index for the template's
+    // view, rather than the current i18n block's index.
+    addParam(i18nContext.params, startName, op.handle.slot, getSubTemplateIndexForTemplateTag(job, i18nBlock, op), flags);
+}
+/**
+ * Records an i18n param value for the closing of a template.
+ */
+function recordTemplateClose(job, op, i18nContext, i18nBlock, structuralDirective) {
+    const { startName, closeName } = op.i18nPlaceholder;
+    const flags = I18nParamValueFlags.TemplateTag | I18nParamValueFlags.CloseTag;
+    // Self-closing tags don't have a closing tag placeholder, instead the template's closing is
+    // recorded via an additional flag on the template start value.
+    if (closeName) {
+        // Record the closing of the template. For the sub-template index, pass the index for the
+        // template's view, rather than the current i18n block's index.
+        addParam(i18nContext.params, closeName, op.handle.slot, getSubTemplateIndexForTemplateTag(job, i18nBlock, op), flags);
+        // If the template is associated with a structural directive, record the structural directive's
+        // closing after. Since this template must be in the structural directive's view, we can just
+        // directly use the current i18n block's sub-template index.
+        if (structuralDirective !== undefined) {
+            addParam(i18nContext.params, closeName, structuralDirective.handle.slot, i18nBlock.subTemplateIndex, flags);
+        }
+    }
+}
 /**
  * Get the subTemplateIndex for the given template op. For template ops, use the subTemplateIndex of
  * the child i18n block inside the template.
@@ -21981,7 +22386,9 @@ function getSubTemplateIndexForTemplateTag(job, i18nOp, op) {
     }
     return i18nOp.subTemplateIndex;
 }
-/** Add a param value to the given params map. */
+/**
+ * Add a param value to the given params map.
+ */
 function addParam(params, placeholder, value, subTemplateIndex, flags) {
     const values = params.get(placeholder) ?? [];
     values.push({ value, subTemplateIndex, flags });
@@ -22007,14 +22414,19 @@ function resolveI18nExpressionPlaceholders(job) {
             }
         }
     }
-    // Keep track of the next available expression index per i18n block.
+    // Keep track of the next available expression index for each i18n message.
     const expressionIndices = new Map();
+    // Keep track of a reference index for each expression.
+    // We use different references for normal i18n expressio and attribute i18n expressions. This is
+    // because child i18n blocks in templates don't get their own context, since they're rolled into
+    // the translated message of the parent, but they may target a different slot.
+    const referenceIndex = (op) => op.usage === I18nExpressionFor.I18nText ? op.i18nOwner : op.context;
     for (const unit of job.units) {
         for (const op of unit.update) {
             if (op.kind === OpKind.I18nExpression) {
                 const i18nContext = i18nContexts.get(op.context);
-                const index = expressionIndices.get(op.target) || 0;
-                const subTemplateIndex = subTemplateIndicies.get(op.target);
+                const index = expressionIndices.get(referenceIndex(op)) || 0;
+                const subTemplateIndex = subTemplateIndicies.get(op.i18nOwner) ?? null;
                 // Add the expression index in the appropriate params map.
                 const params = op.resolutionTime === I18nParamResolutionTime.Creation ?
                     i18nContext.params :
@@ -22026,7 +22438,7 @@ function resolveI18nExpressionPlaceholders(job) {
                     flags: I18nParamValueFlags.ExpressionIndex
                 });
                 params.set(op.i18nPlaceholder, values);
-                expressionIndices.set(op.target, index + 1);
+                expressionIndices.set(referenceIndex(op), index + 1);
             }
         }
     }
@@ -23173,11 +23585,11 @@ const phases = [
     { 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: specializeStyleBindings },
+    { kind: CompilationJobKind.Both, fn: specializeBindings },
     { kind: CompilationJobKind.Both, fn: extractAttributes },
     { kind: CompilationJobKind.Both, fn: parseExtractedStyles },
     { kind: CompilationJobKind.Tmpl, fn: removeEmptyBindings },
@@ -23186,7 +23598,10 @@ const phases = [
     { kind: CompilationJobKind.Tmpl, fn: generateConditionalExpressions },
     { kind: CompilationJobKind.Tmpl, fn: createPipes },
     { kind: CompilationJobKind.Tmpl, fn: configureDeferInstructions },
-    { kind: CompilationJobKind.Tmpl, fn: extractI18nText },
+    { kind: CompilationJobKind.Tmpl, fn: convertI18nText },
+    { kind: CompilationJobKind.Tmpl, fn: convertI18nBindings },
+    { kind: CompilationJobKind.Tmpl, fn: removeUnusedI18nAttributesOps },
+    { kind: CompilationJobKind.Tmpl, fn: assignI18nSlotDependencies },
     { kind: CompilationJobKind.Tmpl, fn: applyI18nExpressions },
     { kind: CompilationJobKind.Tmpl, fn: createVariadicPipes },
     { kind: CompilationJobKind.Both, fn: generatePureLiteralStructures },
@@ -23216,7 +23631,6 @@ const phases = [
     { 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 },
@@ -23371,7 +23785,7 @@ function ingestHostProperty(job, property, isTextAttribute) {
     let expression;
     const ast = property.expression.ast;
     if (ast instanceof Interpolation$1) {
-        expression = new Interpolation(ast.strings, ast.expressions.map(expr => convertAst(expr, job, property.sourceSpan)));
+        expression = new Interpolation(ast.strings, ast.expressions.map(expr => convertAst(expr, job, property.sourceSpan)), []);
     }
     else {
         expression = convertAst(ast, job, property.sourceSpan);
@@ -23386,10 +23800,11 @@ function ingestHostProperty(job, property, isTextAttribute) {
         bindingKind = BindingKind.Animation;
     }
     job.root.update.push(createBindingOp(job.root.xref, bindingKind, property.name, expression, null, SecurityContext
-        .NONE /* TODO: what should we pass as security context? Passing NONE for now. */, isTextAttribute, false, property.sourceSpan));
+        .NONE /* TODO: what should we pass as security context? Passing NONE for now. */, isTextAttribute, false, /* TODO: How do Host bindings handle i18n attrs? */ null, property.sourceSpan));
 }
 function ingestHostAttribute(job, name, value) {
     const attrBinding = createBindingOp(job.root.xref, BindingKind.Attribute, name, value, null, SecurityContext.NONE, true, false, 
+    /* TODO */ null, 
     /* TODO: host attribute source spans */ null);
     job.root.update.push(attrBinding);
 }
@@ -23487,10 +23902,11 @@ function ingestTemplate(unit, tmpl) {
     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);
+    const templateKind = isPlainTemplate(tmpl) ? TemplateKind.NgTemplate : TemplateKind.Structural;
+    const templateOp = createTemplateOp(childView.xref, templateKind, tagNameWithoutNamespace, functionNameSuffix, namespace, i18nPlaceholder, tmpl.startSourceSpan);
+    unit.create.push(templateOp);
+    ingestBindings(unit, templateOp, tmpl);
+    ingestReferences(templateOp, tmpl);
     ingestNodes(childView, tmpl.children);
     for (const { name, value } of tmpl.variables) {
         childView.contextVariables.set(name, value !== '' ? value : '$implicit');
@@ -23498,7 +23914,7 @@ function ingestTemplate(unit, tmpl) {
     // If this is a plain template and there is an i18n message associated with it, insert i18n start
     // and end ops. For structural directive templates, the i18n ops will be added when ingesting the
     // element/template the directive is placed on.
-    if (isPlainTemplate(tmpl) && tmpl.i18n instanceof Message) {
+    if (templateKind === TemplateKind.NgTemplate && tmpl.i18n instanceof Message) {
         const id = unit.job.allocateXrefId();
         OpList.insertAfter(createI18nStartOp(id, tmpl.i18n), childView.create.head);
         OpList.insertBefore(createI18nEndOp(id), childView.create.tail);
@@ -23508,9 +23924,13 @@ function ingestTemplate(unit, tmpl) {
  * Ingest a literal text node from the AST into the given `ViewCompilation`.
  */
 function ingestContent(unit, content) {
-    const op = createProjectionOp(unit.job.allocateXrefId(), content.selector, content.sourceSpan);
+    if (content.i18n !== undefined && !(content.i18n instanceof TagPlaceholder)) {
+        throw Error(`Unhandled i18n metadata type for element: ${content.i18n.constructor.name}`);
+    }
+    const attrs = content.attributes.flatMap(a => [a.name, a.value]);
+    const op = createProjectionOp(unit.job.allocateXrefId(), content.selector, content.i18n, attrs, content.sourceSpan);
     for (const attr of content.attributes) {
-        ingestBinding(unit, op.xref, attr.name, literal(attr.value), 1 /* e.BindingType.Attribute */, null, SecurityContext.NONE, attr.sourceSpan, BindingFlags.TextValue);
+        ingestBinding(unit, op.xref, attr.name, literal(attr.value), 1 /* e.BindingType.Attribute */, null, SecurityContext.NONE, attr.sourceSpan, BindingFlags.TextValue, attr.i18n);
     }
     unit.create.push(op);
 }
@@ -23535,6 +23955,7 @@ function ingestBoundText(unit, text, i18nPlaceholders) {
         throw Error(`Unhandled i18n metadata type for text interpolation: ${text.i18n?.constructor.name}`);
     }
     if (i18nPlaceholders === undefined) {
+        // TODO: We probably can just use the placeholders field, instead of walking the AST.
         i18nPlaceholders = text.i18n instanceof Container ?
             text.i18n.children
                 .filter((node) => node instanceof Placeholder)
@@ -23550,7 +23971,7 @@ function ingestBoundText(unit, text, i18nPlaceholders) {
     // interpolation. We copy that behavior in compatibility mode.
     // TODO: is it actually correct to generate these extra maps in modern mode?
     const baseSourceSpan = unit.job.compatibility ? null : text.sourceSpan;
-    unit.update.push(createInterpolateTextOp(textXref, new Interpolation(value.strings, value.expressions.map(expr => convertAst(expr, unit.job, baseSourceSpan))), i18nPlaceholders, text.sourceSpan));
+    unit.update.push(createInterpolateTextOp(textXref, new Interpolation(value.strings, value.expressions.map(expr => convertAst(expr, unit.job, baseSourceSpan)), i18nPlaceholders), text.sourceSpan));
 }
 /**
  * Ingest an `@if` block into the given `ViewCompilation`.
@@ -23571,14 +23992,21 @@ function ingestIfBlock(unit, ifBlock) {
         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);
+        let ifCaseI18nMeta = undefined;
+        if (ifCase.i18n !== undefined) {
+            if (!(ifCase.i18n instanceof BlockPlaceholder)) {
+                throw Error(`Unhandled i18n metadata type for if block: ${ifCase.i18n?.constructor.name}`);
+            }
+            ifCaseI18nMeta = ifCase.i18n;
+        }
+        const templateOp = createTemplateOp(cView.xref, TemplateKind.Block, tagName, 'Conditional', Namespace.HTML, ifCaseI18nMeta, ifCase.sourceSpan);
+        unit.create.push(templateOp);
         if (firstXref === null) {
             firstXref = cView.xref;
-            firstSlotHandle = tmplOp.handle;
+            firstSlotHandle = templateOp.handle;
         }
         const caseExpr = ifCase.expression ? convertAst(ifCase.expression, unit.job, null) : null;
-        const conditionalCaseExpr = new ConditionalCaseExpr(caseExpr, tmplOp.xref, tmplOp.handle, ifCase.expressionAlias);
+        const conditionalCaseExpr = new ConditionalCaseExpr(caseExpr, templateOp.xref, templateOp.handle, ifCase.expressionAlias);
         conditions.push(conditionalCaseExpr);
         ingestNodes(cView, ifCase.children);
     }
@@ -23594,16 +24022,23 @@ function ingestSwitchBlock(unit, switchBlock) {
     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);
+        let switchCaseI18nMeta = undefined;
+        if (switchCase.i18n !== undefined) {
+            if (!(switchCase.i18n instanceof BlockPlaceholder)) {
+                throw Error(`Unhandled i18n metadata type for switch block: ${switchCase.i18n?.constructor.name}`);
+            }
+            switchCaseI18nMeta = switchCase.i18n;
+        }
+        const templateOp = createTemplateOp(cView.xref, TemplateKind.Block, null, 'Case', Namespace.HTML, switchCaseI18nMeta, switchCase.sourceSpan);
+        unit.create.push(templateOp);
         if (firstXref === null) {
             firstXref = cView.xref;
-            firstSlotHandle = tmplOp.handle;
+            firstSlotHandle = templateOp.handle;
         }
         const caseExpr = switchCase.expression ?
             convertAst(switchCase.expression, unit.job, switchBlock.startSourceSpan) :
             null;
-        const conditionalCaseExpr = new ConditionalCaseExpr(caseExpr, tmplOp.xref, tmplOp.handle);
+        const conditionalCaseExpr = new ConditionalCaseExpr(caseExpr, templateOp.xref, templateOp.handle);
         conditions.push(conditionalCaseExpr);
         ingestNodes(cView, switchCase.children);
     }
@@ -23616,7 +24051,7 @@ function ingestDeferView(unit, suffix, children, sourceSpan) {
     }
     const secondaryView = unit.job.allocateView(unit.xref);
     ingestNodes(secondaryView, children);
-    const templateOp = createTemplateOp(secondaryView.xref, null, `Defer${suffix}`, Namespace.HTML, undefined, sourceSpan);
+    const templateOp = createTemplateOp(secondaryView.xref, TemplateKind.Block, null, `Defer${suffix}`, Namespace.HTML, undefined, sourceSpan);
     unit.create.push(templateOp);
     return templateOp;
 }
@@ -23711,12 +24146,7 @@ function ingestIcu(unit, icu) {
         const xref = unit.job.allocateXrefId();
         const icuNode = icu.i18n.nodes[0];
         unit.create.push(createIcuStartOp(xref, icu.i18n, icuFromI18nMessage(icu.i18n).name, null));
-        const expressionPlaceholder = icuNode.expressionPlaceholder?.trimEnd();
-        if (expressionPlaceholder === undefined || icu.vars[expressionPlaceholder] === undefined) {
-            throw Error('ICU should have a text binding');
-        }
-        ingestBoundText(unit, icu.vars[expressionPlaceholder], [expressionPlaceholder]);
-        for (const [placeholder, text] of Object.entries(icu.placeholders)) {
+        for (const [placeholder, text] of Object.entries({ ...icu.vars, ...icu.placeholders })) {
             if (text instanceof BoundText) {
                 ingestBoundText(unit, text, [placeholder]);
             }
@@ -23812,6 +24242,16 @@ function convertAst(ast, job, baseSourceSpan) {
     else if (ast instanceof LiteralPrimitive) {
         return literal(ast.value, undefined, convertSourceSpan(ast.span, baseSourceSpan));
     }
+    else if (ast instanceof Unary) {
+        switch (ast.operator) {
+            case '+':
+                return new UnaryOperatorExpr(UnaryOperator.Plus, convertAst(ast.expr, job, baseSourceSpan), undefined, convertSourceSpan(ast.span, baseSourceSpan));
+            case '-':
+                return new UnaryOperatorExpr(UnaryOperator.Minus, convertAst(ast.expr, job, baseSourceSpan), undefined, convertSourceSpan(ast.span, baseSourceSpan));
+            default:
+                throw new Error(`AssertionError: unknown unary operator ${ast.operator}`);
+        }
+    }
     else if (ast instanceof Binary) {
         const operator = BINARY_OPERATORS.get(ast.operation);
         if (operator === undefined) {
@@ -23870,6 +24310,9 @@ function convertAst(ast, job, baseSourceSpan) {
     else if (ast instanceof EmptyExpr$1) {
         return new EmptyExpr(convertSourceSpan(ast.span, baseSourceSpan));
     }
+    else if (ast instanceof PrefixNot) {
+        return not(convertAst(ast.expression, job, baseSourceSpan), convertSourceSpan(ast.span, baseSourceSpan));
+    }
     else {
         throw new Error(`Unhandled expression type "${ast.constructor.name}" in file "${baseSourceSpan?.start.file.url}"`);
     }
@@ -23900,6 +24343,7 @@ function isPlainTemplate(tmpl) {
  */
 function ingestBindings(unit, op, element) {
     let flags = BindingFlags.None;
+    let hasI18nAttributes = false;
     if (element instanceof Template) {
         flags |= BindingFlags.OnNgTemplateElement;
         if (element instanceof Template && isPlainTemplate(element)) {
@@ -23908,10 +24352,12 @@ function ingestBindings(unit, op, element) {
         const templateAttrFlags = flags | BindingFlags.BindingTargetsTemplate | BindingFlags.IsStructuralTemplateAttribute;
         for (const attr of element.templateAttrs) {
             if (attr instanceof TextAttribute) {
-                ingestBinding(unit, op.xref, attr.name, literal(attr.value), 1 /* e.BindingType.Attribute */, null, SecurityContext.NONE, attr.sourceSpan, templateAttrFlags | BindingFlags.TextValue);
+                ingestBinding(unit, op.xref, attr.name, literal(attr.value), 1 /* e.BindingType.Attribute */, null, SecurityContext.NONE, attr.sourceSpan, templateAttrFlags | BindingFlags.TextValue, attr.i18n);
+                hasI18nAttributes ||= attr.i18n !== undefined;
             }
             else {
-                ingestBinding(unit, op.xref, attr.name, attr.value, attr.type, attr.unit, attr.securityContext, attr.sourceSpan, templateAttrFlags);
+                ingestBinding(unit, op.xref, attr.name, attr.value, attr.type, attr.unit, attr.securityContext, attr.sourceSpan, templateAttrFlags, attr.i18n);
+                hasI18nAttributes ||= attr.i18n !== undefined;
             }
         }
     }
@@ -23919,10 +24365,12 @@ function ingestBindings(unit, op, element) {
         // This is only attribute TextLiteral bindings, such as `attr.foo="bar"`. This can never be
         // `[attr.foo]="bar"` or `attr.foo="{{bar}}"`, both of which will be handled as inputs with
         // `BindingType.Attribute`.
-        ingestBinding(unit, op.xref, attr.name, literal(attr.value), 1 /* e.BindingType.Attribute */, null, SecurityContext.NONE, attr.sourceSpan, flags | BindingFlags.TextValue);
+        ingestBinding(unit, op.xref, attr.name, literal(attr.value), 1 /* e.BindingType.Attribute */, null, SecurityContext.NONE, attr.sourceSpan, flags | BindingFlags.TextValue, attr.i18n);
+        hasI18nAttributes ||= attr.i18n !== undefined;
     }
     for (const input of element.inputs) {
-        ingestBinding(unit, op.xref, input.name, input.value, input.type, input.unit, input.securityContext, input.sourceSpan, flags);
+        ingestBinding(unit, op.xref, input.name, input.value, input.type, input.unit, input.securityContext, input.sourceSpan, flags, input.i18n);
+        hasI18nAttributes ||= input.i18n !== undefined;
     }
     for (const output of element.outputs) {
         let listenerOp;
@@ -23932,7 +24380,7 @@ function ingestBindings(unit, op, element) {
             }
         }
         if (element instanceof Template && !isPlainTemplate(element)) {
-            unit.create.push(createExtractedAttributeOp(op.xref, BindingKind.Property, output.name, null));
+            unit.create.push(createExtractedAttributeOp(op.xref, BindingKind.Property, output.name, null, null));
             continue;
         }
         listenerOp = createListenerOp(op.xref, op.handle, output.name, op.tag, output.phase, false, output.sourceSpan);
@@ -23961,6 +24409,10 @@ function ingestBindings(unit, op, element) {
         listenerOp.handlerOps.push(createStatementOp(new ReturnStatement(returnExpr, returnExpr.sourceSpan)));
         unit.create.push(listenerOp);
     }
+    // TODO: Perhaps we could do this in a phase? (It likely wouldn't change the slot indices.)
+    if (hasI18nAttributes) {
+        unit.create.push(createI18nAttributesOp(unit.job.allocateXrefId(), new SlotHandle(), op.xref));
+    }
 }
 const BINDING_KINDS = new Map([
     [0 /* e.BindingType.Property */, BindingKind.Property],
@@ -23989,22 +24441,34 @@ var BindingFlags;
      */
     BindingFlags[BindingFlags["OnNgTemplateElement"] = 8] = "OnNgTemplateElement";
 })(BindingFlags || (BindingFlags = {}));
-function ingestBinding(view, xref, name, value, type, unit, securityContext, sourceSpan, flags) {
+function ingestBinding(view, xref, name, value, type, unit, securityContext, sourceSpan, flags, i18nMeta) {
     if (value instanceof ASTWithSource) {
         value = value.ast;
     }
+    let i18nContext = null;
+    if (i18nMeta !== undefined) {
+        if (!(i18nMeta instanceof Message)) {
+            throw Error(`Unhandled i18n metadata type for binding: ${i18nMeta.constructor.name}`);
+        }
+        i18nContext = view.job.allocateXrefId();
+        view.create.push(createI18nContextOp(I18nContextKind.Attr, i18nContext, null, i18nMeta, null));
+    }
     if (flags & BindingFlags.OnNgTemplateElement && !(flags & BindingFlags.BindingTargetsTemplate) &&
         type === 0 /* e.BindingType.Property */) {
         // This binding only exists for later const extraction, and is not an actual binding to be
         // created.
-        view.create.push(createExtractedAttributeOp(xref, BindingKind.Property, name, null));
+        view.create.push(createExtractedAttributeOp(xref, BindingKind.Property, name, null, i18nContext));
         return;
     }
     let expression;
     // TODO: We could easily generate source maps for subexpressions in these cases, but
     // TemplateDefinitionBuilder does not. Should we do so?
     if (value instanceof Interpolation$1) {
-        expression = new Interpolation(value.strings, value.expressions.map(expr => convertAst(expr, view.job, null)));
+        let i18nPlaceholders = [];
+        if (i18nMeta !== undefined) {
+            i18nPlaceholders = Object.keys(i18nMeta.placeholders);
+        }
+        expression = new Interpolation(value.strings, value.expressions.map(expr => convertAst(expr, view.job, null)), i18nPlaceholders);
     }
     else if (value instanceof AST) {
         expression = convertAst(value, view.job, null);
@@ -24013,7 +24477,7 @@ function ingestBinding(view, xref, name, value, type, unit, securityContext, sou
         expression = value;
     }
     const kind = BINDING_KINDS.get(type);
-    view.update.push(createBindingOp(xref, kind, name, expression, unit, securityContext, !!(flags & BindingFlags.TextValue), !!(flags & BindingFlags.IsStructuralTemplateAttribute), sourceSpan));
+    view.update.push(createBindingOp(xref, kind, name, expression, unit, securityContext, !!(flags & BindingFlags.TextValue), !!(flags & BindingFlags.IsStructuralTemplateAttribute), i18nContext, sourceSpan));
 }
 /**
  * Process all of the local references on an element-like structure in the template AST and
@@ -24101,7 +24565,7 @@ function ingestControlFlowInsertionPoint(unit, xref, node) {
     // 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);
+            ingestBinding(unit, xref, attr.name, literal(attr.value), 1 /* e.BindingType.Attribute */, null, SecurityContext.NONE, attr.sourceSpan, BindingFlags.TextValue, attr.i18n);
         }
         const tagName = root instanceof Element$1 ? root.name : root.tagName;
         // Don't pass along `ng-template` tag name since it enables directive matching.
@@ -27184,7 +27648,7 @@ class TemplateDefinitionBuilder {
                     else {
                         // ... otherwise we need to activate post-processing
                         // to replace ICU placeholders with proper values
-                        const placeholder = wrapI18nPlaceholder(`${I18N_ICU_MAPPING_PREFIX}${key}`);
+                        const placeholder = wrapI18nPlaceholder(`${I18N_ICU_MAPPING_PREFIX$1}${key}`);
                         params[key] = literal(placeholder);
                         icuMapping[key] = literalArr(refs);
                     }
@@ -29544,6 +30008,8 @@ function createHostBindingsFunction(hostBindingsMetadata, typeSourceSpan, bindin
         }
         return emitHostBindingFunction(hostJob);
     }
+    let bindingId = 0;
+    const getNextBindingId = () => `${bindingId++}`;
     const bindingContext = variable(CONTEXT_NAME);
     const styleBuilder = new StylingBuilder(bindingContext);
     const { styleAttr, classAttr } = hostBindingsMetadata.specialAttributes;
@@ -29596,7 +30062,7 @@ function createHostBindingsFunction(hostBindingsMetadata, typeSourceSpan, bindin
     for (const binding of allOtherBindings) {
         // resolve literal arrays and literal objects
         const value = binding.expression.visit(getValueConverter());
-        const bindingExpr = bindingFn(bindingContext, value);
+        const bindingExpr = bindingFn(bindingContext, value, getNextBindingId);
         const { bindingName, instruction, isAttribute } = getBindingNameAndInstruction(binding);
         const securityContexts = bindingParser.calcPossibleSecurityContexts(selector, bindingName, isAttribute)
             .filter(context => context !== SecurityContext.NONE);
@@ -29675,10 +30141,12 @@ function createHostBindingsFunction(hostBindingsMetadata, typeSourceSpan, bindin
                 // at the top of this method when all the input bindings were counted.
                 totalHostVarsCount +=
                     Math.max(call.allocateBindingSlots - MIN_STYLING_BINDING_SLOTS_REQUIRED, 0);
+                const { params, stmts } = convertStylingCall(call, bindingContext, bindingFn, getNextBindingId);
+                updateVariables.push(...stmts);
                 updateInstructions.push({
                     reference: instruction.reference,
-                    paramsOrFn: convertStylingCall(call, bindingContext, bindingFn),
-                    span: null
+                    paramsOrFn: params,
+                    span: null,
                 });
             }
         });
@@ -29699,11 +30167,19 @@ function createHostBindingsFunction(hostBindingsMetadata, typeSourceSpan, bindin
     }
     return null;
 }
-function bindingFn(implicit, value) {
-    return convertPropertyBinding(null, implicit, value, 'b');
+function bindingFn(implicit, value, getNextBindingIdFn) {
+    return convertPropertyBinding(null, implicit, value, getNextBindingIdFn());
 }
-function convertStylingCall(call, bindingContext, bindingFn) {
-    return call.params(value => bindingFn(bindingContext, value).currValExpr);
+function convertStylingCall(call, bindingContext, bindingFn, getNextBindingIdFn) {
+    const stmts = [];
+    const params = call.params(value => {
+        const result = bindingFn(bindingContext, value, getNextBindingIdFn);
+        if (Array.isArray(result.stmts) && result.stmts.length > 0) {
+            stmts.push(...result.stmts);
+        }
+        return result.currValExpr;
+    });
+    return { params, stmts };
 }
 function getBindingNameAndInstruction(binding) {
     let bindingName = binding.name;
@@ -31279,7 +31755,7 @@ function publishFacade(global) {
  * @description
  * Entry point for all public APIs of the compiler package.
  */
-const VERSION = new Version('17.1.0-next.2');
+const VERSION = new Version('17.1.0-next.3');
 
 class CompilerConfig {
     constructor({ defaultEncapsulation = ViewEncapsulation.Emulated, preserveWhitespaces, strictInjectionParameters } = {}) {
@@ -32845,7 +33321,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.1.0-next.2'));
+    definitionMap.set('version', literal('17.1.0-next.3'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', metadata.type);
     definitionMap.set('decorators', metadata.decorators);
@@ -32953,7 +33429,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.1.0-next.2'));
+    definitionMap.set('version', literal('17.1.0-next.3'));
     // e.g. `type: MyDirective`
     definitionMap.set('type', meta.type.value);
     if (meta.isStandalone) {
@@ -33230,7 +33706,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.1.0-next.2'));
+    definitionMap.set('version', literal('17.1.0-next.3'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', meta.type.value);
     definitionMap.set('deps', compileDependencies(meta.deps));
@@ -33265,7 +33741,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.1.0-next.2'));
+    definitionMap.set('version', literal('17.1.0-next.3'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', meta.type.value);
     // Only generate providedIn property if it has a non-null value
@@ -33316,7 +33792,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.1.0-next.2'));
+    definitionMap.set('version', literal('17.1.0-next.3'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', meta.type.value);
     definitionMap.set('providers', meta.providers);
@@ -33349,7 +33825,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.1.0-next.2'));
+    definitionMap.set('version', literal('17.1.0-next.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.
@@ -33400,7 +33876,7 @@ function compileDeclarePipeFromMetadata(meta) {
 function createPipeDefinitionMap(meta) {
     const definitionMap = new DefinitionMap();
     definitionMap.set('minVersion', literal(MINIMUM_PARTIAL_LINKER_VERSION));
-    definitionMap.set('version', literal('17.1.0-next.2'));
+    definitionMap.set('version', literal('17.1.0-next.3'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     // e.g. `type: MyPipe`
     definitionMap.set('type', meta.type.value);