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

package/fesm2022/compiler.mjs

@@ -1,5 +1,5 @@
 /**
- * @license Angular v17.1.0-next.0
+ * @license Angular v17.1.0-next.2
  * (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) {
@@ -3676,6 +3679,41 @@ function getInjectFn(target) {
     }
 }
 
+var TagContentType;
+(function (TagContentType) {
+    TagContentType[TagContentType["RAW_TEXT"] = 0] = "RAW_TEXT";
+    TagContentType[TagContentType["ESCAPABLE_RAW_TEXT"] = 1] = "ESCAPABLE_RAW_TEXT";
+    TagContentType[TagContentType["PARSABLE_DATA"] = 2] = "PARSABLE_DATA";
+})(TagContentType || (TagContentType = {}));
+function splitNsName(elementName) {
+    if (elementName[0] != ':') {
+        return [null, elementName];
+    }
+    const colonIndex = elementName.indexOf(':', 1);
+    if (colonIndex === -1) {
+        throw new Error(`Unsupported format "${elementName}" expecting ":namespace:name"`);
+    }
+    return [elementName.slice(1, colonIndex), elementName.slice(colonIndex + 1)];
+}
+// `<ng-container>` tags work the same regardless the namespace
+function isNgContainer(tagName) {
+    return splitNsName(tagName)[1] === 'ng-container';
+}
+// `<ng-content>` tags work the same regardless the namespace
+function isNgContent(tagName) {
+    return splitNsName(tagName)[1] === 'ng-content';
+}
+// `<ng-template>` tags work the same regardless the namespace
+function isNgTemplate(tagName) {
+    return splitNsName(tagName)[1] === 'ng-template';
+}
+function getNsPrefix(fullName) {
+    return fullName === null ? null : splitNsName(fullName)[0];
+}
+function mergeNsAndName(prefix, localName) {
+    return prefix ? `:${prefix}:${localName}` : localName;
+}
+
 /**
  * This is an R3 `Node`-like wrapper for a raw `html.Comment` node. We do not currently
  * require the implementation of a visitor for Comments as they are only collected at
@@ -3847,43 +3885,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 +3964,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 +3985,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 +4011,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 +4286,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 +4326,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 +4347,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 +4380,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 +4426,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 +4643,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;
@@ -4966,6 +5054,26 @@ class DefinitionMap {
         return literalMap(this.values);
     }
 }
+/**
+ * Creates a `CssSelector` from an AST node.
+ */
+function createCssSelectorFromNode(node) {
+    const elementName = node instanceof Element$1 ? node.name : 'ng-template';
+    const attributes = getAttrsForDirectiveMatching(node);
+    const cssSelector = new CssSelector();
+    const elementNameNoNs = splitNsName(elementName)[1];
+    cssSelector.setElement(elementNameNoNs);
+    Object.getOwnPropertyNames(attributes).forEach((name) => {
+        const nameNoNs = splitNsName(name)[1];
+        const value = attributes[name];
+        cssSelector.addAttribute(nameNoNs, value);
+        if (name.toLowerCase() === 'class') {
+            const classes = value.trim().split(/\s+/);
+            classes.forEach(className => cssSelector.addClassName(className));
+        }
+    });
+    return cssSelector;
+}
 /**
  * Extract a map of properties to values for a given element or template node, which can be used
  * by the directive matching machinery.
@@ -5211,6 +5319,7 @@ class InterpolationConfig {
     }
 }
 const DEFAULT_INTERPOLATION_CONFIG = new InterpolationConfig('{{', '}}');
+const DEFAULT_CONTAINER_BLOCKS = new Set(['switch']);
 
 const $EOF = 0;
 const $BSPACE = 8;
@@ -9141,6 +9250,14 @@ 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 = {}));
 
 /**
  * Marker symbol for `ConsumesSlotOpTrait`.
@@ -9414,6 +9531,7 @@ function createRepeaterOp(repeaterCreate, targetSlot, collection, sourceSpan) {
         collection,
         sourceSpan,
         ...NEW_OP,
+        ...TRAIT_DEPENDS_ON_SLOT_CONTEXT,
     };
 }
 function createDeferWhenOp(target, expr, prefetch, sourceSpan) {
@@ -10924,9 +11042,10 @@ function createIcuEndOp(xref) {
         ...NEW_OP,
     };
 }
-function createI18nContextOp(xref, i18nBlock, message, sourceSpan) {
+function createI18nContextOp(contextKind, xref, i18nBlock, message, sourceSpan) {
     return {
         kind: OpKind.I18nContext,
+        contextKind,
         xref,
         i18nBlock,
         message,
@@ -11212,7 +11331,6 @@ function needsApplication(i18nContexts, op) {
  */
 function assignI18nSlotDependencies(job) {
     const i18nLastSlotConsumers = new Map();
-    const i18nContexts = new Map();
     let lastSlotConsumer = null;
     let currentI18nOp = null;
     for (const unit of job.units) {
@@ -11229,16 +11347,12 @@ function assignI18nSlotDependencies(job) {
                     i18nLastSlotConsumers.set(currentI18nOp.xref, lastSlotConsumer);
                     currentI18nOp = null;
                     break;
-                case OpKind.I18nContext:
-                    i18nContexts.set(op.xref, op);
-                    break;
             }
         }
         // Assign i18n expressions to target the last slot in its owning block.
         for (const op of unit.update) {
             if (op.kind === OpKind.I18nExpression) {
-                const i18nContext = i18nContexts.get(op.context);
-                op.target = i18nLastSlotConsumers.get(i18nContext.i18nBlock);
+                op.target = i18nLastSlotConsumers.get(op.target);
             }
         }
     }
@@ -11569,41 +11683,6 @@ function generateConditionalExpressions(job) {
     }
 }
 
-var TagContentType;
-(function (TagContentType) {
-    TagContentType[TagContentType["RAW_TEXT"] = 0] = "RAW_TEXT";
-    TagContentType[TagContentType["ESCAPABLE_RAW_TEXT"] = 1] = "ESCAPABLE_RAW_TEXT";
-    TagContentType[TagContentType["PARSABLE_DATA"] = 2] = "PARSABLE_DATA";
-})(TagContentType || (TagContentType = {}));
-function splitNsName(elementName) {
-    if (elementName[0] != ':') {
-        return [null, elementName];
-    }
-    const colonIndex = elementName.indexOf(':', 1);
-    if (colonIndex === -1) {
-        throw new Error(`Unsupported format "${elementName}" expecting ":namespace:name"`);
-    }
-    return [elementName.slice(1, colonIndex), elementName.slice(colonIndex + 1)];
-}
-// `<ng-container>` tags work the same regardless the namespace
-function isNgContainer(tagName) {
-    return splitNsName(tagName)[1] === 'ng-container';
-}
-// `<ng-content>` tags work the same regardless the namespace
-function isNgContent(tagName) {
-    return splitNsName(tagName)[1] === 'ng-content';
-}
-// `<ng-template>` tags work the same regardless the namespace
-function isNgTemplate(tagName) {
-    return splitNsName(tagName)[1] === 'ng-template';
-}
-function getNsPrefix(fullName) {
-    return fullName === null ? null : splitNsName(fullName)[0];
-}
-function mergeNsAndName(prefix, localName) {
-    return prefix ? `:${prefix}:${localName}` : localName;
-}
-
 const BINARY_OPERATORS = new Map([
     ['&&', BinaryOperator.And],
     ['>', BinaryOperator.Bigger],
@@ -11847,17 +11926,22 @@ function createDeferDepsFns(job) {
  * message.)
  */
 function createI18nContexts(job) {
+    const rootContexts = new Map();
     let currentI18nOp = null;
     let xref;
     for (const unit of job.units) {
         for (const op of unit.create) {
             switch (op.kind) {
                 case OpKind.I18nStart:
-                    // Each i18n block gets its own context.
-                    xref = job.allocateXrefId();
-                    unit.create.push(createI18nContextOp(xref, op.xref, op.message, null));
-                    op.context = xref;
                     currentI18nOp = op;
+                    // Each root i18n block gets its own context, child ones refer to the context for their
+                    // root block.
+                    if (op.xref === op.root) {
+                        xref = job.allocateXrefId();
+                        unit.create.push(createI18nContextOp(I18nContextKind.RootI18n, xref, op.xref, op.message, null));
+                        op.context = xref;
+                        rootContexts.set(op.xref, xref);
+                    }
                     break;
                 case OpKind.I18nEnd:
                     currentI18nOp = null;
@@ -11871,7 +11955,7 @@ function createI18nContexts(job) {
                     if (op.message.id !== currentI18nOp.message.id) {
                         // There was an enclosing i18n block around this ICU somewhere.
                         xref = job.allocateXrefId();
-                        unit.create.push(createI18nContextOp(xref, currentI18nOp.xref, op.message, null));
+                        unit.create.push(createI18nContextOp(I18nContextKind.Icu, xref, currentI18nOp.xref, op.message, null));
                         op.context = xref;
                     }
                     else {
@@ -11883,6 +11967,15 @@ function createI18nContexts(job) {
             }
         }
     }
+    // Assign contexts to child i18n blocks, now that all root i18n blocks have their context
+    // assigned.
+    for (const unit of job.units) {
+        for (const op of unit.create) {
+            if (op.kind === OpKind.I18nStart && op.xref !== op.root) {
+                op.context = rootContexts.get(op.root);
+            }
+        }
+    }
 }
 
 /**
@@ -12265,11 +12358,9 @@ const LIST_DELIMITER = '|';
  * used in the final output.
  */
 function extractI18nMessages(job) {
-    // Save the i18n context ops for later use.
+    // Save the i18n start and i18n context ops for later use.
     const i18nContexts = new Map();
-    // Record which contexts represent i18n blocks (any other contexts are assumed to have been
-    // created from ICUs).
-    const i18nBlockContexts = new Set();
+    const i18nBlocks = new Map();
     for (const unit of job.units) {
         for (const op of unit.create) {
             switch (op.kind) {
@@ -12277,7 +12368,7 @@ function extractI18nMessages(job) {
                     i18nContexts.set(op.xref, op);
                     break;
                 case OpKind.I18nStart:
-                    i18nBlockContexts.add(op.context);
+                    i18nBlocks.set(op.xref, op);
                     break;
             }
         }
@@ -12304,11 +12395,12 @@ function extractI18nMessages(job) {
                     if (!op.context) {
                         throw Error('ICU op should have its context set.');
                     }
-                    if (!i18nBlockContexts.has(op.context)) {
-                        const i18nContext = i18nContexts.get(op.context);
+                    const i18nContext = i18nContexts.get(op.context);
+                    if (i18nContext.contextKind === I18nContextKind.Icu) {
                         const subMessage = createI18nMessage(job, i18nContext, op.messagePlaceholder);
                         unit.create.push(subMessage);
-                        const parentMessage = i18nBlockMessages.get(i18nContext.i18nBlock);
+                        const rootI18nId = i18nBlocks.get(i18nContext.i18nBlock).root;
+                        const parentMessage = i18nBlockMessages.get(rootI18nId);
                         parentMessage?.subMessages.push(subMessage.xref);
                     }
                     OpList.remove(op);
@@ -12324,38 +12416,110 @@ 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;
-        }
-    }
-    return createI18nMessageOp(job.allocateXrefId(), context.i18nBlock, context.message, messagePlaceholder ?? null, formatParams(context.params), formatParams(context.postprocessingParams), needsPostprocessing);
+    let [formattedParams, needsPostprocessing] = formatParams(context.params);
+    const [formattedPostprocessingParams] = formatParams(context.postprocessingParams);
+    needsPostprocessing ||= formattedPostprocessingParams.size > 0;
+    return createI18nMessageOp(job.allocateXrefId(), context.i18nBlock, context.message, messagePlaceholder ?? null, formattedParams, formattedPostprocessingParams, needsPostprocessing);
 }
 /**
  * Formats a map of `I18nParamValue[]` values into a map of `Expression` values.
+ * @return A tuple of the formatted params and a boolean indicating whether postprocessing is needed
+ *     for any of the params
  */
 function formatParams(params) {
-    const result = new Map();
+    const formattedParams = new Map();
+    let needsPostprocessing = false;
     for (const [placeholder, placeholderValues] of params) {
-        const serializedValues = formatParamValues(placeholderValues);
+        const [serializedValues, paramNeedsPostprocessing] = formatParamValues(placeholderValues);
+        needsPostprocessing ||= paramNeedsPostprocessing;
         if (serializedValues !== null) {
-            result.set(placeholder, literal(formatParamValues(placeholderValues)));
+            formattedParams.set(placeholder, literal(serializedValues));
         }
     }
-    return result;
+    return [formattedParams, needsPostprocessing];
 }
 /**
  * Formats an `I18nParamValue[]` into a string (or null for empty array).
+ * @return A tuple of the formatted value and a boolean indicating whether postprocessing is needed
+ *     for the value
  */
 function formatParamValues(values) {
     if (values.length === 0) {
-        return null;
+        return [null, false];
     }
+    collapseElementTemplatePairs(values);
     const serializedValues = values.map(value => formatValue(value));
     return serializedValues.length === 1 ?
-        serializedValues[0] :
-        `${LIST_START_MARKER}${serializedValues.join(LIST_DELIMITER)}${LIST_END_MARKER}`;
+        [serializedValues[0], false] :
+        [`${LIST_START_MARKER}${serializedValues.join(LIST_DELIMITER)}${LIST_END_MARKER}`, true];
+}
+/**
+ * Collapses element/template pairs that refer to the same subTemplateIndex, i.e. elements and
+ * templates that refer to the same element instance.
+ *
+ * This accounts for the case of a structural directive inside an i18n block, e.g.:
+ * ```
+ * <div i18n>
+ *   <div *ngIf="condition">
+ * </div>
+ * ```
+ *
+ * In this case, both the element start and template start placeholders are the same,
+ * and we collapse them down into a single compound placeholder value. Rather than produce
+ * `[\uFFFD#1:1\uFFFD|\uFFFD*2:1\uFFFD]`, we want to produce `\uFFFD#1:1\uFFFD\uFFFD*2:1\uFFFD`,
+ * likewise for the closing of the element/template.
+ */
+function collapseElementTemplatePairs(values) {
+    // Record the indicies of element and template values in the values array by subTemplateIndex.
+    const valueIndiciesBySubTemplateIndex = new Map();
+    for (let i = 0; i < values.length; i++) {
+        const value = values[i];
+        if (value.subTemplateIndex !== null &&
+            (value.flags & (I18nParamValueFlags.ElementTag | I18nParamValueFlags.TemplateTag))) {
+            const valueIndicies = valueIndiciesBySubTemplateIndex.get(value.subTemplateIndex) ?? [];
+            valueIndicies.push(i);
+            valueIndiciesBySubTemplateIndex.set(value.subTemplateIndex, valueIndicies);
+        }
+    }
+    // For each subTemplateIndex, check if any values can be collapsed.
+    for (const [subTemplateIndex, valueIndicies] of valueIndiciesBySubTemplateIndex) {
+        if (valueIndicies.length > 1) {
+            const elementIndex = valueIndicies.find(index => values[index].flags & I18nParamValueFlags.ElementTag);
+            const templateIndex = valueIndicies.find(index => values[index].flags & I18nParamValueFlags.TemplateTag);
+            // If the values list contains both an element and template value, we can collapse.
+            if (elementIndex !== undefined && templateIndex !== undefined) {
+                const elementValue = values[elementIndex];
+                const templateValue = values[templateIndex];
+                // To match the TemplateDefinitionBuilder output, flip the order depending on whether the
+                // values represent a closing or opening tag (or both).
+                // TODO(mmalerba): Figure out if this makes a difference in terms of either functionality,
+                // or the resulting message ID. If not, we can remove the special-casing in the future.
+                let compundValue;
+                if ((elementValue.flags & I18nParamValueFlags.OpenTag) &&
+                    (elementValue.flags & I18nParamValueFlags.CloseTag)) {
+                    // TODO(mmalerba): Is this a TDB bug? I don't understand why it would put the template
+                    // value twice.
+                    compundValue = `${formatValue(templateValue)}${formatValue(elementValue)}${formatValue(templateValue)}`;
+                }
+                else if (elementValue.flags & I18nParamValueFlags.OpenTag) {
+                    compundValue = `${formatValue(templateValue)}${formatValue(elementValue)}`;
+                }
+                else {
+                    compundValue = `${formatValue(elementValue)}${formatValue(templateValue)}`;
+                }
+                // Replace the element value with the combined value.
+                values.splice(elementIndex, 1, { value: compundValue, subTemplateIndex, flags: I18nParamValueFlags.None });
+                // Replace the template value with null to preserve the indicies we calculated earlier.
+                values.splice(templateIndex, 1, null);
+            }
+        }
+    }
+    // Strip out any nulled out values we introduced above.
+    for (let i = values.length - 1; i >= 0; i--) {
+        if (values[i] === null) {
+            values.splice(i, 1);
+        }
+    }
 }
 /**
  * Formats a single `I18nParamValue` into a string
@@ -12723,6 +12887,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);
     }
@@ -14446,12 +14613,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;
@@ -15137,6 +15304,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}`;
@@ -15147,6 +15332,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) {
@@ -15163,17 +15358,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 = {
@@ -15260,10 +15456,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.
      *
@@ -19132,17 +19344,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);
@@ -19443,6 +19656,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);
     }
@@ -19496,6 +19712,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]));
     }
@@ -19826,57 +20047,6 @@ function serializeLocalRefs(refs) {
     return literalArr(constRefs);
 }
 
-/**
- * Merge i18n contexts for child i18n blocks into their ancestor root contexts.
- */
-function mergeI18nContexts(job) {
-    // Record all of the i18n and extracted message ops for use later.
-    const i18nOps = new Map();
-    const i18nContexts = new Map();
-    for (const unit of job.units) {
-        for (const op of unit.create) {
-            switch (op.kind) {
-                case OpKind.I18nStart:
-                    if (!op.context) {
-                        throw Error('I18n op should have its context set.');
-                    }
-                    i18nOps.set(op.xref, op);
-                    break;
-                case OpKind.I18nContext:
-                    i18nContexts.set(op.xref, op);
-                    break;
-            }
-        }
-    }
-    // For each non-root i18n op, merge its context into the root i18n op's context.
-    for (const childI18nOp of i18nOps.values()) {
-        if (childI18nOp.xref !== childI18nOp.root) {
-            const childContext = i18nContexts.get(childI18nOp.context);
-            const rootI18nOp = i18nOps.get(childI18nOp.root);
-            const rootContext = i18nContexts.get(rootI18nOp.context);
-            mergeParams(rootContext.params, childContext.params);
-            mergeParams(rootContext.postprocessingParams, childContext.postprocessingParams);
-        }
-    }
-}
-/**
- * Merges the params in the `from` map to into the `to` map.
- */
-function mergeParams(to, from) {
-    for (const [placeholder, fromValues] of from) {
-        const toValues = to.get(placeholder) || [];
-        // TODO(mmalerba): Child element close tag params should be prepended to maintain the same order
-        // as TemplateDefinitionBuilder. Can be cleaned up when compatibility is no longer required.
-        const flags = fromValues[0].flags;
-        if ((flags & I18nParamValueFlags.CloseTag) && !(flags & I18nParamValueFlags.OpenTag)) {
-            to.set(placeholder, [...fromValues, ...toValues]);
-        }
-        else {
-            to.set(placeholder, [...toValues, ...fromValues]);
-        }
-    }
-}
-
 /**
  * Change namespaces between HTML, SVG and MathML, depending on the next element.
  */
@@ -20540,9 +20710,10 @@ function propagateI18nBlocksToTemplates(unit, subTemplateIndex) {
                     wrapTemplateWithI18n(templateView, i18nBlock);
                 }
                 // Continue traversing inside the template's view.
-                propagateI18nBlocksToTemplates(templateView, subTemplateIndex);
+                subTemplateIndex = propagateI18nBlocksToTemplates(templateView, subTemplateIndex);
         }
     }
+    return subTemplateIndex;
 }
 /**
  * Wraps a template view with i18n start and end ops.
@@ -20850,8 +21021,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);
@@ -21459,7 +21630,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));
@@ -21722,66 +21893,79 @@ 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);
+}
+function resolvePlaceholdersForView(job, unit, i18nContexts, elements) {
+    // 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');
+                }
+                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);
+                    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;
                     }
-                    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);
-                        }
+                    addParam(currentOps.i18nContext.params, startName, op.handle.slot, currentOps.i18nBlock.subTemplateIndex, flags);
+                }
+                break;
+            case OpKind.ElementEnd:
+                // For elements with i18n placeholders, record its slot value in the params map under the
+                // corresponding tag close placeholder.
+                const startOp = elements.get(op.xref);
+                if (startOp && startOp.i18nPlaceholder !== undefined) {
+                    if (currentOps === null) {
+                        throw Error('i18n tag placeholder should only occur inside an i18n block');
                     }
-                    break;
-                case OpKind.Template:
-                    // For templates with i18n placeholders, record its slot value in the params map under the
-                    // corresponding template start and close placeholders.
-                    if (op.i18nPlaceholder !== undefined) {
-                        if (currentOps === null) {
-                            throw Error('i18n tag placeholder should only occur inside an i18n block');
-                        }
-                        const subTemplateIndex = getSubTemplateIndexForTemplateTag(job, currentOps.i18nBlock, op);
-                        addParam(currentOps.i18nContext.params, op.i18nPlaceholder.startName, op.handle.slot, subTemplateIndex, I18nParamValueFlags.TemplateTag);
-                        addParam(currentOps.i18nContext.params, op.i18nPlaceholder.closeName, op.handle.slot, subTemplateIndex, I18nParamValueFlags.TemplateTag | I18nParamValueFlags.CloseTag);
+                    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);
                     }
-                    break;
-            }
+                }
+                break;
+            case OpKind.Template:
+                // For templates with i18n placeholders, record its slot value in the params map under the
+                // corresponding template start and close placeholders.
+                if (op.i18nPlaceholder !== undefined) {
+                    if (currentOps === null) {
+                        throw Error('i18n tag placeholder should only occur inside an i18n block');
+                    }
+                    let startFlags = I18nParamValueFlags.TemplateTag | I18nParamValueFlags.OpenTag;
+                    const subTemplateIndex = getSubTemplateIndexForTemplateTag(job, currentOps.i18nBlock, op);
+                    const { startName, closeName } = op.i18nPlaceholder;
+                    const isSelfClosing = closeName === '';
+                    if (isSelfClosing) {
+                        startFlags |= I18nParamValueFlags.CloseTag;
+                    }
+                    addParam(currentOps.i18nContext.params, startName, op.handle.slot, subTemplateIndex, startFlags);
+                    resolvePlaceholdersForView(job, job.views.get(op.xref), i18nContexts, elements);
+                    if (!isSelfClosing) {
+                        addParam(currentOps.i18nContext.params, closeName, op.handle.slot, subTemplateIndex, I18nParamValueFlags.TemplateTag | I18nParamValueFlags.CloseTag);
+                    }
+                }
+                else {
+                    resolvePlaceholdersForView(job, job.views.get(op.xref), i18nContexts, elements);
+                }
+                break;
         }
     }
 }
@@ -21829,8 +22013,8 @@ function resolveI18nExpressionPlaceholders(job) {
         for (const op of unit.update) {
             if (op.kind === OpKind.I18nExpression) {
                 const i18nContext = i18nContexts.get(op.context);
-                const index = expressionIndices.get(i18nContext.i18nBlock) || 0;
-                const subTemplateIndex = subTemplateIndicies.get(i18nContext.i18nBlock);
+                const index = expressionIndices.get(op.target) || 0;
+                const subTemplateIndex = subTemplateIndicies.get(op.target);
                 // Add the expression index in the appropriate params map.
                 const params = op.resolutionTime === I18nParamResolutionTime.Creation ?
                     i18nContext.params :
@@ -21842,7 +22026,7 @@ function resolveI18nExpressionPlaceholders(job) {
                     flags: I18nParamValueFlags.ExpressionIndex
                 });
                 params.set(op.i18nPlaceholder, values);
-                expressionIndices.set(i18nContext.i18nBlock, index + 1);
+                expressionIndices.set(op.target, index + 1);
             }
         }
     }
@@ -21852,28 +22036,12 @@ function resolveI18nExpressionPlaceholders(job) {
  * Resolves placeholders for element tags inside of an ICU.
  */
 function resolveI18nIcuPlaceholders(job) {
-    const contextOps = new Map();
-    for (const unit of job.units) {
-        for (const op of unit.create) {
-            switch (op.kind) {
-                case OpKind.I18nContext:
-                    contextOps.set(op.xref, op);
-                    break;
-            }
-        }
-    }
     for (const unit of job.units) {
         for (const op of unit.create) {
-            switch (op.kind) {
-                case OpKind.IcuStart:
-                    if (op.context === null) {
-                        throw Error('Icu should have its i18n context set.');
-                    }
-                    const i18nContext = contextOps.get(op.context);
-                    for (const node of op.message.nodes) {
-                        node.visit(new ResolveIcuPlaceholdersVisitor(i18nContext.postprocessingParams));
-                    }
-                    break;
+            if (op.kind === OpKind.I18nContext && op.contextKind === I18nContextKind.Icu) {
+                for (const node of op.message.nodes) {
+                    node.visit(new ResolveIcuPlaceholdersVisitor(op.postprocessingParams));
+                }
             }
         }
     }
@@ -21886,10 +22054,9 @@ class ResolveIcuPlaceholdersVisitor extends RecurseVisitor {
         super();
         this.params = params;
     }
-    visitTagPlaceholder(placeholder) {
-        super.visitTagPlaceholder(placeholder);
-        // Add the start and end source span for tag placeholders. These need to be recorded for
-        // elements inside ICUs. The slots for the elements were recorded separately under the i18n
+    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)) {
@@ -21908,6 +22075,14 @@ class ResolveIcuPlaceholdersVisitor extends RecurseVisitor {
                 }]);
         }
     }
+    visitTagPlaceholder(placeholder) {
+        super.visitTagPlaceholder(placeholder);
+        this.visitContainerPlaceholder(placeholder);
+    }
+    visitBlockPlaceholder(placeholder) {
+        super.visitBlockPlaceholder(placeholder);
+        this.visitContainerPlaceholder(placeholder);
+    }
 }
 
 /**
@@ -23036,7 +23211,6 @@ const phases = [
     { kind: CompilationJobKind.Tmpl, fn: resolveI18nElementPlaceholders },
     { kind: CompilationJobKind.Tmpl, fn: resolveI18nExpressionPlaceholders },
     { kind: CompilationJobKind.Tmpl, fn: resolveI18nIcuPlaceholders },
-    { kind: CompilationJobKind.Tmpl, fn: mergeI18nContexts },
     { kind: CompilationJobKind.Tmpl, fn: extractI18nMessages },
     { kind: CompilationJobKind.Tmpl, fn: generateTrackFns },
     { kind: CompilationJobKind.Tmpl, fn: collectI18nConsts },
@@ -25102,19 +25276,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.
@@ -25145,7 +25319,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 {
@@ -25163,7 +25337,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 };
@@ -25189,7 +25363,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;
         }
@@ -25776,7 +25950,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) {
@@ -25839,7 +26013,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;
@@ -25869,13 +26043,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 = {};
@@ -26475,6 +26649,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;
     }
@@ -26507,6 +26686,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);
     }
@@ -26785,13 +26971,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,
@@ -26885,12 +27077,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.
@@ -26926,7 +27118,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()
             ];
         });
     }
@@ -27349,10 +27541,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`;
@@ -27363,7 +27560,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);
@@ -27520,7 +27717,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 };
         });
@@ -27571,7 +27768,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);
@@ -27619,23 +27816,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();
@@ -27789,11 +27984,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);
         }
@@ -27823,17 +28025,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;
@@ -28371,7 +28600,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;
         }
@@ -28479,7 +28708,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() {
@@ -28573,24 +28804,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.
@@ -28951,6 +29164,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));
     }
@@ -28964,9 +29182,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));
     }
@@ -29927,15 +30142,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));
@@ -31064,7 +31279,7 @@ function publishFacade(global) {
  * @description
  * Entry point for all public APIs of the compiler package.
  */
-const VERSION = new Version('17.1.0-next.0');
+const VERSION = new Version('17.1.0-next.2');
 
 class CompilerConfig {
     constructor({ defaultEncapsulation = ViewEncapsulation.Emulated, preserveWhitespaces, strictInjectionParameters } = {}) {
@@ -31297,7 +31512,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) {
@@ -31605,6 +31821,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 })];
@@ -31876,6 +32098,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();
@@ -32324,6 +32564,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,
@@ -32476,6 +32721,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);
     }
@@ -32594,7 +32845,7 @@ const MINIMUM_PARTIAL_LINKER_VERSION$6 = '12.0.0';
 function compileDeclareClassMetadata(metadata) {
     const definitionMap = new DefinitionMap();
     definitionMap.set('minVersion', literal(MINIMUM_PARTIAL_LINKER_VERSION$6));
-    definitionMap.set('version', literal('17.1.0-next.0'));
+    definitionMap.set('version', literal('17.1.0-next.2'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', metadata.type);
     definitionMap.set('decorators', metadata.decorators);
@@ -32702,7 +32953,7 @@ function createDirectiveDefinitionMap(meta) {
     // in 16.1 is actually used.
     const minVersion = hasTransformFunctions ? MINIMUM_PARTIAL_LINKER_VERSION$5 : '14.0.0';
     definitionMap.set('minVersion', literal(minVersion));
-    definitionMap.set('version', literal('17.1.0-next.0'));
+    definitionMap.set('version', literal('17.1.0-next.2'));
     // e.g. `type: MyDirective`
     definitionMap.set('type', meta.type.value);
     if (meta.isStandalone) {
@@ -32979,7 +33230,7 @@ const MINIMUM_PARTIAL_LINKER_VERSION$4 = '12.0.0';
 function compileDeclareFactoryFunction(meta) {
     const definitionMap = new DefinitionMap();
     definitionMap.set('minVersion', literal(MINIMUM_PARTIAL_LINKER_VERSION$4));
-    definitionMap.set('version', literal('17.1.0-next.0'));
+    definitionMap.set('version', literal('17.1.0-next.2'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', meta.type.value);
     definitionMap.set('deps', compileDependencies(meta.deps));
@@ -33014,7 +33265,7 @@ function compileDeclareInjectableFromMetadata(meta) {
 function createInjectableDefinitionMap(meta) {
     const definitionMap = new DefinitionMap();
     definitionMap.set('minVersion', literal(MINIMUM_PARTIAL_LINKER_VERSION$3));
-    definitionMap.set('version', literal('17.1.0-next.0'));
+    definitionMap.set('version', literal('17.1.0-next.2'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', meta.type.value);
     // Only generate providedIn property if it has a non-null value
@@ -33065,7 +33316,7 @@ function compileDeclareInjectorFromMetadata(meta) {
 function createInjectorDefinitionMap(meta) {
     const definitionMap = new DefinitionMap();
     definitionMap.set('minVersion', literal(MINIMUM_PARTIAL_LINKER_VERSION$2));
-    definitionMap.set('version', literal('17.1.0-next.0'));
+    definitionMap.set('version', literal('17.1.0-next.2'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', meta.type.value);
     definitionMap.set('providers', meta.providers);
@@ -33098,7 +33349,7 @@ function createNgModuleDefinitionMap(meta) {
         throw new Error('Invalid path! Local compilation mode should not get into the partial compilation path');
     }
     definitionMap.set('minVersion', literal(MINIMUM_PARTIAL_LINKER_VERSION$1));
-    definitionMap.set('version', literal('17.1.0-next.0'));
+    definitionMap.set('version', literal('17.1.0-next.2'));
     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.
@@ -33149,7 +33400,7 @@ function compileDeclarePipeFromMetadata(meta) {
 function createPipeDefinitionMap(meta) {
     const definitionMap = new DefinitionMap();
     definitionMap.set('minVersion', literal(MINIMUM_PARTIAL_LINKER_VERSION));
-    definitionMap.set('version', literal('17.1.0-next.0'));
+    definitionMap.set('version', literal('17.1.0-next.2'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     // e.g. `type: MyPipe`
     definitionMap.set('type', meta.type.value);
@@ -33182,5 +33433,5 @@ publishFacade(_global);
 
 // This file is not used to build this module. It is only used during editing
 
-export { AST, ASTWithName, ASTWithSource, AbsoluteSourceSpan, ArrayType, ArrowFunctionExpr, AstMemoryEfficientTransformer, AstTransformer, Attribute, Binary, BinaryOperator, BinaryOperatorExpr, BindingPipe, Block, BlockParameter, BoundElementProperty, BuiltinType, BuiltinTypeName, CUSTOM_ELEMENTS_SCHEMA, Call, Chain, ChangeDetectionStrategy, CommaExpr, Comment, CompilerConfig, Conditional, ConditionalExpr, ConstantPool, CssSelector, DEFAULT_INTERPOLATION_CONFIG, DYNAMIC_TYPE, DeclareFunctionStmt, DeclareVarStmt, DomElementSchemaRegistry, DynamicImportExpr, EOF, Element, ElementSchemaRegistry, EmitterVisitorContext, EmptyExpr$1 as EmptyExpr, Expansion, ExpansionCase, Expression, ExpressionBinding, ExpressionStatement, ExpressionType, ExternalExpr, ExternalReference, FactoryTarget$1 as FactoryTarget, FunctionExpr, HtmlParser, HtmlTagDefinition, I18NHtmlParser, IfStmt, ImplicitReceiver, InstantiateExpr, Interpolation$1 as Interpolation, InterpolationConfig, InvokeFunctionExpr, JSDocComment, JitEvaluator, KeyedRead, KeyedWrite, LeadingComment, Lexer, LiteralArray, LiteralArrayExpr, LiteralExpr, LiteralMap, LiteralMapExpr, LiteralPrimitive, LocalizedString, MapType, MessageBundle, NONE_TYPE, NO_ERRORS_SCHEMA, NodeWithI18n, NonNullAssert, NotExpr, ParseError, ParseErrorLevel, ParseLocation, ParseSourceFile, ParseSourceSpan, ParseSpan, ParseTreeResult, ParsedEvent, ParsedProperty, ParsedPropertyType, ParsedVariable, Parser$1 as Parser, ParserError, PrefixNot, PropertyRead, PropertyWrite, R3BoundTarget, Identifiers as R3Identifiers, R3NgModuleMetadataKind, R3SelectorScopeMode, R3TargetBinder, R3TemplateDependencyKind, ReadKeyExpr, ReadPropExpr, ReadVarExpr, RecursiveAstVisitor, RecursiveVisitor, ResourceLoader, ReturnStatement, STRING_TYPE, SafeCall, SafeKeyedRead, SafePropertyRead, SelectorContext, SelectorListContext, SelectorMatcher, Serializer, SplitInterpolation, Statement, StmtModifier, TagContentType, TaggedTemplateExpr, TemplateBindingParseResult, TemplateLiteral, TemplateLiteralElement, Text, ThisReceiver, BoundAttribute as TmplAstBoundAttribute, BoundDeferredTrigger as TmplAstBoundDeferredTrigger, BoundEvent as TmplAstBoundEvent, BoundText as TmplAstBoundText, Content as TmplAstContent, DeferredBlock as TmplAstDeferredBlock, DeferredBlockError as TmplAstDeferredBlockError, DeferredBlockLoading as TmplAstDeferredBlockLoading, DeferredBlockPlaceholder as TmplAstDeferredBlockPlaceholder, DeferredTrigger as TmplAstDeferredTrigger, Element$1 as TmplAstElement, ForLoopBlock as TmplAstForLoopBlock, ForLoopBlockEmpty as TmplAstForLoopBlockEmpty, HoverDeferredTrigger as TmplAstHoverDeferredTrigger, Icu$1 as TmplAstIcu, IdleDeferredTrigger as TmplAstIdleDeferredTrigger, IfBlock as TmplAstIfBlock, IfBlockBranch as TmplAstIfBlockBranch, ImmediateDeferredTrigger as TmplAstImmediateDeferredTrigger, InteractionDeferredTrigger as TmplAstInteractionDeferredTrigger, RecursiveVisitor$1 as TmplAstRecursiveVisitor, Reference as TmplAstReference, SwitchBlock as TmplAstSwitchBlock, SwitchBlockCase as TmplAstSwitchBlockCase, Template as TmplAstTemplate, Text$3 as TmplAstText, TextAttribute as TmplAstTextAttribute, TimerDeferredTrigger as TmplAstTimerDeferredTrigger, UnknownBlock as TmplAstUnknownBlock, Variable as TmplAstVariable, ViewportDeferredTrigger as TmplAstViewportDeferredTrigger, Token, TokenType, TransplantedType, TreeError, Type, TypeModifier, TypeofExpr, Unary, UnaryOperator, UnaryOperatorExpr, VERSION, VariableBinding, Version, ViewEncapsulation, WrappedNodeExpr, WriteKeyExpr, WritePropExpr, WriteVarExpr, Xliff, Xliff2, Xmb, XmlParser, Xtb, _ParseAST, compileClassDebugInfo, compileClassMetadata, compileComponentClassMetadata, compileComponentFromMetadata, compileDeclareClassMetadata, compileDeclareComponentFromMetadata, compileDeclareDirectiveFromMetadata, compileDeclareFactoryFunction, compileDeclareInjectableFromMetadata, compileDeclareInjectorFromMetadata, compileDeclareNgModuleFromMetadata, compileDeclarePipeFromMetadata, compileDirectiveFromMetadata, compileFactoryFunction, compileInjectable, compileInjector, compileNgModule, compilePipeFromMetadata, computeMsgId, core, createInjectableType, createMayBeForwardRefExpression, devOnlyGuardedExpression, emitDistinctChangesOnlyDefaultValue, getHtmlTagDefinition, getNsPrefix, getSafePropertyAccessString, identifierName, isIdentifier, isNgContainer, isNgContent, isNgTemplate, jsDocComment, leadingComment, literal, literalMap, makeBindingParser, mergeNsAndName, output_ast as outputAst, parseHostBindings, parseTemplate, preserveWhitespacesDefault, publishFacade, r3JitTypeSourceSpan, sanitizeIdentifier, splitNsName, verifyHostBindings, visitAll };
+export { AST, ASTWithName, ASTWithSource, AbsoluteSourceSpan, ArrayType, ArrowFunctionExpr, AstMemoryEfficientTransformer, AstTransformer, Attribute, Binary, BinaryOperator, BinaryOperatorExpr, BindingPipe, Block, BlockParameter, BoundElementProperty, BuiltinType, BuiltinTypeName, CUSTOM_ELEMENTS_SCHEMA, Call, Chain, ChangeDetectionStrategy, CommaExpr, Comment, CompilerConfig, Conditional, ConditionalExpr, ConstantPool, CssSelector, DEFAULT_INTERPOLATION_CONFIG, DYNAMIC_TYPE, DeclareFunctionStmt, DeclareVarStmt, DomElementSchemaRegistry, DynamicImportExpr, EOF, Element, ElementSchemaRegistry, EmitterVisitorContext, EmptyExpr$1 as EmptyExpr, Expansion, ExpansionCase, Expression, ExpressionBinding, ExpressionStatement, ExpressionType, ExternalExpr, ExternalReference, FactoryTarget$1 as FactoryTarget, FunctionExpr, HtmlParser, HtmlTagDefinition, I18NHtmlParser, IfStmt, ImplicitReceiver, InstantiateExpr, Interpolation$1 as Interpolation, InterpolationConfig, InvokeFunctionExpr, JSDocComment, JitEvaluator, KeyedRead, KeyedWrite, LeadingComment, Lexer, LiteralArray, LiteralArrayExpr, LiteralExpr, LiteralMap, LiteralMapExpr, LiteralPrimitive, LocalizedString, MapType, MessageBundle, NONE_TYPE, NO_ERRORS_SCHEMA, NodeWithI18n, NonNullAssert, NotExpr, ParseError, ParseErrorLevel, ParseLocation, ParseSourceFile, ParseSourceSpan, ParseSpan, ParseTreeResult, ParsedEvent, ParsedProperty, ParsedPropertyType, ParsedVariable, Parser$1 as Parser, ParserError, PrefixNot, PropertyRead, PropertyWrite, R3BoundTarget, Identifiers as R3Identifiers, R3NgModuleMetadataKind, R3SelectorScopeMode, R3TargetBinder, R3TemplateDependencyKind, ReadKeyExpr, ReadPropExpr, ReadVarExpr, RecursiveAstVisitor, RecursiveVisitor, ResourceLoader, ReturnStatement, STRING_TYPE, SafeCall, SafeKeyedRead, SafePropertyRead, SelectorContext, SelectorListContext, SelectorMatcher, Serializer, SplitInterpolation, Statement, StmtModifier, TagContentType, TaggedTemplateExpr, TemplateBindingParseResult, TemplateLiteral, TemplateLiteralElement, Text, ThisReceiver, BoundAttribute as TmplAstBoundAttribute, BoundDeferredTrigger as TmplAstBoundDeferredTrigger, BoundEvent as TmplAstBoundEvent, BoundText as TmplAstBoundText, Content as TmplAstContent, DeferredBlock as TmplAstDeferredBlock, DeferredBlockError as TmplAstDeferredBlockError, DeferredBlockLoading as TmplAstDeferredBlockLoading, DeferredBlockPlaceholder as TmplAstDeferredBlockPlaceholder, DeferredTrigger as TmplAstDeferredTrigger, Element$1 as TmplAstElement, ForLoopBlock as TmplAstForLoopBlock, ForLoopBlockEmpty as TmplAstForLoopBlockEmpty, HoverDeferredTrigger as TmplAstHoverDeferredTrigger, Icu$1 as TmplAstIcu, IdleDeferredTrigger as TmplAstIdleDeferredTrigger, IfBlock as TmplAstIfBlock, IfBlockBranch as TmplAstIfBlockBranch, ImmediateDeferredTrigger as TmplAstImmediateDeferredTrigger, InteractionDeferredTrigger as TmplAstInteractionDeferredTrigger, RecursiveVisitor$1 as TmplAstRecursiveVisitor, Reference as TmplAstReference, SwitchBlock as TmplAstSwitchBlock, SwitchBlockCase as TmplAstSwitchBlockCase, Template as TmplAstTemplate, Text$3 as TmplAstText, TextAttribute as TmplAstTextAttribute, TimerDeferredTrigger as TmplAstTimerDeferredTrigger, UnknownBlock as TmplAstUnknownBlock, Variable as TmplAstVariable, ViewportDeferredTrigger as TmplAstViewportDeferredTrigger, Token, TokenType, TransplantedType, TreeError, Type, TypeModifier, TypeofExpr, Unary, UnaryOperator, UnaryOperatorExpr, VERSION, VariableBinding, Version, ViewEncapsulation, WrappedNodeExpr, WriteKeyExpr, WritePropExpr, WriteVarExpr, Xliff, Xliff2, Xmb, XmlParser, Xtb, _ParseAST, compileClassDebugInfo, compileClassMetadata, compileComponentClassMetadata, compileComponentFromMetadata, compileDeclareClassMetadata, compileDeclareComponentFromMetadata, compileDeclareDirectiveFromMetadata, compileDeclareFactoryFunction, compileDeclareInjectableFromMetadata, compileDeclareInjectorFromMetadata, compileDeclareNgModuleFromMetadata, compileDeclarePipeFromMetadata, compileDirectiveFromMetadata, compileFactoryFunction, compileInjectable, compileInjector, compileNgModule, compilePipeFromMetadata, computeMsgId, core, createCssSelectorFromNode, createInjectableType, createMayBeForwardRefExpression, devOnlyGuardedExpression, emitDistinctChangesOnlyDefaultValue, getHtmlTagDefinition, getNsPrefix, getSafePropertyAccessString, identifierName, isIdentifier, isNgContainer, isNgContent, isNgTemplate, jsDocComment, leadingComment, literal, literalMap, makeBindingParser, mergeNsAndName, output_ast as outputAst, parseHostBindings, parseTemplate, preserveWhitespacesDefault, publishFacade, r3JitTypeSourceSpan, sanitizeIdentifier, splitNsName, verifyHostBindings, visitAll };
 //# sourceMappingURL=compiler.mjs.map