@angular-eslint/bundled-angular-compiler 17.1.2-alpha.6 → 17.1.2-alpha.7

package/dist/index.js

@@ -1,7 +1,7 @@
 'use strict';
 
 /**
- * @license Angular v17.0.2
+ * @license Angular v17.0.8
  * (c) 2010-2022 Google LLC. https://angular.io/
  * License: MIT
  */
@@ -541,6 +541,9 @@ class _SerializerVisitor {
     visitIcuPlaceholder(ph, context) {
         return `<ph icu name="${ph.name}">${ph.value.visit(this)}</ph>`;
     }
+    visitBlockPlaceholder(ph, context) {
+        return `<ph block name="${ph.startName}">${ph.children.map(child => child.visit(this)).join(', ')}</ph name="${ph.closeName}">`;
+    }
 }
 const serializerVisitor$1 = new _SerializerVisitor();
 function serializeNodes(nodes) {
@@ -2307,7 +2310,9 @@ class ConstantPool {
             }))));
         }
     }
-    getSharedFunctionReference(fn, prefix) {
+    // TODO: useUniqueName(false) is necessary for naming compatibility with
+    // TemplateDefinitionBuilder, but should be removed once Template Pipeline is the default.
+    getSharedFunctionReference(fn, prefix, useUniqueName = true) {
         const isArrow = fn instanceof ArrowFunctionExpr;
         for (const current of this.statements) {
             // Arrow functions are saved as variables so we check if the
@@ -2322,7 +2327,7 @@ class ConstantPool {
             }
         }
         // Otherwise declare the function.
-        const name = this.uniqueName(prefix);
+        const name = useUniqueName ? this.uniqueName(prefix) : prefix;
         this.statements.push(fn.toDeclStmt(name, exports.StmtModifier.Final));
         return variable(name);
     }
@@ -3667,6 +3672,46 @@ function getInjectFn(target) {
     }
 }
 
+exports.TagContentType = void 0;
+(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";
+})(exports.TagContentType || (exports.TagContentType = {}));
+function splitNsName(elementName, fatal = true) {
+    if (elementName[0] != ':') {
+        return [null, elementName];
+    }
+    const colonIndex = elementName.indexOf(':', 1);
+    if (colonIndex === -1) {
+        if (fatal) {
+            throw new Error(`Unsupported format "${elementName}" expecting ":namespace:name"`);
+        }
+        else {
+            return [null, elementName];
+        }
+    }
+    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
@@ -3838,43 +3883,47 @@ class BlockNode {
     }
 }
 class DeferredBlockPlaceholder extends BlockNode {
-    constructor(children, minimumTime, nameSpan, sourceSpan, startSourceSpan, endSourceSpan) {
+    constructor(children, minimumTime, nameSpan, sourceSpan, startSourceSpan, endSourceSpan, i18n) {
         super(nameSpan, sourceSpan, startSourceSpan, endSourceSpan);
         this.children = children;
         this.minimumTime = minimumTime;
+        this.i18n = i18n;
     }
     visit(visitor) {
         return visitor.visitDeferredBlockPlaceholder(this);
     }
 }
 class DeferredBlockLoading extends BlockNode {
-    constructor(children, afterTime, minimumTime, nameSpan, sourceSpan, startSourceSpan, endSourceSpan) {
+    constructor(children, afterTime, minimumTime, nameSpan, sourceSpan, startSourceSpan, endSourceSpan, i18n) {
         super(nameSpan, sourceSpan, startSourceSpan, endSourceSpan);
         this.children = children;
         this.afterTime = afterTime;
         this.minimumTime = minimumTime;
+        this.i18n = i18n;
     }
     visit(visitor) {
         return visitor.visitDeferredBlockLoading(this);
     }
 }
 class DeferredBlockError extends BlockNode {
-    constructor(children, nameSpan, sourceSpan, startSourceSpan, endSourceSpan) {
+    constructor(children, nameSpan, sourceSpan, startSourceSpan, endSourceSpan, i18n) {
         super(nameSpan, sourceSpan, startSourceSpan, endSourceSpan);
         this.children = children;
+        this.i18n = i18n;
     }
     visit(visitor) {
         return visitor.visitDeferredBlockError(this);
     }
 }
 class DeferredBlock extends BlockNode {
-    constructor(children, triggers, prefetchTriggers, placeholder, loading, error, nameSpan, sourceSpan, mainBlockSpan, startSourceSpan, endSourceSpan) {
+    constructor(children, triggers, prefetchTriggers, placeholder, loading, error, nameSpan, sourceSpan, mainBlockSpan, startSourceSpan, endSourceSpan, i18n) {
         super(nameSpan, sourceSpan, startSourceSpan, endSourceSpan);
         this.children = children;
         this.placeholder = placeholder;
         this.loading = loading;
         this.error = error;
         this.mainBlockSpan = mainBlockSpan;
+        this.i18n = i18n;
         this.triggers = triggers;
         this.prefetchTriggers = prefetchTriggers;
         // We cache the keys since we know that they won't change and we
@@ -3913,17 +3962,18 @@ class SwitchBlock extends BlockNode {
     }
 }
 class SwitchBlockCase extends BlockNode {
-    constructor(expression, children, sourceSpan, startSourceSpan, endSourceSpan, nameSpan) {
+    constructor(expression, children, sourceSpan, startSourceSpan, endSourceSpan, nameSpan, i18n) {
         super(nameSpan, sourceSpan, startSourceSpan, endSourceSpan);
         this.expression = expression;
         this.children = children;
+        this.i18n = i18n;
     }
     visit(visitor) {
         return visitor.visitSwitchBlockCase(this);
     }
 }
 class ForLoopBlock extends BlockNode {
-    constructor(item, expression, trackBy, trackKeywordSpan, contextVariables, children, empty, sourceSpan, mainBlockSpan, startSourceSpan, endSourceSpan, nameSpan) {
+    constructor(item, expression, trackBy, trackKeywordSpan, contextVariables, children, empty, sourceSpan, mainBlockSpan, startSourceSpan, endSourceSpan, nameSpan, i18n) {
         super(nameSpan, sourceSpan, startSourceSpan, endSourceSpan);
         this.item = item;
         this.expression = expression;
@@ -3933,15 +3983,17 @@ class ForLoopBlock extends BlockNode {
         this.children = children;
         this.empty = empty;
         this.mainBlockSpan = mainBlockSpan;
+        this.i18n = i18n;
     }
     visit(visitor) {
         return visitor.visitForLoopBlock(this);
     }
 }
 class ForLoopBlockEmpty extends BlockNode {
-    constructor(children, sourceSpan, startSourceSpan, endSourceSpan, nameSpan) {
+    constructor(children, sourceSpan, startSourceSpan, endSourceSpan, nameSpan, i18n) {
         super(nameSpan, sourceSpan, startSourceSpan, endSourceSpan);
         this.children = children;
+        this.i18n = i18n;
     }
     visit(visitor) {
         return visitor.visitForLoopBlockEmpty(this);
@@ -3957,11 +4009,12 @@ class IfBlock extends BlockNode {
     }
 }
 class IfBlockBranch extends BlockNode {
-    constructor(expression, children, expressionAlias, sourceSpan, startSourceSpan, endSourceSpan, nameSpan) {
+    constructor(expression, children, expressionAlias, sourceSpan, startSourceSpan, endSourceSpan, nameSpan, i18n) {
         super(nameSpan, sourceSpan, startSourceSpan, endSourceSpan);
         this.expression = expression;
         this.children = children;
         this.expressionAlias = expressionAlias;
+        this.i18n = i18n;
     }
     visit(visitor) {
         return visitor.visitIfBlockBranch(this);
@@ -4231,6 +4284,21 @@ class IcuPlaceholder {
         return visitor.visitIcuPlaceholder(this, context);
     }
 }
+class BlockPlaceholder {
+    constructor(name, parameters, startName, closeName, children, sourceSpan, startSourceSpan, endSourceSpan) {
+        this.name = name;
+        this.parameters = parameters;
+        this.startName = startName;
+        this.closeName = closeName;
+        this.children = children;
+        this.sourceSpan = sourceSpan;
+        this.startSourceSpan = startSourceSpan;
+        this.endSourceSpan = endSourceSpan;
+    }
+    visit(visitor, context) {
+        return visitor.visitBlockPlaceholder(this, context);
+    }
+}
 // Clone the AST
 class CloneVisitor {
     visitText(text, context) {
@@ -4256,6 +4324,10 @@ class CloneVisitor {
     visitIcuPlaceholder(ph, context) {
         return new IcuPlaceholder(ph.value, ph.name, ph.sourceSpan);
     }
+    visitBlockPlaceholder(ph, context) {
+        const children = ph.children.map(n => n.visit(this, context));
+        return new BlockPlaceholder(ph.name, ph.parameters, ph.startName, ph.closeName, children, ph.sourceSpan, ph.startSourceSpan, ph.endSourceSpan);
+    }
 }
 // Visit all the nodes recursively
 class RecurseVisitor {
@@ -4273,6 +4345,9 @@ class RecurseVisitor {
     }
     visitPlaceholder(ph, context) { }
     visitIcuPlaceholder(ph, context) { }
+    visitBlockPlaceholder(ph, context) {
+        ph.children.forEach(child => child.visit(this));
+    }
 }
 /**
  * Serialize the message to the Localize backtick string format that would appear in compiled code.
@@ -4303,6 +4378,10 @@ class LocalizeMessageStringVisitor {
     visitIcuPlaceholder(ph) {
         return `{$${ph.name}}`;
     }
+    visitBlockPlaceholder(ph) {
+        const children = ph.children.map(child => child.visit(this)).join('');
+        return `{$${ph.startName}}${children}{$${ph.closeName}}`;
+    }
 }
 
 class Serializer {
@@ -4345,6 +4424,11 @@ class SimplePlaceholderMapper extends RecurseVisitor {
     visitPlaceholder(ph, context) {
         this.visitPlaceholderName(ph.name);
     }
+    visitBlockPlaceholder(ph, context) {
+        this.visitPlaceholderName(ph.startName);
+        super.visitBlockPlaceholder(ph, context);
+        this.visitPlaceholderName(ph.closeName);
+    }
     visitIcuPlaceholder(ph, context) {
         this.visitPlaceholderName(ph.name);
     }
@@ -4557,6 +4641,17 @@ class _Visitor$1 {
             new Tag(_PLACEHOLDER_TAG$3, { name: ph.name }, [exTag, interpolationAsText])
         ];
     }
+    visitBlockPlaceholder(ph, context) {
+        const startAsText = new Text$1(`@${ph.name}`);
+        const startEx = new Tag(_EXAMPLE_TAG, {}, [startAsText]);
+        // TC requires PH to have a non empty EX, and uses the text node to show the "original" value.
+        const startTagPh = new Tag(_PLACEHOLDER_TAG$3, { name: ph.startName }, [startEx, startAsText]);
+        const closeAsText = new Text$1(`}`);
+        const closeEx = new Tag(_EXAMPLE_TAG, {}, [closeAsText]);
+        // TC requires PH to have a non empty EX, and uses the text node to show the "original" value.
+        const closeTagPh = new Tag(_PLACEHOLDER_TAG$3, { name: ph.closeName }, [closeEx, closeAsText]);
+        return [startTagPh, ...this.serialize(ph.children), closeTagPh];
+    }
     visitIcuPlaceholder(ph, context) {
         const icuExpression = ph.value.expression;
         const icuType = ph.value.type;
@@ -4615,7 +4710,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) {
@@ -4957,6 +5052,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.
@@ -5202,6 +5317,7 @@ class InterpolationConfig {
     }
 }
 const DEFAULT_INTERPOLATION_CONFIG = new InterpolationConfig('{{', '}}');
+const DEFAULT_CONTAINER_BLOCKS = new Set(['switch']);
 
 const $EOF = 0;
 const $BSPACE = 8;
@@ -8800,15 +8916,23 @@ var OpKind;
     /**
      * An instruction to create an ICU expression.
      */
-    OpKind[OpKind["Icu"] = 41] = "Icu";
+    OpKind[OpKind["IcuStart"] = 41] = "IcuStart";
     /**
      * An instruction to update an ICU expression.
      */
-    OpKind[OpKind["IcuUpdate"] = 42] = "IcuUpdate";
+    OpKind[OpKind["IcuEnd"] = 42] = "IcuEnd";
+    /**
+     * An instruction representing a placeholder in an ICU expression.
+     */
+    OpKind[OpKind["IcuPlaceholder"] = 43] = "IcuPlaceholder";
     /**
      * An i18n context containing information needed to generate an i18n message.
      */
-    OpKind[OpKind["I18nContext"] = 43] = "I18nContext";
+    OpKind[OpKind["I18nContext"] = 44] = "I18nContext";
+    /**
+     * A creation op that corresponds to i18n attributes on an element.
+     */
+    OpKind[OpKind["I18nAttributes"] = 45] = "I18nAttributes";
 })(OpKind || (OpKind = {}));
 /**
  * Distinguishes different kinds of IR expressions.
@@ -8899,23 +9023,27 @@ var ExpressionKind;
      * An expression representing a sanitizer function.
      */
     ExpressionKind[ExpressionKind["SanitizerExpr"] = 20] = "SanitizerExpr";
+    /**
+     * An expression representing a function to create trusted values.
+     */
+    ExpressionKind[ExpressionKind["TrustedValueFnExpr"] = 21] = "TrustedValueFnExpr";
     /**
      * An expression that will cause a literal slot index to be emitted.
      */
-    ExpressionKind[ExpressionKind["SlotLiteralExpr"] = 21] = "SlotLiteralExpr";
+    ExpressionKind[ExpressionKind["SlotLiteralExpr"] = 22] = "SlotLiteralExpr";
     /**
      * A test expression for a conditional op.
      */
-    ExpressionKind[ExpressionKind["ConditionalCase"] = 22] = "ConditionalCase";
+    ExpressionKind[ExpressionKind["ConditionalCase"] = 23] = "ConditionalCase";
     /**
      * A variable for use inside a repeater, providing one of the ambiently-available context
      * properties ($even, $first, etc.).
      */
-    ExpressionKind[ExpressionKind["DerivedRepeaterVar"] = 23] = "DerivedRepeaterVar";
+    ExpressionKind[ExpressionKind["DerivedRepeaterVar"] = 24] = "DerivedRepeaterVar";
     /**
      * An expression that will be automatically extracted to the component const array.
      */
-    ExpressionKind[ExpressionKind["ConstCollected"] = 24] = "ConstCollected";
+    ExpressionKind[ExpressionKind["ConstCollected"] = 25] = "ConstCollected";
 })(ExpressionKind || (ExpressionKind = {}));
 var VariableFlags;
 (function (VariableFlags) {
@@ -8959,18 +9087,6 @@ var CompatibilityMode;
     CompatibilityMode[CompatibilityMode["Normal"] = 0] = "Normal";
     CompatibilityMode[CompatibilityMode["TemplateDefinitionBuilder"] = 1] = "TemplateDefinitionBuilder";
 })(CompatibilityMode || (CompatibilityMode = {}));
-/**
- * Represents functions used to sanitize different pieces of a template.
- */
-var SanitizerFn;
-(function (SanitizerFn) {
-    SanitizerFn[SanitizerFn["Html"] = 0] = "Html";
-    SanitizerFn[SanitizerFn["Script"] = 1] = "Script";
-    SanitizerFn[SanitizerFn["Style"] = 2] = "Style";
-    SanitizerFn[SanitizerFn["Url"] = 3] = "Url";
-    SanitizerFn[SanitizerFn["ResourceUrl"] = 4] = "ResourceUrl";
-    SanitizerFn[SanitizerFn["IframeAttribute"] = 5] = "IframeAttribute";
-})(SanitizerFn || (SanitizerFn = {}));
 /**
  * Enumeration of the different kinds of `@defer` secondary blocks.
  */
@@ -9030,6 +9146,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.
@@ -9053,6 +9183,10 @@ var I18nParamValueFlags;
      * This value represents the closing of a tag.
      */
     I18nParamValueFlags[I18nParamValueFlags["CloseTag"] = 8] = "CloseTag";
+    /**
+     * This value represents an i18n expression index.
+     */
+    I18nParamValueFlags[I18nParamValueFlags["ExpressionIndex"] = 16] = "ExpressionIndex";
 })(I18nParamValueFlags || (I18nParamValueFlags = {}));
 /**
  * Whether the active namespace is HTML, MathML, or SVG mode.
@@ -9085,6 +9219,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`.
@@ -9181,15 +9330,19 @@ const NEW_OP = {
     next: null,
 };
 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 `PropertyOp`.
  */
-function createPropertyOp(target, name, expression, isAnimationTrigger, securityContext, isTemplate, sourceSpan) {
+function createPropertyOp(target, name, expression, isAnimationTrigger, securityContext, isStructuralTemplateAttribute, templateKind, i18nContext, i18nMessage, sourceSpan) {
     return {
         kind: OpKind.Property,
         target,
@@ -9198,7 +9351,10 @@ function createPropertyOp(target, name, expression, isAnimationTrigger, security
         isAnimationTrigger,
         securityContext,
         sanitizer: null,
-        isTemplate,
+        isStructuralTemplateAttribute,
+        templateKind,
+        i18nContext,
+        i18nMessage,
         sourceSpan,
         ...TRAIT_DEPENDS_ON_SLOT_CONTEXT,
         ...TRAIT_CONSUMES_VARS,
@@ -9263,7 +9419,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, isStructuralTemplateAttribute, templateKind, i18nMessage, sourceSpan) {
     return {
         kind: OpKind.Attribute,
         target,
@@ -9272,7 +9428,10 @@ function createAttributeOp(target, name, expression, securityContext, isTextAttr
         securityContext,
         sanitizer: null,
         isTextAttribute,
-        isTemplate,
+        isStructuralTemplateAttribute,
+        templateKind,
+        i18nContext: null,
+        i18nMessage,
         sourceSpan,
         ...TRAIT_DEPENDS_ON_SLOT_CONTEXT,
         ...TRAIT_CONSUMES_VARS,
@@ -9293,15 +9452,19 @@ function createAdvanceOp(delta, sourceSpan) {
 /**
  * Create an i18n expression op.
  */
-function createI18nExpressionOp(context, target, handle, expression, i18nPlaceholder, resolutionTime, sourceSpan) {
+function createI18nExpressionOp(context, target, i18nOwner, handle, expression, icuPlaceholder, i18nPlaceholder, resolutionTime, usage, name, sourceSpan) {
     return {
         kind: OpKind.I18nExpression,
         context,
         target,
+        i18nOwner,
         handle,
         expression,
+        icuPlaceholder,
         i18nPlaceholder,
         resolutionTime,
+        usage,
+        name,
         sourceSpan,
         ...NEW_OP,
         ...TRAIT_CONSUMES_VARS,
@@ -9309,12 +9472,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,
@@ -9863,24 +10026,6 @@ class ReadTemporaryExpr extends ExpressionBase {
         return r;
     }
 }
-class SanitizerExpr extends ExpressionBase {
-    constructor(fn) {
-        super();
-        this.fn = fn;
-        this.kind = ExpressionKind.SanitizerExpr;
-    }
-    visitExpression(visitor, context) { }
-    isEquivalent(e) {
-        return e instanceof SanitizerExpr && e.fn === this.fn;
-    }
-    isConstant() {
-        return true;
-    }
-    clone() {
-        return new SanitizerExpr(this.fn);
-    }
-    transformInternalExpressions() { }
-}
 class SlotLiteralExpr extends ExpressionBase {
     constructor(slot) {
         super();
@@ -9977,7 +10122,6 @@ function transformExpressionsInOp(op, transform, flags) {
         case OpKind.ClassProp:
         case OpKind.ClassMap:
         case OpKind.Binding:
-        case OpKind.HostProperty:
             if (op.expression instanceof Interpolation) {
                 transformExpressionsInInterpolation(op.expression, transform, flags);
             }
@@ -9986,6 +10130,7 @@ function transformExpressionsInOp(op, transform, flags) {
             }
             break;
         case OpKind.Property:
+        case OpKind.HostProperty:
         case OpKind.Attribute:
             if (op.expression instanceof Interpolation) {
                 transformExpressionsInInterpolation(op.expression, transform, flags);
@@ -10031,6 +10176,8 @@ function transformExpressionsInOp(op, transform, flags) {
         case OpKind.ExtractedAttribute:
             op.expression =
                 op.expression && transformExpressionsInExpression(op.expression, transform, flags);
+            op.trustedValueFn = op.trustedValueFn &&
+                transformExpressionsInExpression(op.trustedValueFn, transform, flags);
             break;
         case OpKind.RepeaterCreate:
             op.track = transformExpressionsInExpression(op.track, transform, flags);
@@ -10049,6 +10196,9 @@ function transformExpressionsInOp(op, transform, flags) {
                 op.placeholderConfig =
                     transformExpressionsInExpression(op.placeholderConfig, transform, flags);
             }
+            if (op.resolverFn !== null) {
+                op.resolverFn = transformExpressionsInExpression(op.resolverFn, transform, flags);
+            }
             break;
         case OpKind.I18nMessage:
             for (const [placeholder, expr] of op.params) {
@@ -10076,14 +10226,16 @@ function transformExpressionsInOp(op, transform, flags) {
         case OpKind.I18nContext:
         case OpKind.I18nEnd:
         case OpKind.I18nStart:
-        case OpKind.Icu:
-        case OpKind.IcuUpdate:
+        case OpKind.IcuEnd:
+        case OpKind.IcuStart:
         case OpKind.Namespace:
         case OpKind.Pipe:
         case OpKind.Projection:
         case OpKind.ProjectionDef:
         case OpKind.Template:
         case OpKind.Text:
+        case OpKind.I18nAttributes:
+        case OpKind.IcuPlaceholder:
             // These operations contain no expressions.
             break;
         default:
@@ -10104,6 +10256,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);
     }
@@ -10155,6 +10310,15 @@ 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 TaggedTemplateExpr) {
+        expr.tag = transformExpressionsInExpression(expr.tag, transform, flags);
+        expr.template.expressions =
+            expr.template.expressions.map(e => transformExpressionsInExpression(e, transform, flags));
+    }
+    else if (expr instanceof WrappedNodeExpr) ;
     else if (expr instanceof ReadVarExpr || expr instanceof ExternalExpr ||
         expr instanceof LiteralExpr) ;
     else {
@@ -10513,23 +10677,28 @@ function createProjectionDefOp(def) {
 /**
  * Create an `ExtractedAttributeOp`.
  */
-function createExtractedAttributeOp(target, bindingKind, name, expression) {
+function createExtractedAttributeOp(target, bindingKind, name, expression, i18nContext, i18nMessage, securityContext) {
     return {
         kind: OpKind.ExtractedAttribute,
         target,
         bindingKind,
         name,
         expression,
+        i18nContext,
+        i18nMessage,
+        securityContext,
+        trustedValueFn: null,
         ...NEW_OP,
     };
 }
 /**
  * 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,
@@ -10567,9 +10736,26 @@ function createI18nEndOp(xref) {
         ...NEW_OP,
     };
 }
-function createI18nContextOp(xref, i18nBlock, message, sourceSpan) {
+/**
+ * Creates an ICU placeholder op.
+ */
+function createIcuPlaceholderOp(xref, name, strings) {
+    return {
+        kind: OpKind.IcuPlaceholder,
+        xref,
+        name,
+        strings,
+        expressionPlaceholders: [],
+        ...NEW_OP,
+    };
+}
+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,
@@ -10580,12 +10766,15 @@ function createI18nContextOp(xref, i18nBlock, message, sourceSpan) {
     };
 }
 
-function createHostPropertyOp(name, expression, isAnimationTrigger, sourceSpan) {
+function createHostPropertyOp(name, expression, isAnimationTrigger, i18nContext, securityContext, sourceSpan) {
     return {
         kind: OpKind.HostProperty,
         name,
         expression,
         isAnimationTrigger,
+        i18nContext,
+        securityContext,
+        sanitizer: null,
         sourceSpan,
         ...TRAIT_CONSUMES_VARS,
         ...NEW_OP,
@@ -10809,12 +10998,20 @@ function removeAnys(e) {
  * Adds apply operations after i18n expressions.
  */
 function applyI18nExpressions(job) {
+    const i18nContexts = new Map();
+    for (const unit of job.units) {
+        for (const op of unit.create) {
+            if (op.kind === OpKind.I18nContext) {
+                i18nContexts.set(op.xref, op);
+            }
+        }
+    }
     for (const unit of job.units) {
         for (const op of unit.update) {
             // Only add apply after expressions that are not followed by more expressions.
-            if (op.kind === OpKind.I18nExpression && needsApplication(op)) {
+            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);
             }
         }
     }
@@ -10822,50 +11019,85 @@ function applyI18nExpressions(job) {
 /**
  * Checks whether the given expression op needs to be followed with an apply op.
  */
-function needsApplication(op) {
+function needsApplication(i18nContexts, op) {
     // If the next op is not another expression, we need to apply.
     if (op.next?.kind !== OpKind.I18nExpression) {
         return true;
     }
-    // If the next op is an expression targeting a different i18n context, we need to apply.
-    if (op.next.context !== op.context) {
+    const context = i18nContexts.get(op.context);
+    const nextContext = i18nContexts.get(op.next.context);
+    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) {
-        // Record the last consumed slot before each i18n end instruction.
-        for (const op of unit.create) {
-            if (hasConsumesSlotTrait(op)) {
-                lastSlotConsumer = op.xref;
+        // The first update op.
+        let updateOp = unit.update.head;
+        // I18n expressions currently being moved during the iteration.
+        let i18nExpressionsInProgress = [];
+        // Non-null  while we are iterating through an i18nStart/i18nEnd pair
+        let state = null;
+        for (const createOp of unit.create) {
+            if (createOp.kind === OpKind.I18nStart) {
+                state = {
+                    blockXref: createOp.xref,
+                    lastSlotConsumer: createOp.xref,
+                };
             }
-            switch (op.kind) {
-                case OpKind.I18nStart:
-                    currentI18nOp = op;
-                    break;
-                case OpKind.I18nEnd:
-                    i18nLastSlotConsumers.set(currentI18nOp.xref, lastSlotConsumer);
-                    currentI18nOp = null;
-                    break;
-                case OpKind.I18nContext:
-                    i18nContexts.set(op.xref, op);
-                    break;
+            else if (createOp.kind === OpKind.I18nEnd) {
+                for (const op of i18nExpressionsInProgress) {
+                    op.target = state.lastSlotConsumer;
+                    OpList.insertBefore(op, updateOp);
+                }
+                i18nExpressionsInProgress.length = 0;
+                state = null;
             }
-        }
-        // Assign i18n expressions to target the last slot in its owning block.
-        for (const op of unit.update) {
-            if (op.kind === OpKind.I18nExpression) {
-                const i18nContext = i18nContexts.get(op.context);
-                op.target = i18nLastSlotConsumers.get(i18nContext.i18nBlock);
+            if (hasConsumesSlotTrait(createOp)) {
+                if (state !== null) {
+                    state.lastSlotConsumer = createOp.xref;
+                }
+                while (true) {
+                    if (updateOp.next === null) {
+                        break;
+                    }
+                    if (state !== null && updateOp.kind === OpKind.I18nExpression &&
+                        updateOp.usage === I18nExpressionFor.I18nText &&
+                        updateOp.i18nOwner === state.blockXref) {
+                        const opToRemove = updateOp;
+                        updateOp = updateOp.next;
+                        OpList.remove(opToRemove);
+                        i18nExpressionsInProgress.push(opToRemove);
+                        continue;
+                    }
+                    if (hasDependsOnSlotContextTrait(updateOp) && updateOp.target !== createOp.xref) {
+                        break;
+                    }
+                    updateOp = updateOp.next;
+                }
             }
         }
     }
@@ -10899,22 +11131,42 @@ 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.i18nMessage !== null && op.templateKind === 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.isStructuralTemplateAttribute) {
+                            bindingKind = BindingKind.Template;
+                        }
+                        else {
+                            bindingKind = BindingKind.Property;
+                        }
+                        OpList.insertBefore(
+                        // Deliberaly null i18nMessage value
+                        createExtractedAttributeOp(op.target, bindingKind, op.name, /* expression */ null, /* i18nContext */ null, 
+                        /* i18nMessage */ null, op.securityContext), 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, /* expression */ null, 
+                        /* i18nContext */ null, 
+                        /* i18nMessage */ null, SecurityContext.STYLE), 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, /* expression */ null, 
+                        /* i18nContext */ null, 
+                        /* i18nMessage */ null, SecurityContext.NONE);
                         if (job.kind === CompilationJobKind.Host) {
                             // This attribute will apply to the enclosing host binding compilation unit, so order
                             // doesn't matter.
@@ -10946,24 +11198,14 @@ function extractAttributeOp(unit, op, elements) {
     if (op.expression instanceof Interpolation) {
         return;
     }
-    let extractable = op.expression.isConstant();
+    let extractable = op.isTextAttribute || op.expression.isConstant();
     if (unit.job.compatibility === CompatibilityMode.TemplateDefinitionBuilder) {
-        // TemplateDefinitionBuilder only extracted attributes that were string literals.
-        extractable = isStringLiteral(op.expression);
-        if (op.name === 'style' || op.name === 'class') {
-            // For style and class attributes, TemplateDefinitionBuilder only extracted them if they were
-            // text attributes. For example, `[attr.class]="'my-class'"` was not extracted despite being a
-            // string literal, because it is not a text attribute.
-            extractable &&= op.isTextAttribute;
-        }
-        if (unit.job.kind === CompilationJobKind.Host) {
-            // TemplateDefinitionBuilder also does not seem to extract string literals if they are part of
-            // a host attribute.
-            extractable &&= op.isTextAttribute;
-        }
+        // TemplateDefinitionBuilder only extracts text attributes. It does not extract attriibute
+        // bindings, even if they are constants.
+        extractable &&= op.isTextAttribute;
     }
     if (extractable) {
-        const extractedAttributeOp = createExtractedAttributeOp(op.target, op.isTemplate ? BindingKind.Template : BindingKind.Attribute, op.name, op.expression);
+        const extractedAttributeOp = createExtractedAttributeOp(op.target, op.isStructuralTemplateAttribute ? BindingKind.Template : BindingKind.Attribute, op.name, op.expression, op.i18nContext, op.i18nMessage, op.securityContext);
         if (unit.job.kind === CompilationJobKind.Host) {
             // This attribute will apply to the enclosing host binding compilation unit, so order doesn't
             // matter.
@@ -11010,16 +11252,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.isStructuralTemplateAttribute, op.templateKind, op.i18nMessage, 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.securityContext, 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.isStructuralTemplateAttribute, op.templateKind, op.i18nContext, op.i18nMessage, op.sourceSpan));
                     }
                     break;
                 case BindingKind.I18n:
@@ -11196,41 +11438,6 @@ function generateConditionalExpressions(job) {
     }
 }
 
-exports.TagContentType = void 0;
-(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";
-})(exports.TagContentType || (exports.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;
-}
-
 new Map([
     ['&&', exports.BinaryOperator.And],
     ['>', exports.BinaryOperator.Bigger],
@@ -11267,9 +11474,9 @@ function collectElementConsts(job) {
     for (const unit of job.units) {
         for (const op of unit.create) {
             if (op.kind === OpKind.ExtractedAttribute) {
-                const attributes = allElementAttributes.get(op.target) || new ElementAttributes();
+                const attributes = allElementAttributes.get(op.target) || new ElementAttributes(job.compatibility);
                 allElementAttributes.set(op.target, attributes);
-                attributes.add(op.bindingKind, op.name, op.expression);
+                attributes.add(op.bindingKind, op.name, op.expression, op.trustedValueFn);
                 OpList.remove(op);
             }
         }
@@ -11312,11 +11519,6 @@ const FLYWEIGHT_ARRAY = Object.freeze([]);
  * Container for all of the various kinds of attributes which are applied on an element.
  */
 class ElementAttributes {
-    constructor() {
-        this.known = new Set();
-        this.byKind = new Map;
-        this.projectAs = null;
-    }
     get attributes() {
         return this.byKind.get(BindingKind.Attribute) ?? FLYWEIGHT_ARRAY;
     }
@@ -11335,11 +11537,32 @@ class ElementAttributes {
     get i18n() {
         return this.byKind.get(BindingKind.I18n) ?? FLYWEIGHT_ARRAY;
     }
-    add(kind, name, value) {
-        if (this.known.has(name)) {
+    constructor(compatibility) {
+        this.compatibility = compatibility;
+        this.known = new Map();
+        this.byKind = new Map;
+        this.projectAs = null;
+    }
+    isKnown(kind, name, value) {
+        const nameToValue = this.known.get(kind) ?? new Set();
+        this.known.set(kind, nameToValue);
+        if (nameToValue.has(name)) {
+            return true;
+        }
+        nameToValue.add(name);
+        return false;
+    }
+    add(kind, name, value, trustedValueFn) {
+        // TemplateDefinitionBuilder puts duplicate attribute, class, and style values into the consts
+        // array. This seems inefficient, we can probably keep just the first one or the last value
+        // (whichever actually gets applied when multiple values are listed for the same attribute).
+        const allowDuplicates = this.compatibility === CompatibilityMode.TemplateDefinitionBuilder &&
+            (kind === BindingKind.Attribute || kind === BindingKind.ClassName ||
+                kind === BindingKind.StyleProperty);
+        if (!allowDuplicates && this.isKnown(kind, name, value)) {
             return;
         }
-        this.known.add(name);
+        // TODO: Can this be its own phase
         if (name === 'ngProjectAs') {
             if (value === null || !(value instanceof LiteralExpr) || (value.value == null) ||
                 (typeof value.value?.toString() !== 'string')) {
@@ -11353,9 +11576,17 @@ 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');
+            }
+            if (trustedValueFn !== null) {
+                if (!isStringLiteral(value)) {
+                    throw Error('AssertionError: extracted attribute value should be string literal');
+                }
+                array.push(taggedTemplate(trustedValueFn, new TemplateLiteral([new TemplateLiteralElement(value.value)], []), undefined, value.sourceSpan));
+            }
+            else {
+                array.push(value);
             }
-            array.push(value);
         }
     }
     arrayFor(kind) {
@@ -11369,7 +11600,7 @@ class ElementAttributes {
  * Gets an array of literal expressions representing the attribute's namespaced name.
  */
 function getAttributeNameLiterals$1(name) {
-    const [attributeNamespace, attributeName] = splitNsName(name);
+    const [attributeNamespace, attributeName] = splitNsName(name, false);
     const nameLiteral = literal(attributeName);
     if (attributeNamespace) {
         return [
@@ -11407,6 +11638,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, null, op.expression.i18nPlaceholders[i], I18nParamResolutionTime.Creation, I18nExpressionFor.I18nAttribute, op.name, op.sourceSpan));
+                    }
+                    OpList.replaceWithMany(op, ops);
+                    break;
+            }
+        }
+    }
+}
+
 /**
  * Create extracted deps functions for defer ops.
  */
@@ -11435,7 +11710,8 @@ function createDeferDepsFns(job) {
                 if (op.handle.slot === null) {
                     throw new Error('AssertionError: slot must be assigned bfore extracting defer deps functions');
                 }
-                op.resolverFn = job.pool.getSharedFunctionReference(depsFnExpr, `${job.componentName}_Defer_${op.handle.slot}_DepsFn`);
+                op.resolverFn = job.pool.getSharedFunctionReference(depsFnExpr, `${job.componentName}_Defer_${op.handle.slot}_DepsFn`, 
+                /* Don't use unique names for TDB compatibility */ false);
             }
         }
     }
@@ -11452,37 +11728,85 @@ function createDeferDepsFns(job) {
  * message.)
  */
 function createI18nContexts(job) {
+    // Create i18n context ops for i18n attrs.
+    const attrContextByMessage = new Map();
+    for (const unit of job.units) {
+        for (const op of unit.ops()) {
+            switch (op.kind) {
+                case OpKind.Binding:
+                case OpKind.Property:
+                case OpKind.Attribute:
+                case OpKind.ExtractedAttribute:
+                    if (op.i18nMessage === null) {
+                        continue;
+                    }
+                    if (!attrContextByMessage.has(op.i18nMessage)) {
+                        const i18nContext = createI18nContextOp(I18nContextKind.Attr, job.allocateXrefId(), null, op.i18nMessage, null);
+                        unit.create.push(i18nContext);
+                        attrContextByMessage.set(op.i18nMessage, i18nContext.xref);
+                    }
+                    op.i18nContext = attrContextByMessage.get(op.i18nMessage);
+                    break;
+            }
+        }
+    }
+    // Create i18n context ops for root i18n blocks.
+    const blockContextByI18nBlock = new Map();
+    for (const unit of job.units) {
+        for (const op of unit.create) {
+            switch (op.kind) {
+                case OpKind.I18nStart:
+                    if (op.xref === op.root) {
+                        const contextOp = createI18nContextOp(I18nContextKind.RootI18n, job.allocateXrefId(), op.xref, op.message, null);
+                        unit.create.push(contextOp);
+                        op.context = contextOp.xref;
+                        blockContextByI18nBlock.set(op.xref, contextOp);
+                    }
+                    break;
+            }
+        }
+    }
+    // Assign i18n contexts for child i18n blocks. These don't need their own conext, instead they
+    // should inherit from their root i18n block.
+    for (const unit of job.units) {
+        for (const op of unit.create) {
+            if (op.kind === OpKind.I18nStart && op.xref !== op.root) {
+                const rootContext = blockContextByI18nBlock.get(op.root);
+                if (rootContext === undefined) {
+                    throw Error('AssertionError: Root i18n block i18n context should have been created.');
+                }
+                op.context = rootContext.xref;
+                blockContextByI18nBlock.set(op.xref, rootContext);
+            }
+        }
+    }
+    // Create or assign i18n contexts for ICUs.
     let currentI18nOp = null;
-    let xref;
     for (const unit of job.units) {
         for (const op of unit.create) {
             switch (op.kind) {
                 case OpKind.I18nStart:
-                    // Each i18n block gets its own context.
-                    xref = job.allocateXrefId();
-                    unit.create.push(createI18nContextOp(xref, op.xref, op.message, null));
-                    op.context = xref;
                     currentI18nOp = op;
                     break;
                 case OpKind.I18nEnd:
                     currentI18nOp = null;
                     break;
-                case OpKind.Icu:
-                    // If an ICU represents a different message than its containing block, we give it its own
-                    // i18n context.
+                case OpKind.IcuStart:
                     if (currentI18nOp === null) {
-                        throw Error('Unexpected ICU outside of an i18n block.');
+                        throw Error('AssertionError: Unexpected ICU outside of an i18n block.');
                     }
                     if (op.message.id !== currentI18nOp.message.id) {
-                        // There was an enclosing i18n block around this ICU somewhere.
-                        xref = job.allocateXrefId();
-                        unit.create.push(createI18nContextOp(xref, currentI18nOp.xref, op.message, null));
-                        op.context = xref;
+                        // This ICU is a sub-message inside its parent i18n block message. We need to give it
+                        // its own context.
+                        const contextOp = createI18nContextOp(I18nContextKind.Icu, job.allocateXrefId(), currentI18nOp.xref, op.message, null);
+                        unit.create.push(contextOp);
+                        op.context = contextOp.xref;
                     }
                     else {
-                        // The i18n block was generated because of this ICU, OR it was explicit, but the ICU is
-                        // the only localizable content inside of it.
+                        // This ICU is the only translatable content in its parent i18n block. We need to
+                        // convert the parent's context into an ICU context.
                         op.context = currentI18nOp.context;
+                        blockContextByI18nBlock.get(currentI18nOp.xref).contextKind = I18nContextKind.Icu;
                     }
                     break;
             }
@@ -11491,44 +11815,27 @@ function createI18nContexts(job) {
 }
 
 /**
- * Replace the ICU update ops with i18n expression ops.
+ * Deduplicate text bindings, e.g. <div class="cls1" class="cls2">
  */
-function createI18nIcuExpressions(job) {
-    const icus = new Map();
-    const i18nContexts = new Map();
-    const i18nBlocks = new Map();
-    // Collect maps of ops that need to be referenced to create the I18nExpressionOps.
+function deduplicateTextBindings(job) {
+    const seen = new Map();
     for (const unit of job.units) {
-        for (const op of unit.create) {
-            switch (op.kind) {
-                case OpKind.Icu:
-                    icus.set(op.xref, op);
-                    break;
-                case OpKind.I18nContext:
-                    i18nContexts.set(op.xref, op);
-                    break;
-                case OpKind.I18nStart:
-                    i18nBlocks.set(op.xref, op);
-                    break;
-            }
-        }
-        // Replace each IcuUpdateOp with an I18nExpressionOp.
-        for (const op of unit.update) {
-            switch (op.kind) {
-                case OpKind.IcuUpdate:
-                    const icuOp = icus.get(op.xref);
-                    if (icuOp?.icu.expressionPlaceholder === undefined) {
-                        throw Error('ICU should have an i18n placeholder');
-                    }
-                    if (icuOp.context === null) {
-                        throw Error('ICU should have its i18n context set');
+        for (const op of unit.update.reversed()) {
+            if (op.kind === OpKind.Binding && op.isTextAttribute) {
+                const seenForElement = seen.get(op.target) || new Set();
+                if (seenForElement.has(op.name)) {
+                    if (job.compatibility === CompatibilityMode.TemplateDefinitionBuilder) {
+                        // For most duplicated attributes, TemplateDefinitionBuilder lists all of the values in
+                        // the consts array. However, for style and class attributes it only keeps the last one.
+                        // We replicate that behavior here since it has actual consequences for apps with
+                        // duplicate class or style attrs.
+                        if (op.name === 'style' || op.name === 'class') {
+                            OpList.remove(op);
+                        }
                     }
-                    const i18nContext = i18nContexts.get(icuOp.context);
-                    const i18nBlock = i18nBlocks.get(i18nContext.i18nBlock);
-                    OpList.replace(op, createI18nExpressionOp(i18nContext.xref, i18nBlock.xref, i18nBlock.handle, new LexicalReadExpr(icuOp.icu.expression), icuOp.icu.expressionPlaceholder, 
-                    // ICU-based i18n Expressions are resolved during post-processing.
-                    I18nParamResolutionTime.Postproccessing, null));
-                    break;
+                }
+                seenForElement.add(op.name);
+                seen.set(op.target, seenForElement);
             }
         }
     }
@@ -11880,7 +12187,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.
  */
@@ -11914,52 +12221,69 @@ const LIST_DELIMITER = '|';
  * used in the final output.
  */
 function extractI18nMessages(job) {
-    // Save the i18n context ops for later use.
+    // Create an i18n message for each context.
+    // TODO: Merge the context op with the message op since they're 1:1 anyways.
+    const i18nMessagesByContext = new Map();
+    const i18nBlocks = new Map();
     const i18nContexts = new Map();
-    // Record which contexts represent i18n blocks (any other contexts are assumed to have been
-    // created from ICUs).
-    const i18nBlockContexts = new Set();
     for (const unit of job.units) {
         for (const op of unit.create) {
             switch (op.kind) {
                 case OpKind.I18nContext:
+                    const i18nMessageOp = createI18nMessage(job, op);
+                    unit.create.push(i18nMessageOp);
+                    i18nMessagesByContext.set(op.xref, i18nMessageOp);
                     i18nContexts.set(op.xref, op);
                     break;
                 case OpKind.I18nStart:
-                    i18nBlockContexts.add(op.context);
+                    i18nBlocks.set(op.xref, op);
                     break;
             }
         }
     }
-    // Extract messages from root i18n blocks.
-    const i18nBlockMessages = new Map();
-    for (const unit of job.units) {
-        for (const op of unit.create) {
-            if (op.kind === OpKind.I18nStart && op.xref === op.root) {
-                if (!op.context) {
-                    throw Error('I18n start op should have its context set.');
-                }
-                const i18nMessageOp = createI18nMessage(job, i18nContexts.get(op.context));
-                i18nBlockMessages.set(op.xref, i18nMessageOp);
-                unit.create.push(i18nMessageOp);
-            }
-        }
-    }
-    // Extract messages from ICUs with their own sub-context.
+    // Associate sub-messages for ICUs with their root message. At this point we can also remove the
+    // ICU start/end ops, as they are no longer needed.
+    let currentIcu = null;
     for (const unit of job.units) {
         for (const op of unit.create) {
-            if (op.kind === OpKind.Icu) {
-                if (!op.context) {
-                    throw Error('ICU op should have its context set.');
-                }
-                if (!i18nBlockContexts.has(op.context)) {
-                    const i18nContext = i18nContexts.get(op.context);
-                    const subMessage = createI18nMessage(job, i18nContext, op.messagePlaceholder);
-                    unit.create.push(subMessage);
-                    const parentMessage = i18nBlockMessages.get(i18nContext.i18nBlock);
-                    parentMessage?.subMessages.push(subMessage.xref);
-                }
-                OpList.remove(op);
+            switch (op.kind) {
+                case OpKind.IcuStart:
+                    currentIcu = op;
+                    OpList.remove(op);
+                    // Skip any contexts not associated with an ICU.
+                    const icuContext = i18nContexts.get(op.context);
+                    if (icuContext.contextKind !== I18nContextKind.Icu) {
+                        continue;
+                    }
+                    // Skip ICUs that share a context with their i18n message. These represent root-level
+                    // ICUs, not sub-messages.
+                    const i18nBlock = i18nBlocks.get(icuContext.i18nBlock);
+                    if (i18nBlock.context === icuContext.xref) {
+                        continue;
+                    }
+                    // Find the root message and push this ICUs message as a sub-message.
+                    const rootI18nBlock = i18nBlocks.get(i18nBlock.root);
+                    const rootMessage = i18nMessagesByContext.get(rootI18nBlock.context);
+                    if (rootMessage === undefined) {
+                        throw Error('AssertionError: ICU sub-message should belong to a root message.');
+                    }
+                    const subMessage = i18nMessagesByContext.get(icuContext.xref);
+                    subMessage.messagePlaceholder = op.messagePlaceholder;
+                    rootMessage.subMessages.push(subMessage.xref);
+                    break;
+                case OpKind.IcuEnd:
+                    currentIcu = null;
+                    OpList.remove(op);
+                    break;
+                case OpKind.IcuPlaceholder:
+                    // Add ICU placeholders to the message, then remove the ICU placeholder ops.
+                    if (currentIcu === null || currentIcu.context == null) {
+                        throw Error('AssertionError: Unexpected ICU placeholder outside of i18n context');
+                    }
+                    const msg = i18nMessagesByContext.get(currentIcu.context);
+                    msg.postprocessingParams.set(op.name, literal(formatIcuPlaceholder(op)));
+                    OpList.remove(op);
+                    break;
             }
         }
     }
@@ -11968,26 +12292,33 @@ function extractI18nMessages(job) {
  * Create an i18n message op from an i18n context op.
  */
 function createI18nMessage(job, context, messagePlaceholder) {
-    let needsPostprocessing = context.postprocessingParams.size > 0;
-    for (const values of context.params.values()) {
-        if (values.length > 1) {
-            needsPostprocessing = true;
-        }
+    let formattedParams = formatParams(context.params);
+    const formattedPostprocessingParams = formatParams(context.postprocessingParams);
+    let needsPostprocessing = [...context.params.values()].some(v => v.length > 1);
+    return createI18nMessageOp(job.allocateXrefId(), context.xref, context.i18nBlock, context.message, messagePlaceholder ?? null, formattedParams, formattedPostprocessingParams, needsPostprocessing);
+}
+/**
+ * Formats an ICU placeholder into a single string with expression placeholders.
+ */
+function formatIcuPlaceholder(op) {
+    if (op.strings.length !== op.expressionPlaceholders.length + 1) {
+        throw Error(`AsserionError: Invalid ICU placeholder with ${op.strings.length} strings and ${op.expressionPlaceholders.length} expressions`);
     }
-    return createI18nMessageOp(job.allocateXrefId(), context.i18nBlock, context.message, messagePlaceholder ?? null, formatParams(context.params), formatParams(context.postprocessingParams), needsPostprocessing);
+    const values = op.expressionPlaceholders.map(formatValue);
+    return op.strings.flatMap((str, i) => [str, values[i] || '']).join('');
 }
 /**
  * Formats a map of `I18nParamValue[]` values into a map of `Expression` values.
  */
 function formatParams(params) {
-    const result = new Map();
-    for (const [placeholder, placeholderValues] of [...params].sort()) {
+    const 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).
@@ -12005,6 +12336,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) {
@@ -12017,12 +12389,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}`;
 }
 
 /**
@@ -12056,7 +12423,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?
@@ -12139,9 +12506,15 @@ function recursivelyProcessView(view, parentScope) {
     for (const op of view.create) {
         switch (op.kind) {
             case OpKind.Template:
+                // Descend into child embedded views.
+                recursivelyProcessView(view.job.views.get(op.xref), scope);
+                break;
             case OpKind.RepeaterCreate:
                 // Descend into child embedded views.
                 recursivelyProcessView(view.job.views.get(op.xref), scope);
+                if (op.emptyView) {
+                    recursivelyProcessView(view.job.views.get(op.emptyView), scope);
+                }
                 break;
             case OpKind.Listener:
                 // Prepend variables to listener handler functions.
@@ -12272,7 +12645,7 @@ const BANG_IMPORTANT = '!important';
  */
 function parseHostStyleProperties(job) {
     for (const op of job.root.update) {
-        if (op.kind !== OpKind.Binding) {
+        if (!(op.kind === OpKind.Binding && op.bindingKind === BindingKind.Property)) {
             continue;
         }
         if (op.name.endsWith(BANG_IMPORTANT)) {
@@ -12359,6 +12732,9 @@ class IcuSerializerVisitor {
     visitPlaceholder(ph) {
         return this.formatPh(ph.name);
     }
+    visitBlockPlaceholder(ph) {
+        return `${this.formatPh(ph.startName)}${ph.children.map(child => child.visit(this)).join('')}${this.formatPh(ph.closeName)}`;
+    }
     visitIcuPlaceholder(ph, context) {
         return this.formatPh(ph.name);
     }
@@ -14080,12 +14456,12 @@ class Comment {
         return visitor.visitComment(this, context);
     }
 }
-class Block {
-    constructor(name, parameters, children, sourceSpan, nameSpan, startSourceSpan, endSourceSpan = null) {
+class Block extends NodeWithI18n {
+    constructor(name, parameters, children, sourceSpan, nameSpan, startSourceSpan, endSourceSpan = null, i18n) {
+        super(sourceSpan, i18n);
         this.name = name;
         this.parameters = parameters;
         this.children = children;
-        this.sourceSpan = sourceSpan;
         this.nameSpan = nameSpan;
         this.startSourceSpan = startSourceSpan;
         this.endSourceSpan = endSourceSpan;
@@ -14771,6 +15147,24 @@ class PlaceholderRegistry {
     getUniquePlaceholder(name) {
         return this._generateUniqueName(name.toUpperCase());
     }
+    getStartBlockPlaceholderName(name, parameters) {
+        const signature = this._hashBlock(name, parameters);
+        if (this._signatureToName[signature]) {
+            return this._signatureToName[signature];
+        }
+        const placeholder = this._generateUniqueName(`START_BLOCK_${this._toSnakeCase(name)}`);
+        this._signatureToName[signature] = placeholder;
+        return placeholder;
+    }
+    getCloseBlockPlaceholderName(name) {
+        const signature = this._hashClosingBlock(name);
+        if (this._signatureToName[signature]) {
+            return this._signatureToName[signature];
+        }
+        const placeholder = this._generateUniqueName(`CLOSE_BLOCK_${this._toSnakeCase(name)}`);
+        this._signatureToName[signature] = placeholder;
+        return placeholder;
+    }
     // Generate a hash for a tag - does not take attribute order into account
     _hashTag(tag, attrs, isVoid) {
         const start = `<${tag}`;
@@ -14781,6 +15175,16 @@ class PlaceholderRegistry {
     _hashClosingTag(tag) {
         return this._hashTag(`/${tag}`, {}, false);
     }
+    _hashBlock(name, parameters) {
+        const params = parameters.length === 0 ? '' : ` (${parameters.sort().join('; ')})`;
+        return `@${name}${params} {}`;
+    }
+    _hashClosingBlock(name) {
+        return this._hashBlock(`close_${name}`, []);
+    }
+    _toSnakeCase(name) {
+        return name.toUpperCase().replace(/[^A-Z0-9]/g, '_');
+    }
     _generateUniqueName(base) {
         const seen = this._placeHolderNameCounts.hasOwnProperty(base);
         if (!seen) {
@@ -14797,17 +15201,18 @@ const _expParser = new Parser$1(new Lexer());
 /**
  * Returns a function converting html nodes to an i18n Message given an interpolationConfig
  */
-function createI18nMessageFactory(interpolationConfig) {
-    const visitor = new _I18nVisitor(_expParser, interpolationConfig);
+function createI18nMessageFactory(interpolationConfig, containerBlocks) {
+    const visitor = new _I18nVisitor(_expParser, interpolationConfig, containerBlocks);
     return (nodes, meaning, description, customId, visitNodeFn) => visitor.toI18nMessage(nodes, meaning, description, customId, visitNodeFn);
 }
 function noopVisitNodeFn(_html, i18n) {
     return i18n;
 }
 class _I18nVisitor {
-    constructor(_expressionParser, _interpolationConfig) {
+    constructor(_expressionParser, _interpolationConfig, _containerBlocks) {
         this._expressionParser = _expressionParser;
         this._interpolationConfig = _interpolationConfig;
+        this._containerBlocks = _containerBlocks;
     }
     toI18nMessage(nodes, meaning = '', description = '', customId = '', visitNodeFn) {
         const context = {
@@ -14894,10 +15299,26 @@ class _I18nVisitor {
     }
     visitBlock(block, context) {
         const children = visitAll(this, block.children, context);
-        const node = new Container(children, block.sourceSpan);
+        if (this._containerBlocks.has(block.name)) {
+            return new Container(children, block.sourceSpan);
+        }
+        const parameters = block.parameters.map(param => param.expression);
+        const startPhName = context.placeholderRegistry.getStartBlockPlaceholderName(block.name, parameters);
+        const closePhName = context.placeholderRegistry.getCloseBlockPlaceholderName(block.name);
+        context.placeholderToContent[startPhName] = {
+            text: block.startSourceSpan.toString(),
+            sourceSpan: block.startSourceSpan,
+        };
+        context.placeholderToContent[closePhName] = {
+            text: block.endSourceSpan ? block.endSourceSpan.toString() : '}',
+            sourceSpan: block.endSourceSpan ?? block.sourceSpan,
+        };
+        const node = new BlockPlaceholder(block.name, parameters, startPhName, closePhName, children, block.sourceSpan, block.startSourceSpan, block.endSourceSpan);
         return context.visitNodeFn(block, node);
     }
-    visitBlockParameter(_parameter, _context) { }
+    visitBlockParameter(_parameter, _context) {
+        throw new Error('Unreachable code');
+    }
     /**
      * Convert, text and interpolated tokens up into text and placeholder pieces.
      *
@@ -18766,17 +19187,18 @@ const setI18nRefs = (htmlNode, i18nNode) => {
  * stored with other element's and attribute's information.
  */
 class I18nMetaVisitor {
-    constructor(interpolationConfig = DEFAULT_INTERPOLATION_CONFIG, keepI18nAttrs = false, enableI18nLegacyMessageIdFormat = false) {
+    constructor(interpolationConfig = DEFAULT_INTERPOLATION_CONFIG, keepI18nAttrs = false, enableI18nLegacyMessageIdFormat = false, containerBlocks = DEFAULT_CONTAINER_BLOCKS) {
         this.interpolationConfig = interpolationConfig;
         this.keepI18nAttrs = keepI18nAttrs;
         this.enableI18nLegacyMessageIdFormat = enableI18nLegacyMessageIdFormat;
+        this.containerBlocks = containerBlocks;
         // whether visited nodes contain i18n information
         this.hasI18nMeta = false;
         this._errors = [];
     }
     _generateI18nMessage(nodes, meta = '', visitNodeFn) {
         const { meaning, description, customId } = this._parseMetadata(meta);
-        const createI18nMessage = createI18nMessageFactory(this.interpolationConfig);
+        const createI18nMessage = createI18nMessageFactory(this.interpolationConfig, this.containerBlocks);
         const message = createI18nMessage(nodes, meaning, description, customId, visitNodeFn);
         this._setMessageId(message, meta);
         this._setLegacyIds(message, meta);
@@ -19077,6 +19499,9 @@ class GetMsgSerializerVisitor {
     visitPlaceholder(ph) {
         return this.formatPh(ph.name);
     }
+    visitBlockPlaceholder(ph) {
+        return `${this.formatPh(ph.startName)}${ph.children.map(child => child.visit(this)).join('')}${this.formatPh(ph.closeName)}`;
+    }
     visitIcuPlaceholder(ph, context) {
         return this.formatPh(ph.name);
     }
@@ -19130,6 +19555,11 @@ class LocalizeSerializerVisitor {
     visitPlaceholder(ph) {
         this.pieces.push(this.createPlaceholderPiece(ph.name, ph.sourceSpan));
     }
+    visitBlockPlaceholder(ph) {
+        this.pieces.push(this.createPlaceholderPiece(ph.startName, ph.startSourceSpan ?? ph.sourceSpan));
+        ph.children.forEach(child => child.visit(this));
+        this.pieces.push(this.createPlaceholderPiece(ph.closeName, ph.endSourceSpan ?? ph.sourceSpan));
+    }
     visitIcuPlaceholder(ph) {
         this.pieces.push(this.createPlaceholderPiece(ph.name, ph.sourceSpan, this.placeholderToMessage[ph.name]));
     }
@@ -19203,35 +19633,136 @@ 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 Ops
+    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) {
+                const attributes = extractedAttributesByI18nContext.get(op.i18nContext) ?? [];
+                attributes.push(op);
+                extractedAttributesByI18nContext.set(op.i18nContext, attributes);
+            }
+            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 attributesForMessage = extractedAttributesByI18nContext.get(op.i18nContext);
+                        if (attributesForMessage !== undefined) {
+                            for (const attr of attributesForMessage) {
+                                attr.expression = mainVar.clone();
+                            }
+                        }
+                    }
+                }
                 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;
             }
         }
     }
@@ -19241,16 +19772,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);
     }
-    // Check that the message has all of its parameters filled out.
-    assertAllParamsResolved(messageOp);
+    addSubMessageParams(messageOp, subMessagePlaceholders);
+    // Sort the params for consistency with TemaplateDefinitionBuilder output.
+    messageOp.params = new Map([...messageOp.params.entries()].sort());
     const mainVar = variable(job.pool.uniqueName(TRANSLATION_VAR_PREFIX));
     // Closure Compiler requires const names to start with `MSG_` but disallows any other
     // const to start with `MSG_`. We define a variable starting with `MSG_` just for the
@@ -19259,10 +19797,13 @@ function collectMessage(job, fileBasedI18nSuffix, messages, messageOp) {
     let transformFn = undefined;
     // If nescessary, add a post-processing step and resolve any placeholder params that are
     // set in post-processing.
-    if (messageOp.needsPostprocessing) {
+    if (messageOp.needsPostprocessing || messageOp.postprocessingParams.size > 0) {
+        // Sort the post-processing params for consistency with TemaplateDefinitionBuilder output.
+        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]);
     }
@@ -19270,6 +19811,25 @@ 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));
+        }
+    }
+}
 /**
  * Generate statements that define a given translation message.
  *
@@ -19292,7 +19852,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.
  */
@@ -19337,31 +19898,21 @@ function i18nGenerateClosureVar(pool, messageId, fileBasedI18nSuffix, useExterna
     }
     return variable(name);
 }
-/**
- * Asserts that all of the message's placeholders have values.
- */
-function assertAllParamsResolved(op) {
-    for (const placeholder in op.message.placeholders) {
-        if (!op.params.has(placeholder) && !op.postprocessingParams.has(placeholder)) {
-            throw Error(`Failed to resolve i18n placeholder: ${placeholder}`);
-        }
-    }
-    for (const placeholder in op.message.placeholderToMessage) {
-        if (!op.params.has(placeholder) && !op.postprocessingParams.has(placeholder)) {
-            throw Error(`Failed to resolve i18n message placeholder: ${placeholder}`);
-        }
-    }
-}
 
 /**
  * Removes text nodes within i18n blocks since they are already hardcoded into the i18n message.
+ * 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.
         let currentI18n = null;
+        let currentIcu = null;
         const textNodeI18nBlocks = new Map();
+        const textNodeIcus = new Map();
+        const icuPlaceholderByText = new Map();
         for (const op of unit.create) {
             switch (op.kind) {
                 case OpKind.I18nStart:
@@ -19373,10 +19924,32 @@ function extractI18nText(job) {
                 case OpKind.I18nEnd:
                     currentI18n = null;
                     break;
+                case OpKind.IcuStart:
+                    if (op.context === null) {
+                        throw Error('Icu op should have its context set.');
+                    }
+                    currentIcu = op;
+                    break;
+                case OpKind.IcuEnd:
+                    currentIcu = null;
+                    break;
                 case OpKind.Text:
                     if (currentI18n !== null) {
                         textNodeI18nBlocks.set(op.xref, currentI18n);
-                        OpList.remove(op);
+                        textNodeIcus.set(op.xref, currentIcu);
+                        if (op.icuPlaceholder !== null) {
+                            // Create an op to represent the ICU placeholder. Initially set its static text to the
+                            // value of the text op, though this may be overwritten later if this text op is a
+                            // placeholder for an interpolation.
+                            const icuPlaceholderOp = createIcuPlaceholderOp(job.allocateXrefId(), op.icuPlaceholder, [op.initialValue]);
+                            OpList.replace(op, icuPlaceholderOp);
+                            icuPlaceholderByText.set(op.xref, icuPlaceholderOp);
+                        }
+                        else {
+                            // Otherwise just remove the text op, since its value is already accounted for in the
+                            // translated message.
+                            OpList.remove(op);
+                        }
                     }
                     break;
             }
@@ -19390,15 +19963,24 @@ function extractI18nText(job) {
                         continue;
                     }
                     const i18nOp = textNodeI18nBlocks.get(op.target);
+                    const icuOp = textNodeIcus.get(op.target);
+                    const icuPlaceholder = icuPlaceholderByText.get(op.target);
+                    const contextId = icuOp ? icuOp.context : i18nOp.context;
+                    const resolutionTime = icuOp ? I18nParamResolutionTime.Postproccessing :
+                        I18nParamResolutionTime.Creation;
                     const ops = [];
                     for (let i = 0; i < op.interpolation.expressions.length; i++) {
                         const expr = op.interpolation.expressions[i];
-                        const placeholder = op.i18nPlaceholders[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(i18nOp.context, i18nOp.xref, i18nOp.handle, expr, placeholder.name, I18nParamResolutionTime.Creation, expr.sourceSpan ?? op.sourceSpan));
+                        ops.push(createI18nExpressionOp(contextId, i18nOp.xref, i18nOp.xref, i18nOp.handle, expr, icuPlaceholder?.xref ?? null, op.interpolation.i18nPlaceholders[i] ?? null, resolutionTime, I18nExpressionFor.I18nText, '', expr.sourceSpan ?? op.sourceSpan));
                     }
                     OpList.replaceWithMany(op, ops);
+                    // If this interpolation is part of an ICU placeholder, add the strings and expressions to
+                    // the placeholder.
+                    if (icuPlaceholder !== undefined) {
+                        icuPlaceholder.strings = op.interpolation.strings;
+                    }
                     break;
             }
         }
@@ -19434,60 +20016,9 @@ function liftLocalRefs(job) {
 function serializeLocalRefs(refs) {
     const constRefs = [];
     for (const ref of refs) {
-        constRefs.push(literal(ref.name), literal(ref.target));
-    }
-    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]);
-        }
+        constRefs.push(literal(ref.name), literal(ref.target));
     }
+    return literalArr(constRefs);
 }
 
 /**
@@ -19978,21 +20509,39 @@ function keepLast(ops) {
  * class property.
  */
 function parseExtractedStyles(job) {
+    const elements = new Map();
+    for (const unit of job.units) {
+        for (const op of unit.create) {
+            if (isElementOrContainerOp(op)) {
+                elements.set(op.xref, op);
+            }
+        }
+    }
     for (const unit of job.units) {
         for (const op of unit.create) {
             if (op.kind === OpKind.ExtractedAttribute && op.bindingKind === BindingKind.Attribute &&
                 isStringLiteral(op.expression)) {
+                const target = elements.get(op.target);
+                if (target !== undefined && target.kind === OpKind.Template &&
+                    target.templateKind === TemplateKind.Structural) {
+                    // TemplateDefinitionBuilder will not apply class and style bindings to structural
+                    // directives; instead, it will leave them as attributes.
+                    // (It's not clear what that would mean, anyway -- classes and styles on a structural
+                    // element should probably be a parse error.)
+                    // TODO: We may be able to remove this once Template Pipeline is the default.
+                    continue;
+                }
                 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, null, SecurityContext.STYLE), 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, null, SecurityContext.NONE), op);
                     }
                     OpList.remove(op);
                 }
@@ -20008,18 +20557,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.
  */
@@ -20139,23 +20700,43 @@ 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:
-                const templateView = unit.job.views.get(op.xref);
-                // We found an <ng-template> inside an i18n block; increment the sub-template counter and
-                // wrap the template's view in a child i18n block.
-                if (op.i18nPlaceholder !== undefined) {
-                    if (i18nBlock === null) {
-                        throw Error('Expected template with i18n placeholder to be in an i18n block.');
-                    }
-                    subTemplateIndex++;
-                    wrapTemplateWithI18n(templateView, i18nBlock);
+                subTemplateIndex = propagateI18nBlocksForView(unit.job.views.get(op.xref), i18nBlock, op.i18nPlaceholder, subTemplateIndex);
+                break;
+            case OpKind.RepeaterCreate:
+                // Propagate i18n blocks to the @for template.
+                unit.job.views.get(op.xref);
+                subTemplateIndex = propagateI18nBlocksForView(unit.job.views.get(op.xref), i18nBlock, op.i18nPlaceholder, subTemplateIndex);
+                // Then if there's an @empty template, propagate the i18n blocks for it as well.
+                if (op.emptyView !== null) {
+                    subTemplateIndex = propagateI18nBlocksForView(unit.job.views.get(op.emptyView), i18nBlock, op.emptyI18nPlaceholder, subTemplateIndex);
                 }
-                // Continue traversing inside the template's view.
-                propagateI18nBlocksToTemplates(templateView, subTemplateIndex);
+                break;
+        }
+    }
+    return subTemplateIndex;
+}
+/**
+ * Propagate i18n blocks for a view.
+ */
+function propagateI18nBlocksForView(view, i18nBlock, i18nPlaceholder, subTemplateIndex) {
+    // We found an <ng-template> inside an i18n block; increment the sub-template counter and
+    // wrap the template's view in a child i18n block.
+    if (i18nPlaceholder !== undefined) {
+        if (i18nBlock === null) {
+            throw Error('Expected template with i18n placeholder to be in an i18n block.');
         }
+        subTemplateIndex++;
+        wrapTemplateWithI18n(view, i18nBlock);
     }
+    // Continue traversing inside the template's view.
+    return propagateI18nBlocksToTemplates(view, subTemplateIndex);
 }
 /**
  * Wraps a template view with i18n start and end ops.
@@ -20322,17 +20903,13 @@ function disableBindings() {
 function enableBindings() {
     return call(Identifiers.enableBindings, [], null);
 }
-function listener(name, handlerFn, sourceSpan) {
-    return call(Identifiers.listener, [
-        literal(name),
-        handlerFn,
-    ], sourceSpan);
-}
-function syntheticHostListener(name, handlerFn, sourceSpan) {
-    return call(Identifiers.syntheticHostListener, [
-        literal(name),
-        handlerFn,
-    ], sourceSpan);
+function listener(name, handlerFn, eventTargetResolver, syntheticHost, sourceSpan) {
+    const args = [literal(name), handlerFn];
+    if (eventTargetResolver !== null) {
+        args.push(literal(false)); // `useCapture` flag, defaults to `false`
+        args.push(importExpr(eventTargetResolver));
+    }
+    return call(syntheticHost ? Identifiers.syntheticHostListener : Identifiers.listener, args, sourceSpan);
 }
 function pipe(slot, name) {
     return call(Identifiers.pipe, [
@@ -20463,8 +21040,8 @@ function repeaterCreate(slot, viewFnName, decls, vars, tag, constIndex, trackByF
     }
     return call(Identifiers.repeaterCreate, args, sourceSpan);
 }
-function repeater(metadataSlot, collection, sourceSpan) {
-    return call(Identifiers.repeater, [literal(metadataSlot), collection], sourceSpan);
+function repeater(collection, sourceSpan) {
+    return call(Identifiers.repeater, [collection], sourceSpan);
 }
 function deferWhen(prefetch, expr, sourceSpan) {
     return call(prefetch ? Identifiers.deferPrefetchWhen : Identifiers.deferWhen, [expr], sourceSpan);
@@ -20479,6 +21056,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) {
@@ -20589,8 +21170,12 @@ function classMapInterpolate(strings, expressions, sourceSpan) {
     const interpolationArgs = collateInterpolationArgs(strings, expressions);
     return callVariadicInstruction(CLASS_MAP_INTERPOLATE_CONFIG, [], interpolationArgs, [], sourceSpan);
 }
-function hostProperty(name, expression, sourceSpan) {
-    return call(Identifiers.hostProperty, [literal(name), expression], sourceSpan);
+function hostProperty(name, expression, sanitizer, sourceSpan) {
+    const args = [literal(name), expression];
+    if (sanitizer !== null) {
+        args.push(sanitizer);
+    }
+    return call(Identifiers.hostProperty, args, sourceSpan);
 }
 function syntheticHostProperty(name, expression, sourceSpan) {
     return call(Identifiers.syntheticHostProperty, [literal(name), expression], sourceSpan);
@@ -20808,14 +21393,12 @@ function callVariadicInstruction(config, baseArgs, interpolationArgs, extraArgs,
 }
 
 /**
- * Map of sanitizers to their identifier.
+ * Map of target resolvers for event listeners.
  */
-const sanitizerIdentifierMap = new Map([
-    [SanitizerFn.Html, Identifiers.sanitizeHtml],
-    [SanitizerFn.IframeAttribute, Identifiers.validateIframeAttribute],
-    [SanitizerFn.ResourceUrl, Identifiers.sanitizeResourceUrl],
-    [SanitizerFn.Script, Identifiers.sanitizeScript],
-    [SanitizerFn.Style, Identifiers.sanitizeStyle], [SanitizerFn.Url, Identifiers.sanitizeUrl]
+const GLOBAL_TARGET_RESOLVERS$1 = new Map([
+    ['window', Identifiers.resolveWindow],
+    ['document', Identifiers.resolveDocument],
+    ['body', Identifiers.resolveBody],
 ]);
 /**
  * Compiles semantic operations across all views and generates output `o.Statement`s with actual
@@ -20839,19 +21422,19 @@ function reifyCreateOperations(unit, ops) {
                 OpList.replace(op, text(op.handle.slot, op.initialValue, op.sourceSpan));
                 break;
             case OpKind.ElementStart:
-                OpList.replace(op, elementStart(op.handle.slot, op.tag, op.attributes, op.localRefs, op.sourceSpan));
+                OpList.replace(op, elementStart(op.handle.slot, op.tag, op.attributes, op.localRefs, op.startSourceSpan));
                 break;
             case OpKind.Element:
-                OpList.replace(op, element(op.handle.slot, op.tag, op.attributes, op.localRefs, op.sourceSpan));
+                OpList.replace(op, element(op.handle.slot, op.tag, op.attributes, op.localRefs, op.wholeSourceSpan));
                 break;
             case OpKind.ElementEnd:
                 OpList.replace(op, elementEnd(op.sourceSpan));
                 break;
             case OpKind.ContainerStart:
-                OpList.replace(op, elementContainerStart(op.handle.slot, op.attributes, op.localRefs, op.sourceSpan));
+                OpList.replace(op, elementContainerStart(op.handle.slot, op.attributes, op.localRefs, op.startSourceSpan));
                 break;
             case OpKind.Container:
-                OpList.replace(op, elementContainer(op.handle.slot, op.attributes, op.localRefs, op.sourceSpan));
+                OpList.replace(op, elementContainer(op.handle.slot, op.attributes, op.localRefs, op.wholeSourceSpan));
                 break;
             case OpKind.ContainerEnd:
                 OpList.replace(op, elementContainerEnd());
@@ -20865,6 +21448,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`);
@@ -20873,7 +21462,7 @@ function reifyCreateOperations(unit, ops) {
                     throw new Error(`AssertionError: local refs array should have been extracted into a constant`);
                 }
                 const childView = unit.job.views.get(op.xref);
-                OpList.replace(op, template(op.handle.slot, variable(childView.fnName), childView.decls, childView.vars, op.tag, op.attributes, op.localRefs, op.sourceSpan));
+                OpList.replace(op, template(op.handle.slot, variable(childView.fnName), childView.decls, childView.vars, op.tag, op.attributes, op.localRefs, op.startSourceSpan));
                 break;
             case OpKind.DisableBindings:
                 OpList.replace(op, disableBindings());
@@ -20886,10 +21475,11 @@ function reifyCreateOperations(unit, ops) {
                 break;
             case OpKind.Listener:
                 const listenerFn = reifyListenerHandler(unit, op.handlerFnName, op.handlerOps, op.consumesDollarEvent);
-                const reified = op.hostListener && op.isAnimationListener ?
-                    syntheticHostListener(op.name, listenerFn, op.sourceSpan) :
-                    listener(op.name, listenerFn, op.sourceSpan);
-                OpList.replace(op, reified);
+                const eventTargetResolver = op.eventTarget ? GLOBAL_TARGET_RESOLVERS$1.get(op.eventTarget) : null;
+                if (eventTargetResolver === undefined) {
+                    throw new Error(`Unexpected global target '${op.eventTarget}' defined for '${op.name}' event. Supported list of global targets: window,document,body.`);
+                }
+                OpList.replace(op, listener(op.name, listenerFn, eventTargetResolver, op.hostListener && op.isAnimationListener, op.sourceSpan));
                 break;
             case OpKind.Variable:
                 if (op.variable.name === null) {
@@ -20974,7 +21564,7 @@ function reifyCreateOperations(unit, ops) {
                     emptyDecls = emptyView.decls;
                     emptyVars = emptyView.vars;
                 }
-                OpList.replace(op, repeaterCreate(op.handle.slot, repeaterView.fnName, op.decls, op.vars, op.tag, op.attributes, op.trackByFn, op.usesComponentInstance, emptyViewFnName, emptyDecls, emptyVars, op.sourceSpan));
+                OpList.replace(op, repeaterCreate(op.handle.slot, repeaterView.fnName, op.decls, op.vars, op.tag, op.attributes, op.trackByFn, op.usesComponentInstance, emptyViewFnName, emptyDecls, emptyVars, op.wholeSourceSpan));
                 break;
             case OpKind.Statement:
                 // Pass statement operations directly through.
@@ -21052,7 +21642,7 @@ function reifyUpdateOperations(_unit, ops) {
                         OpList.replace(op, syntheticHostProperty(op.name, op.expression, op.sourceSpan));
                     }
                     else {
-                        OpList.replace(op, hostProperty(op.name, op.expression, op.sourceSpan));
+                        OpList.replace(op, hostProperty(op.name, op.expression, op.sanitizer, op.sourceSpan));
                     }
                 }
                 break;
@@ -21072,7 +21662,7 @@ function reifyUpdateOperations(_unit, ops) {
                 OpList.replace(op, conditional(op.targetSlot.slot, op.processed, op.contextValue, op.sourceSpan));
                 break;
             case OpKind.Repeater:
-                OpList.replace(op, repeater(op.targetSlot.slot, op.collection, op.sourceSpan));
+                OpList.replace(op, repeater(op.collection, op.sourceSpan));
                 break;
             case OpKind.DeferWhen:
                 OpList.replace(op, deferWhen(op.prefetch, op.expr, op.sourceSpan));
@@ -21131,8 +21721,6 @@ function reifyIrExpression(expr) {
             return pipeBind(expr.targetSlot.slot, expr.varOffset, expr.args);
         case ExpressionKind.PipeBindingVariadic:
             return pipeBindV(expr.targetSlot.slot, expr.varOffset, expr.args);
-        case ExpressionKind.SanitizerExpr:
-            return importExpr(sanitizerIdentifierMap.get(expr.fn));
         case ExpressionKind.SlotLiteralExpr:
             return literal(expr.slot.slot);
         default:
@@ -21206,6 +21794,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
@@ -21335,66 +21948,221 @@ 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) {
+                    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');
+                    }
+                    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:
+                const view = job.views.get(op.xref);
+                if (op.i18nPlaceholder === undefined) {
+                    // If there is no i18n placeholder, just recurse into the view in case it contains i18n
+                    // blocks.
+                    resolvePlaceholdersForView(job, view, 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, view, 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, view, op.handle.slot, op.i18nPlaceholder, currentOps.i18nContext, currentOps.i18nBlock, pendingStructuralDirective);
+                        resolvePlaceholdersForView(job, view, i18nContexts, elements);
+                        recordTemplateClose(job, view, op.handle.slot, op.i18nPlaceholder, currentOps.i18nContext, currentOps.i18nBlock, pendingStructuralDirective);
+                        pendingStructuralDirective = undefined;
+                    }
+                }
+                break;
+            case OpKind.RepeaterCreate:
+                if (pendingStructuralDirective !== undefined) {
+                    throw Error('AssertionError: Unexpected structural directive associated with @for block');
+                }
+                // RepeaterCreate has 3 slots: the first is for the op itself, the second is for the @for
+                // template and the (optional) third is for the @empty template.
+                const forSlot = op.handle.slot + 1;
+                const forView = job.views.get(op.xref);
+                // First record all of the placeholders for the @for template.
+                if (op.i18nPlaceholder === undefined) {
+                    // If there is no i18n placeholder, just recurse into the view in case it contains i18n
+                    // blocks.
+                    resolvePlaceholdersForView(job, forView, i18nContexts, elements);
+                }
+                else {
+                    if (currentOps === null) {
+                        throw Error('i18n tag placeholder should only occur inside an i18n block');
+                    }
+                    recordTemplateStart(job, forView, forSlot, op.i18nPlaceholder, currentOps.i18nContext, currentOps.i18nBlock, pendingStructuralDirective);
+                    resolvePlaceholdersForView(job, forView, i18nContexts, elements);
+                    recordTemplateClose(job, forView, forSlot, op.i18nPlaceholder, currentOps.i18nContext, currentOps.i18nBlock, pendingStructuralDirective);
+                    pendingStructuralDirective = undefined;
+                }
+                // Then if there's an @empty template, add its placeholders as well.
+                if (op.emptyView !== null) {
+                    // RepeaterCreate has 3 slots: the first is for the op itself, the second is for the @for
+                    // template and the (optional) third is for the @empty template.
+                    const emptySlot = op.handle.slot + 2;
+                    const emptyView = job.views.get(op.emptyView);
+                    if (op.emptyI18nPlaceholder === undefined) {
+                        // If there is no i18n placeholder, just recurse into the view in case it contains i18n
+                        // blocks.
+                        resolvePlaceholdersForView(job, emptyView, i18nContexts, elements);
+                    }
+                    else {
                         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);
+                        recordTemplateStart(job, emptyView, emptySlot, op.emptyI18nPlaceholder, currentOps.i18nContext, currentOps.i18nBlock, pendingStructuralDirective);
+                        resolvePlaceholdersForView(job, emptyView, i18nContexts, elements);
+                        recordTemplateClose(job, emptyView, emptySlot, op.emptyI18nPlaceholder, currentOps.i18nContext, currentOps.i18nBlock, pendingStructuralDirective);
+                        pendingStructuralDirective = undefined;
                     }
-                    break;
-            }
+                }
+                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, view, slot, i18nPlaceholder, i18nContext, i18nBlock, structuralDirective) {
+    let { startName, closeName } = 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, slot, getSubTemplateIndexForTemplateTag(job, i18nBlock, view), flags);
+}
+/**
+ * Records an i18n param value for the closing of a template.
+ */
+function recordTemplateClose(job, view, slot, i18nPlaceholder, i18nContext, i18nBlock, structuralDirective) {
+    const { startName, closeName } = 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, slot, getSubTemplateIndexForTemplateTag(job, i18nBlock, view), 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);
         }
     }
 }
@@ -21402,16 +22170,18 @@ function resolveI18nElementPlaceholders(job) {
  * Get the subTemplateIndex for the given template op. For template ops, use the subTemplateIndex of
  * the child i18n block inside the template.
  */
-function getSubTemplateIndexForTemplateTag(job, i18nOp, op) {
-    for (const childOp of job.views.get(op.xref).create) {
+function getSubTemplateIndexForTemplateTag(job, i18nOp, view) {
+    for (const childOp of view.create) {
         if (childOp.kind === OpKind.I18nStart) {
             return childOp.subTemplateIndex;
         }
     }
     return i18nOp.subTemplateIndex;
 }
-/** Add a param value to the given params map. */
-function addParam(params, placeholder, value, subTemplateIndex, flags = I18nParamValueFlags.None) {
+/**
+ * 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 });
     params.set(placeholder, values);
@@ -21424,6 +22194,7 @@ function resolveI18nExpressionPlaceholders(job) {
     // Record all of the i18n context ops, and the sub-template index for each i18n op.
     const subTemplateIndicies = new Map();
     const i18nContexts = new Map();
+    const icuPlaceholders = new Map();
     for (const unit of job.units) {
         for (const op of unit.create) {
             switch (op.kind) {
@@ -21433,29 +22204,50 @@ function resolveI18nExpressionPlaceholders(job) {
                 case OpKind.I18nContext:
                     i18nContexts.set(op.xref, op);
                     break;
+                case OpKind.IcuPlaceholder:
+                    icuPlaceholders.set(op.xref, op);
+                    break;
             }
         }
     }
-    // Keep track of the next available expression index per i18n context.
+    // 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 index = expressionIndices.get(op.context) || 0;
-                const i18nContext = i18nContexts.get(op.context);
-                const subTemplateIndex = subTemplateIndicies.get(i18nContext.i18nBlock);
-                // Add the expression index in the appropriate params map.
-                const params = op.resolutionTime === I18nParamResolutionTime.Creation ?
-                    i18nContext.params :
-                    i18nContext.postprocessingParams;
-                const values = params.get(op.i18nPlaceholder) || [];
-                values.push({ value: index, subTemplateIndex: subTemplateIndex, flags: I18nParamValueFlags.None });
-                params.set(op.i18nPlaceholder, values);
-                expressionIndices.set(op.context, index + 1);
+                const index = expressionIndices.get(referenceIndex(op)) || 0;
+                const subTemplateIndex = subTemplateIndicies.get(op.i18nOwner) ?? null;
+                const value = {
+                    value: index,
+                    subTemplateIndex: subTemplateIndex,
+                    flags: I18nParamValueFlags.ExpressionIndex
+                };
+                updatePlaceholder(op, value, i18nContexts, icuPlaceholders);
+                expressionIndices.set(referenceIndex(op), index + 1);
             }
         }
     }
 }
+function updatePlaceholder(op, value, i18nContexts, icuPlaceholders) {
+    if (op.i18nPlaceholder !== null) {
+        const i18nContext = i18nContexts.get(op.context);
+        const params = op.resolutionTime === I18nParamResolutionTime.Creation ?
+            i18nContext.params :
+            i18nContext.postprocessingParams;
+        const values = params.get(op.i18nPlaceholder) || [];
+        values.push(value);
+        params.set(op.i18nPlaceholder, values);
+    }
+    if (op.icuPlaceholder !== null) {
+        const icuPlaceholderOp = icuPlaceholders.get(op.icuPlaceholder);
+        icuPlaceholderOp?.expressionPlaceholders.push(value);
+    }
+}
 
 /**
  * Resolves lexical references in views (`ir.LexicalReadExpr`) to either a target variable or to
@@ -21556,12 +22348,20 @@ function processLexicalScope(unit, ops, savedView) {
 }
 
 /**
- * Mapping of security contexts to sanitizer function for that context.
+ * Map of security contexts to their sanitizer function.
+ */
+const sanitizerFns = new Map([
+    [SecurityContext.HTML, Identifiers.sanitizeHtml],
+    [SecurityContext.RESOURCE_URL, Identifiers.sanitizeResourceUrl],
+    [SecurityContext.SCRIPT, Identifiers.sanitizeScript],
+    [SecurityContext.STYLE, Identifiers.sanitizeStyle], [SecurityContext.URL, Identifiers.sanitizeUrl]
+]);
+/**
+ * Map of security contexts to their trusted value function.
  */
-const sanitizers = new Map([
-    [SecurityContext.HTML, SanitizerFn.Html], [SecurityContext.SCRIPT, SanitizerFn.Script],
-    [SecurityContext.STYLE, SanitizerFn.Style], [SecurityContext.URL, SanitizerFn.Url],
-    [SecurityContext.RESOURCE_URL, SanitizerFn.ResourceUrl]
+const trustedValueFns = new Map([
+    [SecurityContext.HTML, Identifiers.trustConstantHtml],
+    [SecurityContext.RESOURCE_URL, Identifiers.trustConstantResourceUrl],
 ]);
 /**
  * Resolves sanitization functions for ops that need them.
@@ -21569,24 +22369,61 @@ const sanitizers = new Map([
 function resolveSanitizers(job) {
     for (const unit of job.units) {
         const elements = createOpXrefMap(unit);
-        let sanitizerFn;
+        // For normal element bindings we create trusted values for security sensitive constant
+        // attributes. However, for host bindings we skip this step (this matches what
+        // TemplateDefinitionBuilder does).
+        // TODO: Is the TDB behavior correct here?
+        if (job.kind !== CompilationJobKind.Host) {
+            for (const op of unit.create) {
+                if (op.kind === OpKind.ExtractedAttribute) {
+                    const trustedValueFn = trustedValueFns.get(getOnlySecurityContext(op.securityContext)) ?? null;
+                    op.trustedValueFn = trustedValueFn !== null ? importExpr(trustedValueFn) : null;
+                }
+            }
+        }
         for (const op of unit.update) {
             switch (op.kind) {
                 case OpKind.Property:
                 case OpKind.Attribute:
-                    sanitizerFn = sanitizers.get(op.securityContext) || null;
-                    op.sanitizer = sanitizerFn ? new SanitizerExpr(sanitizerFn) : null;
+                case OpKind.HostProperty:
+                    let sanitizerFn = null;
+                    if (Array.isArray(op.securityContext) && op.securityContext.length === 2 &&
+                        op.securityContext.indexOf(SecurityContext.URL) > -1 &&
+                        op.securityContext.indexOf(SecurityContext.RESOURCE_URL) > -1) {
+                        // When the host element isn't known, some URL attributes (such as "src" and "href") may
+                        // be part of multiple different security contexts. In this case we use special
+                        // sanitization function and select the actual sanitizer at runtime based on a tag name
+                        // that is provided while invoking sanitization function.
+                        sanitizerFn = Identifiers.sanitizeUrlOrResourceUrl;
+                    }
+                    else {
+                        sanitizerFn = sanitizerFns.get(getOnlySecurityContext(op.securityContext)) ?? null;
+                    }
+                    op.sanitizer = sanitizerFn !== null ? importExpr(sanitizerFn) : null;
                     // If there was no sanitization function found based on the security context of an
                     // attribute/property, check whether this attribute/property is one of the
                     // security-sensitive <iframe> attributes (and that the current element is actually an
                     // <iframe>).
                     if (op.sanitizer === null) {
-                        const ownerOp = elements.get(op.target);
-                        if (ownerOp === undefined || !isElementOrContainerOp(ownerOp)) {
-                            throw Error('Property should have an element-like owner');
+                        let isIframe = false;
+                        if (job.kind === CompilationJobKind.Host || op.kind === OpKind.HostProperty) {
+                            // Note: for host bindings defined on a directive, we do not try to find all
+                            // possible places where it can be matched, so we can not determine whether
+                            // the host element is an <iframe>. In this case, we just assume it is and append a
+                            // validation function, which is invoked at runtime and would have access to the
+                            // underlying DOM element to check if it's an <iframe> and if so - run extra checks.
+                            isIframe = true;
+                        }
+                        else {
+                            // For a normal binding we can just check if the element its on is an iframe.
+                            const ownerOp = elements.get(op.target);
+                            if (ownerOp === undefined || !isElementOrContainerOp(ownerOp)) {
+                                throw Error('Property should have an element-like owner');
+                            }
+                            isIframe = isIframeElement$1(ownerOp);
                         }
-                        if (isIframeElement$1(ownerOp) && isIframeSecuritySensitiveAttr(op.name)) {
-                            op.sanitizer = new SanitizerExpr(SanitizerFn.IframeAttribute);
+                        if (isIframe && isIframeSecuritySensitiveAttr(op.name)) {
+                            op.sanitizer = importExpr(Identifiers.validateIframeAttribute);
                         }
                     }
                     break;
@@ -21600,6 +22437,22 @@ function resolveSanitizers(job) {
 function isIframeElement$1(op) {
     return op.kind === OpKind.ElementStart && op.tag?.toLowerCase() === 'iframe';
 }
+/**
+ * Asserts that there is only a single security context and returns it.
+ */
+function getOnlySecurityContext(securityContext) {
+    if (Array.isArray(securityContext)) {
+        if (securityContext.length > 1) {
+            // TODO: What should we do here? TDB just took the first one, but this feels like something we
+            // would want to know about and create a special case for like we did for Url/ResourceUrl. My
+            // guess is that, outside of the Url/ResourceUrl case, this never actually happens. If there
+            // do turn out to be other cases, throwing an error until we can address it feels safer.
+            throw Error(`AssertionError: Ambiguous security context`);
+        }
+        return securityContext[0] || SecurityContext.NONE;
+    }
+    return securityContext;
+}
 
 /**
  * When inside of a listener, we may need access to one or more enclosing views. Therefore, each
@@ -21703,6 +22556,8 @@ function allocateSlots(job) {
                 // operation itself, so it can be emitted later.
                 const childView = job.views.get(op.xref);
                 op.decls = childView.decls;
+                // TODO: currently we handle the decls for the RepeaterCreate empty template in the reify
+                // phase. We should handle that here instead.
             }
         }
     }
@@ -22026,6 +22881,8 @@ function countVariables(job) {
                 }
                 const childView = job.views.get(op.xref);
                 op.vars = childView.vars;
+                // TODO: currently we handle the vars for the RepeaterCreate empty template in the reify
+                // phase. We should handle that here instead.
             }
         }
     }
@@ -22063,7 +22920,14 @@ function varsUsedByOp(op) {
             return op.interpolation.expressions.length;
         case OpKind.I18nExpression:
         case OpKind.Conditional:
+        case OpKind.DeferWhen:
             return 1;
+        case OpKind.RepeaterCreate:
+            // Repeaters may require an extra variable binding slot, if they have an empty view, for the
+            // empty block tracking.
+            // TODO: It's a bit odd to have a create mode instruction consume variable slots. Maybe we can
+            // find a way to use the Repeater update op instead.
+            return op.emptyView ? 1 : 0;
         default:
             throw new Error(`Unhandled op: ${OpKind[op.kind]}`);
     }
@@ -22507,6 +23371,7 @@ function allowConservativeInlining(decl, target) {
 function wrapI18nIcus(job) {
     for (const unit of job.units) {
         let currentI18nOp = null;
+        let addedI18nId = null;
         for (const op of unit.create) {
             switch (op.kind) {
                 case OpKind.I18nStart:
@@ -22515,11 +23380,16 @@ function wrapI18nIcus(job) {
                 case OpKind.I18nEnd:
                     currentI18nOp = null;
                     break;
-                case OpKind.Icu:
+                case OpKind.IcuStart:
                     if (currentI18nOp === null) {
-                        const id = job.allocateXrefId();
-                        OpList.insertBefore(createI18nStartOp(id, op.message), op);
-                        OpList.insertAfter(createI18nEndOp(id), op);
+                        addedI18nId = job.allocateXrefId();
+                        OpList.insertBefore(createI18nStartOp(addedI18nId, op.message), op);
+                    }
+                    break;
+                case OpKind.IcuEnd:
+                    if (addedI18nId !== null) {
+                        OpList.insertAfter(createI18nEndOp(addedI18nId), op);
+                        addedI18nId = null;
                     }
                     break;
             }
@@ -22539,12 +23409,13 @@ function wrapI18nIcus(job) {
     { 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: deduplicateTextBindings },
+    { kind: CompilationJobKind.Both, fn: specializeStyleBindings },
+    { kind: CompilationJobKind.Both, fn: specializeBindings },
     { kind: CompilationJobKind.Both, fn: extractAttributes },
+    { kind: CompilationJobKind.Tmpl, fn: createI18nContexts },
     { kind: CompilationJobKind.Both, fn: parseExtractedStyles },
     { kind: CompilationJobKind.Tmpl, fn: removeEmptyBindings },
     { kind: CompilationJobKind.Both, fn: collapseSingletonInterpolations },
@@ -22552,15 +23423,17 @@ function wrapI18nIcus(job) {
     { kind: CompilationJobKind.Tmpl, fn: generateConditionalExpressions },
     { kind: CompilationJobKind.Tmpl, fn: createPipes },
     { kind: CompilationJobKind.Tmpl, fn: configureDeferInstructions },
-    { kind: CompilationJobKind.Tmpl, fn: extractI18nText },
-    { kind: CompilationJobKind.Tmpl, fn: createI18nIcuExpressions },
+    { kind: CompilationJobKind.Tmpl, fn: 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 },
     { kind: CompilationJobKind.Tmpl, fn: generateProjectionDefs },
     { kind: CompilationJobKind.Tmpl, fn: generateVariables },
     { kind: CompilationJobKind.Tmpl, fn: saveAndRestoreView },
-    { kind: CompilationJobKind.Tmpl, fn: deleteAnyCasts },
+    { kind: CompilationJobKind.Both, fn: deleteAnyCasts },
     { kind: CompilationJobKind.Both, fn: resolveDollarEvent },
     { kind: CompilationJobKind.Tmpl, fn: generateRepeaterDerivedVars },
     { kind: CompilationJobKind.Tmpl, fn: generateTrackVariables },
@@ -22568,7 +23441,7 @@ function wrapI18nIcus(job) {
     { kind: CompilationJobKind.Tmpl, fn: resolveDeferTargetNames },
     { kind: CompilationJobKind.Tmpl, fn: optimizeTrackFns },
     { kind: CompilationJobKind.Both, fn: resolveContexts },
-    { kind: CompilationJobKind.Tmpl, fn: resolveSanitizers },
+    { kind: CompilationJobKind.Both, fn: resolveSanitizers },
     { kind: CompilationJobKind.Tmpl, fn: liftLocalRefs },
     { kind: CompilationJobKind.Both, fn: generateNullishCoalesceExpressions },
     { kind: CompilationJobKind.Both, fn: expandSafeReads },
@@ -22577,13 +23450,11 @@ function wrapI18nIcus(job) {
     { kind: CompilationJobKind.Tmpl, fn: createDeferDepsFns },
     { kind: CompilationJobKind.Tmpl, fn: resolveI18nElementPlaceholders },
     { kind: CompilationJobKind.Tmpl, fn: resolveI18nExpressionPlaceholders },
-    { kind: CompilationJobKind.Tmpl, fn: mergeI18nContexts },
     { kind: CompilationJobKind.Tmpl, fn: extractI18nMessages },
     { kind: CompilationJobKind.Tmpl, fn: generateTrackFns },
     { kind: CompilationJobKind.Tmpl, fn: collectI18nConsts },
     { kind: CompilationJobKind.Tmpl, fn: collectConstExpressions },
     { kind: CompilationJobKind.Both, fn: collectElementConsts },
-    { kind: CompilationJobKind.Tmpl, fn: assignI18nSlotDependencies },
     { kind: CompilationJobKind.Tmpl, fn: removeI18nContexts },
     { kind: CompilationJobKind.Both, fn: countVariables },
     { kind: CompilationJobKind.Tmpl, fn: generateAdvance },
@@ -22599,6 +23470,9 @@ function wrapI18nIcus(job) {
 ];
 
 CompatibilityMode.TemplateDefinitionBuilder;
+// Schema containing DOM elements and their properties.
+new DomElementSchemaRegistry();
+// TODO: Can we populate Template binding kinds in ingest?
 new Map([
     [0 /* e.BindingType.Property */, BindingKind.Property],
     [1 /* e.BindingType.Attribute */, BindingKind.Attribute],
@@ -22606,26 +23480,6 @@ new Map([
     [3 /* e.BindingType.Style */, BindingKind.StyleProperty],
     [4 /* e.BindingType.Animation */, BindingKind.Animation],
 ]);
-var BindingFlags;
-(function (BindingFlags) {
-    BindingFlags[BindingFlags["None"] = 0] = "None";
-    /**
-     * The binding is to a static text literal and not to an expression.
-     */
-    BindingFlags[BindingFlags["TextValue"] = 1] = "TextValue";
-    /**
-     * The binding belongs to the `<ng-template>` side of a `t.Template`.
-     */
-    BindingFlags[BindingFlags["BindingTargetsTemplate"] = 2] = "BindingTargetsTemplate";
-    /**
-     * The binding is on a structural directive.
-     */
-    BindingFlags[BindingFlags["IsStructuralTemplateAttribute"] = 4] = "IsStructuralTemplateAttribute";
-    /**
-     * The binding is on a `t.Template`.
-     */
-    BindingFlags[BindingFlags["OnNgTemplateElement"] = 8] = "OnNgTemplateElement";
-})(BindingFlags || (BindingFlags = {}));
 
 const IMPORTANT_FLAG = '!important';
 /**
@@ -23776,19 +24630,19 @@ function createIfBlock(ast, connectedBlocks, visitor, bindingParser) {
     const branches = [];
     const mainBlockParams = parseConditionalBlockParameters(ast, errors, bindingParser);
     if (mainBlockParams !== null) {
-        branches.push(new IfBlockBranch(mainBlockParams.expression, visitAll(visitor, ast.children, ast.children), mainBlockParams.expressionAlias, ast.sourceSpan, ast.startSourceSpan, ast.endSourceSpan, ast.nameSpan));
+        branches.push(new IfBlockBranch(mainBlockParams.expression, visitAll(visitor, ast.children, ast.children), mainBlockParams.expressionAlias, ast.sourceSpan, ast.startSourceSpan, ast.endSourceSpan, ast.nameSpan, ast.i18n));
     }
     for (const block of connectedBlocks) {
         if (ELSE_IF_PATTERN.test(block.name)) {
             const params = parseConditionalBlockParameters(block, errors, bindingParser);
             if (params !== null) {
                 const children = visitAll(visitor, block.children, block.children);
-                branches.push(new IfBlockBranch(params.expression, children, params.expressionAlias, block.sourceSpan, block.startSourceSpan, block.endSourceSpan, block.nameSpan));
+                branches.push(new IfBlockBranch(params.expression, children, params.expressionAlias, block.sourceSpan, block.startSourceSpan, block.endSourceSpan, block.nameSpan, block.i18n));
             }
         }
         else if (block.name === 'else') {
             const children = visitAll(visitor, block.children, block.children);
-            branches.push(new IfBlockBranch(null, children, null, block.sourceSpan, block.startSourceSpan, block.endSourceSpan, block.nameSpan));
+            branches.push(new IfBlockBranch(null, children, null, block.sourceSpan, block.startSourceSpan, block.endSourceSpan, block.nameSpan, block.i18n));
         }
     }
     // The outer IfBlock should have a span that encapsulates all branches.
@@ -23819,7 +24673,7 @@ function createForLoop(ast, connectedBlocks, visitor, bindingParser) {
                 errors.push(new ParseError(block.sourceSpan, '@empty block cannot have parameters'));
             }
             else {
-                empty = new ForLoopBlockEmpty(visitAll(visitor, block.children, block.children), block.sourceSpan, block.startSourceSpan, block.endSourceSpan, block.nameSpan);
+                empty = new ForLoopBlockEmpty(visitAll(visitor, block.children, block.children), block.sourceSpan, block.startSourceSpan, block.endSourceSpan, block.nameSpan, block.i18n);
             }
         }
         else {
@@ -23837,7 +24691,7 @@ function createForLoop(ast, connectedBlocks, visitor, bindingParser) {
             // main `for` body, use `mainSourceSpan`.
             const endSpan = empty?.endSourceSpan ?? ast.endSourceSpan;
             const sourceSpan = new ParseSourceSpan(ast.sourceSpan.start, endSpan?.end ?? ast.sourceSpan.end);
-            node = new ForLoopBlock(params.itemName, params.expression, params.trackBy.expression, params.trackBy.keywordSpan, params.context, visitAll(visitor, ast.children, ast.children), empty, sourceSpan, ast.sourceSpan, ast.startSourceSpan, endSpan, ast.nameSpan);
+            node = new ForLoopBlock(params.itemName, params.expression, params.trackBy.expression, params.trackBy.keywordSpan, params.context, visitAll(visitor, ast.children, ast.children), empty, sourceSpan, ast.sourceSpan, ast.startSourceSpan, endSpan, ast.nameSpan, ast.i18n);
         }
     }
     return { node, errors };
@@ -23863,7 +24717,7 @@ function createSwitchBlock(ast, visitor, bindingParser) {
         const expression = node.name === 'case' ?
             parseBlockParameterToBinding(node.parameters[0], bindingParser) :
             null;
-        const ast = new SwitchBlockCase(expression, visitAll(visitor, node.children, node.children), node.sourceSpan, node.startSourceSpan, node.endSourceSpan, node.nameSpan);
+        const ast = new SwitchBlockCase(expression, visitAll(visitor, node.children, node.children), node.sourceSpan, node.startSourceSpan, node.endSourceSpan, node.nameSpan, node.i18n);
         if (expression === null) {
             defaultCase = ast;
         }
@@ -24450,7 +25304,7 @@ function createDeferredBlock(ast, connectedBlocks, visitor, bindingParser) {
         endOfLastSourceSpan = lastConnectedBlock.sourceSpan.end;
     }
     const sourceSpanWithConnectedBlocks = new ParseSourceSpan(ast.sourceSpan.start, endOfLastSourceSpan);
-    const node = new DeferredBlock(visitAll(visitor, ast.children, ast.children), triggers, prefetchTriggers, placeholder, loading, error, ast.nameSpan, sourceSpanWithConnectedBlocks, ast.sourceSpan, ast.startSourceSpan, lastEndSourceSpan);
+    const node = new DeferredBlock(visitAll(visitor, ast.children, ast.children), triggers, prefetchTriggers, placeholder, loading, error, ast.nameSpan, sourceSpanWithConnectedBlocks, ast.sourceSpan, ast.startSourceSpan, lastEndSourceSpan, ast.i18n);
     return { node, errors };
 }
 function parseConnectedBlocks(connectedBlocks, errors, visitor) {
@@ -24513,7 +25367,7 @@ function parsePlaceholderBlock(ast, visitor) {
             throw new Error(`Unrecognized parameter in @placeholder block: "${param.expression}"`);
         }
     }
-    return new DeferredBlockPlaceholder(visitAll(visitor, ast.children, ast.children), minimumTime, ast.nameSpan, ast.sourceSpan, ast.startSourceSpan, ast.endSourceSpan);
+    return new DeferredBlockPlaceholder(visitAll(visitor, ast.children, ast.children), minimumTime, ast.nameSpan, ast.sourceSpan, ast.startSourceSpan, ast.endSourceSpan, ast.i18n);
 }
 function parseLoadingBlock(ast, visitor) {
     let afterTime = null;
@@ -24543,13 +25397,13 @@ function parseLoadingBlock(ast, visitor) {
             throw new Error(`Unrecognized parameter in @loading block: "${param.expression}"`);
         }
     }
-    return new DeferredBlockLoading(visitAll(visitor, ast.children, ast.children), afterTime, minimumTime, ast.nameSpan, ast.sourceSpan, ast.startSourceSpan, ast.endSourceSpan);
+    return new DeferredBlockLoading(visitAll(visitor, ast.children, ast.children), afterTime, minimumTime, ast.nameSpan, ast.sourceSpan, ast.startSourceSpan, ast.endSourceSpan, ast.i18n);
 }
 function parseErrorBlock(ast, visitor) {
     if (ast.parameters.length > 0) {
         throw new Error(`@error block cannot have parameters`);
     }
-    return new DeferredBlockError(visitAll(visitor, ast.children, ast.children), ast.nameSpan, ast.sourceSpan, ast.startSourceSpan, ast.endSourceSpan);
+    return new DeferredBlockError(visitAll(visitor, ast.children, ast.children), ast.nameSpan, ast.sourceSpan, ast.startSourceSpan, ast.endSourceSpan, ast.i18n);
 }
 function parsePrimaryTriggers(params, bindingParser, errors, placeholder) {
     const triggers = {};
@@ -25149,6 +26003,11 @@ class I18nContext {
         const content = { type, index, ctx: this.id, isVoid: node.isVoid, closed };
         updatePlaceholderMap(this.placeholders, ph, content);
     }
+    appendBlockPart(node, index, closed) {
+        const ph = closed ? node.closeName : node.startName;
+        const content = { type: TagType.TEMPLATE, index, ctx: this.id, closed };
+        updatePlaceholderMap(this.placeholders, ph, content);
+    }
     get icus() {
         return this._registry.icus;
     }
@@ -25181,6 +26040,13 @@ class I18nContext {
         this.appendTag(TagType.TEMPLATE, node, index, true);
         this._unresolvedCtxCount++;
     }
+    appendBlock(node, index) {
+        // add open and close tags at the same time,
+        // since we process nested templates separately
+        this.appendBlockPart(node, index, false);
+        this.appendBlockPart(node, index, true);
+        this._unresolvedCtxCount++;
+    }
     appendElement(node, index, closed) {
         this.appendTag(TagType.ELEMENT, node, index, closed);
     }
@@ -25459,13 +26325,19 @@ class TemplateDefinitionBuilder {
             this.creationInstruction(null, Identifiers.pipe, [literal(slot), literal(name)]);
         });
     }
-    buildTemplateFunction(nodes, variables, ngContentSelectorsOffset = 0, i18n) {
+    buildTemplateFunction(nodes, variables, ngContentSelectorsOffset = 0, i18n, variableAliases) {
         this._ngContentSelectorsOffset = ngContentSelectorsOffset;
         if (this._namespace !== Identifiers.namespaceHTML) {
             this.creationInstruction(null, this._namespace);
         }
         // Create variable bindings
-        variables.forEach(v => this.registerContextVariables(v));
+        variables.forEach(v => {
+            const alias = variableAliases?.[v.name];
+            this.registerContextVariables(v.name, v.value);
+            if (alias) {
+                this.registerContextVariables(alias, v.value);
+            }
+        });
         // Initiate i18n context in case:
         // - this template has parent i18n context
         // - or the template has i18n meta associated with it,
@@ -25559,12 +26431,12 @@ class TemplateDefinitionBuilder {
         this._constants.prepareStatements.push(...statements);
         return _ref;
     }
-    registerContextVariables(variable$1) {
+    registerContextVariables(name, value) {
         const scopedName = this._bindingScope.freshReferenceName();
         const retrievalLevel = this.level;
-        const isDirect = variable$1.value === DIRECT_CONTEXT_REFERENCE;
-        const lhs = variable(variable$1.name + scopedName);
-        this._bindingScope.set(retrievalLevel, variable$1.name, scope => {
+        const isDirect = value === DIRECT_CONTEXT_REFERENCE;
+        const lhs = variable(name + scopedName);
+        this._bindingScope.set(retrievalLevel, name, scope => {
             // If we're at the top level and we're referring to the context variable directly, we
             // can do so through the implicit receiver, instead of renaming it. Note that this does
             // not apply to listeners, because they need to restore the context.
@@ -25600,7 +26472,7 @@ class TemplateDefinitionBuilder {
             return [
                 // e.g. const $items$ = x(2) for direct context references and
                 // const $item$ = x(2).$implicit for indirect ones.
-                lhs.set(isDirect ? rhs : rhs.prop(variable$1.value || IMPLICIT_REFERENCE)).toConstDecl()
+                lhs.set(isDirect ? rhs : rhs.prop(value || IMPLICIT_REFERENCE)).toConstDecl()
             ];
         });
     }
@@ -25666,7 +26538,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);
                     }
@@ -26023,10 +26895,15 @@ class TemplateDefinitionBuilder {
             this.creationInstruction(span, isNgContainer$1 ? Identifiers.elementContainerEnd : Identifiers.elementEnd);
         }
     }
-    prepareEmbeddedTemplateFn(children, contextNameSuffix, variables = [], i18n) {
+    prepareEmbeddedTemplateFn(children, contextNameSuffix, variables = [], i18nMeta, variableAliases) {
         const index = this.allocateDataSlot();
-        if (this.i18n && i18n) {
-            this.i18n.appendTemplate(i18n, index);
+        if (this.i18n && i18nMeta) {
+            if (i18nMeta instanceof BlockPlaceholder) {
+                this.i18n.appendBlock(i18nMeta, index);
+            }
+            else {
+                this.i18n.appendTemplate(i18nMeta, index);
+            }
         }
         const contextName = `${this.contextName}${contextNameSuffix}_${index}`;
         const name = `${contextName}_Template`;
@@ -26037,7 +26914,7 @@ class TemplateDefinitionBuilder {
         // be able to support bindings in nested templates to local refs that occur after the
         // template definition. e.g. <div *ngIf="showing">{{ foo }}</div>  <div #foo></div>
         this._nestedTemplateFns.push(() => {
-            const templateFunctionExpr = visitor.buildTemplateFunction(children, variables, this._ngContentReservedSlots.length + this._ngContentSelectorsOffset, i18n);
+            const templateFunctionExpr = visitor.buildTemplateFunction(children, variables, this._ngContentReservedSlots.length + this._ngContentSelectorsOffset, i18nMeta, variableAliases);
             this.constantPool.statements.push(templateFunctionExpr.toDeclStmt(name));
             if (visitor._ngContentReservedSlots.length) {
                 this._ngContentReservedSlots.push(...visitor._ngContentReservedSlots);
@@ -26145,7 +27022,9 @@ class TemplateDefinitionBuilder {
         // inside ICUs)
         // - all ICU vars (such as `VAR_SELECT` or `VAR_PLURAL`) are replaced with correct values
         const transformFn = (raw) => {
-            const params = { ...vars, ...placeholders };
+            // Sort the map entries in the compiled output. This makes it easy to acheive identical output
+            // in the template pipeline compiler.
+            const params = Object.fromEntries(Object.entries({ ...vars, ...placeholders }).sort());
             const formatted = formatI18nPlaceholderNamesInMap(params, /* useCamelCase */ false);
             return invokeInstruction(null, Identifiers.i18nPostprocess, [raw, mapLiteral(formatted, true)]);
         };
@@ -26192,7 +27071,7 @@ class TemplateDefinitionBuilder {
             }
             // Note: the template needs to be created *before* we process the expression,
             // otherwise pipes injecting some symbols won't work (see #52102).
-            const templateIndex = this.createEmbeddedTemplateFn(tagName, children, '_Conditional', sourceSpan, variables, attrsExprs);
+            const templateIndex = this.createEmbeddedTemplateFn(tagName, children, '_Conditional', sourceSpan, variables, attrsExprs, undefined, branch.i18n);
             const processedExpression = expression === null ? null : expression.visit(this._valueConverter);
             return { index: templateIndex, expression: processedExpression, alias: expressionAlias };
         });
@@ -26243,7 +27122,7 @@ class TemplateDefinitionBuilder {
         // We have to process the block in two steps: once here and again in the update instruction
         // callback in order to generate the correct expressions when pipes or pure functions are used.
         const caseData = block.cases.map(currentCase => {
-            const index = this.createEmbeddedTemplateFn(null, currentCase.children, '_Case', currentCase.sourceSpan);
+            const index = this.createEmbeddedTemplateFn(null, currentCase.children, '_Case', currentCase.sourceSpan, undefined, undefined, undefined, currentCase.i18n);
             const expression = currentCase.expression === null ?
                 null :
                 currentCase.expression.visit(this._valueConverter);
@@ -26291,23 +27170,21 @@ class TemplateDefinitionBuilder {
         if (!metadata) {
             throw new Error('Could not resolve `defer` block metadata. Block may need to be analyzed.');
         }
-        const primaryTemplateIndex = this.createEmbeddedTemplateFn(null, deferred.children, '_Defer', deferred.sourceSpan);
-        const loadingIndex = loading ?
-            this.createEmbeddedTemplateFn(null, loading.children, '_DeferLoading', loading.sourceSpan) :
+        const primaryTemplateIndex = this.createEmbeddedTemplateFn(null, deferred.children, '_Defer', deferred.sourceSpan, undefined, undefined, undefined, deferred.i18n);
+        const loadingIndex = loading ? this.createEmbeddedTemplateFn(null, loading.children, '_DeferLoading', loading.sourceSpan, undefined, undefined, undefined, loading.i18n) :
             null;
         const loadingConsts = loading ?
             trimTrailingNulls([literal(loading.minimumTime), literal(loading.afterTime)]) :
             null;
         const placeholderIndex = placeholder ?
-            this.createEmbeddedTemplateFn(null, placeholder.children, '_DeferPlaceholder', placeholder.sourceSpan) :
+            this.createEmbeddedTemplateFn(null, placeholder.children, '_DeferPlaceholder', placeholder.sourceSpan, undefined, undefined, undefined, placeholder.i18n) :
             null;
         const placeholderConsts = placeholder && placeholder.minimumTime !== null ?
             // TODO(crisbeto): potentially pass the time directly instead of storing it in the `consts`
             // since the placeholder block can only have one parameter?
             literalArr([literal(placeholder.minimumTime)]) :
             null;
-        const errorIndex = error ?
-            this.createEmbeddedTemplateFn(null, error.children, '_DeferError', error.sourceSpan) :
+        const errorIndex = error ? this.createEmbeddedTemplateFn(null, error.children, '_DeferError', error.sourceSpan, undefined, undefined, undefined, error.i18n) :
             null;
         // Note: we generate this last so the index matches the instruction order.
         const deferredIndex = this.allocateDataSlot();
@@ -26461,11 +27338,18 @@ class TemplateDefinitionBuilder {
         // are implicitly inferred by the runtime to index + 1 and index + 2.
         const blockIndex = this.allocateDataSlot();
         const { tagName, attrsExprs } = this.inferProjectionDataFromInsertionPoint(block);
-        const primaryData = this.prepareEmbeddedTemplateFn(block.children, '_For', [block.item, block.contextVariables.$index, block.contextVariables.$count]);
+        const primaryData = this.prepareEmbeddedTemplateFn(block.children, '_For', [block.item, block.contextVariables.$index, block.contextVariables.$count], block.i18n, {
+            // We need to provide level-specific versions of `$index` and `$count`, because
+            // they're used when deriving the remaining variables (`$odd`, `$even` etc.) while at the
+            // same time being available implicitly. Without these aliases, we wouldn't be able to
+            // access the `$index` of a parent loop from inside of a nested loop.
+            [block.contextVariables.$index.name]: this.getLevelSpecificVariableName('$index', this.level + 1),
+            [block.contextVariables.$count.name]: this.getLevelSpecificVariableName('$count', this.level + 1),
+        });
         const { expression: trackByExpression, usesComponentInstance: trackByUsesComponentInstance } = this.createTrackByFunction(block);
         let emptyData = null;
         if (block.empty !== null) {
-            emptyData = this.prepareEmbeddedTemplateFn(block.empty.children, '_ForEmpty');
+            emptyData = this.prepareEmbeddedTemplateFn(block.empty.children, '_ForEmpty', undefined, block.empty.i18n);
             // Allocate an extra slot for the empty block tracking.
             this.allocateBindingSlots(null);
         }
@@ -26495,17 +27379,44 @@ class TemplateDefinitionBuilder {
         // Note: we don't allocate binding slots for this expression,
         // because its value isn't stored in the LView.
         const value = block.expression.visit(this._valueConverter);
-        // `repeater(0, iterable)`
-        this.updateInstruction(block.sourceSpan, Identifiers.repeater, () => [literal(blockIndex), this.convertPropertyBinding(value)]);
+        // `advance(x); repeater(iterable)`
+        this.updateInstructionWithAdvance(blockIndex, block.sourceSpan, Identifiers.repeater, () => [this.convertPropertyBinding(value)]);
     }
     registerComputedLoopVariables(block, bindingScope) {
-        const indexLocalName = block.contextVariables.$index.name;
-        const countLocalName = block.contextVariables.$count.name;
         const level = bindingScope.bindingLevel;
-        bindingScope.set(level, block.contextVariables.$odd.name, scope => scope.get(indexLocalName).modulo(literal(2)).notIdentical(literal(0)));
-        bindingScope.set(level, block.contextVariables.$even.name, scope => scope.get(indexLocalName).modulo(literal(2)).identical(literal(0)));
-        bindingScope.set(level, block.contextVariables.$first.name, scope => scope.get(indexLocalName).identical(literal(0)));
-        bindingScope.set(level, block.contextVariables.$last.name, scope => scope.get(indexLocalName).identical(scope.get(countLocalName).minus(literal(1))));
+        bindingScope.set(level, block.contextVariables.$odd.name, (scope, retrievalLevel) => {
+            return this.getLevelSpecificForLoopVariable(block, scope, retrievalLevel, '$index')
+                .modulo(literal(2))
+                .notIdentical(literal(0));
+        });
+        bindingScope.set(level, block.contextVariables.$even.name, (scope, retrievalLevel) => {
+            return this.getLevelSpecificForLoopVariable(block, scope, retrievalLevel, '$index')
+                .modulo(literal(2))
+                .identical(literal(0));
+        });
+        bindingScope.set(level, block.contextVariables.$first.name, (scope, retrievalLevel) => {
+            return this.getLevelSpecificForLoopVariable(block, scope, retrievalLevel, '$index')
+                .identical(literal(0));
+        });
+        bindingScope.set(level, block.contextVariables.$last.name, (scope, retrievalLevel) => {
+            const index = this.getLevelSpecificForLoopVariable(block, scope, retrievalLevel, '$index');
+            const count = this.getLevelSpecificForLoopVariable(block, scope, retrievalLevel, '$count');
+            return index.identical(count.minus(literal(1)));
+        });
+    }
+    getLevelSpecificVariableName(name, level) {
+        // We use the `ɵ` here to ensure that there are no name conflicts with user-defined variables.
+        return `ɵ${name}_${level}`;
+    }
+    /**
+     * Gets the name of a for loop variable at a specific binding level. This allows us to look
+     * up implicitly shadowed variables like `$index` and `$count` at a specific level.
+     */
+    getLevelSpecificForLoopVariable(block, scope, retrievalLevel, name) {
+        const scopeName = scope.bindingLevel === retrievalLevel ?
+            block.contextVariables[name].name :
+            this.getLevelSpecificVariableName(name, retrievalLevel);
+        return scope.get(scopeName);
     }
     optimizeTrackByFunction(block) {
         const indexLocalName = block.contextVariables.$index.name;
@@ -27043,7 +27954,7 @@ class BindingScope {
                 if (value.declareLocalCallback && !value.declare) {
                     value.declare = true;
                 }
-                return typeof value.lhs === 'function' ? value.lhs(this) : value.lhs;
+                return typeof value.lhs === 'function' ? value.lhs(this, value.retrievalLevel) : value.lhs;
             }
             current = current.parent;
         }
@@ -27151,7 +28062,9 @@ class BindingScope {
         const componentValue = this.map.get(SHARED_CONTEXT_KEY + 0);
         componentValue.declare = true;
         this.maybeRestoreView();
-        const lhs = typeof componentValue.lhs === 'function' ? componentValue.lhs(this) : componentValue.lhs;
+        const lhs = typeof componentValue.lhs === 'function' ?
+            componentValue.lhs(this, componentValue.retrievalLevel) :
+            componentValue.lhs;
         return name === DIRECT_CONTEXT_REFERENCE ? lhs : lhs.prop(name);
     }
     maybeRestoreView() {
@@ -27218,12 +28131,16 @@ class BindingScope {
 }
 /** Binding scope of a `track` function inside a `for` loop block. */
 class TrackByBindingScope extends BindingScope {
-    constructor(parentScope, globalAliases) {
+    constructor(parentScope, globalOverrides) {
         super(parentScope.bindingLevel + 1, parentScope);
-        this.globalAliases = globalAliases;
+        this.globalOverrides = globalOverrides;
         this.componentAccessCount = 0;
     }
     get(name) {
+        // Intercept any overridden globals.
+        if (this.globalOverrides.hasOwnProperty(name)) {
+            return variable(this.globalOverrides[name]);
+        }
         let current = this.parent;
         // Prevent accesses of template variables outside the `for` loop.
         while (current) {
@@ -27232,10 +28149,6 @@ class TrackByBindingScope extends BindingScope {
             }
             current = current.parent;
         }
-        // Intercept any aliased globals.
-        if (this.globalAliases[name]) {
-            return variable(this.globalAliases[name]);
-        }
         // When the component scope is accessed, we redirect it through `this`.
         this.componentAccessCount++;
         return variable('this').prop(name);
@@ -27245,24 +28158,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.
@@ -27623,6 +28518,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));
     }
@@ -27636,9 +28536,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));
     }
@@ -27949,6 +28846,8 @@ function createHostBindingsFunction(hostBindingsMetadata, typeSourceSpan, bindin
     const bindings = bindingParser.createBoundHostProperties(hostBindingsMetadata.properties, typeSourceSpan);
     // Calculate host event bindings
     const eventBindings = bindingParser.createDirectiveHostEventAsts(hostBindingsMetadata.listeners, typeSourceSpan);
+    let bindingId = 0;
+    const getNextBindingId = () => `${bindingId++}`;
     const bindingContext = variable(CONTEXT_NAME);
     const styleBuilder = new StylingBuilder(bindingContext);
     const { styleAttr, classAttr } = hostBindingsMetadata.specialAttributes;
@@ -28001,7 +28900,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);
@@ -28080,10 +28979,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,
                 });
             }
         });
@@ -28104,11 +29005,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;
@@ -28547,15 +29456,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));
@@ -29684,7 +30593,7 @@ function publishFacade(global) {
  * @description
  * Entry point for all public APIs of the compiler package.
  */
-const VERSION = new Version('17.0.2');
+const VERSION = new Version('17.0.8');
 
 class CompilerConfig {
     constructor({ defaultEncapsulation = exports.ViewEncapsulation.Emulated, preserveWhitespaces, strictInjectionParameters } = {}) {
@@ -29917,7 +30826,8 @@ class _Visitor {
         this._errors = [];
         this._messages = [];
         this._inImplicitNode = false;
-        this._createI18nMessage = createI18nMessageFactory(interpolationConfig);
+        this._createI18nMessage =
+            createI18nMessageFactory(interpolationConfig, DEFAULT_CONTAINER_BLOCKS);
     }
     // looks for translatable attributes
     _visitAttributesOf(el) {
@@ -30225,6 +31135,12 @@ class _WriteVisitor$1 {
     visitPlaceholder(ph, context) {
         return [new Tag(_PLACEHOLDER_TAG$2, { id: ph.name, 'equiv-text': `{{${ph.value}}}` })];
     }
+    visitBlockPlaceholder(ph, context) {
+        const ctype = `x-${ph.name.toLowerCase().replace(/[^a-z0-9]/g, '-')}`;
+        const startTagPh = new Tag(_PLACEHOLDER_TAG$2, { id: ph.startName, ctype, 'equiv-text': `@${ph.name}` });
+        const closeTagPh = new Tag(_PLACEHOLDER_TAG$2, { id: ph.closeName, ctype, 'equiv-text': `}` });
+        return [startTagPh, ...this.serialize(ph.children), closeTagPh];
+    }
     visitIcuPlaceholder(ph, context) {
         const equivText = `{${ph.value.expression}, ${ph.value.type}, ${Object.keys(ph.value.cases).map((value) => value + ' {...}').join(' ')}}`;
         return [new Tag(_PLACEHOLDER_TAG$2, { id: ph.name, 'equiv-text': equivText })];
@@ -30496,6 +31412,24 @@ class _WriteVisitor {
                 disp: `{{${ph.value}}}`,
             })];
     }
+    visitBlockPlaceholder(ph, context) {
+        const tagPc = new Tag(_PLACEHOLDER_SPANNING_TAG, {
+            id: (this._nextPlaceholderId++).toString(),
+            equivStart: ph.startName,
+            equivEnd: ph.closeName,
+            type: 'other',
+            dispStart: `@${ph.name}`,
+            dispEnd: `}`,
+        });
+        const nodes = [].concat(...ph.children.map(node => node.visit(this)));
+        if (nodes.length) {
+            nodes.forEach((node) => tagPc.children.push(node));
+        }
+        else {
+            tagPc.children.push(new Text$1(''));
+        }
+        return [tagPc];
+    }
     visitIcuPlaceholder(ph, context) {
         const cases = Object.keys(ph.value.cases).map((value) => value + ' {...}').join(' ');
         const idStr = (this._nextPlaceholderId++).toString();
@@ -30944,6 +31878,11 @@ class I18nToHtmlVisitor {
         // An ICU placeholder references the source message to be serialized
         return this._convertToText(this._srcMsg.placeholderToMessage[ph.name]);
     }
+    visitBlockPlaceholder(ph, context) {
+        const params = ph.parameters.length === 0 ? '' : ` (${ph.parameters.join('; ')})`;
+        const children = ph.children.map((c) => c.visit(this)).join('');
+        return `@${ph.name}${params} {${children}}`;
+    }
     /**
      * Convert a source message to a translated text string:
      * - text nodes are replaced with their translation,
@@ -31096,6 +32035,12 @@ class MapPlaceholderNames extends CloneVisitor {
         const children = ph.children.map(n => n.visit(this, mapper));
         return new TagPlaceholder(ph.tag, ph.attrs, startName, closeName, children, ph.isVoid, ph.sourceSpan, ph.startSourceSpan, ph.endSourceSpan);
     }
+    visitBlockPlaceholder(ph, mapper) {
+        const startName = mapper.toPublicName(ph.startName);
+        const closeName = ph.closeName ? mapper.toPublicName(ph.closeName) : ph.closeName;
+        const children = ph.children.map(n => n.visit(this, mapper));
+        return new BlockPlaceholder(ph.name, ph.parameters, startName, closeName, children, ph.sourceSpan, ph.startSourceSpan, ph.endSourceSpan);
+    }
     visitPlaceholder(ph, mapper) {
         return new Placeholder(ph.value, mapper.toPublicName(ph.name), ph.sourceSpan);
     }
@@ -31214,7 +32159,7 @@ const MINIMUM_PARTIAL_LINKER_VERSION$6 = '12.0.0';
 function compileDeclareClassMetadata(metadata) {
     const definitionMap = new DefinitionMap();
     definitionMap.set('minVersion', literal(MINIMUM_PARTIAL_LINKER_VERSION$6));
-    definitionMap.set('version', literal('17.0.2'));
+    definitionMap.set('version', literal('17.0.8'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', metadata.type);
     definitionMap.set('decorators', metadata.decorators);
@@ -31322,7 +32267,7 @@ function createDirectiveDefinitionMap(meta) {
     // in 16.1 is actually used.
     const minVersion = hasTransformFunctions ? MINIMUM_PARTIAL_LINKER_VERSION$5 : '14.0.0';
     definitionMap.set('minVersion', literal(minVersion));
-    definitionMap.set('version', literal('17.0.2'));
+    definitionMap.set('version', literal('17.0.8'));
     // e.g. `type: MyDirective`
     definitionMap.set('type', meta.type.value);
     if (meta.isStandalone) {
@@ -31596,7 +32541,7 @@ const MINIMUM_PARTIAL_LINKER_VERSION$4 = '12.0.0';
 function compileDeclareFactoryFunction(meta) {
     const definitionMap = new DefinitionMap();
     definitionMap.set('minVersion', literal(MINIMUM_PARTIAL_LINKER_VERSION$4));
-    definitionMap.set('version', literal('17.0.2'));
+    definitionMap.set('version', literal('17.0.8'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', meta.type.value);
     definitionMap.set('deps', compileDependencies(meta.deps));
@@ -31631,7 +32576,7 @@ function compileDeclareInjectableFromMetadata(meta) {
 function createInjectableDefinitionMap(meta) {
     const definitionMap = new DefinitionMap();
     definitionMap.set('minVersion', literal(MINIMUM_PARTIAL_LINKER_VERSION$3));
-    definitionMap.set('version', literal('17.0.2'));
+    definitionMap.set('version', literal('17.0.8'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', meta.type.value);
     // Only generate providedIn property if it has a non-null value
@@ -31682,7 +32627,7 @@ function compileDeclareInjectorFromMetadata(meta) {
 function createInjectorDefinitionMap(meta) {
     const definitionMap = new DefinitionMap();
     definitionMap.set('minVersion', literal(MINIMUM_PARTIAL_LINKER_VERSION$2));
-    definitionMap.set('version', literal('17.0.2'));
+    definitionMap.set('version', literal('17.0.8'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', meta.type.value);
     definitionMap.set('providers', meta.providers);
@@ -31715,7 +32660,7 @@ function createNgModuleDefinitionMap(meta) {
         throw new Error('Invalid path! Local compilation mode should not get into the partial compilation path');
     }
     definitionMap.set('minVersion', literal(MINIMUM_PARTIAL_LINKER_VERSION$1));
-    definitionMap.set('version', literal('17.0.2'));
+    definitionMap.set('version', literal('17.0.8'));
     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.
@@ -31766,7 +32711,7 @@ function compileDeclarePipeFromMetadata(meta) {
 function createPipeDefinitionMap(meta) {
     const definitionMap = new DefinitionMap();
     definitionMap.set('minVersion', literal(MINIMUM_PARTIAL_LINKER_VERSION));
-    definitionMap.set('version', literal('17.0.2'));
+    definitionMap.set('version', literal('17.0.8'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     // e.g. `type: MyPipe`
     definitionMap.set('type', meta.type.value);
@@ -31974,6 +32919,7 @@ exports.compileNgModule = compileNgModule;
 exports.compilePipeFromMetadata = compilePipeFromMetadata;
 exports.computeMsgId = computeMsgId;
 exports.core = core;
+exports.createCssSelectorFromNode = createCssSelectorFromNode;
 exports.createInjectableType = createInjectableType;
 exports.createMayBeForwardRefExpression = createMayBeForwardRefExpression;
 exports.devOnlyGuardedExpression = devOnlyGuardedExpression;