@angular/compiler 17.0.2 → 17.0.4

package/fesm2022/compiler.mjs

@@ -1,5 +1,5 @@
 /**
- * @license Angular v17.0.2
+ * @license Angular v17.0.4
  * (c) 2010-2022 Google LLC. https://angular.io/
  * License: MIT
  */
@@ -539,6 +539,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) {
@@ -3847,43 +3850,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
@@ -3922,17 +3929,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;
@@ -3942,15 +3950,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);
@@ -3966,11 +3976,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);
@@ -4240,6 +4251,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) {
@@ -4265,6 +4291,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 {
@@ -4282,6 +4312,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.
@@ -4312,6 +4345,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 {
@@ -4354,6 +4391,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);
     }
@@ -4566,6 +4608,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;
@@ -5211,6 +5264,7 @@ class InterpolationConfig {
     }
 }
 const DEFAULT_INTERPOLATION_CONFIG = new InterpolationConfig('{{', '}}');
+const DEFAULT_CONTAINER_BLOCKS = new Set(['switch']);
 
 const $EOF = 0;
 const $BSPACE = 8;
@@ -8852,11 +8906,11 @@ 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 i18n context containing information needed to generate an i18n message.
      */
@@ -9105,6 +9159,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.
@@ -9410,6 +9468,7 @@ function createRepeaterOp(repeaterCreate, targetSlot, collection, sourceSpan) {
         collection,
         sourceSpan,
         ...NEW_OP,
+        ...TRAIT_DEPENDS_ON_SLOT_CONTEXT,
     };
 }
 function createDeferWhenOp(target, expr, prefetch, sourceSpan) {
@@ -9453,17 +9512,6 @@ function createI18nApplyOp(target, handle, sourceSpan) {
         ...NEW_OP,
     };
 }
-/**
- * Creates an op to update an ICU expression.
- */
-function createIcuUpdateOp(xref, sourceSpan) {
-    return {
-        kind: OpKind.IcuUpdate,
-        xref,
-        sourceSpan,
-        ...NEW_OP,
-    };
-}
 
 var _a, _b, _c, _d, _e, _f;
 /**
@@ -10254,8 +10302,8 @@ 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:
@@ -10908,20 +10956,29 @@ function createI18nEndOp(xref) {
     };
 }
 /**
- * Creates an op to create an ICU expression.
+ * Creates an ICU start op.
  */
-function createIcuOp(xref, message, icu, messagePlaceholder, sourceSpan) {
+function createIcuStartOp(xref, message, messagePlaceholder, sourceSpan) {
     return {
-        kind: OpKind.Icu,
+        kind: OpKind.IcuStart,
         xref,
         message,
-        icu,
         messagePlaceholder,
         context: null,
         sourceSpan,
         ...NEW_OP,
     };
 }
+/**
+ * Creates an ICU end op.
+ */
+function createIcuEndOp(xref) {
+    return {
+        kind: OpKind.IcuEnd,
+        xref,
+        ...NEW_OP,
+    };
+}
 function createI18nContextOp(xref, i18nBlock, message, sourceSpan) {
     return {
         kind: OpKind.I18nContext,
@@ -11170,10 +11227,18 @@ 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);
             }
@@ -11183,13 +11248,15 @@ 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) {
+    // If the next op is an expression targeting a different i18n block, we need to apply.
+    const context = i18nContexts.get(op.context);
+    const nextContext = i18nContexts.get(op.next.context);
+    if (context.i18nBlock !== nextContext.i18nBlock) {
         return true;
     }
     return false;
@@ -11850,7 +11917,7 @@ function createI18nContexts(job) {
                 case OpKind.I18nEnd:
                     currentI18nOp = null;
                     break;
-                case OpKind.Icu:
+                case OpKind.IcuStart:
                     // If an ICU represents a different message than its containing block, we give it its own
                     // i18n context.
                     if (currentI18nOp === null) {
@@ -11873,50 +11940,6 @@ function createI18nContexts(job) {
     }
 }
 
-/**
- * Replace the ICU update ops with i18n expression ops.
- */
-function createI18nIcuExpressions(job) {
-    const icus = new Map();
-    const i18nContexts = new Map();
-    const i18nBlocks = new Map();
-    // Collect maps of ops that need to be referenced to create the I18nExpressionOps.
-    for (const unit of job.units) {
-        for (const op of unit.create) {
-            switch (op.kind) {
-                case OpKind.Icu:
-                    icus.set(op.xref, op);
-                    break;
-                case OpKind.I18nContext:
-                    i18nContexts.set(op.xref, op);
-                    break;
-                case OpKind.I18nStart:
-                    i18nBlocks.set(op.xref, op);
-                    break;
-            }
-        }
-        // Replace each IcuUpdateOp with an I18nExpressionOp.
-        for (const op of unit.update) {
-            switch (op.kind) {
-                case OpKind.IcuUpdate:
-                    const icuOp = icus.get(op.xref);
-                    if (icuOp?.icu.expressionPlaceholder === undefined) {
-                        throw Error('ICU should have an i18n placeholder');
-                    }
-                    if (icuOp.context === null) {
-                        throw Error('ICU should have its i18n context set');
-                    }
-                    const i18nContext = i18nContexts.get(icuOp.context);
-                    const i18nBlock = i18nBlocks.get(i18nContext.i18nBlock);
-                    OpList.replace(op, createI18nExpressionOp(i18nContext.xref, i18nBlock.xref, i18nBlock.handle, new LexicalReadExpr(icuOp.icu.expression), icuOp.icu.expressionPlaceholder, 
-                    // ICU-based i18n Expressions are resolved during post-processing.
-                    I18nParamResolutionTime.Postproccessing, null));
-                    break;
-            }
-        }
-    }
-}
-
 /**
  * Defer instructions take a configuration array, which should be collected into the component
  * consts. This phase finds the config options, and creates the corresponding const array.
@@ -12331,18 +12354,23 @@ function extractI18nMessages(job) {
     // Extract messages from ICUs with their own sub-context.
     for (const unit of job.units) {
         for (const op of unit.create) {
-            if (op.kind === OpKind.Icu) {
-                if (!op.context) {
-                    throw Error('ICU op should have its context set.');
-                }
-                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:
+                    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);
+                    break;
+                case OpKind.IcuEnd:
+                    OpList.remove(op);
+                    break;
             }
         }
     }
@@ -12364,7 +12392,7 @@ function createI18nMessage(job, context, messagePlaceholder) {
  */
 function formatParams(params) {
     const result = new Map();
-    for (const [placeholder, placeholderValues] of [...params].sort()) {
+    for (const [placeholder, placeholderValues] of params) {
         const serializedValues = formatParamValues(placeholderValues);
         if (serializedValues !== null) {
             result.set(placeholder, literal(formatParamValues(placeholderValues)));
@@ -12388,6 +12416,10 @@ function formatParamValues(values) {
  * Formats a single `I18nParamValue` into a string
  */
 function formatValue(value) {
+    // If there are no special flags, just return the raw value.
+    if (value.flags === I18nParamValueFlags.None) {
+        return `${value.value}`;
+    }
     let tagMarker = '';
     let closeMarker = '';
     if (value.flags & I18nParamValueFlags.ElementTag) {
@@ -12746,6 +12778,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);
     }
@@ -14469,12 +14504,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;
@@ -15160,6 +15195,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}`;
@@ -15170,6 +15223,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) {
@@ -15186,17 +15249,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 = {
@@ -15283,10 +15347,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.
      *
@@ -19155,17 +19235,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);
@@ -19466,6 +19547,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);
     }
@@ -19519,6 +19603,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]));
     }
@@ -19638,6 +19727,8 @@ function collectMessage(job, fileBasedI18nSuffix, messages, messageOp) {
         statements.push(...subMessageStatements);
         messageOp.params.set(subMessage.messagePlaceholder, subMessageVar);
     }
+    // Sort the params for consistency with TemaplateDefinitionBuilder output.
+    messageOp.params = new Map([...messageOp.params.entries()].sort());
     // Check that the message has all of its parameters filled out.
     assertAllParamsResolved(messageOp);
     const mainVar = variable(job.pool.uniqueName(TRANSLATION_VAR_PREFIX));
@@ -19649,6 +19740,8 @@ function collectMessage(job, fileBasedI18nSuffix, messages, messageOp) {
     // If nescessary, add a post-processing step and resolve any placeholder params that are
     // set in post-processing.
     if (messageOp.needsPostprocessing) {
+        // Sort the post-processing params for consistency with TemaplateDefinitionBuilder output.
+        messageOp.postprocessingParams = new Map([...messageOp.postprocessingParams.entries()].sort());
         const extraTransformFnParams = [];
         if (messageOp.postprocessingParams.size > 0) {
             extraTransformFnParams.push(literalMap([...messageOp.postprocessingParams].map(([key, value]) => ({ key, value, quoted: true }))));
@@ -19730,12 +19823,14 @@ function i18nGenerateClosureVar(pool, messageId, fileBasedI18nSuffix, useExterna
  * Asserts that all of the message's placeholders have values.
  */
 function assertAllParamsResolved(op) {
-    for (const placeholder in op.message.placeholders) {
+    for (let placeholder in op.message.placeholders) {
+        placeholder = placeholder.trimEnd();
         if (!op.params.has(placeholder) && !op.postprocessingParams.has(placeholder)) {
             throw Error(`Failed to resolve i18n placeholder: ${placeholder}`);
         }
     }
-    for (const placeholder in op.message.placeholderToMessage) {
+    for (let placeholder in op.message.placeholderToMessage) {
+        placeholder = placeholder.trimEnd();
         if (!op.params.has(placeholder) && !op.postprocessingParams.has(placeholder)) {
             throw Error(`Failed to resolve i18n message placeholder: ${placeholder}`);
         }
@@ -19750,7 +19845,9 @@ function extractI18nText(job) {
         // 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();
         for (const op of unit.create) {
             switch (op.kind) {
                 case OpKind.I18nStart:
@@ -19762,9 +19859,19 @@ 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);
+                        textNodeIcus.set(op.xref, currentIcu);
                         OpList.remove(op);
                     }
                     break;
@@ -19779,13 +19886,16 @@ function extractI18nText(job) {
                         continue;
                     }
                     const i18nOp = textNodeI18nBlocks.get(op.target);
+                    const icuOp = textNodeIcus.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.handle, expr, op.i18nPlaceholders[i], resolutionTime, expr.sourceSpan ?? op.sourceSpan));
                     }
                     OpList.replaceWithMany(op, ops);
                     break;
@@ -20852,8 +20962,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);
@@ -21461,7 +21571,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));
@@ -21800,7 +21910,7 @@ function getSubTemplateIndexForTemplateTag(job, i18nOp, op) {
     return i18nOp.subTemplateIndex;
 }
 /** Add a param value to the given params map. */
-function addParam(params, placeholder, value, subTemplateIndex, flags = I18nParamValueFlags.None) {
+function addParam(params, placeholder, value, subTemplateIndex, flags) {
     const values = params.get(placeholder) ?? [];
     values.push({ value, subTemplateIndex, flags });
     params.set(placeholder, values);
@@ -21825,27 +21935,100 @@ function resolveI18nExpressionPlaceholders(job) {
             }
         }
     }
-    // Keep track of the next available expression index per i18n context.
+    // Keep track of the next available expression index per i18n block.
     const expressionIndices = new Map();
     for (const unit of job.units) {
         for (const op of unit.update) {
             if (op.kind === OpKind.I18nExpression) {
-                const index = expressionIndices.get(op.context) || 0;
                 const i18nContext = i18nContexts.get(op.context);
+                const index = expressionIndices.get(i18nContext.i18nBlock) || 0;
                 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 });
+                values.push({
+                    value: index,
+                    subTemplateIndex: subTemplateIndex,
+                    flags: I18nParamValueFlags.ExpressionIndex
+                });
                 params.set(op.i18nPlaceholder, values);
-                expressionIndices.set(op.context, index + 1);
+                expressionIndices.set(i18nContext.i18nBlock, index + 1);
             }
         }
     }
 }
 
+/**
+ * Resolves placeholders for element tags inside of an ICU.
+ */
+function resolveI18nIcuPlaceholders(job) {
+    const contextOps = new Map();
+    for (const unit of job.units) {
+        for (const op of unit.create) {
+            switch (op.kind) {
+                case OpKind.I18nContext:
+                    contextOps.set(op.xref, op);
+                    break;
+            }
+        }
+    }
+    for (const unit of job.units) {
+        for (const op of unit.create) {
+            switch (op.kind) {
+                case OpKind.IcuStart:
+                    if (op.context === null) {
+                        throw Error('Icu should have its i18n context set.');
+                    }
+                    const i18nContext = contextOps.get(op.context);
+                    for (const node of op.message.nodes) {
+                        node.visit(new ResolveIcuPlaceholdersVisitor(i18nContext.postprocessingParams));
+                    }
+                    break;
+            }
+        }
+    }
+}
+/**
+ * Visitor for i18n AST that resolves ICU params into the given map.
+ */
+class ResolveIcuPlaceholdersVisitor extends RecurseVisitor {
+    constructor(params) {
+        super();
+        this.params = params;
+    }
+    visitContainerPlaceholder(placeholder) {
+        // Add the start and end source span for container placeholders. These need to be recorded for
+        // elements inside ICUs. The slots for the nodes were recorded separately under the i18n
+        // block's context as part of the `resolveI18nElementPlaceholders` phase.
+        if (placeholder.startName && placeholder.startSourceSpan &&
+            !this.params.has(placeholder.startName)) {
+            this.params.set(placeholder.startName, [{
+                    value: placeholder.startSourceSpan?.toString(),
+                    subTemplateIndex: null,
+                    flags: I18nParamValueFlags.None
+                }]);
+        }
+        if (placeholder.closeName && placeholder.endSourceSpan &&
+            !this.params.has(placeholder.closeName)) {
+            this.params.set(placeholder.closeName, [{
+                    value: placeholder.endSourceSpan?.toString(),
+                    subTemplateIndex: null,
+                    flags: I18nParamValueFlags.None
+                }]);
+        }
+    }
+    visitTagPlaceholder(placeholder) {
+        super.visitTagPlaceholder(placeholder);
+        this.visitContainerPlaceholder(placeholder);
+    }
+    visitBlockPlaceholder(placeholder) {
+        super.visitBlockPlaceholder(placeholder);
+        this.visitContainerPlaceholder(placeholder);
+    }
+}
+
 /**
  * Resolves lexical references in views (`ir.LexicalReadExpr`) to either a target variable or to
  * property reads on the top-level component context.
@@ -22896,6 +23079,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:
@@ -22904,11 +23088,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;
             }
@@ -22942,7 +23131,6 @@ const phases = [
     { kind: CompilationJobKind.Tmpl, fn: createPipes },
     { kind: CompilationJobKind.Tmpl, fn: configureDeferInstructions },
     { kind: CompilationJobKind.Tmpl, fn: extractI18nText },
-    { kind: CompilationJobKind.Tmpl, fn: createI18nIcuExpressions },
     { kind: CompilationJobKind.Tmpl, fn: applyI18nExpressions },
     { kind: CompilationJobKind.Tmpl, fn: createVariadicPipes },
     { kind: CompilationJobKind.Both, fn: generatePureLiteralStructures },
@@ -22966,6 +23154,7 @@ const phases = [
     { kind: CompilationJobKind.Tmpl, fn: createDeferDepsFns },
     { kind: CompilationJobKind.Tmpl, fn: resolveI18nElementPlaceholders },
     { kind: CompilationJobKind.Tmpl, fn: resolveI18nExpressionPlaceholders },
+    { kind: CompilationJobKind.Tmpl, fn: resolveI18nIcuPlaceholders },
     { kind: CompilationJobKind.Tmpl, fn: mergeI18nContexts },
     { kind: CompilationJobKind.Tmpl, fn: extractI18nMessages },
     { kind: CompilationJobKind.Tmpl, fn: generateTrackFns },
@@ -23279,7 +23468,7 @@ function ingestText(unit, text) {
 /**
  * Ingest an interpolated text node from the AST into the given `ViewCompilation`.
  */
-function ingestBoundText(unit, text) {
+function ingestBoundText(unit, text, i18nPlaceholders) {
     let value = text.value;
     if (value instanceof ASTWithSource) {
         value = value.ast;
@@ -23290,9 +23479,16 @@ function ingestBoundText(unit, text) {
     if (text.i18n !== undefined && !(text.i18n instanceof Container)) {
         throw Error(`Unhandled i18n metadata type for text interpolation: ${text.i18n?.constructor.name}`);
     }
-    const i18nPlaceholders = text.i18n instanceof Container ?
-        text.i18n.children.filter((node) => node instanceof Placeholder) :
-        [];
+    if (i18nPlaceholders === undefined) {
+        i18nPlaceholders = text.i18n instanceof Container ?
+            text.i18n.children
+                .filter((node) => node instanceof Placeholder)
+                .map(placeholder => placeholder.name) :
+            [];
+    }
+    if (i18nPlaceholders.length > 0 && i18nPlaceholders.length !== value.expressions.length) {
+        throw Error(`Unexpected number of i18n placeholders (${value.expressions.length}) for BoundText with ${value.expressions.length} expressions`);
+    }
     const textXref = unit.job.allocateXrefId();
     unit.create.push(createTextOp(textXref, '', text.sourceSpan));
     // TemplateDefinitionBuilder does not generate source maps for sub-expressions inside an
@@ -23458,8 +23654,22 @@ function ingestDeferBlock(unit, deferBlock) {
 function ingestIcu(unit, icu) {
     if (icu.i18n instanceof Message && isSingleI18nIcu(icu.i18n)) {
         const xref = unit.job.allocateXrefId();
-        unit.create.push(createIcuOp(xref, icu.i18n, icu.i18n.nodes[0], icuFromI18nMessage(icu.i18n).name, null));
-        unit.update.push(createIcuUpdateOp(xref, null));
+        const icuNode = icu.i18n.nodes[0];
+        unit.create.push(createIcuStartOp(xref, icu.i18n, icuFromI18nMessage(icu.i18n).name, null));
+        const expressionPlaceholder = icuNode.expressionPlaceholder?.trimEnd();
+        if (expressionPlaceholder === undefined || icu.vars[expressionPlaceholder] === undefined) {
+            throw Error('ICU should have a text binding');
+        }
+        ingestBoundText(unit, icu.vars[expressionPlaceholder], [expressionPlaceholder]);
+        for (const [placeholder, text] of Object.entries(icu.placeholders)) {
+            if (text instanceof BoundText) {
+                ingestBoundText(unit, text, [placeholder]);
+            }
+            else {
+                ingestText(unit, text);
+            }
+        }
+        unit.create.push(createIcuEndOp(xref));
     }
     else {
         throw Error(`Unhandled i18n metadata type for ICU: ${icu.i18n?.constructor.name}`);
@@ -25011,19 +25221,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.
@@ -25054,7 +25264,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 {
@@ -25072,7 +25282,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 };
@@ -25098,7 +25308,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;
         }
@@ -25685,7 +25895,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) {
@@ -25748,7 +25958,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;
@@ -25778,13 +25988,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 = {};
@@ -26384,6 +26594,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;
     }
@@ -26416,6 +26631,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);
     }
@@ -26694,13 +26916,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,
@@ -26794,12 +27022,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.
@@ -26835,7 +27063,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()
             ];
         });
     }
@@ -27258,10 +27486,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`;
@@ -27272,7 +27505,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);
@@ -27380,7 +27613,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)]);
         };
@@ -27427,7 +27662,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 };
         });
@@ -27478,7 +27713,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);
@@ -27526,23 +27761,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();
@@ -27696,11 +27929,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);
         }
@@ -27730,17 +27970,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;
@@ -28278,7 +28545,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;
         }
@@ -28386,7 +28653,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() {
@@ -30971,7 +31240,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.4');
 
 class CompilerConfig {
     constructor({ defaultEncapsulation = ViewEncapsulation.Emulated, preserveWhitespaces, strictInjectionParameters } = {}) {
@@ -31204,7 +31473,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) {
@@ -31512,6 +31782,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 })];
@@ -31783,6 +32059,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();
@@ -32231,6 +32525,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,
@@ -32383,6 +32682,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);
     }
@@ -32501,7 +32806,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.4'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', metadata.type);
     definitionMap.set('decorators', metadata.decorators);
@@ -32609,7 +32914,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.4'));
     // e.g. `type: MyDirective`
     definitionMap.set('type', meta.type.value);
     if (meta.isStandalone) {
@@ -32886,7 +33191,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.4'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', meta.type.value);
     definitionMap.set('deps', compileDependencies(meta.deps));
@@ -32921,7 +33226,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.4'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', meta.type.value);
     // Only generate providedIn property if it has a non-null value
@@ -32972,7 +33277,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.4'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', meta.type.value);
     definitionMap.set('providers', meta.providers);
@@ -33005,7 +33310,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.4'));
     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.
@@ -33056,7 +33361,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.4'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     // e.g. `type: MyPipe`
     definitionMap.set('type', meta.type.value);