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

package/fesm2022/compiler.mjs

@@ -1,5 +1,5 @@
 /**
- * @license Angular v17.1.0-next.1
+ * @license Angular v17.1.0-next.3
  * (c) 2010-2022 Google LLC. https://angular.io/
  * License: MIT
  */
@@ -3679,6 +3679,41 @@ function getInjectFn(target) {
     }
 }
 
+var TagContentType;
+(function (TagContentType) {
+    TagContentType[TagContentType["RAW_TEXT"] = 0] = "RAW_TEXT";
+    TagContentType[TagContentType["ESCAPABLE_RAW_TEXT"] = 1] = "ESCAPABLE_RAW_TEXT";
+    TagContentType[TagContentType["PARSABLE_DATA"] = 2] = "PARSABLE_DATA";
+})(TagContentType || (TagContentType = {}));
+function splitNsName(elementName) {
+    if (elementName[0] != ':') {
+        return [null, elementName];
+    }
+    const colonIndex = elementName.indexOf(':', 1);
+    if (colonIndex === -1) {
+        throw new Error(`Unsupported format "${elementName}" expecting ":namespace:name"`);
+    }
+    return [elementName.slice(1, colonIndex), elementName.slice(colonIndex + 1)];
+}
+// `<ng-container>` tags work the same regardless the namespace
+function isNgContainer(tagName) {
+    return splitNsName(tagName)[1] === 'ng-container';
+}
+// `<ng-content>` tags work the same regardless the namespace
+function isNgContent(tagName) {
+    return splitNsName(tagName)[1] === 'ng-content';
+}
+// `<ng-template>` tags work the same regardless the namespace
+function isNgTemplate(tagName) {
+    return splitNsName(tagName)[1] === 'ng-template';
+}
+function getNsPrefix(fullName) {
+    return fullName === null ? null : splitNsName(fullName)[0];
+}
+function mergeNsAndName(prefix, localName) {
+    return prefix ? `:${prefix}:${localName}` : localName;
+}
+
 /**
  * This is an R3 `Node`-like wrapper for a raw `html.Comment` node. We do not currently
  * require the implementation of a visitor for Comments as they are only collected at
@@ -4677,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) {
@@ -5019,6 +5054,26 @@ class DefinitionMap {
         return literalMap(this.values);
     }
 }
+/**
+ * Creates a `CssSelector` from an AST node.
+ */
+function createCssSelectorFromNode(node) {
+    const elementName = node instanceof Element$1 ? node.name : 'ng-template';
+    const attributes = getAttrsForDirectiveMatching(node);
+    const cssSelector = new CssSelector();
+    const elementNameNoNs = splitNsName(elementName)[1];
+    cssSelector.setElement(elementNameNoNs);
+    Object.getOwnPropertyNames(attributes).forEach((name) => {
+        const nameNoNs = splitNsName(name)[1];
+        const value = attributes[name];
+        cssSelector.addAttribute(nameNoNs, value);
+        if (name.toLowerCase() === 'class') {
+            const classes = value.trim().split(/\s+/);
+            classes.forEach(className => cssSelector.addClassName(className));
+        }
+    });
+    return cssSelector;
+}
 /**
  * Extract a map of properties to values for a given element or template node, which can be used
  * by the directive matching machinery.
@@ -8915,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.
@@ -9136,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.
@@ -9195,6 +9268,21 @@ var DerivedRepeaterVarIdentity;
     DerivedRepeaterVarIdentity[DerivedRepeaterVarIdentity["Even"] = 2] = "Even";
     DerivedRepeaterVarIdentity[DerivedRepeaterVarIdentity["Odd"] = 3] = "Odd";
 })(DerivedRepeaterVarIdentity || (DerivedRepeaterVarIdentity = {}));
+/**
+ * Kinds of i18n contexts. They can be created because of root i18n blocks, or ICUs.
+ */
+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`.
@@ -9302,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,
@@ -9315,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,
@@ -9333,7 +9424,8 @@ function createBindingOp(target, kind, name, expression, unit, securityContext,
         unit,
         securityContext,
         isTextAttribute,
-        isTemplate,
+        isStructuralTemplate: isStructuralTemplate,
+        i18nContext,
         sourceSpan,
         ...NEW_OP,
     };
@@ -9341,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,
@@ -9350,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,
@@ -9415,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,
@@ -9424,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,
@@ -9485,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,
@@ -9501,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,
@@ -10310,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:
@@ -10330,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);
     }
@@ -10381,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.
@@ -10722,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(),
@@ -10848,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,
@@ -10865,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,
     };
 }
@@ -10914,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,
@@ -10979,9 +11087,13 @@ function createIcuEndOp(xref) {
         ...NEW_OP,
     };
 }
-function createI18nContextOp(xref, i18nBlock, message, sourceSpan) {
+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,
         xref,
         i18nBlock,
         message,
@@ -10991,6 +11103,17 @@ function createI18nContextOp(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));
@@ -10998,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,
@@ -11240,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);
             }
         }
     }
@@ -11253,21 +11377,37 @@ 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();
-    const i18nContexts = new Map();
     let lastSlotConsumer = null;
     let currentI18nOp = null;
     for (const unit of job.units) {
@@ -11281,21 +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;
-                case OpKind.I18nContext:
-                    i18nContexts.set(op.xref, op);
-                    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) {
-                const i18nContext = i18nContexts.get(op.context);
-                op.target = i18nLastSlotConsumers.get(i18nContext.i18nBlock);
+            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);
+        }
     }
 }
 
@@ -11327,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.
@@ -11391,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.
@@ -11438,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:
@@ -11624,41 +11811,6 @@ function generateConditionalExpressions(job) {
     }
 }
 
-var TagContentType;
-(function (TagContentType) {
-    TagContentType[TagContentType["RAW_TEXT"] = 0] = "RAW_TEXT";
-    TagContentType[TagContentType["ESCAPABLE_RAW_TEXT"] = 1] = "ESCAPABLE_RAW_TEXT";
-    TagContentType[TagContentType["PARSABLE_DATA"] = 2] = "PARSABLE_DATA";
-})(TagContentType || (TagContentType = {}));
-function splitNsName(elementName) {
-    if (elementName[0] != ':') {
-        return [null, elementName];
-    }
-    const colonIndex = elementName.indexOf(':', 1);
-    if (colonIndex === -1) {
-        throw new Error(`Unsupported format "${elementName}" expecting ":namespace:name"`);
-    }
-    return [elementName.slice(1, colonIndex), elementName.slice(colonIndex + 1)];
-}
-// `<ng-container>` tags work the same regardless the namespace
-function isNgContainer(tagName) {
-    return splitNsName(tagName)[1] === 'ng-container';
-}
-// `<ng-content>` tags work the same regardless the namespace
-function isNgContent(tagName) {
-    return splitNsName(tagName)[1] === 'ng-content';
-}
-// `<ng-template>` tags work the same regardless the namespace
-function isNgTemplate(tagName) {
-    return splitNsName(tagName)[1] === 'ng-template';
-}
-function getNsPrefix(fullName) {
-    return fullName === null ? null : splitNsName(fullName)[0];
-}
-function mergeNsAndName(prefix, localName) {
-    return prefix ? `:${prefix}:${localName}` : localName;
-}
-
 const BINARY_OPERATORS = new Map([
     ['&&', BinaryOperator.And],
     ['>', BinaryOperator.Bigger],
@@ -11803,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);
         }
@@ -11857,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.
  */
@@ -11902,17 +12098,22 @@ function createDeferDepsFns(job) {
  * message.)
  */
 function createI18nContexts(job) {
+    const rootContexts = new Map();
     let currentI18nOp = null;
     let xref;
     for (const unit of job.units) {
         for (const op of unit.create) {
             switch (op.kind) {
                 case OpKind.I18nStart:
-                    // Each i18n block gets its own context.
-                    xref = job.allocateXrefId();
-                    unit.create.push(createI18nContextOp(xref, op.xref, op.message, null));
-                    op.context = xref;
                     currentI18nOp = op;
+                    // Each root i18n block gets its own context, child ones refer to the context for their
+                    // root block.
+                    if (op.xref === op.root) {
+                        xref = job.allocateXrefId();
+                        unit.create.push(createI18nContextOp(I18nContextKind.RootI18n, xref, op.xref, op.message, null));
+                        op.context = xref;
+                        rootContexts.set(op.xref, xref);
+                    }
                     break;
                 case OpKind.I18nEnd:
                     currentI18nOp = null;
@@ -11926,7 +12127,7 @@ function createI18nContexts(job) {
                     if (op.message.id !== currentI18nOp.message.id) {
                         // There was an enclosing i18n block around this ICU somewhere.
                         xref = job.allocateXrefId();
-                        unit.create.push(createI18nContextOp(xref, currentI18nOp.xref, op.message, null));
+                        unit.create.push(createI18nContextOp(I18nContextKind.Icu, xref, currentI18nOp.xref, op.message, null));
                         op.context = xref;
                     }
                     else {
@@ -11938,6 +12139,15 @@ function createI18nContexts(job) {
             }
         }
     }
+    // Assign contexts to child i18n blocks, now that all root i18n blocks have their context
+    // assigned.
+    for (const unit of job.units) {
+        for (const op of unit.create) {
+            if (op.kind === OpKind.I18nStart && op.xref !== op.root) {
+                op.context = rootContexts.get(op.root);
+            }
+        }
+    }
 }
 
 /**
@@ -12286,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.
  */
@@ -12320,11 +12530,9 @@ const LIST_DELIMITER = '|';
  * used in the final output.
  */
 function extractI18nMessages(job) {
-    // Save the i18n context ops for later use.
+    // Save the i18n start and i18n context ops for later use.
     const i18nContexts = new Map();
-    // Record which contexts represent i18n blocks (any other contexts are assumed to have been
-    // created from ICUs).
-    const i18nBlockContexts = new Set();
+    const i18nBlocks = new Map();
     for (const unit of job.units) {
         for (const op of unit.create) {
             switch (op.kind) {
@@ -12332,11 +12540,23 @@ function extractI18nMessages(job) {
                     i18nContexts.set(op.xref, op);
                     break;
                 case OpKind.I18nStart:
-                    i18nBlockContexts.add(op.context);
+                    i18nBlocks.set(op.xref, op);
                     break;
             }
         }
     }
+    // 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) {
@@ -12359,11 +12579,15 @@ function extractI18nMessages(job) {
                     if (!op.context) {
                         throw Error('ICU op should have its context set.');
                     }
-                    if (!i18nBlockContexts.has(op.context)) {
-                        const i18nContext = i18nContexts.get(op.context);
+                    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 parentMessage = i18nBlockMessages.get(i18nContext.i18nBlock);
+                        const rootI18nId = i18nBlocks.get(i18nContext.i18nBlock).root;
+                        const parentMessage = i18nBlockMessages.get(rootI18nId);
                         parentMessage?.subMessages.push(subMessage.xref);
                     }
                     OpList.remove(op);
@@ -12379,26 +12603,28 @@ function extractI18nMessages(job) {
  * Create an i18n message op from an i18n context op.
  */
 function createI18nMessage(job, context, messagePlaceholder) {
-    let needsPostprocessing = context.postprocessingParams.size > 0;
+    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.i18nBlock, context.message, messagePlaceholder ?? null, formatParams(context.params), formatParams(context.postprocessingParams), needsPostprocessing);
+    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.
  */
 function formatParams(params) {
-    const result = new Map();
+    const formattedParams = new Map();
     for (const [placeholder, placeholderValues] of params) {
         const serializedValues = formatParamValues(placeholderValues);
         if (serializedValues !== null) {
-            result.set(placeholder, literal(formatParamValues(placeholderValues)));
+            formattedParams.set(placeholder, literal(serializedValues));
         }
     }
-    return result;
+    return formattedParams;
 }
 /**
  * Formats an `I18nParamValue[]` into a string (or null for empty array).
@@ -12416,10 +12642,47 @@ function formatParamValues(values) {
  * 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) {
@@ -12432,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}`;
 }
 
 /**
@@ -12471,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?
@@ -19681,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;
             }
         }
     }
@@ -19719,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
@@ -19741,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]);
     }
@@ -19752,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.
  *
@@ -19774,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.
  */
@@ -19819,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.
@@ -19895,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;
@@ -19938,57 +20305,6 @@ function serializeLocalRefs(refs) {
     return literalArr(constRefs);
 }
 
-/**
- * Merge i18n contexts for child i18n blocks into their ancestor root contexts.
- */
-function mergeI18nContexts(job) {
-    // Record all of the i18n and extracted message ops for use later.
-    const i18nOps = new Map();
-    const i18nContexts = new Map();
-    for (const unit of job.units) {
-        for (const op of unit.create) {
-            switch (op.kind) {
-                case OpKind.I18nStart:
-                    if (!op.context) {
-                        throw Error('I18n op should have its context set.');
-                    }
-                    i18nOps.set(op.xref, op);
-                    break;
-                case OpKind.I18nContext:
-                    i18nContexts.set(op.xref, op);
-                    break;
-            }
-        }
-    }
-    // For each non-root i18n op, merge its context into the root i18n op's context.
-    for (const childI18nOp of i18nOps.values()) {
-        if (childI18nOp.xref !== childI18nOp.root) {
-            const childContext = i18nContexts.get(childI18nOp.context);
-            const rootI18nOp = i18nOps.get(childI18nOp.root);
-            const rootContext = i18nContexts.get(rootI18nOp.context);
-            mergeParams(rootContext.params, childContext.params);
-            mergeParams(rootContext.postprocessingParams, childContext.postprocessingParams);
-        }
-    }
-}
-/**
- * Merges the params in the `from` map to into the `to` map.
- */
-function mergeParams(to, from) {
-    for (const [placeholder, fromValues] of from) {
-        const toValues = to.get(placeholder) || [];
-        // TODO(mmalerba): Child element close tag params should be prepended to maintain the same order
-        // as TemplateDefinitionBuilder. Can be cleaned up when compatibility is no longer required.
-        const flags = fromValues[0].flags;
-        if ((flags & I18nParamValueFlags.CloseTag) && !(flags & I18nParamValueFlags.OpenTag)) {
-            to.set(placeholder, [...fromValues, ...toValues]);
-        }
-        else {
-            to.set(placeholder, [...toValues, ...fromValues]);
-        }
-    }
-}
-
 /**
  * Change namespaces between HTML, SVG and MathML, depending on the next element.
  */
@@ -20484,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);
                 }
@@ -20507,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.
  */
@@ -20638,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:
@@ -20652,9 +20984,10 @@ function propagateI18nBlocksToTemplates(unit, subTemplateIndex) {
                     wrapTemplateWithI18n(templateView, i18nBlock);
                 }
                 // Continue traversing inside the template's view.
-                propagateI18nBlocksToTemplates(templateView, subTemplateIndex);
+                subTemplateIndex = propagateI18nBlocksToTemplates(templateView, subTemplateIndex);
         }
     }
+    return subTemplateIndex;
 }
 /**
  * Wraps a template view with i18n start and end ops.
@@ -20978,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) {
@@ -21364,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`);
@@ -21705,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
@@ -21834,66 +22202,175 @@ function resolveI18nElementPlaceholders(job) {
             }
         }
     }
-    for (const unit of job.units) {
-        // Track the current i18n op and corresponding i18n context op as we step through the creation
-        // IR.
-        let currentOps = null;
-        for (const op of unit.create) {
-            switch (op.kind) {
-                case OpKind.I18nStart:
-                    if (!op.context) {
-                        throw Error('Could not find i18n context for i18n op');
+    resolvePlaceholdersForView(job, job.root, 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:
+                if (!op.context) {
+                    throw Error('Could not find i18n context for i18n op');
+                }
+                currentOps = { i18nBlock: op, i18nContext: i18nContexts.get(op.context) };
+                break;
+            case OpKind.I18nEnd:
+                currentOps = null;
+                break;
+            case OpKind.ElementStart:
+                // For elements with i18n placeholders, record its slot value in the params map under the
+                // corresponding tag start placeholder.
+                if (op.i18nPlaceholder !== undefined) {
+                    if (currentOps === null) {
+                        throw Error('i18n tag placeholder should only occur inside an i18n block');
                     }
-                    currentOps = { i18nBlock: op, i18nContext: i18nContexts.get(op.context) };
-                    break;
-                case OpKind.I18nEnd:
-                    currentOps = null;
-                    break;
-                case OpKind.ElementStart:
-                    // For elements with i18n placeholders, record its slot value in the params map under the
-                    // corresponding tag start placeholder.
-                    if (op.i18nPlaceholder !== undefined) {
-                        if (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;
-                        }
-                        addParam(currentOps.i18nContext.params, startName, op.handle.slot, currentOps.i18nBlock.subTemplateIndex, flags);
+                    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);
                     }
-                    break;
-                case OpKind.ElementEnd:
-                    // For elements with i18n placeholders, record its slot value in the params map under the
-                    // corresponding tag close placeholder.
-                    const startOp = elements.get(op.xref);
-                    if (startOp && startOp.i18nPlaceholder !== undefined) {
-                        if (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);
-                        }
+                    // Clear out the pending structural directive now that its been accounted for.
+                    pendingStructuralDirective = undefined;
+                }
+                break;
+            case OpKind.ElementEnd:
+                // For elements with i18n placeholders, record its slot value in the params map under the
+                // corresponding tag close placeholder.
+                const startOp = elements.get(op.xref);
+                if (startOp && startOp.i18nPlaceholder !== undefined) {
+                    if (currentOps === null) {
+                        throw Error('AssertionError: i18n tag placeholder should only occur inside an i18n block');
                     }
-                    break;
-                case OpKind.Template:
-                    // For templates with i18n placeholders, record its slot value in the params map under the
-                    // corresponding template start and close placeholders.
-                    if (op.i18nPlaceholder !== undefined) {
-                        if (currentOps === null) {
-                            throw Error('i18n tag placeholder should only occur inside an i18n block');
-                        }
-                        const subTemplateIndex = getSubTemplateIndexForTemplateTag(job, currentOps.i18nBlock, op);
-                        addParam(currentOps.i18nContext.params, op.i18nPlaceholder.startName, op.handle.slot, subTemplateIndex, I18nParamValueFlags.TemplateTag);
-                        addParam(currentOps.i18nContext.params, op.i18nPlaceholder.closeName, op.handle.slot, subTemplateIndex, I18nParamValueFlags.TemplateTag | I18nParamValueFlags.CloseTag);
+                    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.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');
                     }
-                    break;
-            }
+                    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);
+                }
+                else {
+                    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);
         }
     }
 }
@@ -21909,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 });
@@ -21935,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(i18nContext.i18nBlock) || 0;
-                const subTemplateIndex = subTemplateIndicies.get(i18nContext.i18nBlock);
+                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 :
@@ -21954,7 +22438,7 @@ function resolveI18nExpressionPlaceholders(job) {
                     flags: I18nParamValueFlags.ExpressionIndex
                 });
                 params.set(op.i18nPlaceholder, values);
-                expressionIndices.set(i18nContext.i18nBlock, index + 1);
+                expressionIndices.set(referenceIndex(op), index + 1);
             }
         }
     }
@@ -21964,28 +22448,12 @@ function resolveI18nExpressionPlaceholders(job) {
  * Resolves placeholders for element tags inside of an ICU.
  */
 function resolveI18nIcuPlaceholders(job) {
-    const contextOps = new Map();
     for (const unit of job.units) {
         for (const op of unit.create) {
-            switch (op.kind) {
-                case OpKind.I18nContext:
-                    contextOps.set(op.xref, op);
-                    break;
-            }
-        }
-    }
-    for (const unit of job.units) {
-        for (const op of unit.create) {
-            switch (op.kind) {
-                case OpKind.IcuStart:
-                    if (op.context === null) {
-                        throw Error('Icu should have its i18n context set.');
-                    }
-                    const i18nContext = contextOps.get(op.context);
-                    for (const node of op.message.nodes) {
-                        node.visit(new ResolveIcuPlaceholdersVisitor(i18nContext.postprocessingParams));
-                    }
-                    break;
+            if (op.kind === OpKind.I18nContext && op.contextKind === I18nContextKind.Icu) {
+                for (const node of op.message.nodes) {
+                    node.visit(new ResolveIcuPlaceholdersVisitor(op.postprocessingParams));
+                }
             }
         }
     }
@@ -23117,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 },
@@ -23130,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 },
@@ -23155,13 +23626,11 @@ const phases = [
     { kind: CompilationJobKind.Tmpl, fn: resolveI18nElementPlaceholders },
     { kind: CompilationJobKind.Tmpl, fn: resolveI18nExpressionPlaceholders },
     { kind: CompilationJobKind.Tmpl, fn: resolveI18nIcuPlaceholders },
-    { kind: CompilationJobKind.Tmpl, fn: mergeI18nContexts },
     { kind: CompilationJobKind.Tmpl, fn: extractI18nMessages },
     { kind: CompilationJobKind.Tmpl, fn: generateTrackFns },
     { kind: CompilationJobKind.Tmpl, fn: collectI18nConsts },
     { kind: CompilationJobKind.Tmpl, fn: collectConstExpressions },
     { kind: CompilationJobKind.Both, fn: collectElementConsts },
-    { kind: CompilationJobKind.Tmpl, fn: assignI18nSlotDependencies },
     { kind: CompilationJobKind.Tmpl, fn: removeI18nContexts },
     { kind: CompilationJobKind.Both, fn: countVariables },
     { kind: CompilationJobKind.Tmpl, fn: generateAdvance },
@@ -23316,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);
@@ -23331,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);
 }
@@ -23432,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');
@@ -23443,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);
@@ -23453,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);
 }
@@ -23480,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)
@@ -23495,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`.
@@ -23516,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);
     }
@@ -23539,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);
     }
@@ -23561,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;
 }
@@ -23656,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]);
             }
@@ -23757,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) {
@@ -23815,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}"`);
     }
@@ -23845,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)) {
@@ -23853,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;
             }
         }
     }
@@ -23864,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;
@@ -23877,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);
@@ -23906,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],
@@ -23934,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);
@@ -23958,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
@@ -24046,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.
@@ -27129,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);
                     }
@@ -28749,24 +29268,6 @@ class TrackByBindingScope extends BindingScope {
         return this.componentAccessCount;
     }
 }
-/**
- * Creates a `CssSelector` given a tag name and a map of attributes
- */
-function createCssSelector(elementName, attributes) {
-    const cssSelector = new CssSelector();
-    const elementNameNoNs = splitNsName(elementName)[1];
-    cssSelector.setElement(elementNameNoNs);
-    Object.getOwnPropertyNames(attributes).forEach((name) => {
-        const nameNoNs = splitNsName(name)[1];
-        const value = attributes[name];
-        cssSelector.addAttribute(nameNoNs, value);
-        if (name.toLowerCase() === 'class') {
-            const classes = value.trim().split(/\s+/);
-            classes.forEach(className => cssSelector.addClassName(className));
-        }
-    });
-    return cssSelector;
-}
 /**
  * Creates an array of expressions out of an `ngProjectAs` attributes
  * which can be added to the instruction parameters.
@@ -29127,6 +29628,11 @@ function addFeatures(definitionMap, meta) {
             break;
         }
     }
+    // Note: host directives feature needs to be inserted before the
+    // inheritance feature to ensure the correct execution order.
+    if (meta.hostDirectives?.length) {
+        features.push(importExpr(Identifiers.HostDirectivesFeature).callFn([createHostDirectivesFeatureArg(meta.hostDirectives)]));
+    }
     if (meta.usesInheritance) {
         features.push(importExpr(Identifiers.InheritDefinitionFeature));
     }
@@ -29140,9 +29646,6 @@ function addFeatures(definitionMap, meta) {
     if (meta.hasOwnProperty('template') && meta.isStandalone) {
         features.push(importExpr(Identifiers.StandaloneFeature));
     }
-    if (meta.hostDirectives?.length) {
-        features.push(importExpr(Identifiers.HostDirectivesFeature).callFn([createHostDirectivesFeatureArg(meta.hostDirectives)]));
-    }
     if (features.length) {
         definitionMap.set('features', literalArr(features));
     }
@@ -29505,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;
@@ -29557,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);
@@ -29636,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,
                 });
             }
         });
@@ -29660,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;
@@ -30103,15 +30618,15 @@ class DirectiveBinder {
         template.forEach(node => node.visit(this));
     }
     visitElement(element) {
-        this.visitElementOrTemplate(element.name, element);
+        this.visitElementOrTemplate(element);
     }
     visitTemplate(template) {
-        this.visitElementOrTemplate('ng-template', template);
+        this.visitElementOrTemplate(template);
     }
-    visitElementOrTemplate(elementName, node) {
+    visitElementOrTemplate(node) {
         // First, determine the HTML shape of the node for the purpose of directive matching.
         // Do this by building up a `CssSelector` for the node.
-        const cssSelector = createCssSelector(elementName, getAttrsForDirectiveMatching(node));
+        const cssSelector = createCssSelectorFromNode(node);
         // Next, use the `SelectorMatcher` to get the list of directives on the node.
         const directives = [];
         this.matcher.match(cssSelector, (_selector, results) => directives.push(...results));
@@ -31240,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.1');
+const VERSION = new Version('17.1.0-next.3');
 
 class CompilerConfig {
     constructor({ defaultEncapsulation = ViewEncapsulation.Emulated, preserveWhitespaces, strictInjectionParameters } = {}) {
@@ -32806,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.1'));
+    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);
@@ -32914,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.1'));
+    definitionMap.set('version', literal('17.1.0-next.3'));
     // e.g. `type: MyDirective`
     definitionMap.set('type', meta.type.value);
     if (meta.isStandalone) {
@@ -33191,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.1'));
+    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));
@@ -33226,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.1'));
+    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
@@ -33277,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.1'));
+    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);
@@ -33310,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.1'));
+    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.
@@ -33361,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.1'));
+    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);
@@ -33394,5 +33909,5 @@ publishFacade(_global);
 
 // This file is not used to build this module. It is only used during editing
 
-export { AST, ASTWithName, ASTWithSource, AbsoluteSourceSpan, ArrayType, ArrowFunctionExpr, AstMemoryEfficientTransformer, AstTransformer, Attribute, Binary, BinaryOperator, BinaryOperatorExpr, BindingPipe, Block, BlockParameter, BoundElementProperty, BuiltinType, BuiltinTypeName, CUSTOM_ELEMENTS_SCHEMA, Call, Chain, ChangeDetectionStrategy, CommaExpr, Comment, CompilerConfig, Conditional, ConditionalExpr, ConstantPool, CssSelector, DEFAULT_INTERPOLATION_CONFIG, DYNAMIC_TYPE, DeclareFunctionStmt, DeclareVarStmt, DomElementSchemaRegistry, DynamicImportExpr, EOF, Element, ElementSchemaRegistry, EmitterVisitorContext, EmptyExpr$1 as EmptyExpr, Expansion, ExpansionCase, Expression, ExpressionBinding, ExpressionStatement, ExpressionType, ExternalExpr, ExternalReference, FactoryTarget$1 as FactoryTarget, FunctionExpr, HtmlParser, HtmlTagDefinition, I18NHtmlParser, IfStmt, ImplicitReceiver, InstantiateExpr, Interpolation$1 as Interpolation, InterpolationConfig, InvokeFunctionExpr, JSDocComment, JitEvaluator, KeyedRead, KeyedWrite, LeadingComment, Lexer, LiteralArray, LiteralArrayExpr, LiteralExpr, LiteralMap, LiteralMapExpr, LiteralPrimitive, LocalizedString, MapType, MessageBundle, NONE_TYPE, NO_ERRORS_SCHEMA, NodeWithI18n, NonNullAssert, NotExpr, ParseError, ParseErrorLevel, ParseLocation, ParseSourceFile, ParseSourceSpan, ParseSpan, ParseTreeResult, ParsedEvent, ParsedProperty, ParsedPropertyType, ParsedVariable, Parser$1 as Parser, ParserError, PrefixNot, PropertyRead, PropertyWrite, R3BoundTarget, Identifiers as R3Identifiers, R3NgModuleMetadataKind, R3SelectorScopeMode, R3TargetBinder, R3TemplateDependencyKind, ReadKeyExpr, ReadPropExpr, ReadVarExpr, RecursiveAstVisitor, RecursiveVisitor, ResourceLoader, ReturnStatement, STRING_TYPE, SafeCall, SafeKeyedRead, SafePropertyRead, SelectorContext, SelectorListContext, SelectorMatcher, Serializer, SplitInterpolation, Statement, StmtModifier, TagContentType, TaggedTemplateExpr, TemplateBindingParseResult, TemplateLiteral, TemplateLiteralElement, Text, ThisReceiver, BoundAttribute as TmplAstBoundAttribute, BoundDeferredTrigger as TmplAstBoundDeferredTrigger, BoundEvent as TmplAstBoundEvent, BoundText as TmplAstBoundText, Content as TmplAstContent, DeferredBlock as TmplAstDeferredBlock, DeferredBlockError as TmplAstDeferredBlockError, DeferredBlockLoading as TmplAstDeferredBlockLoading, DeferredBlockPlaceholder as TmplAstDeferredBlockPlaceholder, DeferredTrigger as TmplAstDeferredTrigger, Element$1 as TmplAstElement, ForLoopBlock as TmplAstForLoopBlock, ForLoopBlockEmpty as TmplAstForLoopBlockEmpty, HoverDeferredTrigger as TmplAstHoverDeferredTrigger, Icu$1 as TmplAstIcu, IdleDeferredTrigger as TmplAstIdleDeferredTrigger, IfBlock as TmplAstIfBlock, IfBlockBranch as TmplAstIfBlockBranch, ImmediateDeferredTrigger as TmplAstImmediateDeferredTrigger, InteractionDeferredTrigger as TmplAstInteractionDeferredTrigger, RecursiveVisitor$1 as TmplAstRecursiveVisitor, Reference as TmplAstReference, SwitchBlock as TmplAstSwitchBlock, SwitchBlockCase as TmplAstSwitchBlockCase, Template as TmplAstTemplate, Text$3 as TmplAstText, TextAttribute as TmplAstTextAttribute, TimerDeferredTrigger as TmplAstTimerDeferredTrigger, UnknownBlock as TmplAstUnknownBlock, Variable as TmplAstVariable, ViewportDeferredTrigger as TmplAstViewportDeferredTrigger, Token, TokenType, TransplantedType, TreeError, Type, TypeModifier, TypeofExpr, Unary, UnaryOperator, UnaryOperatorExpr, VERSION, VariableBinding, Version, ViewEncapsulation, WrappedNodeExpr, WriteKeyExpr, WritePropExpr, WriteVarExpr, Xliff, Xliff2, Xmb, XmlParser, Xtb, _ParseAST, compileClassDebugInfo, compileClassMetadata, compileComponentClassMetadata, compileComponentFromMetadata, compileDeclareClassMetadata, compileDeclareComponentFromMetadata, compileDeclareDirectiveFromMetadata, compileDeclareFactoryFunction, compileDeclareInjectableFromMetadata, compileDeclareInjectorFromMetadata, compileDeclareNgModuleFromMetadata, compileDeclarePipeFromMetadata, compileDirectiveFromMetadata, compileFactoryFunction, compileInjectable, compileInjector, compileNgModule, compilePipeFromMetadata, computeMsgId, core, createInjectableType, createMayBeForwardRefExpression, devOnlyGuardedExpression, emitDistinctChangesOnlyDefaultValue, getHtmlTagDefinition, getNsPrefix, getSafePropertyAccessString, identifierName, isIdentifier, isNgContainer, isNgContent, isNgTemplate, jsDocComment, leadingComment, literal, literalMap, makeBindingParser, mergeNsAndName, output_ast as outputAst, parseHostBindings, parseTemplate, preserveWhitespacesDefault, publishFacade, r3JitTypeSourceSpan, sanitizeIdentifier, splitNsName, verifyHostBindings, visitAll };
+export { AST, ASTWithName, ASTWithSource, AbsoluteSourceSpan, ArrayType, ArrowFunctionExpr, AstMemoryEfficientTransformer, AstTransformer, Attribute, Binary, BinaryOperator, BinaryOperatorExpr, BindingPipe, Block, BlockParameter, BoundElementProperty, BuiltinType, BuiltinTypeName, CUSTOM_ELEMENTS_SCHEMA, Call, Chain, ChangeDetectionStrategy, CommaExpr, Comment, CompilerConfig, Conditional, ConditionalExpr, ConstantPool, CssSelector, DEFAULT_INTERPOLATION_CONFIG, DYNAMIC_TYPE, DeclareFunctionStmt, DeclareVarStmt, DomElementSchemaRegistry, DynamicImportExpr, EOF, Element, ElementSchemaRegistry, EmitterVisitorContext, EmptyExpr$1 as EmptyExpr, Expansion, ExpansionCase, Expression, ExpressionBinding, ExpressionStatement, ExpressionType, ExternalExpr, ExternalReference, FactoryTarget$1 as FactoryTarget, FunctionExpr, HtmlParser, HtmlTagDefinition, I18NHtmlParser, IfStmt, ImplicitReceiver, InstantiateExpr, Interpolation$1 as Interpolation, InterpolationConfig, InvokeFunctionExpr, JSDocComment, JitEvaluator, KeyedRead, KeyedWrite, LeadingComment, Lexer, LiteralArray, LiteralArrayExpr, LiteralExpr, LiteralMap, LiteralMapExpr, LiteralPrimitive, LocalizedString, MapType, MessageBundle, NONE_TYPE, NO_ERRORS_SCHEMA, NodeWithI18n, NonNullAssert, NotExpr, ParseError, ParseErrorLevel, ParseLocation, ParseSourceFile, ParseSourceSpan, ParseSpan, ParseTreeResult, ParsedEvent, ParsedProperty, ParsedPropertyType, ParsedVariable, Parser$1 as Parser, ParserError, PrefixNot, PropertyRead, PropertyWrite, R3BoundTarget, Identifiers as R3Identifiers, R3NgModuleMetadataKind, R3SelectorScopeMode, R3TargetBinder, R3TemplateDependencyKind, ReadKeyExpr, ReadPropExpr, ReadVarExpr, RecursiveAstVisitor, RecursiveVisitor, ResourceLoader, ReturnStatement, STRING_TYPE, SafeCall, SafeKeyedRead, SafePropertyRead, SelectorContext, SelectorListContext, SelectorMatcher, Serializer, SplitInterpolation, Statement, StmtModifier, TagContentType, TaggedTemplateExpr, TemplateBindingParseResult, TemplateLiteral, TemplateLiteralElement, Text, ThisReceiver, BoundAttribute as TmplAstBoundAttribute, BoundDeferredTrigger as TmplAstBoundDeferredTrigger, BoundEvent as TmplAstBoundEvent, BoundText as TmplAstBoundText, Content as TmplAstContent, DeferredBlock as TmplAstDeferredBlock, DeferredBlockError as TmplAstDeferredBlockError, DeferredBlockLoading as TmplAstDeferredBlockLoading, DeferredBlockPlaceholder as TmplAstDeferredBlockPlaceholder, DeferredTrigger as TmplAstDeferredTrigger, Element$1 as TmplAstElement, ForLoopBlock as TmplAstForLoopBlock, ForLoopBlockEmpty as TmplAstForLoopBlockEmpty, HoverDeferredTrigger as TmplAstHoverDeferredTrigger, Icu$1 as TmplAstIcu, IdleDeferredTrigger as TmplAstIdleDeferredTrigger, IfBlock as TmplAstIfBlock, IfBlockBranch as TmplAstIfBlockBranch, ImmediateDeferredTrigger as TmplAstImmediateDeferredTrigger, InteractionDeferredTrigger as TmplAstInteractionDeferredTrigger, RecursiveVisitor$1 as TmplAstRecursiveVisitor, Reference as TmplAstReference, SwitchBlock as TmplAstSwitchBlock, SwitchBlockCase as TmplAstSwitchBlockCase, Template as TmplAstTemplate, Text$3 as TmplAstText, TextAttribute as TmplAstTextAttribute, TimerDeferredTrigger as TmplAstTimerDeferredTrigger, UnknownBlock as TmplAstUnknownBlock, Variable as TmplAstVariable, ViewportDeferredTrigger as TmplAstViewportDeferredTrigger, Token, TokenType, TransplantedType, TreeError, Type, TypeModifier, TypeofExpr, Unary, UnaryOperator, UnaryOperatorExpr, VERSION, VariableBinding, Version, ViewEncapsulation, WrappedNodeExpr, WriteKeyExpr, WritePropExpr, WriteVarExpr, Xliff, Xliff2, Xmb, XmlParser, Xtb, _ParseAST, compileClassDebugInfo, compileClassMetadata, compileComponentClassMetadata, compileComponentFromMetadata, compileDeclareClassMetadata, compileDeclareComponentFromMetadata, compileDeclareDirectiveFromMetadata, compileDeclareFactoryFunction, compileDeclareInjectableFromMetadata, compileDeclareInjectorFromMetadata, compileDeclareNgModuleFromMetadata, compileDeclarePipeFromMetadata, compileDirectiveFromMetadata, compileFactoryFunction, compileInjectable, compileInjector, compileNgModule, compilePipeFromMetadata, computeMsgId, core, createCssSelectorFromNode, createInjectableType, createMayBeForwardRefExpression, devOnlyGuardedExpression, emitDistinctChangesOnlyDefaultValue, getHtmlTagDefinition, getNsPrefix, getSafePropertyAccessString, identifierName, isIdentifier, isNgContainer, isNgContent, isNgTemplate, jsDocComment, leadingComment, literal, literalMap, makeBindingParser, mergeNsAndName, output_ast as outputAst, parseHostBindings, parseTemplate, preserveWhitespacesDefault, publishFacade, r3JitTypeSourceSpan, sanitizeIdentifier, splitNsName, verifyHostBindings, visitAll };
 //# sourceMappingURL=compiler.mjs.map