@angular-eslint/bundled-angular-compiler 16.1.2-alpha.9 → 16.1.3-alpha.0

package/dist/index.js

@@ -1,7 +1,7 @@
 'use strict';
 
 /**
- * @license Angular v16.1.4
+ * @license Angular v16.2.3
  * (c) 2010-2022 Google LLC. https://angular.io/
  * License: MIT
  */
@@ -1224,6 +1224,9 @@ class ReadVarExpr extends Expression {
     visitExpression(visitor, context) {
         return visitor.visitReadVarExpr(this, context);
     }
+    clone() {
+        return new ReadVarExpr(this.name, this.type, this.sourceSpan);
+    }
     set(value) {
         return new WriteVarExpr(this.name, value, null, this.sourceSpan);
     }
@@ -1242,6 +1245,9 @@ class TypeofExpr extends Expression {
     isConstant() {
         return this.expr.isConstant();
     }
+    clone() {
+        return new TypeofExpr(this.expr.clone());
+    }
 }
 class WrappedNodeExpr extends Expression {
     constructor(node, type, sourceSpan) {
@@ -1257,6 +1263,9 @@ class WrappedNodeExpr extends Expression {
     visitExpression(visitor, context) {
         return visitor.visitWrappedNodeExpr(this, context);
     }
+    clone() {
+        return new WrappedNodeExpr(this.node, this.type, this.sourceSpan);
+    }
 }
 class WriteVarExpr extends Expression {
     constructor(name, value, type, sourceSpan) {
@@ -1273,6 +1282,9 @@ class WriteVarExpr extends Expression {
     visitExpression(visitor, context) {
         return visitor.visitWriteVarExpr(this, context);
     }
+    clone() {
+        return new WriteVarExpr(this.name, this.value.clone(), this.type, this.sourceSpan);
+    }
     toDeclStmt(type, modifiers) {
         return new DeclareVarStmt(this.name, this.value, type, modifiers, this.sourceSpan);
     }
@@ -1297,6 +1309,9 @@ class WriteKeyExpr extends Expression {
     visitExpression(visitor, context) {
         return visitor.visitWriteKeyExpr(this, context);
     }
+    clone() {
+        return new WriteKeyExpr(this.receiver.clone(), this.index.clone(), this.value.clone(), this.type, this.sourceSpan);
+    }
 }
 class WritePropExpr extends Expression {
     constructor(receiver, name, value, type, sourceSpan) {
@@ -1315,6 +1330,9 @@ class WritePropExpr extends Expression {
     visitExpression(visitor, context) {
         return visitor.visitWritePropExpr(this, context);
     }
+    clone() {
+        return new WritePropExpr(this.receiver.clone(), this.name, this.value.clone(), this.type, this.sourceSpan);
+    }
 }
 class InvokeFunctionExpr extends Expression {
     constructor(fn, args, type, sourceSpan, pure = false) {
@@ -1323,6 +1341,10 @@ class InvokeFunctionExpr extends Expression {
         this.args = args;
         this.pure = pure;
     }
+    // An alias for fn, which allows other logic to handle calls and property reads together.
+    get receiver() {
+        return this.fn;
+    }
     isEquivalent(e) {
         return e instanceof InvokeFunctionExpr && this.fn.isEquivalent(e.fn) &&
             areAllEquivalent(this.args, e.args) && this.pure === e.pure;
@@ -1333,6 +1355,9 @@ class InvokeFunctionExpr extends Expression {
     visitExpression(visitor, context) {
         return visitor.visitInvokeFunctionExpr(this, context);
     }
+    clone() {
+        return new InvokeFunctionExpr(this.fn.clone(), this.args.map(arg => arg.clone()), this.type, this.sourceSpan, this.pure);
+    }
 }
 class TaggedTemplateExpr extends Expression {
     constructor(tag, template, type, sourceSpan) {
@@ -1351,6 +1376,9 @@ class TaggedTemplateExpr extends Expression {
     visitExpression(visitor, context) {
         return visitor.visitTaggedTemplateExpr(this, context);
     }
+    clone() {
+        return new TaggedTemplateExpr(this.tag.clone(), this.template.clone(), this.type, this.sourceSpan);
+    }
 }
 class InstantiateExpr extends Expression {
     constructor(classExpr, args, type, sourceSpan) {
@@ -1368,6 +1396,9 @@ class InstantiateExpr extends Expression {
     visitExpression(visitor, context) {
         return visitor.visitInstantiateExpr(this, context);
     }
+    clone() {
+        return new InstantiateExpr(this.classExpr.clone(), this.args.map(arg => arg.clone()), this.type, this.sourceSpan);
+    }
 }
 class LiteralExpr extends Expression {
     constructor(value, type, sourceSpan) {
@@ -1383,12 +1414,18 @@ class LiteralExpr extends Expression {
     visitExpression(visitor, context) {
         return visitor.visitLiteralExpr(this, context);
     }
+    clone() {
+        return new LiteralExpr(this.value, this.type, this.sourceSpan);
+    }
 }
 class TemplateLiteral {
     constructor(elements, expressions) {
         this.elements = elements;
         this.expressions = expressions;
     }
+    clone() {
+        return new TemplateLiteral(this.elements.map(el => el.clone()), this.expressions.map(expr => expr.clone()));
+    }
 }
 class TemplateLiteralElement {
     constructor(text, sourceSpan, rawText) {
@@ -1403,6 +1440,9 @@ class TemplateLiteralElement {
         this.rawText =
             rawText ?? sourceSpan?.toString() ?? escapeForTemplateLiteral(escapeSlashes(text));
     }
+    clone() {
+        return new TemplateLiteralElement(this.text, this.sourceSpan, this.rawText);
+    }
 }
 class LiteralPiece {
     constructor(text, sourceSpan) {
@@ -1447,6 +1487,9 @@ class LocalizedString extends Expression {
     visitExpression(visitor, context) {
         return visitor.visitLocalizedString(this, context);
     }
+    clone() {
+        return new LocalizedString(this.metaBlock, this.messageParts, this.placeHolderNames, this.expressions.map(expr => expr.clone()), this.sourceSpan);
+    }
     /**
      * Serialize the given `meta` and `messagePart` into "cooked" and "raw" strings that can be used
      * in a `$localize` tagged string. The format of the metadata is the same as that parsed by
@@ -1548,6 +1591,9 @@ class ExternalExpr extends Expression {
     visitExpression(visitor, context) {
         return visitor.visitExternalExpr(this, context);
     }
+    clone() {
+        return new ExternalExpr(this.value, this.type, this.typeParams, this.sourceSpan);
+    }
 }
 class ExternalReference {
     constructor(moduleName, name, runtime) {
@@ -1573,6 +1619,27 @@ class ConditionalExpr extends Expression {
     visitExpression(visitor, context) {
         return visitor.visitConditionalExpr(this, context);
     }
+    clone() {
+        return new ConditionalExpr(this.condition.clone(), this.trueCase.clone(), this.falseCase?.clone(), this.type, this.sourceSpan);
+    }
+}
+class DynamicImportExpr extends Expression {
+    constructor(url, sourceSpan) {
+        super(null, sourceSpan);
+        this.url = url;
+    }
+    isEquivalent(e) {
+        return e instanceof DynamicImportExpr && this.url === e.url;
+    }
+    isConstant() {
+        return false;
+    }
+    visitExpression(visitor, context) {
+        return visitor.visitDynamicImportExpr(this, context);
+    }
+    clone() {
+        return new DynamicImportExpr(this.url, this.sourceSpan);
+    }
 }
 class NotExpr extends Expression {
     constructor(condition, sourceSpan) {
@@ -1588,6 +1655,9 @@ class NotExpr extends Expression {
     visitExpression(visitor, context) {
         return visitor.visitNotExpr(this, context);
     }
+    clone() {
+        return new NotExpr(this.condition.clone(), this.sourceSpan);
+    }
 }
 class FnParam {
     constructor(name, type = null) {
@@ -1597,6 +1667,9 @@ class FnParam {
     isEquivalent(param) {
         return this.name === param.name;
     }
+    clone() {
+        return new FnParam(this.name, this.type);
+    }
 }
 class FunctionExpr extends Expression {
     constructor(params, statements, type, sourceSpan, name) {
@@ -1618,6 +1691,10 @@ class FunctionExpr extends Expression {
     toDeclStmt(name, modifiers) {
         return new DeclareFunctionStmt(name, this.params, this.statements, this.type, modifiers, this.sourceSpan);
     }
+    clone() {
+        // TODO: Should we deep clone statements?
+        return new FunctionExpr(this.params.map(p => p.clone()), this.statements, this.type, this.sourceSpan, this.name);
+    }
 }
 class UnaryOperatorExpr extends Expression {
     constructor(operator, expr, type, sourceSpan, parens = true) {
@@ -1636,6 +1713,9 @@ class UnaryOperatorExpr extends Expression {
     visitExpression(visitor, context) {
         return visitor.visitUnaryOperatorExpr(this, context);
     }
+    clone() {
+        return new UnaryOperatorExpr(this.operator, this.expr.clone(), this.type, this.sourceSpan, this.parens);
+    }
 }
 class BinaryOperatorExpr extends Expression {
     constructor(operator, lhs, rhs, type, sourceSpan, parens = true) {
@@ -1655,6 +1735,9 @@ class BinaryOperatorExpr extends Expression {
     visitExpression(visitor, context) {
         return visitor.visitBinaryOperatorExpr(this, context);
     }
+    clone() {
+        return new BinaryOperatorExpr(this.operator, this.lhs.clone(), this.rhs.clone(), this.type, this.sourceSpan, this.parens);
+    }
 }
 class ReadPropExpr extends Expression {
     constructor(receiver, name, type, sourceSpan) {
@@ -1662,6 +1745,10 @@ class ReadPropExpr extends Expression {
         this.receiver = receiver;
         this.name = name;
     }
+    // An alias for name, which allows other logic to handle property reads and keyed reads together.
+    get index() {
+        return this.name;
+    }
     isEquivalent(e) {
         return e instanceof ReadPropExpr && this.receiver.isEquivalent(e.receiver) &&
             this.name === e.name;
@@ -1675,6 +1762,9 @@ class ReadPropExpr extends Expression {
     set(value) {
         return new WritePropExpr(this.receiver, this.name, value, null, this.sourceSpan);
     }
+    clone() {
+        return new ReadPropExpr(this.receiver.clone(), this.name, this.type, this.sourceSpan);
+    }
 }
 class ReadKeyExpr extends Expression {
     constructor(receiver, index, type, sourceSpan) {
@@ -1695,6 +1785,9 @@ class ReadKeyExpr extends Expression {
     set(value) {
         return new WriteKeyExpr(this.receiver, this.index, value, null, this.sourceSpan);
     }
+    clone() {
+        return new ReadKeyExpr(this.receiver.clone(), this.index.clone(), this.type, this.sourceSpan);
+    }
 }
 class LiteralArrayExpr extends Expression {
     constructor(entries, type, sourceSpan) {
@@ -1710,6 +1803,9 @@ class LiteralArrayExpr extends Expression {
     visitExpression(visitor, context) {
         return visitor.visitLiteralArrayExpr(this, context);
     }
+    clone() {
+        return new LiteralArrayExpr(this.entries.map(e => e.clone()), this.type, this.sourceSpan);
+    }
 }
 class LiteralMapEntry {
     constructor(key, value, quoted) {
@@ -1720,6 +1816,9 @@ class LiteralMapEntry {
     isEquivalent(e) {
         return this.key === e.key && this.value.isEquivalent(e.value);
     }
+    clone() {
+        return new LiteralMapEntry(this.key, this.value.clone(), this.quoted);
+    }
 }
 class LiteralMapExpr extends Expression {
     constructor(entries, type, sourceSpan) {
@@ -1739,6 +1838,10 @@ class LiteralMapExpr extends Expression {
     visitExpression(visitor, context) {
         return visitor.visitLiteralMapExpr(this, context);
     }
+    clone() {
+        const entriesClone = this.entries.map(entry => entry.clone());
+        return new LiteralMapExpr(entriesClone, this.type, this.sourceSpan);
+    }
 }
 class CommaExpr extends Expression {
     constructor(parts, sourceSpan) {
@@ -1754,6 +1857,9 @@ class CommaExpr extends Expression {
     visitExpression(visitor, context) {
         return visitor.visitCommaExpr(this, context);
     }
+    clone() {
+        return new CommaExpr(this.parts.map(p => p.clone()));
+    }
 }
 const NULL_EXPR = new LiteralExpr(null, null, null);
 const TYPED_NULL_EXPR = new LiteralExpr(null, INFERRED_TYPE, null);
@@ -1923,6 +2029,9 @@ class RecursiveAstVisitor$1 {
         ast.value.visitExpression(this, context);
         return this.visitExpression(ast, context);
     }
+    visitDynamicImportExpr(ast, context) {
+        return this.visitExpression(ast, context);
+    }
     visitInvokeFunctionExpr(ast, context) {
         ast.fn.visitExpression(this, context);
         this.visitAllExpressions(ast.args, context);
@@ -2161,6 +2270,7 @@ var output_ast = /*#__PURE__*/Object.freeze({
     ExternalExpr: ExternalExpr,
     ExternalReference: ExternalReference,
     ConditionalExpr: ConditionalExpr,
+    DynamicImportExpr: DynamicImportExpr,
     NotExpr: NotExpr,
     FnParam: FnParam,
     FunctionExpr: FunctionExpr,
@@ -2258,6 +2368,9 @@ class FixupExpression extends Expression {
     isConstant() {
         return true;
     }
+    clone() {
+        throw new Error(`Not supported.`);
+    }
     fixup(expression) {
         this.resolved = expression;
         this.shared = true;
@@ -2502,6 +2615,7 @@ class Identifiers {
     static { this.nextContext = { name: 'ɵɵnextContext', moduleName: CORE }; }
     static { this.resetView = { name: 'ɵɵresetView', moduleName: CORE }; }
     static { this.templateCreate = { name: 'ɵɵtemplate', moduleName: CORE }; }
+    static { this.defer = { name: 'ɵɵdefer', moduleName: CORE }; }
     static { this.text = { name: 'ɵɵtext', moduleName: CORE }; }
     static { this.enableBindings = { name: 'ɵɵenableBindings', moduleName: CORE }; }
     static { this.disableBindings = { name: 'ɵɵdisableBindings', moduleName: CORE }; }
@@ -2732,13 +2846,7 @@ class Version {
         this.patch = splits.slice(2).join('.');
     }
 }
-// Check `global` first, because in Node tests both `global` and `window` may be defined and our
-// `_global` variable should point to the NodeJS `global` in that case. Note: Typeof/Instanceof
-// checks are considered side-effects in Terser. We explicitly mark this as side-effect free:
-// https://github.com/terser/terser/issues/250.
-const _global = ( /* @__PURE__ */(() => (typeof global !== 'undefined' && global) || (typeof window !== 'undefined' && window) ||
-    (typeof self !== 'undefined' && typeof WorkerGlobalScope !== 'undefined' &&
-        self instanceof WorkerGlobalScope && self))());
+const _global = globalThis;
 /**
  * Partitions a given array into 2 arrays, based on a boolean value returned by the condition
  * function.
@@ -3213,6 +3321,9 @@ class AbstractEmitterVisitor {
         ctx.print(ast, `)`);
         return null;
     }
+    visitDynamicImportExpr(ast, ctx) {
+        ctx.print(ast, `import(${ast.url})`);
+    }
     visitNotExpr(ast, ctx) {
         ctx.print(ast, '!');
         ast.condition.visitExpression(this, ctx);
@@ -3786,6 +3897,96 @@ class Element$1 {
         return visitor.visitElement(this);
     }
 }
+class DeferredTrigger {
+    constructor(sourceSpan) {
+        this.sourceSpan = sourceSpan;
+    }
+    visit(visitor) {
+        return visitor.visitDeferredTrigger(this);
+    }
+}
+class BoundDeferredTrigger extends DeferredTrigger {
+    constructor(value, sourceSpan) {
+        super(sourceSpan);
+        this.value = value;
+    }
+}
+class IdleDeferredTrigger extends DeferredTrigger {
+}
+class ImmediateDeferredTrigger extends DeferredTrigger {
+}
+class HoverDeferredTrigger extends DeferredTrigger {
+}
+class TimerDeferredTrigger extends DeferredTrigger {
+    constructor(delay, sourceSpan) {
+        super(sourceSpan);
+        this.delay = delay;
+    }
+}
+class InteractionDeferredTrigger extends DeferredTrigger {
+    constructor(reference, sourceSpan) {
+        super(sourceSpan);
+        this.reference = reference;
+    }
+}
+class ViewportDeferredTrigger extends DeferredTrigger {
+    constructor(reference, sourceSpan) {
+        super(sourceSpan);
+        this.reference = reference;
+    }
+}
+class DeferredBlockPlaceholder {
+    constructor(children, minimumTime, sourceSpan, startSourceSpan, endSourceSpan) {
+        this.children = children;
+        this.minimumTime = minimumTime;
+        this.sourceSpan = sourceSpan;
+        this.startSourceSpan = startSourceSpan;
+        this.endSourceSpan = endSourceSpan;
+    }
+    visit(visitor) {
+        return visitor.visitDeferredBlockPlaceholder(this);
+    }
+}
+class DeferredBlockLoading {
+    constructor(children, afterTime, minimumTime, sourceSpan, startSourceSpan, endSourceSpan) {
+        this.children = children;
+        this.afterTime = afterTime;
+        this.minimumTime = minimumTime;
+        this.sourceSpan = sourceSpan;
+        this.startSourceSpan = startSourceSpan;
+        this.endSourceSpan = endSourceSpan;
+    }
+    visit(visitor) {
+        return visitor.visitDeferredBlockLoading(this);
+    }
+}
+class DeferredBlockError {
+    constructor(children, sourceSpan, startSourceSpan, endSourceSpan) {
+        this.children = children;
+        this.sourceSpan = sourceSpan;
+        this.startSourceSpan = startSourceSpan;
+        this.endSourceSpan = endSourceSpan;
+    }
+    visit(visitor) {
+        return visitor.visitDeferredBlockError(this);
+    }
+}
+class DeferredBlock {
+    constructor(children, triggers, prefetchTriggers, placeholder, loading, error, sourceSpan, startSourceSpan, endSourceSpan) {
+        this.children = children;
+        this.triggers = triggers;
+        this.prefetchTriggers = prefetchTriggers;
+        this.placeholder = placeholder;
+        this.loading = loading;
+        this.error = error;
+        this.sourceSpan = sourceSpan;
+        this.startSourceSpan = startSourceSpan;
+        this.endSourceSpan = endSourceSpan;
+    }
+    visit(visitor) {
+        return visitor.visitDeferredBlock(this);
+    }
+}
 class Template {
     constructor(
     // tagName is the name of the container element, if applicable.
@@ -3873,6 +4074,23 @@ class RecursiveVisitor$1 {
         visitAll$1(this, template.references);
         visitAll$1(this, template.variables);
     }
+    visitDeferredBlock(deferred) {
+        visitAll$1(this, deferred.triggers);
+        visitAll$1(this, deferred.prefetchTriggers);
+        visitAll$1(this, deferred.children);
+        deferred.placeholder?.visit(this);
+        deferred.loading?.visit(this);
+        deferred.error?.visit(this);
+    }
+    visitDeferredBlockPlaceholder(block) {
+        visitAll$1(this, block.children);
+    }
+    visitDeferredBlockError(block) {
+        visitAll$1(this, block.children);
+    }
+    visitDeferredBlockLoading(block) {
+        visitAll$1(this, block.children);
+    }
     visitContent(content) { }
     visitVariable(variable) { }
     visitReference(reference) { }
@@ -3882,6 +4100,7 @@ class RecursiveVisitor$1 {
     visitText(text) { }
     visitBoundText(text) { }
     visitIcu(icu) { }
+    visitDeferredTrigger(trigger) { }
 }
 function visitAll$1(visitor, nodes) {
     const result = [];
@@ -5821,7 +6040,7 @@ class ASTWithName extends AST {
         this.nameSpan = nameSpan;
     }
 }
-class EmptyExpr extends AST {
+class EmptyExpr$1 extends AST {
     visit(visitor, context = null) {
         // do nothing
     }
@@ -5968,7 +6187,7 @@ class LiteralMap extends AST {
         return visitor.visitLiteralMap(this, context);
     }
 }
-class Interpolation extends AST {
+class Interpolation$1 extends AST {
     constructor(span, sourceSpan, strings, expressions) {
         super(span, sourceSpan);
         this.strings = strings;
@@ -6215,7 +6434,7 @@ class AstTransformer {
         return ast;
     }
     visitInterpolation(ast, context) {
-        return new Interpolation(ast.span, ast.sourceSpan, ast.strings, this.visitAll(ast.expressions));
+        return new Interpolation$1(ast.span, ast.sourceSpan, ast.strings, this.visitAll(ast.expressions));
     }
     visitLiteralPrimitive(ast, context) {
         return new LiteralPrimitive(ast.span, ast.sourceSpan, ast.value);
@@ -6298,7 +6517,7 @@ class AstMemoryEfficientTransformer {
     visitInterpolation(ast, context) {
         const expressions = this.visitAll(ast.expressions);
         if (expressions !== ast.expressions)
-            return new Interpolation(ast.span, ast.sourceSpan, ast.strings, expressions);
+            return new Interpolation$1(ast.span, ast.sourceSpan, ast.strings, expressions);
         return ast;
     }
     visitLiteralPrimitive(ast, context) {
@@ -7236,6 +7455,7 @@ class InterpolationExpression extends Expression {
         this.isConstant = unsupported;
         this.isEquivalent = unsupported;
         this.visitExpression = unsupported;
+        this.clone = unsupported;
     }
 }
 class DefaultLocalResolver {
@@ -7253,7 +7473,7 @@ class DefaultLocalResolver {
 }
 class BuiltinFunctionCall extends Call {
     constructor(span, sourceSpan, args, converter) {
-        super(span, sourceSpan, new EmptyExpr(span, sourceSpan), args, null);
+        super(span, sourceSpan, new EmptyExpr$1(span, sourceSpan), args, null);
         this.converter = converter;
     }
 }
@@ -7851,7 +8071,7 @@ class ShadowCss {
             }
             else if (rule.selector.startsWith('@media') || rule.selector.startsWith('@supports') ||
                 rule.selector.startsWith('@document') || rule.selector.startsWith('@layer') ||
-                rule.selector.startsWith('@container')) {
+                rule.selector.startsWith('@container') || rule.selector.startsWith('@scope')) {
                 content = this._scopeSelectors(rule.content, scopeSelector, hostSelector);
             }
             else if (rule.selector.startsWith('@font-face') || rule.selector.startsWith('@page')) {
@@ -8380,33 +8600,37 @@ function mergeNsAndName(prefix, localName) {
 /**
  * Enumeration of the types of attributes which can be applied to an element.
  */
-var ElementAttributeKind;
-(function (ElementAttributeKind) {
+var BindingKind;
+(function (BindingKind) {
     /**
      * Static attributes.
      */
-    ElementAttributeKind[ElementAttributeKind["Attribute"] = 0] = "Attribute";
+    BindingKind[BindingKind["Attribute"] = 0] = "Attribute";
     /**
      * Class bindings.
      */
-    ElementAttributeKind[ElementAttributeKind["Class"] = 1] = "Class";
+    BindingKind[BindingKind["ClassName"] = 1] = "ClassName";
     /**
      * Style bindings.
      */
-    ElementAttributeKind[ElementAttributeKind["Style"] = 2] = "Style";
+    BindingKind[BindingKind["StyleProperty"] = 2] = "StyleProperty";
     /**
-     * Dynamic property or attribute bindings.
+     * Dynamic property bindings.
      */
-    ElementAttributeKind[ElementAttributeKind["Binding"] = 3] = "Binding";
+    BindingKind[BindingKind["Property"] = 3] = "Property";
     /**
-     * Attributes on a template node.
+     * Property or attribute bindings on a template.
      */
-    ElementAttributeKind[ElementAttributeKind["Template"] = 4] = "Template";
+    BindingKind[BindingKind["Template"] = 4] = "Template";
     /**
      * Internationalized attributes.
      */
-    ElementAttributeKind[ElementAttributeKind["I18n"] = 5] = "I18n";
-})(ElementAttributeKind || (ElementAttributeKind = {}));
+    BindingKind[BindingKind["I18n"] = 5] = "I18n";
+    /**
+     * TODO: Consider how Animations are handled, and if they should be a distinct BindingKind.
+     */
+    BindingKind[BindingKind["Animation"] = 6] = "Animation";
+})(BindingKind || (BindingKind = {}));
 
 /**
  * Distinguishes different kinds of IR operations.
@@ -8456,34 +8680,73 @@ var OpKind;
      * An operation to end an `ng-container`.
      */
     OpKind[OpKind["ContainerEnd"] = 9] = "ContainerEnd";
+    /**
+     * An operation disable binding for subsequent elements, which are descendants of a non-bindable
+     * node.
+     */
+    OpKind[OpKind["DisableBindings"] = 10] = "DisableBindings";
+    /**
+     * An operation to re-enable binding, after it was previously disabled.
+     */
+    OpKind[OpKind["EnableBindings"] = 11] = "EnableBindings";
     /**
      * An operation to render a text node.
      */
-    OpKind[OpKind["Text"] = 10] = "Text";
+    OpKind[OpKind["Text"] = 12] = "Text";
     /**
      * An operation declaring an event listener for an element.
      */
-    OpKind[OpKind["Listener"] = 11] = "Listener";
+    OpKind[OpKind["Listener"] = 13] = "Listener";
     /**
      * An operation to interpolate text into a text node.
      */
-    OpKind[OpKind["InterpolateText"] = 12] = "InterpolateText";
+    OpKind[OpKind["InterpolateText"] = 14] = "InterpolateText";
+    /**
+     * An intermediate binding op, that has not yet been processed into an individual property,
+     * attribute, style, etc.
+     */
+    OpKind[OpKind["Binding"] = 15] = "Binding";
     /**
      * An operation to bind an expression to a property of an element.
      */
-    OpKind[OpKind["Property"] = 13] = "Property";
+    OpKind[OpKind["Property"] = 16] = "Property";
+    /**
+     * An operation to bind an expression to a style property of an element.
+     */
+    OpKind[OpKind["StyleProp"] = 17] = "StyleProp";
     /**
-     * An operation to interpolate text into a property binding.
+     * An operation to bind an expression to a class property of an element.
      */
-    OpKind[OpKind["InterpolateProperty"] = 14] = "InterpolateProperty";
+    OpKind[OpKind["ClassProp"] = 18] = "ClassProp";
+    /**
+     * An operation to bind an expression to the styles of an element.
+     */
+    OpKind[OpKind["StyleMap"] = 19] = "StyleMap";
+    /**
+     * An operation to bind an expression to the classes of an element.
+     */
+    OpKind[OpKind["ClassMap"] = 20] = "ClassMap";
     /**
      * An operation to advance the runtime's implicit slot context during the update phase of a view.
      */
-    OpKind[OpKind["Advance"] = 15] = "Advance";
+    OpKind[OpKind["Advance"] = 21] = "Advance";
     /**
      * An operation to instantiate a pipe.
      */
-    OpKind[OpKind["Pipe"] = 16] = "Pipe";
+    OpKind[OpKind["Pipe"] = 22] = "Pipe";
+    /**
+     * An operation to associate an attribute with an element.
+     */
+    OpKind[OpKind["Attribute"] = 23] = "Attribute";
+    /**
+     * A host binding property.
+     */
+    OpKind[OpKind["HostProperty"] = 24] = "HostProperty";
+    /**
+     * A namespace change, which causes the subsequent elements to be processed as either HTML or SVG.
+     */
+    OpKind[OpKind["Namespace"] = 25] = "Namespace";
+    // TODO: Add Host Listeners, and possibly other host ops also.
 })(OpKind || (OpKind = {}));
 /**
  * Distinguishes different kinds of IR expressions.
@@ -8538,6 +8801,38 @@ var ExpressionKind;
      * Binding to a pipe transformation with a variable number of arguments.
      */
     ExpressionKind[ExpressionKind["PipeBindingVariadic"] = 11] = "PipeBindingVariadic";
+    /*
+     * A safe property read requiring expansion into a null check.
+     */
+    ExpressionKind[ExpressionKind["SafePropertyRead"] = 12] = "SafePropertyRead";
+    /**
+     * A safe keyed read requiring expansion into a null check.
+     */
+    ExpressionKind[ExpressionKind["SafeKeyedRead"] = 13] = "SafeKeyedRead";
+    /**
+     * A safe function call requiring expansion into a null check.
+     */
+    ExpressionKind[ExpressionKind["SafeInvokeFunction"] = 14] = "SafeInvokeFunction";
+    /**
+     * An intermediate expression that will be expanded from a safe read into an explicit ternary.
+     */
+    ExpressionKind[ExpressionKind["SafeTernaryExpr"] = 15] = "SafeTernaryExpr";
+    /**
+     * An empty expression that will be stipped before generating the final output.
+     */
+    ExpressionKind[ExpressionKind["EmptyExpr"] = 16] = "EmptyExpr";
+    /*
+     * An assignment to a temporary variable.
+     */
+    ExpressionKind[ExpressionKind["AssignTemporaryExpr"] = 17] = "AssignTemporaryExpr";
+    /**
+     * A reference to a temporary variable.
+     */
+    ExpressionKind[ExpressionKind["ReadTemporaryExpr"] = 18] = "ReadTemporaryExpr";
+    /**
+     * An expression representing a sanitizer function.
+     */
+    ExpressionKind[ExpressionKind["SanitizerExpr"] = 19] = "SanitizerExpr";
 })(ExpressionKind || (ExpressionKind = {}));
 /**
  * Distinguishes between different kinds of `SemanticVariable`s.
@@ -8557,11 +8852,188 @@ var SemanticVariableKind;
      */
     SemanticVariableKind[SemanticVariableKind["SavedView"] = 2] = "SavedView";
 })(SemanticVariableKind || (SemanticVariableKind = {}));
+/**
+ * Whether to compile in compatibilty mode. In compatibility mode, the template pipeline will
+ * attempt to match the output of `TemplateDefinitionBuilder` as exactly as possible, at the cost of
+ * producing quirky or larger code in some cases.
+ */
+var CompatibilityMode;
+(function (CompatibilityMode) {
+    CompatibilityMode[CompatibilityMode["Normal"] = 0] = "Normal";
+    CompatibilityMode[CompatibilityMode["TemplateDefinitionBuilder"] = 1] = "TemplateDefinitionBuilder";
+})(CompatibilityMode || (CompatibilityMode = {}));
+/**
+ * Represents functions used to sanitize different pieces of a template.
+ */
+var SanitizerFn;
+(function (SanitizerFn) {
+    SanitizerFn[SanitizerFn["Html"] = 0] = "Html";
+    SanitizerFn[SanitizerFn["Script"] = 1] = "Script";
+    SanitizerFn[SanitizerFn["Style"] = 2] = "Style";
+    SanitizerFn[SanitizerFn["Url"] = 3] = "Url";
+    SanitizerFn[SanitizerFn["ResourceUrl"] = 4] = "ResourceUrl";
+    SanitizerFn[SanitizerFn["IframeAttribute"] = 5] = "IframeAttribute";
+})(SanitizerFn || (SanitizerFn = {}));
+/**
+ * Marker symbol for `UsesSlotIndex` trait.
+ */
+const UsesSlotIndex = Symbol('UsesSlotIndex');
+/**
+ * Marker symbol for `ConsumesVars` trait.
+ */
+const ConsumesVarsTrait = Symbol('ConsumesVars');
+/**
+ * Marker symbol for `UsesVarOffset` trait.
+ */
+const UsesVarOffset = Symbol('UsesVarOffset');
+class Interpolation {
+    constructor(strings, expressions) {
+        this.strings = strings;
+        this.expressions = expressions;
+    }
+}
+
+var _d, _e, _f;
+/**
+ * Base type used for all logical IR expressions.
+ */
+class ExpressionBase extends Expression {
+    constructor(sourceSpan = null) {
+        super(null, sourceSpan);
+    }
+}
+class PipeBindingExpr extends ExpressionBase {
+    static { _d = UsesSlotIndex, _e = ConsumesVarsTrait, _f = UsesVarOffset; }
+    constructor(target, name, args) {
+        super();
+        this.target = target;
+        this.name = name;
+        this.args = args;
+        this.kind = ExpressionKind.PipeBinding;
+        this[_d] = true;
+        this[_e] = true;
+        this[_f] = true;
+        this.slot = null;
+        this.varOffset = null;
+    }
+    visitExpression(visitor, context) {
+        for (const arg of this.args) {
+            arg.visitExpression(visitor, context);
+        }
+    }
+    isEquivalent() {
+        return false;
+    }
+    isConstant() {
+        return false;
+    }
+    transformInternalExpressions(transform, flags) {
+        for (let idx = 0; idx < this.args.length; idx++) {
+            this.args[idx] = transformExpressionsInExpression(this.args[idx], transform, flags);
+        }
+    }
+    clone() {
+        const r = new PipeBindingExpr(this.target, this.name, this.args.map(a => a.clone()));
+        r.slot = this.slot;
+        r.varOffset = this.varOffset;
+        return r;
+    }
+}
+class SafeInvokeFunctionExpr extends ExpressionBase {
+    constructor(receiver, args) {
+        super();
+        this.receiver = receiver;
+        this.args = args;
+        this.kind = ExpressionKind.SafeInvokeFunction;
+    }
+    visitExpression(visitor, context) {
+        this.receiver.visitExpression(visitor, context);
+        for (const a of this.args) {
+            a.visitExpression(visitor, context);
+        }
+    }
+    isEquivalent() {
+        return false;
+    }
+    isConstant() {
+        return false;
+    }
+    transformInternalExpressions(transform, flags) {
+        this.receiver = transformExpressionsInExpression(this.receiver, transform, flags);
+        for (let i = 0; i < this.args.length; i++) {
+            this.args[i] = transformExpressionsInExpression(this.args[i], transform, flags);
+        }
+    }
+    clone() {
+        return new SafeInvokeFunctionExpr(this.receiver.clone(), this.args.map(a => a.clone()));
+    }
+}
 var VisitorContextFlag;
 (function (VisitorContextFlag) {
     VisitorContextFlag[VisitorContextFlag["None"] = 0] = "None";
     VisitorContextFlag[VisitorContextFlag["InChildOperation"] = 1] = "InChildOperation";
 })(VisitorContextFlag || (VisitorContextFlag = {}));
+/**
+ * Transform all `Expression`s in the AST of `expr` with the `transform` function.
+ *
+ * All such operations will be replaced with the result of applying `transform`, which may be an
+ * identity transformation.
+ */
+function transformExpressionsInExpression(expr, transform, flags) {
+    if (expr instanceof ExpressionBase) {
+        expr.transformInternalExpressions(transform, flags);
+    }
+    else if (expr instanceof BinaryOperatorExpr) {
+        expr.lhs = transformExpressionsInExpression(expr.lhs, transform, flags);
+        expr.rhs = transformExpressionsInExpression(expr.rhs, transform, flags);
+    }
+    else if (expr instanceof ReadPropExpr) {
+        expr.receiver = transformExpressionsInExpression(expr.receiver, transform, flags);
+    }
+    else if (expr instanceof ReadKeyExpr) {
+        expr.receiver = transformExpressionsInExpression(expr.receiver, transform, flags);
+        expr.index = transformExpressionsInExpression(expr.index, transform, flags);
+    }
+    else if (expr instanceof WritePropExpr) {
+        expr.receiver = transformExpressionsInExpression(expr.receiver, transform, flags);
+        expr.value = transformExpressionsInExpression(expr.value, transform, flags);
+    }
+    else if (expr instanceof WriteKeyExpr) {
+        expr.receiver = transformExpressionsInExpression(expr.receiver, transform, flags);
+        expr.index = transformExpressionsInExpression(expr.index, transform, flags);
+        expr.value = transformExpressionsInExpression(expr.value, transform, flags);
+    }
+    else if (expr instanceof InvokeFunctionExpr) {
+        expr.fn = transformExpressionsInExpression(expr.fn, transform, flags);
+        for (let i = 0; i < expr.args.length; i++) {
+            expr.args[i] = transformExpressionsInExpression(expr.args[i], transform, flags);
+        }
+    }
+    else if (expr instanceof LiteralArrayExpr) {
+        for (let i = 0; i < expr.entries.length; i++) {
+            expr.entries[i] = transformExpressionsInExpression(expr.entries[i], transform, flags);
+        }
+    }
+    else if (expr instanceof LiteralMapExpr) {
+        for (let i = 0; i < expr.entries.length; i++) {
+            expr.entries[i].value =
+                transformExpressionsInExpression(expr.entries[i].value, transform, flags);
+        }
+    }
+    else if (expr instanceof ConditionalExpr) {
+        expr.condition = transformExpressionsInExpression(expr.condition, transform, flags);
+        expr.trueCase = transformExpressionsInExpression(expr.trueCase, transform, flags);
+        if (expr.falseCase !== null) {
+            expr.falseCase = transformExpressionsInExpression(expr.falseCase, transform, flags);
+        }
+    }
+    else if (expr instanceof ReadVarExpr || expr instanceof ExternalExpr ||
+        expr instanceof LiteralExpr) ;
+    else {
+        throw new Error(`Unhandled expression kind: ${expr.constructor.name}`);
+    }
+    return transform(expr, flags);
+}
 
 /**
  * A linked list of `Op` nodes of a given subtype.
@@ -8741,22 +9213,38 @@ class OpList {
         op.next = null;
     }
     /**
-     * Insert `op` before `before`.
+     * Insert `op` before `target`.
      */
-    static insertBefore(op, before) {
-        OpList.assertIsOwned(before);
-        if (before.prev === null) {
+    static insertBefore(op, target) {
+        OpList.assertIsOwned(target);
+        if (target.prev === null) {
             throw new Error(`AssertionError: illegal operation on list start`);
         }
         OpList.assertIsNotEnd(op);
         OpList.assertIsUnowned(op);
-        op.debugListId = before.debugListId;
+        op.debugListId = target.debugListId;
         // Just in case.
         op.prev = null;
-        before.prev.next = op;
-        op.prev = before.prev;
-        op.next = before;
-        before.prev = op;
+        target.prev.next = op;
+        op.prev = target.prev;
+        op.next = target;
+        target.prev = op;
+    }
+    /**
+     * Insert `op` after `target`.
+     */
+    static insertAfter(op, target) {
+        OpList.assertIsOwned(target);
+        if (target.next === null) {
+            throw new Error(`AssertionError: illegal operation on list end`);
+        }
+        OpList.assertIsNotEnd(op);
+        OpList.assertIsUnowned(op);
+        op.debugListId = target.debugListId;
+        target.next.prev = op;
+        op.next = target.next;
+        op.prev = target;
+        target.next = op;
     }
     /**
      * Asserts that `op` does not currently belong to a list.
@@ -8788,18 +9276,205 @@ class OpList {
     }
 }
 
-new Map([
-    [OpKind.ElementEnd, [OpKind.ElementStart, OpKind.Element]],
-    [OpKind.ContainerEnd, [OpKind.ContainerStart, OpKind.Container]],
+/**
+ * The set of OpKinds that represent the creation of an element or container
+ */
+new Set([
+    OpKind.Element, OpKind.ElementStart, OpKind.Container, OpKind.ContainerStart, OpKind.Template
 ]);
-[
-    Identifiers.pipeBind1,
-    Identifiers.pipeBind2,
-    Identifiers.pipeBind3,
-    Identifiers.pipeBind4,
-];
 /**
- * `InterpolationConfig` for the `textInterpolate` instruction.
+ * Whether the active namespace is HTML, MathML, or SVG mode.
+ */
+var Namespace;
+(function (Namespace) {
+    Namespace[Namespace["HTML"] = 0] = "HTML";
+    Namespace[Namespace["SVG"] = 1] = "SVG";
+    Namespace[Namespace["Math"] = 2] = "Math";
+})(Namespace || (Namespace = {}));
+
+/**
+ * Parses string representation of a style and converts it into object literal.
+ *
+ * @param value string representation of style as used in the `style` attribute in HTML.
+ *   Example: `color: red; height: auto`.
+ * @returns An array of style property name and value pairs, e.g. `['color', 'red', 'height',
+ * 'auto']`
+ */
+function parse(value) {
+    // we use a string array here instead of a string map
+    // because a string-map is not guaranteed to retain the
+    // order of the entries whereas a string array can be
+    // constructed in a [key, value, key, value] format.
+    const styles = [];
+    let i = 0;
+    let parenDepth = 0;
+    let quote = 0 /* Char.QuoteNone */;
+    let valueStart = 0;
+    let propStart = 0;
+    let currentProp = null;
+    while (i < value.length) {
+        const token = value.charCodeAt(i++);
+        switch (token) {
+            case 40 /* Char.OpenParen */:
+                parenDepth++;
+                break;
+            case 41 /* Char.CloseParen */:
+                parenDepth--;
+                break;
+            case 39 /* Char.QuoteSingle */:
+                // valueStart needs to be there since prop values don't
+                // have quotes in CSS
+                if (quote === 0 /* Char.QuoteNone */) {
+                    quote = 39 /* Char.QuoteSingle */;
+                }
+                else if (quote === 39 /* Char.QuoteSingle */ && value.charCodeAt(i - 1) !== 92 /* Char.BackSlash */) {
+                    quote = 0 /* Char.QuoteNone */;
+                }
+                break;
+            case 34 /* Char.QuoteDouble */:
+                // same logic as above
+                if (quote === 0 /* Char.QuoteNone */) {
+                    quote = 34 /* Char.QuoteDouble */;
+                }
+                else if (quote === 34 /* Char.QuoteDouble */ && value.charCodeAt(i - 1) !== 92 /* Char.BackSlash */) {
+                    quote = 0 /* Char.QuoteNone */;
+                }
+                break;
+            case 58 /* Char.Colon */:
+                if (!currentProp && parenDepth === 0 && quote === 0 /* Char.QuoteNone */) {
+                    currentProp = hyphenate$1(value.substring(propStart, i - 1).trim());
+                    valueStart = i;
+                }
+                break;
+            case 59 /* Char.Semicolon */:
+                if (currentProp && valueStart > 0 && parenDepth === 0 && quote === 0 /* Char.QuoteNone */) {
+                    const styleVal = value.substring(valueStart, i - 1).trim();
+                    styles.push(currentProp, styleVal);
+                    propStart = i;
+                    valueStart = 0;
+                    currentProp = null;
+                }
+                break;
+        }
+    }
+    if (currentProp && valueStart) {
+        const styleVal = value.slice(valueStart).trim();
+        styles.push(currentProp, styleVal);
+    }
+    return styles;
+}
+function hyphenate$1(value) {
+    return value
+        .replace(/[a-z][A-Z]/g, v => {
+        return v.charAt(0) + '-' + v.charAt(1);
+    })
+        .toLowerCase();
+}
+
+new Set([
+    Identifiers.elementStart,
+    Identifiers.elementEnd,
+    Identifiers.element,
+    Identifiers.property,
+    Identifiers.hostProperty,
+    Identifiers.styleProp,
+    Identifiers.attribute,
+    Identifiers.stylePropInterpolate1,
+    Identifiers.stylePropInterpolate2,
+    Identifiers.stylePropInterpolate3,
+    Identifiers.stylePropInterpolate4,
+    Identifiers.stylePropInterpolate5,
+    Identifiers.stylePropInterpolate6,
+    Identifiers.stylePropInterpolate7,
+    Identifiers.stylePropInterpolate8,
+    Identifiers.stylePropInterpolateV,
+    Identifiers.classProp,
+    Identifiers.listener,
+    Identifiers.elementContainerStart,
+    Identifiers.elementContainerEnd,
+    Identifiers.elementContainer,
+    Identifiers.listener,
+]);
+
+new Map([
+    [OpKind.ElementEnd, [OpKind.ElementStart, OpKind.Element]],
+    [OpKind.ContainerEnd, [OpKind.ContainerStart, OpKind.Container]],
+]);
+// A lookup set of all the expression kinds that require a temporary variable to be generated.
+[
+    InvokeFunctionExpr, LiteralArrayExpr, LiteralMapExpr, SafeInvokeFunctionExpr,
+    PipeBindingExpr
+].map(e => e.constructor.name);
+
+new Map([
+    ['&&', exports.BinaryOperator.And],
+    ['>', exports.BinaryOperator.Bigger],
+    ['>=', exports.BinaryOperator.BiggerEquals],
+    ['&', exports.BinaryOperator.BitwiseAnd],
+    ['/', exports.BinaryOperator.Divide],
+    ['==', exports.BinaryOperator.Equals],
+    ['===', exports.BinaryOperator.Identical],
+    ['<', exports.BinaryOperator.Lower],
+    ['<=', exports.BinaryOperator.LowerEquals],
+    ['-', exports.BinaryOperator.Minus],
+    ['%', exports.BinaryOperator.Modulo],
+    ['*', exports.BinaryOperator.Multiply],
+    ['!=', exports.BinaryOperator.NotEquals],
+    ['!==', exports.BinaryOperator.NotIdentical],
+    ['??', exports.BinaryOperator.NullishCoalesce],
+    ['||', exports.BinaryOperator.Or],
+    ['+', exports.BinaryOperator.Plus],
+]);
+new Map([['svg', Namespace.SVG], ['math', Namespace.Math]]);
+
+function kindTest(kind) {
+    return (op) => op.kind === kind;
+}
+/**
+ * Defines the groups based on `OpKind` that ops will be divided into. Ops will be collected into
+ * groups, then optionally transformed, before recombining the groups in the order defined here.
+ */
+[
+    { test: kindTest(OpKind.StyleMap), transform: keepLast },
+    { test: kindTest(OpKind.ClassMap), transform: keepLast },
+    { test: kindTest(OpKind.StyleProp) },
+    { test: kindTest(OpKind.ClassProp) },
+    {
+        test: (op) => (op.kind === OpKind.Property || op.kind === OpKind.HostProperty) &&
+            op.expression instanceof Interpolation
+    },
+    {
+        test: (op) => (op.kind === OpKind.Property || op.kind === OpKind.HostProperty) &&
+            !(op.expression instanceof Interpolation)
+    },
+    { test: kindTest(OpKind.Attribute) },
+];
+/**
+ * The set of all op kinds we handle in the reordering phase.
+ */
+new Set([
+    OpKind.StyleMap,
+    OpKind.ClassMap,
+    OpKind.StyleProp,
+    OpKind.ClassProp,
+    OpKind.Property,
+    OpKind.HostProperty,
+    OpKind.Attribute,
+]);
+/**
+ * Keeps only the last op in a list of ops.
+ */
+function keepLast(ops) {
+    return ops.slice(ops.length - 1);
+}
+[
+    Identifiers.pipeBind1,
+    Identifiers.pipeBind2,
+    Identifiers.pipeBind3,
+    Identifiers.pipeBind4,
+];
+/**
+ * `InterpolationConfig` for the `textInterpolate` instruction.
  */
 ({
     constant: [
@@ -8844,6 +9519,98 @@ new Map([
         return (n - 1) / 2;
     },
 });
+/**
+ * `InterpolationConfig` for the `stylePropInterpolate` instruction.
+ */
+({
+    constant: [
+        Identifiers.styleProp,
+        Identifiers.stylePropInterpolate1,
+        Identifiers.stylePropInterpolate2,
+        Identifiers.stylePropInterpolate3,
+        Identifiers.stylePropInterpolate4,
+        Identifiers.stylePropInterpolate5,
+        Identifiers.stylePropInterpolate6,
+        Identifiers.stylePropInterpolate7,
+        Identifiers.stylePropInterpolate8,
+    ],
+    variable: Identifiers.stylePropInterpolateV,
+    mapping: n => {
+        if (n % 2 === 0) {
+            throw new Error(`Expected odd number of arguments`);
+        }
+        return (n - 1) / 2;
+    },
+});
+/**
+ * `InterpolationConfig` for the `attributeInterpolate` instruction.
+ */
+({
+    constant: [
+        Identifiers.attribute,
+        Identifiers.attributeInterpolate1,
+        Identifiers.attributeInterpolate2,
+        Identifiers.attributeInterpolate3,
+        Identifiers.attributeInterpolate4,
+        Identifiers.attributeInterpolate5,
+        Identifiers.attributeInterpolate6,
+        Identifiers.attributeInterpolate7,
+        Identifiers.attributeInterpolate8,
+    ],
+    variable: Identifiers.attributeInterpolateV,
+    mapping: n => {
+        if (n % 2 === 0) {
+            throw new Error(`Expected odd number of arguments`);
+        }
+        return (n - 1) / 2;
+    },
+});
+/**
+ * `InterpolationConfig` for the `styleMapInterpolate` instruction.
+ */
+({
+    constant: [
+        Identifiers.styleMap,
+        Identifiers.styleMapInterpolate1,
+        Identifiers.styleMapInterpolate2,
+        Identifiers.styleMapInterpolate3,
+        Identifiers.styleMapInterpolate4,
+        Identifiers.styleMapInterpolate5,
+        Identifiers.styleMapInterpolate6,
+        Identifiers.styleMapInterpolate7,
+        Identifiers.styleMapInterpolate8,
+    ],
+    variable: Identifiers.styleMapInterpolateV,
+    mapping: n => {
+        if (n % 2 === 0) {
+            throw new Error(`Expected odd number of arguments`);
+        }
+        return (n - 1) / 2;
+    },
+});
+/**
+ * `InterpolationConfig` for the `classMapInterpolate` instruction.
+ */
+({
+    constant: [
+        Identifiers.classMap,
+        Identifiers.classMapInterpolate1,
+        Identifiers.classMapInterpolate2,
+        Identifiers.classMapInterpolate3,
+        Identifiers.classMapInterpolate4,
+        Identifiers.classMapInterpolate5,
+        Identifiers.classMapInterpolate6,
+        Identifiers.classMapInterpolate7,
+        Identifiers.classMapInterpolate8,
+    ],
+    variable: Identifiers.classMapInterpolateV,
+    mapping: n => {
+        if (n % 2 === 0) {
+            throw new Error(`Expected odd number of arguments`);
+        }
+        return (n - 1) / 2;
+    },
+});
 ({
     constant: [
         Identifiers.pureFunction0,
@@ -8859,6 +9626,26 @@ new Map([
     variable: Identifiers.pureFunctionV,
     mapping: n => n,
 });
+
+/**
+ * Map of sanitizers to their identifier.
+ */
+new Map([
+    [SanitizerFn.Html, Identifiers.sanitizeHtml],
+    [SanitizerFn.IframeAttribute, Identifiers.validateIframeAttribute],
+    [SanitizerFn.ResourceUrl, Identifiers.sanitizeResourceUrl],
+    [SanitizerFn.Script, Identifiers.sanitizeScript],
+    [SanitizerFn.Style, Identifiers.sanitizeStyle], [SanitizerFn.Url, Identifiers.sanitizeUrl]
+]);
+
+/**
+ * Mapping of security contexts to sanitizer function for that context.
+ */
+new Map([
+    [SecurityContext.HTML, SanitizerFn.Html], [SecurityContext.SCRIPT, SanitizerFn.Script],
+    [SecurityContext.STYLE, SanitizerFn.Style], [SecurityContext.URL, SanitizerFn.Url],
+    [SecurityContext.RESOURCE_URL, SanitizerFn.ResourceUrl]
+]);
 /**
  * A [fence](https://en.wikipedia.org/wiki/Memory_barrier) flag for an expression which indicates
  * how that expression can be optimized in relation to other expressions or instructions.
@@ -8893,114 +9680,15 @@ var Fence;
     Fence[Fence["SideEffectful"] = 4] = "SideEffectful";
 })(Fence || (Fence = {}));
 
-new Set([
-    Identifiers.elementStart,
-    Identifiers.elementEnd,
-    Identifiers.property,
-    Identifiers.elementContainerStart,
-    Identifiers.elementContainerEnd,
-    Identifiers.elementContainer,
-]);
-
+CompatibilityMode.TemplateDefinitionBuilder;
 new Map([
-    ['&&', exports.BinaryOperator.And],
-    ['>', exports.BinaryOperator.Bigger],
-    ['>=', exports.BinaryOperator.BiggerEquals],
-    ['&', exports.BinaryOperator.BitwiseAnd],
-    ['/', exports.BinaryOperator.Divide],
-    ['==', exports.BinaryOperator.Equals],
-    ['===', exports.BinaryOperator.Identical],
-    ['<', exports.BinaryOperator.Lower],
-    ['<=', exports.BinaryOperator.LowerEquals],
-    ['-', exports.BinaryOperator.Minus],
-    ['%', exports.BinaryOperator.Modulo],
-    ['*', exports.BinaryOperator.Multiply],
-    ['!=', exports.BinaryOperator.NotEquals],
-    ['!==', exports.BinaryOperator.NotIdentical],
-    ['??', exports.BinaryOperator.NullishCoalesce],
-    ['||', exports.BinaryOperator.Or],
-    ['+', exports.BinaryOperator.Plus],
+    [0 /* e.BindingType.Property */, BindingKind.Property],
+    [1 /* e.BindingType.Attribute */, BindingKind.Attribute],
+    [2 /* e.BindingType.Class */, BindingKind.ClassName],
+    [3 /* e.BindingType.Style */, BindingKind.StyleProperty],
+    [4 /* e.BindingType.Animation */, BindingKind.Animation],
 ]);
 
-/**
- * Parses string representation of a style and converts it into object literal.
- *
- * @param value string representation of style as used in the `style` attribute in HTML.
- *   Example: `color: red; height: auto`.
- * @returns An array of style property name and value pairs, e.g. `['color', 'red', 'height',
- * 'auto']`
- */
-function parse(value) {
-    // we use a string array here instead of a string map
-    // because a string-map is not guaranteed to retain the
-    // order of the entries whereas a string array can be
-    // constructed in a [key, value, key, value] format.
-    const styles = [];
-    let i = 0;
-    let parenDepth = 0;
-    let quote = 0 /* Char.QuoteNone */;
-    let valueStart = 0;
-    let propStart = 0;
-    let currentProp = null;
-    while (i < value.length) {
-        const token = value.charCodeAt(i++);
-        switch (token) {
-            case 40 /* Char.OpenParen */:
-                parenDepth++;
-                break;
-            case 41 /* Char.CloseParen */:
-                parenDepth--;
-                break;
-            case 39 /* Char.QuoteSingle */:
-                // valueStart needs to be there since prop values don't
-                // have quotes in CSS
-                if (quote === 0 /* Char.QuoteNone */) {
-                    quote = 39 /* Char.QuoteSingle */;
-                }
-                else if (quote === 39 /* Char.QuoteSingle */ && value.charCodeAt(i - 1) !== 92 /* Char.BackSlash */) {
-                    quote = 0 /* Char.QuoteNone */;
-                }
-                break;
-            case 34 /* Char.QuoteDouble */:
-                // same logic as above
-                if (quote === 0 /* Char.QuoteNone */) {
-                    quote = 34 /* Char.QuoteDouble */;
-                }
-                else if (quote === 34 /* Char.QuoteDouble */ && value.charCodeAt(i - 1) !== 92 /* Char.BackSlash */) {
-                    quote = 0 /* Char.QuoteNone */;
-                }
-                break;
-            case 58 /* Char.Colon */:
-                if (!currentProp && parenDepth === 0 && quote === 0 /* Char.QuoteNone */) {
-                    currentProp = hyphenate(value.substring(propStart, i - 1).trim());
-                    valueStart = i;
-                }
-                break;
-            case 59 /* Char.Semicolon */:
-                if (currentProp && valueStart > 0 && parenDepth === 0 && quote === 0 /* Char.QuoteNone */) {
-                    const styleVal = value.substring(valueStart, i - 1).trim();
-                    styles.push(currentProp, styleVal);
-                    propStart = i;
-                    valueStart = 0;
-                    currentProp = null;
-                }
-                break;
-        }
-    }
-    if (currentProp && valueStart) {
-        const styleVal = value.slice(valueStart).trim();
-        styles.push(currentProp, styleVal);
-    }
-    return styles;
-}
-function hyphenate(value) {
-    return value
-        .replace(/[a-z][A-Z]/g, v => {
-        return v.charAt(0) + '-' + v.charAt(1);
-    })
-        .toLowerCase();
-}
-
 const IMPORTANT_FLAG = '!important';
 /**
  * Minimum amount of binding slots required in the runtime for style/class bindings.
@@ -9170,7 +9858,7 @@ class StylingBuilder {
         // CSS custom properties are case-sensitive so we shouldn't normalize them.
         // See: https://www.w3.org/TR/css-variables-1/#defining-variables
         if (!isCssCustomProperty(name)) {
-            name = hyphenate(name);
+            name = hyphenate$1(name);
         }
         const { property, hasOverrideFlag, suffix: bindingSuffix } = parseProperty(name);
         suffix = typeof suffix === 'string' && suffix.length !== 0 ? suffix : bindingSuffix;
@@ -9300,7 +9988,7 @@ class StylingBuilder {
         // pipes can be picked up in time before the template is built
         const mapValue = stylingInput.value.visit(valueConverter);
         let reference;
-        if (mapValue instanceof Interpolation) {
+        if (mapValue instanceof Interpolation$1) {
             totalBindingSlotsRequired += mapValue.expressions.length;
             reference = isClassBased ? getClassMapInterpolationExpression(mapValue) :
                 getStyleMapInterpolationExpression(mapValue);
@@ -9335,7 +10023,7 @@ class StylingBuilder {
             //      We need to store the intermediate value so that we don't allocate
             //      the strings on each CD.
             let totalBindingSlotsRequired = MIN_STYLING_BINDING_SLOTS_REQUIRED;
-            if (value instanceof Interpolation) {
+            if (value instanceof Interpolation$1) {
                 totalBindingSlotsRequired += value.expressions.length;
                 if (getInterpolationExpressionFn) {
                     referenceForCall = getInterpolationExpressionFn(value);
@@ -9527,7 +10215,7 @@ function isEmptyExpression(ast) {
     if (ast instanceof ASTWithSource) {
         ast = ast.ast;
     }
-    return ast instanceof EmptyExpr;
+    return ast instanceof EmptyExpr$1;
 }
 
 exports.TokenType = void 0;
@@ -9977,6 +10665,7 @@ class Parser$1 {
         ast.visit(checker);
         return checker.errors;
     }
+    // Host bindings parsed here
     parseSimpleBinding(input, location, absoluteOffset, interpolationConfig = DEFAULT_INTERPOLATION_CONFIG) {
         const ast = this._parseBindingAst(input, location, absoluteOffset, interpolationConfig);
         const errors = this.checkSimpleExpression(ast);
@@ -10059,7 +10748,7 @@ class Parser$1 {
     }
     createInterpolationAst(strings, expressions, input, location, absoluteOffset) {
         const span = new ParseSpan(0, input.length);
-        const interpolation = new Interpolation(span, span.toAbsolute(absoluteOffset), strings, expressions);
+        const interpolation = new Interpolation$1(span, span.toAbsolute(absoluteOffset), strings, expressions);
         return new ASTWithSource(interpolation, input, location, absoluteOffset, this.errors);
     }
     /**
@@ -10430,7 +11119,7 @@ class _ParseAST {
             // We have no expressions so create an empty expression that spans the entire input length
             const artificialStart = this.offset;
             const artificialEnd = this.offset + this.input.length;
-            return new EmptyExpr(this.span(artificialStart, artificialEnd), this.sourceSpan(artificialStart, artificialEnd));
+            return new EmptyExpr$1(this.span(artificialStart, artificialEnd), this.sourceSpan(artificialStart, artificialEnd));
         }
         if (exprs.length == 1)
             return exprs[0];
@@ -10491,7 +11180,7 @@ class _ParseAST {
                 const end = this.inputIndex;
                 const expression = this.input.substring(start, end);
                 this.error(`Conditional expression ${expression} requires all 3 expressions`);
-                no = new EmptyExpr(this.span(start), this.sourceSpan(start));
+                no = new EmptyExpr$1(this.span(start), this.sourceSpan(start));
             }
             else {
                 no = this.parsePipe();
@@ -10716,15 +11405,15 @@ class _ParseAST {
         }
         else if (this.next.isPrivateIdentifier()) {
             this._reportErrorForPrivateIdentifier(this.next, null);
-            return new EmptyExpr(this.span(start), this.sourceSpan(start));
+            return new EmptyExpr$1(this.span(start), this.sourceSpan(start));
         }
         else if (this.index >= this.tokens.length) {
             this.error(`Unexpected end of expression: ${this.input}`);
-            return new EmptyExpr(this.span(start), this.sourceSpan(start));
+            return new EmptyExpr$1(this.span(start), this.sourceSpan(start));
         }
         else {
             this.error(`Unexpected token ${this.next}`);
-            return new EmptyExpr(this.span(start), this.sourceSpan(start));
+            return new EmptyExpr$1(this.span(start), this.sourceSpan(start));
         }
     }
     parseExpressionList(terminator) {
@@ -10785,7 +11474,7 @@ class _ParseAST {
         if (isSafe) {
             if (this.consumeOptionalAssignment()) {
                 this.error('The \'?.\' operator cannot be used in the assignment');
-                receiver = new EmptyExpr(this.span(start), this.sourceSpan(start));
+                receiver = new EmptyExpr$1(this.span(start), this.sourceSpan(start));
             }
             else {
                 receiver = new SafePropertyRead(this.span(start), this.sourceSpan(start), nameSpan, readReceiver, id);
@@ -10795,7 +11484,7 @@ class _ParseAST {
             if (this.consumeOptionalAssignment()) {
                 if (!(this.parseFlags & 1 /* ParseFlags.Action */)) {
                     this.error('Bindings cannot contain assignments');
-                    return new EmptyExpr(this.span(start), this.sourceSpan(start));
+                    return new EmptyExpr$1(this.span(start), this.sourceSpan(start));
                 }
                 const value = this.parseConditional();
                 receiver = new PropertyWrite(this.span(start), this.sourceSpan(start), nameSpan, readReceiver, id, value);
@@ -10925,7 +11614,7 @@ class _ParseAST {
         return this.withContext(ParseContextFlags.Writable, () => {
             this.rbracketsExpected++;
             const key = this.parsePipe();
-            if (key instanceof EmptyExpr) {
+            if (key instanceof EmptyExpr$1) {
                 this.error(`Key access cannot be empty`);
             }
             this.rbracketsExpected--;
@@ -10943,7 +11632,7 @@ class _ParseAST {
                 return isSafe ? new SafeKeyedRead(this.span(start), this.sourceSpan(start), receiver, key) :
                     new KeyedRead(this.span(start), this.sourceSpan(start), receiver, key);
             }
-            return new EmptyExpr(this.span(start), this.sourceSpan(start));
+            return new EmptyExpr$1(this.span(start), this.sourceSpan(start));
         });
     }
     /**
@@ -11238,6 +11927,39 @@ class Comment {
         return visitor.visitComment(this, context);
     }
 }
+class BlockGroup {
+    constructor(blocks, sourceSpan, startSourceSpan, endSourceSpan = null) {
+        this.blocks = blocks;
+        this.sourceSpan = sourceSpan;
+        this.startSourceSpan = startSourceSpan;
+        this.endSourceSpan = endSourceSpan;
+    }
+    visit(visitor, context) {
+        return visitor.visitBlockGroup(this, context);
+    }
+}
+class Block {
+    constructor(name, parameters, children, sourceSpan, startSourceSpan, endSourceSpan = null) {
+        this.name = name;
+        this.parameters = parameters;
+        this.children = children;
+        this.sourceSpan = sourceSpan;
+        this.startSourceSpan = startSourceSpan;
+        this.endSourceSpan = endSourceSpan;
+    }
+    visit(visitor, context) {
+        return visitor.visitBlock(this, context);
+    }
+}
+class BlockParameter {
+    constructor(expression, sourceSpan) {
+        this.expression = expression;
+        this.sourceSpan = sourceSpan;
+    }
+    visit(visitor, context) {
+        return visitor.visitBlockParameter(this, context);
+    }
+}
 function visitAll(visitor, nodes, context = null) {
     const result = [];
     const visit = visitor.visit ?
@@ -11268,6 +11990,18 @@ class RecursiveVisitor {
         });
     }
     visitExpansionCase(ast, context) { }
+    visitBlockGroup(ast, context) {
+        this.visitChildren(context, visit => {
+            visit(ast.blocks);
+        });
+    }
+    visitBlock(block, context) {
+        this.visitChildren(context, visit => {
+            visit(block.parameters);
+            visit(block.children);
+        });
+    }
+    visitBlockParameter(ast, context) { }
     visitChildren(context, cb) {
         let results = [];
         let t = this;
@@ -14020,8 +14754,8 @@ class _Tokenizer {
         this._cursor = options.escapedString ? new EscapedCharacterCursor(_file, range) :
             new PlainCharacterCursor(_file, range);
         this._preserveLineEndings = options.preserveLineEndings || false;
-        this._escapedString = options.escapedString || false;
         this._i18nNormalizeLineEndingsInICUs = options.i18nNormalizeLineEndingsInICUs || false;
+        this._tokenizeBlocks = options.tokenizeBlocks || false;
         try {
             this._cursor.init();
         }
@@ -14062,6 +14796,15 @@ class _Tokenizer {
                         this._consumeTagOpen(start);
                     }
                 }
+                else if (this._tokenizeBlocks && this._attemptStr('{#')) {
+                    this._consumeBlockGroupOpen(start);
+                }
+                else if (this._tokenizeBlocks && this._attemptStr('{/')) {
+                    this._consumeBlockGroupClose(start);
+                }
+                else if (this._tokenizeBlocks && this._attemptStr('{:')) {
+                    this._consumeBlock(start);
+                }
                 else if (!(this._tokenizeIcu && this._tokenizeExpansionForm())) {
                     // In (possibly interpolated) text the end of the text is given by `isTextEnd()`, while
                     // the premature end of an interpolation is given by the start of a new HTML element.
@@ -14075,6 +14818,75 @@ class _Tokenizer {
         this._beginToken(24 /* TokenType.EOF */);
         this._endToken([]);
     }
+    _consumeBlockGroupOpen(start) {
+        this._beginToken(25 /* TokenType.BLOCK_GROUP_OPEN_START */, start);
+        const nameCursor = this._cursor.clone();
+        this._attemptCharCodeUntilFn(code => !isBlockNameChar(code));
+        this._endToken([this._cursor.getChars(nameCursor)]);
+        this._consumeBlockParameters();
+        this._beginToken(26 /* TokenType.BLOCK_GROUP_OPEN_END */);
+        this._requireCharCode($RBRACE);
+        this._endToken([]);
+    }
+    _consumeBlockGroupClose(start) {
+        this._beginToken(27 /* TokenType.BLOCK_GROUP_CLOSE */, start);
+        const nameCursor = this._cursor.clone();
+        this._attemptCharCodeUntilFn(code => !isBlockNameChar(code));
+        const name = this._cursor.getChars(nameCursor);
+        this._requireCharCode($RBRACE);
+        this._endToken([name]);
+    }
+    _consumeBlock(start) {
+        this._beginToken(29 /* TokenType.BLOCK_OPEN_START */, start);
+        const nameCursor = this._cursor.clone();
+        this._attemptCharCodeUntilFn(code => !isBlockNameChar(code));
+        this._endToken([this._cursor.getChars(nameCursor)]);
+        this._consumeBlockParameters();
+        this._beginToken(30 /* TokenType.BLOCK_OPEN_END */);
+        this._requireCharCode($RBRACE);
+        this._endToken([]);
+    }
+    _consumeBlockParameters() {
+        // Trim the whitespace until the first parameter.
+        this._attemptCharCodeUntilFn(isBlockParameterChar);
+        while (this._cursor.peek() !== $RBRACE && this._cursor.peek() !== $EOF) {
+            this._beginToken(28 /* TokenType.BLOCK_PARAMETER */);
+            const start = this._cursor.clone();
+            let inQuote = null;
+            let openBraces = 0;
+            // Consume the parameter until the next semicolon or brace.
+            // Note that we skip over semicolons/braces inside of strings.
+            while ((this._cursor.peek() !== $SEMICOLON && this._cursor.peek() !== $EOF) ||
+                inQuote !== null) {
+                const char = this._cursor.peek();
+                // Skip to the next character if it was escaped.
+                if (char === $BACKSLASH) {
+                    this._cursor.advance();
+                }
+                else if (char === inQuote) {
+                    inQuote = null;
+                }
+                else if (inQuote === null && isQuote(char)) {
+                    inQuote = char;
+                }
+                else if (char === $LBRACE && inQuote === null) {
+                    openBraces++;
+                }
+                else if (char === $RBRACE && inQuote === null) {
+                    if (openBraces === 0) {
+                        break;
+                    }
+                    else if (openBraces > 0) {
+                        openBraces--;
+                    }
+                }
+                this._cursor.advance();
+            }
+            this._endToken([this._cursor.getChars(start)]);
+            // Skip to the next parameter.
+            this._attemptCharCodeUntilFn(isBlockParameterChar);
+        }
+    }
     /**
      * @returns whether an ICU token has been created
      * @internal
@@ -14596,7 +15408,7 @@ class _Tokenizer {
         return this._processCarriageReturns(end.getChars(start));
     }
     _isTextEnd() {
-        if (this._isTagStart() || this._cursor.peek() === $EOF) {
+        if (this._isTagStart() || this._isBlockStart() || this._cursor.peek() === $EOF) {
             return true;
         }
         if (this._tokenizeIcu && !this._inInterpolation) {
@@ -14629,6 +15441,23 @@ class _Tokenizer {
         }
         return false;
     }
+    _isBlockStart() {
+        if (this._tokenizeBlocks && this._cursor.peek() === $LBRACE) {
+            const tmp = this._cursor.clone();
+            // Check that the cursor is on a `{#`, `{/` or `{:`.
+            tmp.advance();
+            const next = tmp.peek();
+            if (next !== $BANG && next !== $SLASH && next !== $COLON) {
+                return false;
+            }
+            // If it is, also verify that the next character is a valid block identifier.
+            tmp.advance();
+            if (isBlockNameChar(tmp.peek())) {
+                return true;
+            }
+        }
+        return false;
+    }
     _readUntil(char) {
         const start = this._cursor.clone();
         this._attemptUntilChar(char);
@@ -14684,6 +15513,12 @@ function compareCharCodeCaseInsensitive(code1, code2) {
 function toUpperCaseCharCode(code) {
     return code >= $a && code <= $z ? code - $a + $A : code;
 }
+function isBlockNameChar(code) {
+    return isAsciiLetter(code) || isDigit(code) || code === $_;
+}
+function isBlockParameterChar(code) {
+    return code !== $SEMICOLON && isNotWhitespace(code);
+}
 function mergeTextTokens(srcTokens) {
     const dstTokens = [];
     let lastDstToken = undefined;
@@ -14971,7 +15806,7 @@ class _TreeBuilder {
         this.tokens = tokens;
         this.getTagDefinition = getTagDefinition;
         this._index = -1;
-        this._elementStack = [];
+        this._containerStack = [];
         this.rootNodes = [];
         this.errors = [];
         this._advance();
@@ -15001,6 +15836,18 @@ class _TreeBuilder {
             else if (this._peek.type === 19 /* TokenType.EXPANSION_FORM_START */) {
                 this._consumeExpansion(this._advance());
             }
+            else if (this._peek.type === 25 /* TokenType.BLOCK_GROUP_OPEN_START */) {
+                this._closeVoidElement();
+                this._consumeBlockGroupOpen(this._advance());
+            }
+            else if (this._peek.type === 29 /* TokenType.BLOCK_OPEN_START */) {
+                this._closeVoidElement();
+                this._consumeBlock(this._advance(), 30 /* TokenType.BLOCK_OPEN_END */);
+            }
+            else if (this._peek.type === 27 /* TokenType.BLOCK_GROUP_CLOSE */) {
+                this._closeVoidElement();
+                this._consumeBlockGroupClose(this._advance());
+            }
             else {
                 // Skip all other tokens...
                 this._advance();
@@ -15028,9 +15875,12 @@ class _TreeBuilder {
     }
     _consumeComment(token) {
         const text = this._advanceIf(7 /* TokenType.RAW_TEXT */);
-        this._advanceIf(11 /* TokenType.COMMENT_END */);
+        const endToken = this._advanceIf(11 /* TokenType.COMMENT_END */);
         const value = text != null ? text.parts[0].trim() : null;
-        this._addToParent(new Comment(value, token.sourceSpan));
+        const sourceSpan = endToken == null ?
+            token.sourceSpan :
+            new ParseSourceSpan(token.sourceSpan.start, endToken.sourceSpan.end, token.sourceSpan.fullStart);
+        this._addToParent(new Comment(value, sourceSpan));
     }
     _consumeExpansion(token) {
         const switchValue = this._advance();
@@ -15117,7 +15967,12 @@ class _TreeBuilder {
         const startSpan = token.sourceSpan;
         let text = token.parts[0];
         if (text.length > 0 && text[0] === '\n') {
-            const parent = this._getParentElement();
+            const parent = this._getContainer();
+            // This is unlikely to happen, but we have an assertion just in case.
+            if (parent instanceof BlockGroup) {
+                this.errors.push(TreeError.create(null, startSpan, 'Text cannot be placed directly inside of a block group.'));
+                return null;
+            }
             if (parent != null && parent.children.length === 0 &&
                 this.getTagDefinition(parent.name).ignoreFirstLf) {
                 text = text.substring(1);
@@ -15148,9 +16003,9 @@ class _TreeBuilder {
         }
     }
     _closeVoidElement() {
-        const el = this._getParentElement();
-        if (el && this.getTagDefinition(el.name).isVoid) {
-            this._elementStack.pop();
+        const el = this._getContainer();
+        if (el instanceof Element && this.getTagDefinition(el.name).isVoid) {
+            this._containerStack.pop();
         }
     }
     _consumeStartTag(startTagToken) {
@@ -15159,7 +16014,7 @@ class _TreeBuilder {
         while (this._peek.type === 14 /* TokenType.ATTR_NAME */) {
             attrs.push(this._consumeAttr(this._advance()));
         }
-        const fullName = this._getElementFullName(prefix, name, this._getParentElement());
+        const fullName = this._getElementFullName(prefix, name, this._getClosestParentElement());
         let selfClosing = false;
         // Note: There could have been a tokenizer error
         // so that we don't get a token for the end tag...
@@ -15180,33 +16035,34 @@ class _TreeBuilder {
         // Create a separate `startSpan` because `span` will be modified when there is an `end` span.
         const startSpan = new ParseSourceSpan(startTagToken.sourceSpan.start, end, startTagToken.sourceSpan.fullStart);
         const el = new Element(fullName, attrs, [], span, startSpan, undefined);
-        this._pushElement(el);
+        const parentEl = this._getContainer();
+        this._pushContainer(el, parentEl instanceof Element &&
+            this.getTagDefinition(parentEl.name).isClosedByChild(el.name));
         if (selfClosing) {
             // Elements that are self-closed have their `endSourceSpan` set to the full span, as the
             // element start tag also represents the end tag.
-            this._popElement(fullName, span);
+            this._popContainer(fullName, Element, span);
         }
         else if (startTagToken.type === 4 /* TokenType.INCOMPLETE_TAG_OPEN */) {
             // We already know the opening tag is not complete, so it is unlikely it has a corresponding
             // close tag. Let's optimistically parse it as a full element and emit an error.
-            this._popElement(fullName, null);
+            this._popContainer(fullName, Element, null);
             this.errors.push(TreeError.create(fullName, span, `Opening tag "${fullName}" not terminated.`));
         }
     }
-    _pushElement(el) {
-        const parentEl = this._getParentElement();
-        if (parentEl && this.getTagDefinition(parentEl.name).isClosedByChild(el.name)) {
-            this._elementStack.pop();
+    _pushContainer(node, isClosedByChild) {
+        if (isClosedByChild) {
+            this._containerStack.pop();
         }
-        this._addToParent(el);
-        this._elementStack.push(el);
+        this._addToParent(node);
+        this._containerStack.push(node);
     }
     _consumeEndTag(endTagToken) {
-        const fullName = this._getElementFullName(endTagToken.parts[0], endTagToken.parts[1], this._getParentElement());
+        const fullName = this._getElementFullName(endTagToken.parts[0], endTagToken.parts[1], this._getClosestParentElement());
         if (this.getTagDefinition(fullName).isVoid) {
             this.errors.push(TreeError.create(fullName, endTagToken.sourceSpan, `Void elements do not have end tags "${endTagToken.parts[1]}"`));
         }
-        else if (!this._popElement(fullName, endTagToken.sourceSpan)) {
+        else if (!this._popContainer(fullName, Element, endTagToken.sourceSpan)) {
             const errMsg = `Unexpected closing tag "${fullName}". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags`;
             this.errors.push(TreeError.create(fullName, endTagToken.sourceSpan, errMsg));
         }
@@ -15217,20 +16073,23 @@ class _TreeBuilder {
      * not have a closing tag (for example, this happens when an incomplete
      * opening tag is recovered).
      */
-    _popElement(fullName, endSourceSpan) {
+    _popContainer(fullName, expectedType, endSourceSpan) {
         let unexpectedCloseTagDetected = false;
-        for (let stackIndex = this._elementStack.length - 1; stackIndex >= 0; stackIndex--) {
-            const el = this._elementStack[stackIndex];
-            if (el.name === fullName) {
+        for (let stackIndex = this._containerStack.length - 1; stackIndex >= 0; stackIndex--) {
+            const node = this._containerStack[stackIndex];
+            const name = node instanceof BlockGroup ? node.blocks[0]?.name : node.name;
+            if (name === fullName && node instanceof expectedType) {
                 // Record the parse span with the element that is being closed. Any elements that are
                 // removed from the element stack at this point are closed implicitly, so they won't get
                 // an end source span (as there is no explicit closing element).
-                el.endSourceSpan = endSourceSpan;
-                el.sourceSpan.end = endSourceSpan !== null ? endSourceSpan.end : el.sourceSpan.end;
-                this._elementStack.splice(stackIndex, this._elementStack.length - stackIndex);
+                node.endSourceSpan = endSourceSpan;
+                node.sourceSpan.end = endSourceSpan !== null ? endSourceSpan.end : node.sourceSpan.end;
+                this._containerStack.splice(stackIndex, this._containerStack.length - stackIndex);
                 return !unexpectedCloseTagDetected;
             }
-            if (!this.getTagDefinition(el.name).closedByParent) {
+            // Blocks are self-closing while block groups and (most times) elements are not.
+            if (node instanceof BlockGroup ||
+                node instanceof Element && !this.getTagDefinition(node.name).closedByParent) {
                 // Note that we encountered an unexpected close tag but continue processing the element
                 // stack so we can assign an `endSourceSpan` if there is a corresponding start tag for this
                 // end tag in the stack.
@@ -15289,16 +16148,92 @@ class _TreeBuilder {
             new ParseSourceSpan(valueStartSpan.start, valueEnd, valueStartSpan.fullStart);
         return new Attribute(fullName, value, new ParseSourceSpan(attrName.sourceSpan.start, attrEnd, attrName.sourceSpan.fullStart), attrName.sourceSpan, valueSpan, valueTokens.length > 0 ? valueTokens : undefined, undefined);
     }
-    _getParentElement() {
-        return this._elementStack.length > 0 ? this._elementStack[this._elementStack.length - 1] : null;
+    _consumeBlockGroupOpen(token) {
+        const end = this._peek.sourceSpan.fullStart;
+        const span = new ParseSourceSpan(token.sourceSpan.start, end, token.sourceSpan.fullStart);
+        // Create a separate `startSpan` because `span` will be modified when there is an `end` span.
+        const startSpan = new ParseSourceSpan(token.sourceSpan.start, end, token.sourceSpan.fullStart);
+        const blockGroup = new BlockGroup([], span, startSpan, null);
+        this._pushContainer(blockGroup, false);
+        const implicitBlock = this._consumeBlock(token, 26 /* TokenType.BLOCK_GROUP_OPEN_END */);
+        // Block parameters are consumed as a part of the implicit block so we need to expand the
+        // start source span once the block is parsed to include the full opening tag.
+        startSpan.end = implicitBlock.startSourceSpan.end;
+    }
+    _consumeBlock(token, closeToken) {
+        // The start of a block implicitly closes the previous block.
+        this._conditionallyClosePreviousBlock();
+        const parameters = [];
+        while (this._peek.type === 28 /* TokenType.BLOCK_PARAMETER */) {
+            const paramToken = this._advance();
+            parameters.push(new BlockParameter(paramToken.parts[0], paramToken.sourceSpan));
+        }
+        if (this._peek.type === closeToken) {
+            this._advance();
+        }
+        const end = this._peek.sourceSpan.fullStart;
+        const span = new ParseSourceSpan(token.sourceSpan.start, end, token.sourceSpan.fullStart);
+        // Create a separate `startSpan` because `span` will be modified when there is an `end` span.
+        const startSpan = new ParseSourceSpan(token.sourceSpan.start, end, token.sourceSpan.fullStart);
+        const block = new Block(token.parts[0], parameters, [], span, startSpan);
+        const parent = this._getContainer();
+        if (!(parent instanceof BlockGroup)) {
+            this.errors.push(TreeError.create(block.name, block.sourceSpan, 'Blocks can only be placed inside of block groups.'));
+        }
+        else {
+            parent.blocks.push(block);
+            this._containerStack.push(block);
+        }
+        return block;
+    }
+    _consumeBlockGroupClose(token) {
+        const name = token.parts[0];
+        const previousContainer = this._getContainer();
+        // Blocks are implcitly closed by the block group.
+        this._conditionallyClosePreviousBlock();
+        if (!this._popContainer(name, BlockGroup, token.sourceSpan)) {
+            const context = previousContainer instanceof Element ?
+                `There is an unclosed "${previousContainer.name}" HTML tag named that may have to be closed first.` :
+                `The block may have been closed earlier.`;
+            this.errors.push(TreeError.create(name, token.sourceSpan, `Unexpected closing block "${name}". ${context}`));
+        }
+    }
+    _conditionallyClosePreviousBlock() {
+        const container = this._getContainer();
+        if (container instanceof Block) {
+            // Blocks don't have an explicit closing tag, they're closed either by the next block or
+            // the end of the block group. Infer the end span from the last child node.
+            const lastChild = container.children.length ? container.children[container.children.length - 1] : null;
+            const endSpan = lastChild === null ?
+                null :
+                new ParseSourceSpan(lastChild.sourceSpan.end, lastChild.sourceSpan.end);
+            this._popContainer(container.name, Block, endSpan);
+        }
+    }
+    _getContainer() {
+        return this._containerStack.length > 0 ? this._containerStack[this._containerStack.length - 1] :
+            null;
+    }
+    _getClosestParentElement() {
+        for (let i = this._containerStack.length - 1; i > -1; i--) {
+            if (this._containerStack[i] instanceof Element) {
+                return this._containerStack[i];
+            }
+        }
+        return null;
     }
     _addToParent(node) {
-        const parent = this._getParentElement();
-        if (parent != null) {
-            parent.children.push(node);
+        const parent = this._getContainer();
+        if (parent === null) {
+            this.rootNodes.push(node);
+        }
+        else if (parent instanceof BlockGroup) {
+            // Due to how parsing is set up, we're unlikely to hit this code path, but we
+            // have the assertion here just in case and to satisfy the type checker.
+            this.errors.push(TreeError.create(null, node.sourceSpan, 'Block groups can only contain blocks.'));
         }
         else {
-            this.rootNodes.push(node);
+            parent.children.push(node);
         }
     }
     _getElementFullName(prefix, localName, parentElement) {
@@ -15412,6 +16347,15 @@ class WhitespaceVisitor {
     visitExpansionCase(expansionCase, context) {
         return expansionCase;
     }
+    visitBlockGroup(group, context) {
+        return new BlockGroup(visitAllWithSiblings(this, group.blocks), group.sourceSpan, group.startSourceSpan, group.endSourceSpan);
+    }
+    visitBlock(block, context) {
+        return new Block(block.name, block.parameters, visitAllWithSiblings(this, block.children), block.sourceSpan, block.startSourceSpan);
+    }
+    visitBlockParameter(parameter, context) {
+        return parameter;
+    }
 }
 function createWhitespaceProcessedTextToken({ type, parts, sourceSpan }) {
     return { type, parts: [processWhitespace(parts[0])], sourceSpan };
@@ -15669,7 +16613,7 @@ class BindingParser {
             this._parseAnimation(name, expression, sourceSpan, absoluteOffset, keySpan, valueSpan, targetMatchableAttrs, targetProps);
         }
         else {
-            this._parsePropertyAst(name, this._parseBinding(expression, isHost, valueSpan || sourceSpan, absoluteOffset), sourceSpan, keySpan, valueSpan, targetMatchableAttrs, targetProps);
+            this._parsePropertyAst(name, this.parseBinding(expression, isHost, valueSpan || sourceSpan, absoluteOffset), sourceSpan, keySpan, valueSpan, targetMatchableAttrs, targetProps);
         }
     }
     parsePropertyInterpolation(name, value, sourceSpan, valueSpan, targetMatchableAttrs, targetProps, keySpan, interpolatedTokens) {
@@ -15691,11 +16635,11 @@ class BindingParser {
         // This will occur when a @trigger is not paired with an expression.
         // For animations it is valid to not have an expression since */void
         // states will be applied by angular when the element is attached/detached
-        const ast = this._parseBinding(expression || 'undefined', false, valueSpan || sourceSpan, absoluteOffset);
+        const ast = this.parseBinding(expression || 'undefined', false, valueSpan || sourceSpan, absoluteOffset);
         targetMatchableAttrs.push([name, ast.source]);
         targetProps.push(new ParsedProperty(name, ast, exports.ParsedPropertyType.ANIMATION, sourceSpan, keySpan, valueSpan));
     }
-    _parseBinding(value, isHostBinding, sourceSpan, absoluteOffset) {
+    parseBinding(value, isHostBinding, sourceSpan, absoluteOffset) {
         const sourceInfo = (sourceSpan && sourceSpan.start || '(unknown)').toString();
         try {
             const ast = isHostBinding ?
@@ -15814,7 +16758,7 @@ class BindingParser {
             if (ast) {
                 this._reportExpressionParserErrors(ast.errors, sourceSpan);
             }
-            if (!ast || ast.ast instanceof EmptyExpr) {
+            if (!ast || ast.ast instanceof EmptyExpr$1) {
                 this._reportError(`Empty expressions are not allowed`, sourceSpan);
                 return this._exprParser.wrapLiteralPrimitive('ERROR', sourceInfo, absoluteOffset);
             }
@@ -15960,6 +16904,415 @@ function normalizeNgContentSelect(selectAttr) {
     return selectAttr;
 }
 
+/** Pattern for a timing value in a trigger. */
+const TIME_PATTERN = /^\d+(ms|s)?$/;
+/** Pattern for a separator between keywords in a trigger expression. */
+const SEPARATOR_PATTERN = /^\s$/;
+/** Pairs of characters that form syntax that is comma-delimited. */
+const COMMA_DELIMITED_SYNTAX = new Map([
+    [$LBRACE, $RBRACE],
+    [$LBRACKET, $RBRACKET],
+    [$LPAREN, $RPAREN], // Function calls
+]);
+/** Possible types of `on` triggers. */
+var OnTriggerType;
+(function (OnTriggerType) {
+    OnTriggerType["IDLE"] = "idle";
+    OnTriggerType["TIMER"] = "timer";
+    OnTriggerType["INTERACTION"] = "interaction";
+    OnTriggerType["IMMEDIATE"] = "immediate";
+    OnTriggerType["HOVER"] = "hover";
+    OnTriggerType["VIEWPORT"] = "viewport";
+})(OnTriggerType || (OnTriggerType = {}));
+/** Parses a `when` deferred trigger. */
+function parseWhenTrigger({ expression, sourceSpan }, bindingParser, errors) {
+    const whenIndex = expression.indexOf('when');
+    // This is here just to be safe, we shouldn't enter this function
+    // in the first place if a block doesn't have the "when" keyword.
+    if (whenIndex === -1) {
+        errors.push(new ParseError(sourceSpan, `Could not find "when" keyword in expression`));
+        return null;
+    }
+    const start = getTriggerParametersStart(expression, whenIndex + 1);
+    const parsed = bindingParser.parseBinding(expression.slice(start), false, sourceSpan, sourceSpan.start.offset + start);
+    return new BoundDeferredTrigger(parsed, sourceSpan);
+}
+/** Parses an `on` trigger */
+function parseOnTrigger({ expression, sourceSpan }, errors) {
+    const onIndex = expression.indexOf('on');
+    // This is here just to be safe, we shouldn't enter this function
+    // in the first place if a block doesn't have the "on" keyword.
+    if (onIndex === -1) {
+        errors.push(new ParseError(sourceSpan, `Could not find "on" keyword in expression`));
+        return [];
+    }
+    const start = getTriggerParametersStart(expression, onIndex + 1);
+    return new OnTriggerParser(expression, start, sourceSpan, errors).parse();
+}
+class OnTriggerParser {
+    constructor(expression, start, span, errors) {
+        this.expression = expression;
+        this.start = start;
+        this.span = span;
+        this.errors = errors;
+        this.index = 0;
+        this.triggers = [];
+        this.tokens = new Lexer().tokenize(expression.slice(start));
+    }
+    parse() {
+        while (this.tokens.length > 0 && this.index < this.tokens.length) {
+            const token = this.token();
+            if (!token.isIdentifier()) {
+                this.unexpectedToken(token);
+                break;
+            }
+            // An identifier immediately followed by a comma or the end of
+            // the expression cannot have parameters so we can exit early.
+            if (this.isFollowedByOrLast($COMMA)) {
+                this.consumeTrigger(token, []);
+                this.advance();
+            }
+            else if (this.isFollowedByOrLast($LPAREN)) {
+                this.advance(); // Advance to the opening paren.
+                const prevErrors = this.errors.length;
+                const parameters = this.consumeParameters();
+                if (this.errors.length !== prevErrors) {
+                    break;
+                }
+                this.consumeTrigger(token, parameters);
+                this.advance(); // Advance past the closing paren.
+            }
+            else if (this.index < this.tokens.length - 1) {
+                this.unexpectedToken(this.tokens[this.index + 1]);
+            }
+            this.advance();
+        }
+        return this.triggers;
+    }
+    advance() {
+        this.index++;
+    }
+    isFollowedByOrLast(char) {
+        if (this.index === this.tokens.length - 1) {
+            return true;
+        }
+        return this.tokens[this.index + 1].isCharacter(char);
+    }
+    token() {
+        return this.tokens[Math.min(this.index, this.tokens.length - 1)];
+    }
+    consumeTrigger(identifier, parameters) {
+        const startSpan = this.span.start.moveBy(this.start + identifier.index - this.tokens[0].index);
+        const endSpan = startSpan.moveBy(this.token().end - identifier.index);
+        const sourceSpan = new ParseSourceSpan(startSpan, endSpan);
+        try {
+            switch (identifier.toString()) {
+                case OnTriggerType.IDLE:
+                    this.triggers.push(createIdleTrigger(parameters, sourceSpan));
+                    break;
+                case OnTriggerType.TIMER:
+                    this.triggers.push(createTimerTrigger(parameters, sourceSpan));
+                    break;
+                case OnTriggerType.INTERACTION:
+                    this.triggers.push(createInteractionTrigger(parameters, sourceSpan));
+                    break;
+                case OnTriggerType.IMMEDIATE:
+                    this.triggers.push(createImmediateTrigger(parameters, sourceSpan));
+                    break;
+                case OnTriggerType.HOVER:
+                    this.triggers.push(createHoverTrigger(parameters, sourceSpan));
+                    break;
+                case OnTriggerType.VIEWPORT:
+                    this.triggers.push(createViewportTrigger(parameters, sourceSpan));
+                    break;
+                default:
+                    throw new Error(`Unrecognized trigger type "${identifier}"`);
+            }
+        }
+        catch (e) {
+            this.error(identifier, e.message);
+        }
+    }
+    consumeParameters() {
+        const parameters = [];
+        if (!this.token().isCharacter($LPAREN)) {
+            this.unexpectedToken(this.token());
+            return parameters;
+        }
+        this.advance();
+        const commaDelimStack = [];
+        let current = '';
+        while (this.index < this.tokens.length) {
+            const token = this.token();
+            // Stop parsing if we've hit the end character and we're outside of a comma-delimited syntax.
+            // Note that we don't need to account for strings here since the lexer already parsed them
+            // into string tokens.
+            if (token.isCharacter($RPAREN) && commaDelimStack.length === 0) {
+                if (current.length) {
+                    parameters.push(current);
+                }
+                break;
+            }
+            // In the `on` microsyntax "top-level" commas (e.g. ones outside of an parameters) separate
+            // the different triggers (e.g. `on idle,timer(500)`). This is problematic, because the
+            // function-like syntax also implies that multiple parameters can be passed into the
+            // individual trigger (e.g. `on foo(a, b)`). To avoid tripping up the parser with commas that
+            // are part of other sorts of syntax (object literals, arrays), we treat anything inside
+            // a comma-delimited syntax block as plain text.
+            if (token.type === exports.TokenType.Character && COMMA_DELIMITED_SYNTAX.has(token.numValue)) {
+                commaDelimStack.push(COMMA_DELIMITED_SYNTAX.get(token.numValue));
+            }
+            if (commaDelimStack.length > 0 &&
+                token.isCharacter(commaDelimStack[commaDelimStack.length - 1])) {
+                commaDelimStack.pop();
+            }
+            // If we hit a comma outside of a comma-delimited syntax, it means
+            // that we're at the top level and we're starting a new parameter.
+            if (commaDelimStack.length === 0 && token.isCharacter($COMMA) && current.length > 0) {
+                parameters.push(current);
+                current = '';
+                this.advance();
+                continue;
+            }
+            // Otherwise treat the token as a plain text character in the current parameter.
+            current += this.tokenText();
+            this.advance();
+        }
+        if (!this.token().isCharacter($RPAREN) || commaDelimStack.length > 0) {
+            this.error(this.token(), 'Unexpected end of expression');
+        }
+        if (this.index < this.tokens.length - 1 &&
+            !this.tokens[this.index + 1].isCharacter($COMMA)) {
+            this.unexpectedToken(this.tokens[this.index + 1]);
+        }
+        return parameters;
+    }
+    tokenText() {
+        // Tokens have a toString already which we could use, but for string tokens it omits the quotes.
+        // Eventually we could expose this information on the token directly.
+        return this.expression.slice(this.start + this.token().index, this.start + this.token().end);
+    }
+    error(token, message) {
+        const newStart = this.span.start.moveBy(this.start + token.index);
+        const newEnd = newStart.moveBy(token.end - token.index);
+        this.errors.push(new ParseError(new ParseSourceSpan(newStart, newEnd), message));
+    }
+    unexpectedToken(token) {
+        this.error(token, `Unexpected token "${token}"`);
+    }
+}
+function createIdleTrigger(parameters, sourceSpan) {
+    if (parameters.length > 0) {
+        throw new Error(`"${OnTriggerType.IDLE}" trigger cannot have parameters`);
+    }
+    return new IdleDeferredTrigger(sourceSpan);
+}
+function createTimerTrigger(parameters, sourceSpan) {
+    if (parameters.length !== 1) {
+        throw new Error(`"${OnTriggerType.TIMER}" trigger must have exactly one parameter`);
+    }
+    const delay = parseDeferredTime(parameters[0]);
+    if (delay === null) {
+        throw new Error(`Could not parse time value of trigger "${OnTriggerType.TIMER}"`);
+    }
+    return new TimerDeferredTrigger(delay, sourceSpan);
+}
+function createInteractionTrigger(parameters, sourceSpan) {
+    if (parameters.length > 1) {
+        throw new Error(`"${OnTriggerType.INTERACTION}" trigger can only have zero or one parameters`);
+    }
+    return new InteractionDeferredTrigger(parameters[0] ?? null, sourceSpan);
+}
+function createImmediateTrigger(parameters, sourceSpan) {
+    if (parameters.length > 0) {
+        throw new Error(`"${OnTriggerType.IMMEDIATE}" trigger cannot have parameters`);
+    }
+    return new ImmediateDeferredTrigger(sourceSpan);
+}
+function createHoverTrigger(parameters, sourceSpan) {
+    if (parameters.length > 0) {
+        throw new Error(`"${OnTriggerType.HOVER}" trigger cannot have parameters`);
+    }
+    return new HoverDeferredTrigger(sourceSpan);
+}
+function createViewportTrigger(parameters, sourceSpan) {
+    // TODO: the RFC has some more potential parameters for `viewport`.
+    if (parameters.length > 1) {
+        throw new Error(`"${OnTriggerType.VIEWPORT}" trigger can only have zero or one parameters`);
+    }
+    return new ViewportDeferredTrigger(parameters[0] ?? null, sourceSpan);
+}
+/** Gets the index within an expression at which the trigger parameters start. */
+function getTriggerParametersStart(value, startPosition = 0) {
+    let hasFoundSeparator = false;
+    for (let i = startPosition; i < value.length; i++) {
+        if (SEPARATOR_PATTERN.test(value[i])) {
+            hasFoundSeparator = true;
+        }
+        else if (hasFoundSeparator) {
+            return i;
+        }
+    }
+    return -1;
+}
+/**
+ * Parses a time expression from a deferred trigger to
+ * milliseconds. Returns null if it cannot be parsed.
+ */
+function parseDeferredTime(value) {
+    const match = value.match(TIME_PATTERN);
+    if (!match) {
+        return null;
+    }
+    const [time, units] = match;
+    return parseInt(time) * (units === 's' ? 1000 : 1);
+}
+
+/** Pattern to identify a `prefetch when` trigger. */
+const PREFETCH_WHEN_PATTERN = /^prefetch\s+when\s/;
+/** Pattern to identify a `prefetch on` trigger. */
+const PREFETCH_ON_PATTERN = /^prefetch\s+on\s/;
+/** Pattern to identify a `minimum` parameter in a block. */
+const MINIMUM_PARAMETER_PATTERN = /^minimum\s/;
+/** Pattern to identify a `after` parameter in a block. */
+const AFTER_PARAMETER_PATTERN = /^after\s/;
+/** Pattern to identify a `when` parameter in a block. */
+const WHEN_PARAMETER_PATTERN = /^when\s/;
+/** Pattern to identify a `on` parameter in a block. */
+const ON_PARAMETER_PATTERN = /^on\s/;
+/** Possible types of secondary deferred blocks. */
+var SecondaryDeferredBlockType;
+(function (SecondaryDeferredBlockType) {
+    SecondaryDeferredBlockType["PLACEHOLDER"] = "placeholder";
+    SecondaryDeferredBlockType["LOADING"] = "loading";
+    SecondaryDeferredBlockType["ERROR"] = "error";
+})(SecondaryDeferredBlockType || (SecondaryDeferredBlockType = {}));
+/** Creates a deferred block from an HTML AST node. */
+function createDeferredBlock(ast, visitor, bindingParser) {
+    const errors = [];
+    const [primaryBlock, ...secondaryBlocks] = ast.blocks;
+    const { triggers, prefetchTriggers } = parsePrimaryTriggers(primaryBlock.parameters, bindingParser, errors);
+    const { placeholder, loading, error } = parseSecondaryBlocks(secondaryBlocks, errors, visitor);
+    return {
+        node: new DeferredBlock(visitAll(visitor, primaryBlock.children), triggers, prefetchTriggers, placeholder, loading, error, ast.sourceSpan, ast.startSourceSpan, ast.endSourceSpan),
+        errors,
+    };
+}
+function parseSecondaryBlocks(blocks, errors, visitor) {
+    let placeholder = null;
+    let loading = null;
+    let error = null;
+    for (const block of blocks) {
+        try {
+            switch (block.name) {
+                case SecondaryDeferredBlockType.PLACEHOLDER:
+                    if (placeholder !== null) {
+                        errors.push(new ParseError(block.startSourceSpan, `"defer" block can only have one "${SecondaryDeferredBlockType.PLACEHOLDER}" block`));
+                    }
+                    else {
+                        placeholder = parsePlaceholderBlock(block, visitor);
+                    }
+                    break;
+                case SecondaryDeferredBlockType.LOADING:
+                    if (loading !== null) {
+                        errors.push(new ParseError(block.startSourceSpan, `"defer" block can only have one "${SecondaryDeferredBlockType.LOADING}" block`));
+                    }
+                    else {
+                        loading = parseLoadingBlock(block, visitor);
+                    }
+                    break;
+                case SecondaryDeferredBlockType.ERROR:
+                    if (error !== null) {
+                        errors.push(new ParseError(block.startSourceSpan, `"defer" block can only have one "${SecondaryDeferredBlockType.ERROR}" block`));
+                    }
+                    else {
+                        error = parseErrorBlock(block, visitor);
+                    }
+                    break;
+                default:
+                    errors.push(new ParseError(block.startSourceSpan, `Unrecognized block "${block.name}"`));
+                    break;
+            }
+        }
+        catch (e) {
+            errors.push(new ParseError(block.startSourceSpan, e.message));
+        }
+    }
+    return { placeholder, loading, error };
+}
+function parsePlaceholderBlock(ast, visitor) {
+    let minimumTime = null;
+    for (const param of ast.parameters) {
+        if (MINIMUM_PARAMETER_PATTERN.test(param.expression)) {
+            const parsedTime = parseDeferredTime(param.expression.slice(getTriggerParametersStart(param.expression)));
+            if (parsedTime === null) {
+                throw new Error(`Could not parse time value of parameter "minimum"`);
+            }
+            minimumTime = parsedTime;
+        }
+        else {
+            throw new Error(`Unrecognized parameter in "${SecondaryDeferredBlockType.PLACEHOLDER}" block: "${param.expression}"`);
+        }
+    }
+    return new DeferredBlockPlaceholder(visitAll(visitor, ast.children), minimumTime, ast.sourceSpan, ast.startSourceSpan, ast.endSourceSpan);
+}
+function parseLoadingBlock(ast, visitor) {
+    let afterTime = null;
+    let minimumTime = null;
+    for (const param of ast.parameters) {
+        if (AFTER_PARAMETER_PATTERN.test(param.expression)) {
+            const parsedTime = parseDeferredTime(param.expression.slice(getTriggerParametersStart(param.expression)));
+            if (parsedTime === null) {
+                throw new Error(`Could not parse time value of parameter "after"`);
+            }
+            afterTime = parsedTime;
+        }
+        else if (MINIMUM_PARAMETER_PATTERN.test(param.expression)) {
+            const parsedTime = parseDeferredTime(param.expression.slice(getTriggerParametersStart(param.expression)));
+            if (parsedTime === null) {
+                throw new Error(`Could not parse time value of parameter "minimum"`);
+            }
+            minimumTime = parsedTime;
+        }
+        else {
+            throw new Error(`Unrecognized parameter in "${SecondaryDeferredBlockType.LOADING}" block: "${param.expression}"`);
+        }
+    }
+    return new DeferredBlockLoading(visitAll(visitor, ast.children), afterTime, minimumTime, ast.sourceSpan, ast.startSourceSpan, ast.endSourceSpan);
+}
+function parseErrorBlock(ast, visitor) {
+    if (ast.parameters.length > 0) {
+        throw new Error(`"${SecondaryDeferredBlockType.ERROR}" block cannot have parameters`);
+    }
+    return new DeferredBlockError(visitAll(visitor, ast.children), ast.sourceSpan, ast.startSourceSpan, ast.endSourceSpan);
+}
+function parsePrimaryTriggers(params, bindingParser, errors) {
+    const triggers = [];
+    const prefetchTriggers = [];
+    for (const param of params) {
+        // The lexer ignores the leading spaces so we can assume
+        // that the expression starts with a keyword.
+        if (WHEN_PARAMETER_PATTERN.test(param.expression)) {
+            const result = parseWhenTrigger(param, bindingParser, errors);
+            result !== null && triggers.push(result);
+        }
+        else if (ON_PARAMETER_PATTERN.test(param.expression)) {
+            triggers.push(...parseOnTrigger(param, errors));
+        }
+        else if (PREFETCH_WHEN_PATTERN.test(param.expression)) {
+            const result = parseWhenTrigger(param, bindingParser, errors);
+            result !== null && prefetchTriggers.push(result);
+        }
+        else if (PREFETCH_ON_PATTERN.test(param.expression)) {
+            prefetchTriggers.push(...parseOnTrigger(param, errors));
+        }
+        else {
+            errors.push(new ParseError(param.sourceSpan, 'Unrecognized trigger'));
+        }
+    }
+    return { triggers, prefetchTriggers };
+}
+
 const BIND_NAME_REGEXP = /^(?:(bind-)|(let-)|(ref-|#)|(on-)|(bindon-)|(@))(.*)$/;
 // Group 1 = "bind-"
 const KW_BIND_IDX = 1;
@@ -16083,7 +17436,16 @@ class HtmlAstToIvyAst {
                 attributes.push(this.visitAttribute(attribute));
             }
         }
-        const children = visitAll(preparsedElement.nonBindable ? NON_BINDABLE_VISITOR : this, element.children);
+        let children;
+        if (preparsedElement.nonBindable) {
+            // The `NonBindableVisitor` may need to return an array of nodes for block groups so we need
+            // to flatten the array here. Avoid doing this for the `HtmlAstToIvyAst` since `flat` creates
+            // a new array.
+            children = visitAll(NON_BINDABLE_VISITOR, element.children).flat(Infinity);
+        }
+        else {
+            children = visitAll(this, element.children);
+        }
         let parsedElement;
         if (preparsedElement.type === PreparsedElementType.NG_CONTENT) {
             // `<ng-content>`
@@ -16181,6 +17543,23 @@ class HtmlAstToIvyAst {
         }
         return null;
     }
+    visitBlockGroup(group, context) {
+        const primaryBlock = group.blocks[0];
+        // The HTML parser ensures that we don't hit this case, but we have an assertion just in case.
+        if (!primaryBlock) {
+            this.reportError('Block group must have at least one block.', group.sourceSpan);
+            return null;
+        }
+        if (primaryBlock.name === 'defer' && this.options.enabledBlockTypes.has(primaryBlock.name)) {
+            const { node, errors } = createDeferredBlock(group, this, this.bindingParser);
+            this.errors.push(...errors);
+            return node;
+        }
+        this.reportError(`Unrecognized block "${primaryBlock.name}".`, primaryBlock.sourceSpan);
+        return null;
+    }
+    visitBlock(block, context) { }
+    visitBlockParameter(parameter, context) { }
     // convert view engine `ParsedProperty` to a format suitable for IVY
     extractAttributes(elementName, properties, i18nPropsMeta) {
         const bound = [];
@@ -16358,6 +17737,25 @@ class NonBindableVisitor {
     visitExpansionCase(expansionCase) {
         return null;
     }
+    visitBlockGroup(group, context) {
+        const nodes = visitAll(this, group.blocks);
+        // We only need to do the end tag since the start will be added as a part of the primary block.
+        if (group.endSourceSpan !== null) {
+            nodes.push(new Text$3(group.endSourceSpan.toString(), group.endSourceSpan));
+        }
+        return nodes;
+    }
+    visitBlock(block, context) {
+        return [
+            // In an ngNonBindable context we treat the opening/closing tags of block as plain text.
+            // This is the as if the `tokenizeBlocks` option was disabled.
+            new Text$3(block.startSourceSpan.toString(), block.startSourceSpan),
+            ...visitAll(this, block.children)
+        ];
+    }
+    visitBlockParameter(parameter, context) {
+        return null;
+    }
 }
 const NON_BINDABLE_VISITOR = new NonBindableVisitor();
 function normalizeAttributeName(attrName) {
@@ -16805,6 +18203,17 @@ class _I18nVisitor {
     visitExpansionCase(_icuCase, _context) {
         throw new Error('Unreachable code');
     }
+    visitBlockGroup(group, context) {
+        const children = visitAll(this, group.blocks, context);
+        const node = new Container(children, group.sourceSpan);
+        return context.visitNodeFn(group, node);
+    }
+    visitBlock(block, context) {
+        const children = visitAll(this, block.children, context);
+        const node = new Container(children, block.sourceSpan);
+        return context.visitNodeFn(block, node);
+    }
+    visitBlockParameter(_parameter, _context) { }
     /**
      * Convert, text and interpolated tokens up into text and placeholder pieces.
      *
@@ -17051,6 +18460,17 @@ class I18nMetaVisitor {
     visitExpansionCase(expansionCase) {
         return expansionCase;
     }
+    visitBlockGroup(group, context) {
+        visitAll(this, group.blocks, context);
+        return group;
+    }
+    visitBlock(block, context) {
+        visitAll(this, block.children, context);
+        return block;
+    }
+    visitBlockParameter(parameter, context) {
+        return parameter;
+    }
     /**
      * Parse the general form `meta` passed into extract the explicit metadata needed to create a
      * `Message`.
@@ -17432,7 +18852,7 @@ function createComponentDefConsts() {
     };
 }
 class TemplateDefinitionBuilder {
-    constructor(constantPool, parentBindingScope, level = 0, contextName, i18nContext, templateIndex, templateName, _namespace, relativeContextFilePath, i18nUseExternalIds, _constants = createComponentDefConsts()) {
+    constructor(constantPool, parentBindingScope, level = 0, contextName, i18nContext, templateIndex, templateName, _namespace, relativeContextFilePath, i18nUseExternalIds, deferBlocks, _constants = createComponentDefConsts()) {
         this.constantPool = constantPool;
         this.level = level;
         this.contextName = contextName;
@@ -17441,6 +18861,7 @@ class TemplateDefinitionBuilder {
         this.templateName = templateName;
         this._namespace = _namespace;
         this.i18nUseExternalIds = i18nUseExternalIds;
+        this.deferBlocks = deferBlocks;
         this._constants = _constants;
         this._dataIndex = 0;
         this._bindingContext = 0;
@@ -17643,7 +19064,7 @@ class TemplateDefinitionBuilder {
             else {
                 const value = prop.value.visit(this._valueConverter);
                 this.allocateBindingSlots(value);
-                if (value instanceof Interpolation) {
+                if (value instanceof Interpolation$1) {
                     const { strings, expressions } = value;
                     const { id, bindings } = this.i18n;
                     const label = assembleI18nBoundString(strings, bindings.size, id);
@@ -17763,7 +19184,7 @@ class TemplateDefinitionBuilder {
             const message = attr.i18n;
             const converted = attr.value.visit(this._valueConverter);
             this.allocateBindingSlots(converted);
-            if (converted instanceof Interpolation) {
+            if (converted instanceof Interpolation$1) {
                 const placeholders = assembleBoundTextPlaceholders(message);
                 const params = placeholdersToParams(placeholders);
                 i18nAttrArgs.push(literal(attr.name), this.i18nTranslate(message, params));
@@ -17983,7 +19404,7 @@ class TemplateDefinitionBuilder {
                     }
                     this.allocateBindingSlots(value);
                     if (inputType === 0 /* BindingType.Property */) {
-                        if (value instanceof Interpolation) {
+                        if (value instanceof Interpolation$1) {
                             // prop="{{value}}" and friends
                             this.interpolatedUpdateInstruction(getPropertyInterpolationExpression(value), elementIndex, attrName, input, value, params);
                         }
@@ -17997,12 +19418,12 @@ class TemplateDefinitionBuilder {
                         }
                     }
                     else if (inputType === 1 /* BindingType.Attribute */) {
-                        if (value instanceof Interpolation && getInterpolationArgsLength(value) > 1) {
+                        if (value instanceof Interpolation$1 && getInterpolationArgsLength(value) > 1) {
                             // attr.name="text{{value}}" and friends
                             this.interpolatedUpdateInstruction(getAttributeInterpolationExpression(value), elementIndex, attrName, input, value, params);
                         }
                         else {
-                            const boundValue = value instanceof Interpolation ? value.expressions[0] : value;
+                            const boundValue = value instanceof Interpolation$1 ? value.expressions[0] : value;
                             // [attr.name]="value" or attr.name="{{value}}"
                             // Collect the attribute bindings so that they can be chained at the end.
                             attributeBindings.push({
@@ -18072,7 +19493,7 @@ class TemplateDefinitionBuilder {
             parameters.push(importExpr(Identifiers.templateRefExtractor));
         }
         // Create the template function
-        const templateVisitor = new TemplateDefinitionBuilder(this.constantPool, this._bindingScope, this.level + 1, contextName, this.i18n, templateIndex, templateName, this._namespace, this.fileBasedI18nSuffix, this.i18nUseExternalIds, this._constants);
+        const templateVisitor = new TemplateDefinitionBuilder(this.constantPool, this._bindingScope, this.level + 1, contextName, this.i18n, templateIndex, templateName, this._namespace, this.fileBasedI18nSuffix, this.i18nUseExternalIds, this.deferBlocks, this._constants);
         // Nested templates must not be visited until after their parent templates have completed
         // processing, so they are queued here until after the initial pass. Otherwise, we wouldn't
         // be able to support bindings in nested templates to local refs that occur after the
@@ -18115,7 +19536,7 @@ class TemplateDefinitionBuilder {
         if (this.i18n) {
             const value = text.value.visit(this._valueConverter);
             this.allocateBindingSlots(value);
-            if (value instanceof Interpolation) {
+            if (value instanceof Interpolation$1) {
                 this.i18n.appendBoundText(text.i18n);
                 this.i18nAppendBindings(value.expressions);
             }
@@ -18125,7 +19546,7 @@ class TemplateDefinitionBuilder {
         this.creationInstruction(text.sourceSpan, Identifiers.text, [literal(nodeIndex)]);
         const value = text.value.visit(this._valueConverter);
         this.allocateBindingSlots(value);
-        if (value instanceof Interpolation) {
+        if (value instanceof Interpolation$1) {
             this.updateInstructionWithAdvance(nodeIndex, text.sourceSpan, getTextInterpolationExpression(value), () => this.getUpdateInstructionArguments(value));
         }
         else {
@@ -18182,6 +19603,47 @@ class TemplateDefinitionBuilder {
         }
         return null;
     }
+    visitDeferredBlock(deferred) {
+        const templateIndex = this.allocateDataSlot();
+        const deferredDeps = this.deferBlocks.get(deferred);
+        const contextName = `${this.contextName}_Defer_${templateIndex}`;
+        const depsFnName = `${contextName}_DepsFn`;
+        const parameters = [
+            literal(templateIndex),
+            deferredDeps ? variable(depsFnName) : TYPED_NULL_EXPR,
+        ];
+        if (deferredDeps) {
+            // This defer block has deps for which we need to generate dynamic imports.
+            const dependencyExp = [];
+            for (const deferredDep of deferredDeps) {
+                if (deferredDep.isDeferrable) {
+                    // Callback function, e.g. `function(m) { return m.MyCmp; }`.
+                    const innerFn = fn([new FnParam('m', DYNAMIC_TYPE)], [new ReturnStatement(variable('m').prop(deferredDep.symbolName))]);
+                    const fileName = deferredDep.importPath;
+                    // Dynamic import, e.g. `import('./a').then(...)`.
+                    const importExpr = (new DynamicImportExpr(fileName)).prop('then').callFn([innerFn]);
+                    dependencyExp.push(importExpr);
+                }
+                else {
+                    // Non-deferrable symbol, just use a reference to the type.
+                    dependencyExp.push(deferredDep.type);
+                }
+            }
+            const depsFnBody = [];
+            depsFnBody.push(new ReturnStatement(literalArr(dependencyExp)));
+            const depsFnExpr = fn([] /* args */, depsFnBody, INFERRED_TYPE, null, depsFnName);
+            this.constantPool.statements.push(depsFnExpr.toDeclStmt(depsFnName));
+        }
+        // e.g. `defer(1, MyComp_Defer_1_DepsFn, ...)`
+        this.creationInstruction(deferred.sourceSpan, Identifiers.defer, () => {
+            return trimTrailingNulls(parameters);
+        });
+    }
+    // TODO: implement nested deferred block instructions.
+    visitDeferredTrigger(trigger) { }
+    visitDeferredBlockPlaceholder(block) { }
+    visitDeferredBlockError(block) { }
+    visitDeferredBlockLoading(block) { }
     allocateDataSlot() {
         return this._dataIndex++;
     }
@@ -18213,7 +19675,7 @@ class TemplateDefinitionBuilder {
                 continue;
             }
             this.allocateBindingSlots(value);
-            if (value instanceof Interpolation) {
+            if (value instanceof Interpolation$1) {
                 // Params typically contain attribute namespace and value sanitizer, which is applicable
                 // for regular HTML elements, but not applicable for <ng-template> (since props act as
                 // inputs to directives), so keep params array empty.
@@ -18245,7 +19707,7 @@ class TemplateDefinitionBuilder {
         if (instruction) {
             for (const call of instruction.calls) {
                 allocateBindingSlots += call.allocateBindingSlots;
-                this.updateInstructionWithAdvance(elementIndex, call.sourceSpan, instruction.reference, () => call.params(value => (call.supportsInterpolation && value instanceof Interpolation) ?
+                this.updateInstructionWithAdvance(elementIndex, call.sourceSpan, instruction.reference, () => call.params(value => (call.supportsInterpolation && value instanceof Interpolation$1) ?
                     this.getUpdateInstructionArguments(value) :
                     this.convertPropertyBinding(value)));
             }
@@ -18278,7 +19740,7 @@ class TemplateDefinitionBuilder {
         return originalSlots;
     }
     allocateBindingSlots(value) {
-        this._bindingSlots += value instanceof Interpolation ? value.expressions.length : 1;
+        this._bindingSlots += value instanceof Interpolation$1 ? value.expressions.length : 1;
     }
     /**
      * Gets an expression that refers to the implicit receiver. The implicit
@@ -18918,7 +20380,12 @@ function parseTemplate(template, templateUrl, options = {}) {
     const { interpolationConfig, preserveWhitespaces, enableI18nLegacyMessageIdFormat } = options;
     const bindingParser = makeBindingParser(interpolationConfig);
     const htmlParser = new HtmlParser();
-    const parseResult = htmlParser.parse(template, templateUrl, { leadingTriviaChars: LEADING_TRIVIA_CHARS, ...options, tokenizeExpansionForms: true });
+    const parseResult = htmlParser.parse(template, templateUrl, {
+        leadingTriviaChars: LEADING_TRIVIA_CHARS,
+        ...options,
+        tokenizeExpansionForms: true,
+        tokenizeBlocks: options.enabledBlockTypes != null && options.enabledBlockTypes.size > 0,
+    });
     if (!options.alwaysAttemptHtmlToR3AstConversion && parseResult.errors &&
         parseResult.errors.length > 0) {
         const parsedTemplate = {
@@ -18969,7 +20436,10 @@ function parseTemplate(template, templateUrl, options = {}) {
             rootNodes = visitAll(new I18nMetaVisitor(interpolationConfig, /* keepI18nAttrs */ false), rootNodes);
         }
     }
-    const { nodes, errors, styleUrls, styles, ngContentSelectors, commentNodes } = htmlAstToRender3Ast(rootNodes, bindingParser, { collectCommentNodes: !!options.collectCommentNodes });
+    const { nodes, errors, styleUrls, styles, ngContentSelectors, commentNodes } = htmlAstToRender3Ast(rootNodes, bindingParser, {
+        collectCommentNodes: !!options.collectCommentNodes,
+        enabledBlockTypes: options.enabledBlockTypes || new Set(),
+    });
     errors.push(...parseResult.errors, ...i18nMetaResult.errors);
     const parsedTemplate = {
         interpolationConfig,
@@ -19223,7 +20693,7 @@ function compileComponentFromMetadata(meta, constantPool, bindingParser) {
         // This is the main path currently used in compilation, which compiles the template with the
         // legacy `TemplateDefinitionBuilder`.
         const template = meta.template;
-        const templateBuilder = new TemplateDefinitionBuilder(constantPool, BindingScope.createRootScope(), 0, templateTypeName, null, null, templateName, Identifiers.namespaceHTML, meta.relativeContextFilePath, meta.i18nUseExternalIds);
+        const templateBuilder = new TemplateDefinitionBuilder(constantPool, BindingScope.createRootScope(), 0, templateTypeName, null, null, templateName, Identifiers.namespaceHTML, meta.relativeContextFilePath, meta.i18nUseExternalIds, meta.deferBlocks);
         const templateFunctionExpression = templateBuilder.buildTemplateFunction(template.nodes, []);
         // We need to provide this so that dynamically generated components know what
         // projected content blocks to pass through to the component when it is
@@ -19472,6 +20942,9 @@ function createViewQueriesFunction(viewQueries, constantPool, name) {
 }
 // Return a host binding function or null if one is not necessary.
 function createHostBindingsFunction(hostBindingsMetadata, typeSourceSpan, bindingParser, constantPool, selector, name, definitionMap) {
+    const bindings = bindingParser.createBoundHostProperties(hostBindingsMetadata.properties, typeSourceSpan);
+    // Calculate host event bindings
+    const eventBindings = bindingParser.createDirectiveHostEventAsts(hostBindingsMetadata.listeners, typeSourceSpan);
     const bindingContext = variable(CONTEXT_NAME);
     const styleBuilder = new StylingBuilder(bindingContext);
     const { styleAttr, classAttr } = hostBindingsMetadata.specialAttributes;
@@ -19485,13 +20958,10 @@ function createHostBindingsFunction(hostBindingsMetadata, typeSourceSpan, bindin
     const updateInstructions = [];
     const updateVariables = [];
     const hostBindingSourceSpan = typeSourceSpan;
-    // Calculate host event bindings
-    const eventBindings = bindingParser.createDirectiveHostEventAsts(hostBindingsMetadata.listeners, hostBindingSourceSpan);
     if (eventBindings && eventBindings.length) {
         createInstructions.push(...createHostListeners(eventBindings, name));
     }
     // Calculate the host property bindings
-    const bindings = bindingParser.createBoundHostProperties(hostBindingsMetadata.properties, hostBindingSourceSpan);
     const allOtherBindings = [];
     // We need to calculate the total amount of binding slots required by
     // all the instructions together before any value conversions happen.
@@ -19834,6 +21304,7 @@ function createHostDirectivesMappingArray(mapping) {
 class ResourceLoader {
 }
 
+let enabledBlockTypes;
 class CompilerFacadeImpl {
     constructor(jitEvaluator = new JitEvaluator()) {
         this.jitEvaluator = jitEvaluator;
@@ -19954,6 +21425,10 @@ class CompilerFacadeImpl {
             template,
             declarations: facade.declarations.map(convertDeclarationFacadeToMetadata),
             declarationListEmitMode: 0 /* DeclarationListEmitMode.Direct */,
+            // TODO: leaving empty in JIT mode for now,
+            // to be implemented as one of the next steps.
+            deferBlocks: new Map(),
+            deferrableDeclToImportDecl: new Map(),
             styles: [...facade.styles, ...template.styles],
             encapsulation: facade.encapsulation,
             interpolation,
@@ -20184,6 +21659,10 @@ function convertDeclareComponentFacadeToMetadata(decl, typeSourceSpan, sourceMap
         viewProviders: decl.viewProviders !== undefined ? new WrappedNodeExpr(decl.viewProviders) :
             null,
         animations: decl.animations !== undefined ? new WrappedNodeExpr(decl.animations) : null,
+        // TODO: leaving empty in JIT mode for now,
+        // to be implemented as one of the next steps.
+        deferBlocks: new Map(),
+        deferrableDeclToImportDecl: new Map(),
         changeDetection: decl.changeDetection ?? exports.ChangeDetectionStrategy.Default,
         encapsulation: decl.encapsulation ?? exports.ViewEncapsulation.Emulated,
         interpolation,
@@ -20231,7 +21710,7 @@ function convertPipeDeclarationToMetadata(pipe) {
 function parseJitTemplate(template, typeName, sourceMapUrl, preserveWhitespaces, interpolation) {
     const interpolationConfig = interpolation ? InterpolationConfig.fromArray(interpolation) : DEFAULT_INTERPOLATION_CONFIG;
     // Parse the template and check for errors.
-    const parsed = parseTemplate(template, sourceMapUrl, { preserveWhitespaces, interpolationConfig });
+    const parsed = parseTemplate(template, sourceMapUrl, { preserveWhitespaces, interpolationConfig, enabledBlockTypes });
     if (parsed.errors !== null) {
         const errors = parsed.errors.map(err => err.toString()).join(', ');
         throw new Error(`Errors during JIT compilation of template for ${typeName}: ${errors}`);
@@ -20420,7 +21899,7 @@ function publishFacade(global) {
  * @description
  * Entry point for all public APIs of the compiler package.
  */
-const VERSION = new Version('16.1.4');
+const VERSION = new Version('16.2.3');
 
 class CompilerConfig {
     constructor({ defaultEncapsulation = exports.ViewEncapsulation.Emulated, useJit = true, missingTranslation = null, preserveWhitespaces, strictInjectionParameters } = {}) {
@@ -20641,6 +22120,13 @@ class _Visitor {
     visitAttribute(attribute, context) {
         throw new Error('unreachable code');
     }
+    visitBlockGroup(group, context) {
+        visitAll(this, group.blocks, context);
+    }
+    visitBlock(block, context) {
+        visitAll(this, block.children, context);
+    }
+    visitBlockParameter(parameter, context) { }
     _init(mode, interpolationConfig) {
         this._mode = mode;
         this._inI18nBlock = false;
@@ -20853,8 +22339,9 @@ class XmlParser extends Parser {
     constructor() {
         super(getXmlTagDefinition);
     }
-    parse(source, url, options) {
-        return super.parse(source, url, options);
+    parse(source, url, options = {}) {
+        // Blocks aren't supported in an XML context.
+        return super.parse(source, url, { ...options, tokenizeBlocks: false });
     }
 }
 
@@ -21038,6 +22525,9 @@ class XliffParser {
     visitComment(comment, context) { }
     visitExpansion(expansion, context) { }
     visitExpansionCase(expansionCase, context) { }
+    visitBlockGroup(group, context) { }
+    visitBlock(block, context) { }
+    visitBlockParameter(parameter, context) { }
     _addError(node, message) {
         this._errors.push(new I18nError(node.sourceSpan, message));
     }
@@ -21088,6 +22578,9 @@ class XmlToI18n$2 {
     }
     visitComment(comment, context) { }
     visitAttribute(attribute, context) { }
+    visitBlockGroup(group, context) { }
+    visitBlock(block, context) { }
+    visitBlockParameter(parameter, context) { }
     _addError(node, message) {
         this._errors.push(new I18nError(node.sourceSpan, message));
     }
@@ -21311,6 +22804,9 @@ class Xliff2Parser {
     visitComment(comment, context) { }
     visitExpansion(expansion, context) { }
     visitExpansionCase(expansionCase, context) { }
+    visitBlockGroup(group, context) { }
+    visitBlock(block, context) { }
+    visitBlockParameter(parameter, context) { }
     _addError(node, message) {
         this._errors.push(new I18nError(node.sourceSpan, message));
     }
@@ -21378,6 +22874,9 @@ class XmlToI18n$1 {
     }
     visitComment(comment, context) { }
     visitAttribute(attribute, context) { }
+    visitBlockGroup(group, context) { }
+    visitBlock(block, context) { }
+    visitBlockParameter(parameter, context) { }
     _addError(node, message) {
         this._errors.push(new I18nError(node.sourceSpan, message));
     }
@@ -21512,6 +23011,9 @@ class XtbParser {
     visitComment(comment, context) { }
     visitExpansion(expansion, context) { }
     visitExpansionCase(expansionCase, context) { }
+    visitBlockGroup(group, context) { }
+    visitBlock(block, context) { }
+    visitBlockParameter(block, context) { }
     _addError(node, message) {
         this._errors.push(new I18nError(node.sourceSpan, message));
     }
@@ -21560,6 +23062,9 @@ class XmlToI18n {
     }
     visitComment(comment, context) { }
     visitAttribute(attribute, context) { }
+    visitBlockGroup(group, context) { }
+    visitBlock(block, context) { }
+    visitBlockParameter(block, context) { }
     _addError(node, message) {
         this._errors.push(new I18nError(node.sourceSpan, message));
     }
@@ -21862,11 +23367,11 @@ class R3TargetBinder {
         //   - bindings: Map of inputs, outputs, and attributes to the directive/element that claims
         //     them. TODO(alxhub): handle multiple directives claiming an input/output/etc.
         //   - references: Map of #references to their targets.
-        const { directives, bindings, references } = DirectiveBinder.apply(target.template, this.directiveMatcher);
+        const { directives, eagerDirectives, bindings, references } = DirectiveBinder.apply(target.template, this.directiveMatcher);
         // Finally, run the TemplateBinder to bind references, variables, and other entities within the
         // template. This extracts all the metadata that doesn't depend on directive matching.
-        const { expressions, symbols, nestingLevel, usedPipes } = TemplateBinder.applyWithScope(target.template, scope);
-        return new R3BoundTarget(target, directives, bindings, references, expressions, symbols, nestingLevel, templateEntities, usedPipes);
+        const { expressions, symbols, nestingLevel, usedPipes, eagerPipes, deferBlocks } = TemplateBinder.applyWithScope(target.template, scope);
+        return new R3BoundTarget(target, directives, eagerDirectives, bindings, references, expressions, symbols, nestingLevel, templateEntities, usedPipes, eagerPipes, deferBlocks);
     }
 }
 /**
@@ -21939,6 +23444,21 @@ class Scope {
         // Declare the variable if it's not already.
         this.maybeDeclare(reference);
     }
+    visitDeferredBlock(deferred) {
+        deferred.children.forEach(node => node.visit(this));
+        deferred.placeholder?.visit(this);
+        deferred.loading?.visit(this);
+        deferred.error?.visit(this);
+    }
+    visitDeferredBlockPlaceholder(block) {
+        block.children.forEach(node => node.visit(this));
+    }
+    visitDeferredBlockError(block) {
+        block.children.forEach(node => node.visit(this));
+    }
+    visitDeferredBlockLoading(block) {
+        block.children.forEach(node => node.visit(this));
+    }
     // Unused visitors.
     visitContent(content) { }
     visitBoundAttribute(attr) { }
@@ -21947,6 +23467,7 @@ class Scope {
     visitText(text) { }
     visitTextAttribute(attr) { }
     visitIcu(icu) { }
+    visitDeferredTrigger(trigger) { }
     maybeDeclare(thing) {
         // Declare something with a name, as long as that name isn't taken.
         if (!this.namedEntities.has(thing.name)) {
@@ -21991,11 +23512,14 @@ class Scope {
  * Usually used via the static `apply()` method.
  */
 class DirectiveBinder {
-    constructor(matcher, directives, bindings, references) {
+    constructor(matcher, directives, eagerDirectives, bindings, references) {
         this.matcher = matcher;
         this.directives = directives;
+        this.eagerDirectives = eagerDirectives;
         this.bindings = bindings;
         this.references = references;
+        // Indicates whether we are visiting elements within a {#defer} block
+        this.isInDeferBlock = false;
     }
     /**
      * Process a template (list of `Node`s) and perform directive matching against each node.
@@ -22013,9 +23537,10 @@ class DirectiveBinder {
         const directives = new Map();
         const bindings = new Map();
         const references = new Map();
-        const matcher = new DirectiveBinder(selectorMatcher, directives, bindings, references);
+        const eagerDirectives = [];
+        const matcher = new DirectiveBinder(selectorMatcher, directives, eagerDirectives, bindings, references);
         matcher.ingest(template);
-        return { directives, bindings, references };
+        return { directives, eagerDirectives, bindings, references };
     }
     ingest(template) {
         template.forEach(node => node.visit(this));
@@ -22035,6 +23560,9 @@ class DirectiveBinder {
         this.matcher.match(cssSelector, (_selector, results) => directives.push(...results));
         if (directives.length > 0) {
             this.directives.set(node, directives);
+            if (!this.isInDeferBlock) {
+                this.eagerDirectives.push(...directives);
+            }
         }
         // Resolve any references that are created on this node.
         node.references.forEach(ref => {
@@ -22084,6 +23612,23 @@ class DirectiveBinder {
         // Recurse into the node's children.
         node.children.forEach(child => child.visit(this));
     }
+    visitDeferredBlock(deferred) {
+        this.isInDeferBlock = true;
+        deferred.children.forEach(child => child.visit(this));
+        this.isInDeferBlock = false;
+        deferred.placeholder?.visit(this);
+        deferred.loading?.visit(this);
+        deferred.error?.visit(this);
+    }
+    visitDeferredBlockPlaceholder(block) {
+        block.children.forEach(child => child.visit(this));
+    }
+    visitDeferredBlockError(block) {
+        block.children.forEach(child => child.visit(this));
+    }
+    visitDeferredBlockLoading(block) {
+        block.children.forEach(child => child.visit(this));
+    }
     // Unused visitors.
     visitContent(content) { }
     visitVariable(variable) { }
@@ -22095,6 +23640,7 @@ class DirectiveBinder {
     visitText(text) { }
     visitBoundText(text) { }
     visitIcu(icu) { }
+    visitDeferredTrigger(trigger) { }
 }
 /**
  * Processes a template and extract metadata about expressions and symbols within.
@@ -22106,15 +23652,19 @@ class DirectiveBinder {
  * by overridden methods from that visitor.
  */
 class TemplateBinder extends RecursiveAstVisitor {
-    constructor(bindings, symbols, usedPipes, nestingLevel, scope, template, level) {
+    constructor(bindings, symbols, usedPipes, eagerPipes, deferBlocks, nestingLevel, scope, template, level) {
         super();
         this.bindings = bindings;
         this.symbols = symbols;
         this.usedPipes = usedPipes;
+        this.eagerPipes = eagerPipes;
+        this.deferBlocks = deferBlocks;
         this.nestingLevel = nestingLevel;
         this.scope = scope;
         this.template = template;
         this.level = level;
+        // Indicates whether we are visiting elements within a {#defer} block
+        this.isInDeferBlock = false;
         // Save a bit of processing time by constructing this closure in advance.
         this.visitNode = (node) => node.visit(this);
     }
@@ -22132,7 +23682,7 @@ class TemplateBinder extends RecursiveAstVisitor {
     /**
      * Process a template and extract metadata about expressions and symbols within.
      *
-     * @param template the nodes of the template to process
+     * @param nodes the nodes of the template to process
      * @param scope the `Scope` of the template being processed.
      * @returns three maps which contain metadata about the template: `expressions` which interprets
      * special `AST` nodes in expressions as pointing to references or variables declared within the
@@ -22141,15 +23691,18 @@ class TemplateBinder extends RecursiveAstVisitor {
      * nesting level (how many levels deep within the template structure the `Template` is), starting
      * at 1.
      */
-    static applyWithScope(template, scope) {
+    static applyWithScope(nodes, scope) {
         const expressions = new Map();
         const symbols = new Map();
         const nestingLevel = new Map();
         const usedPipes = new Set();
+        const eagerPipes = new Set();
+        const template = nodes instanceof Template ? nodes : null;
+        const deferBlocks = new Set();
         // The top-level template has nesting level 0.
-        const binder = new TemplateBinder(expressions, symbols, usedPipes, nestingLevel, scope, template instanceof Template ? template : null, 0);
-        binder.ingest(template);
-        return { expressions, symbols, nestingLevel, usedPipes };
+        const binder = new TemplateBinder(expressions, symbols, usedPipes, eagerPipes, deferBlocks, nestingLevel, scope, template, 0);
+        binder.ingest(nodes);
+        return { expressions, symbols, nestingLevel, usedPipes, eagerPipes, deferBlocks };
     }
     ingest(template) {
         if (template instanceof Template) {
@@ -22180,7 +23733,7 @@ class TemplateBinder extends RecursiveAstVisitor {
         template.references.forEach(this.visitNode);
         // Next, recurse into the template using its scope, and bumping the nesting level up by one.
         const childScope = this.scope.getChildScope(template);
-        const binder = new TemplateBinder(this.bindings, this.symbols, this.usedPipes, this.nestingLevel, childScope, template, this.level + 1);
+        const binder = new TemplateBinder(this.bindings, this.symbols, this.usedPipes, this.eagerPipes, this.deferBlocks, this.nestingLevel, childScope, template, this.level + 1);
         binder.ingest(template);
     }
     visitVariable(variable) {
@@ -22210,11 +23763,39 @@ class TemplateBinder extends RecursiveAstVisitor {
     visitBoundEvent(event) {
         event.handler.visit(this);
     }
+    visitDeferredBlock(deferred) {
+        this.deferBlocks.add(deferred);
+        this.isInDeferBlock = true;
+        deferred.children.forEach(this.visitNode);
+        this.isInDeferBlock = false;
+        deferred.triggers.forEach(this.visitNode);
+        deferred.prefetchTriggers.forEach(this.visitNode);
+        deferred.placeholder && this.visitNode(deferred.placeholder);
+        deferred.loading && this.visitNode(deferred.loading);
+        deferred.error && this.visitNode(deferred.error);
+    }
+    visitDeferredTrigger(trigger) {
+        if (trigger instanceof BoundDeferredTrigger) {
+            trigger.value.visit(this);
+        }
+    }
+    visitDeferredBlockPlaceholder(block) {
+        block.children.forEach(this.visitNode);
+    }
+    visitDeferredBlockError(block) {
+        block.children.forEach(this.visitNode);
+    }
+    visitDeferredBlockLoading(block) {
+        block.children.forEach(this.visitNode);
+    }
     visitBoundText(text) {
         text.value.visit(this);
     }
     visitPipe(ast, context) {
         this.usedPipes.add(ast.name);
+        if (!this.isInDeferBlock) {
+            this.eagerPipes.add(ast.name);
+        }
         return super.visitPipe(ast, context);
     }
     // These five types of AST expressions can refer to expression roots, which could be variables
@@ -22251,9 +23832,10 @@ class TemplateBinder extends RecursiveAstVisitor {
  * See `BoundTarget` for documentation on the individual methods.
  */
 class R3BoundTarget {
-    constructor(target, directives, bindings, references, exprTargets, symbols, nestingLevel, templateEntities, usedPipes) {
+    constructor(target, directives, eagerDirectives, bindings, references, exprTargets, symbols, nestingLevel, templateEntities, usedPipes, eagerPipes, deferredBlocks) {
         this.target = target;
         this.directives = directives;
+        this.eagerDirectives = eagerDirectives;
         this.bindings = bindings;
         this.references = references;
         this.exprTargets = exprTargets;
@@ -22261,6 +23843,8 @@ class R3BoundTarget {
         this.nestingLevel = nestingLevel;
         this.templateEntities = templateEntities;
         this.usedPipes = usedPipes;
+        this.eagerPipes = eagerPipes;
+        this.deferredBlocks = deferredBlocks;
     }
     getEntitiesInTemplateScope(template) {
         return this.templateEntities.get(template) ?? new Set();
@@ -22288,9 +23872,19 @@ class R3BoundTarget {
         this.directives.forEach(dirs => dirs.forEach(dir => set.add(dir)));
         return Array.from(set.values());
     }
+    getEagerlyUsedDirectives() {
+        const set = new Set(this.eagerDirectives);
+        return Array.from(set.values());
+    }
     getUsedPipes() {
         return Array.from(this.usedPipes);
     }
+    getEagerlyUsedPipes() {
+        return Array.from(this.eagerPipes);
+    }
+    getDeferBlocks() {
+        return Array.from(this.deferredBlocks);
+    }
 }
 function extractTemplateEntities(rootScope) {
     const entityMap = new Map();
@@ -22348,7 +23942,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('16.1.4'));
+    definitionMap.set('version', literal('16.2.3'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', metadata.type);
     definitionMap.set('decorators', metadata.decorators);
@@ -22434,7 +24028,7 @@ function compileDependency(dep) {
  *
  * Do not include any prerelease in these versions as they are ignored.
  */
-const MINIMUM_PARTIAL_LINKER_VERSION$5 = '14.0.0';
+const MINIMUM_PARTIAL_LINKER_VERSION$5 = '16.1.0';
 /**
  * Compile a directive declaration defined by the `R3DirectiveMetadata`.
  */
@@ -22450,8 +24044,13 @@ function compileDeclareDirectiveFromMetadata(meta) {
  */
 function createDirectiveDefinitionMap(meta) {
     const definitionMap = new DefinitionMap();
-    definitionMap.set('minVersion', literal(MINIMUM_PARTIAL_LINKER_VERSION$5));
-    definitionMap.set('version', literal('16.1.4'));
+    const hasTransformFunctions = Object.values(meta.inputs).some(input => input.transformFunction !== null);
+    // Note: in order to allow consuming Angular libraries that have been compiled with 16.1+ in
+    // Angular 16.0, we only force a minimum version of 16.1 if input transform feature as introduced
+    // 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('16.2.3'));
     // e.g. `type: MyDirective`
     definitionMap.set('type', meta.type.value);
     if (meta.isStandalone) {
@@ -22676,7 +24275,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('16.1.4'));
+    definitionMap.set('version', literal('16.2.3'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', meta.type.value);
     definitionMap.set('deps', compileDependencies(meta.deps));
@@ -22711,7 +24310,7 @@ function compileDeclareInjectableFromMetadata(meta) {
 function createInjectableDefinitionMap(meta) {
     const definitionMap = new DefinitionMap();
     definitionMap.set('minVersion', literal(MINIMUM_PARTIAL_LINKER_VERSION$3));
-    definitionMap.set('version', literal('16.1.4'));
+    definitionMap.set('version', literal('16.2.3'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', meta.type.value);
     // Only generate providedIn property if it has a non-null value
@@ -22762,7 +24361,7 @@ function compileDeclareInjectorFromMetadata(meta) {
 function createInjectorDefinitionMap(meta) {
     const definitionMap = new DefinitionMap();
     definitionMap.set('minVersion', literal(MINIMUM_PARTIAL_LINKER_VERSION$2));
-    definitionMap.set('version', literal('16.1.4'));
+    definitionMap.set('version', literal('16.2.3'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', meta.type.value);
     definitionMap.set('providers', meta.providers);
@@ -22795,7 +24394,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('16.1.4'));
+    definitionMap.set('version', literal('16.2.3'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', meta.type.value);
     // We only generate the keys in the metadata if the arrays contain values.
@@ -22846,7 +24445,7 @@ function compileDeclarePipeFromMetadata(meta) {
 function createPipeDefinitionMap(meta) {
     const definitionMap = new DefinitionMap();
     definitionMap.set('minVersion', literal(MINIMUM_PARTIAL_LINKER_VERSION));
-    definitionMap.set('version', literal('16.1.4'));
+    definitionMap.set('version', literal('16.2.3'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     // e.g. `type: MyPipe`
     definitionMap.set('type', meta.type.value);
@@ -22879,6 +24478,9 @@ exports.Attribute = Attribute;
 exports.Binary = Binary;
 exports.BinaryOperatorExpr = BinaryOperatorExpr;
 exports.BindingPipe = BindingPipe;
+exports.Block = Block;
+exports.BlockGroup = BlockGroup;
+exports.BlockParameter = BlockParameter;
 exports.BoundElementProperty = BoundElementProperty;
 exports.BuiltinType = BuiltinType;
 exports.CUSTOM_ELEMENTS_SCHEMA = CUSTOM_ELEMENTS_SCHEMA;
@@ -22896,11 +24498,12 @@ exports.DYNAMIC_TYPE = DYNAMIC_TYPE;
 exports.DeclareFunctionStmt = DeclareFunctionStmt;
 exports.DeclareVarStmt = DeclareVarStmt;
 exports.DomElementSchemaRegistry = DomElementSchemaRegistry;
+exports.DynamicImportExpr = DynamicImportExpr;
 exports.EOF = EOF;
 exports.Element = Element;
 exports.ElementSchemaRegistry = ElementSchemaRegistry;
 exports.EmitterVisitorContext = EmitterVisitorContext;
-exports.EmptyExpr = EmptyExpr;
+exports.EmptyExpr = EmptyExpr$1;
 exports.Expansion = Expansion;
 exports.ExpansionCase = ExpansionCase;
 exports.Expression = Expression;
@@ -22916,7 +24519,7 @@ exports.I18NHtmlParser = I18NHtmlParser;
 exports.IfStmt = IfStmt;
 exports.ImplicitReceiver = ImplicitReceiver;
 exports.InstantiateExpr = InstantiateExpr;
-exports.Interpolation = Interpolation;
+exports.Interpolation = Interpolation$1;
 exports.InterpolationConfig = InterpolationConfig;
 exports.InvokeFunctionExpr = InvokeFunctionExpr;
 exports.JSDocComment = JSDocComment;
@@ -22980,17 +24583,29 @@ exports.TemplateLiteralElement = TemplateLiteralElement;
 exports.Text = Text;
 exports.ThisReceiver = ThisReceiver;
 exports.TmplAstBoundAttribute = BoundAttribute;
+exports.TmplAstBoundDeferredTrigger = BoundDeferredTrigger;
 exports.TmplAstBoundEvent = BoundEvent;
 exports.TmplAstBoundText = BoundText;
 exports.TmplAstContent = Content;
+exports.TmplAstDeferredBlock = DeferredBlock;
+exports.TmplAstDeferredBlockError = DeferredBlockError;
+exports.TmplAstDeferredBlockLoading = DeferredBlockLoading;
+exports.TmplAstDeferredBlockPlaceholder = DeferredBlockPlaceholder;
+exports.TmplAstDeferredTrigger = DeferredTrigger;
 exports.TmplAstElement = Element$1;
+exports.TmplAstHoverDeferredTrigger = HoverDeferredTrigger;
 exports.TmplAstIcu = Icu$1;
+exports.TmplAstIdleDeferredTrigger = IdleDeferredTrigger;
+exports.TmplAstImmediateDeferredTrigger = ImmediateDeferredTrigger;
+exports.TmplAstInteractionDeferredTrigger = InteractionDeferredTrigger;
 exports.TmplAstRecursiveVisitor = RecursiveVisitor$1;
 exports.TmplAstReference = Reference;
 exports.TmplAstTemplate = Template;
 exports.TmplAstText = Text$3;
 exports.TmplAstTextAttribute = TextAttribute;
+exports.TmplAstTimerDeferredTrigger = TimerDeferredTrigger;
 exports.TmplAstVariable = Variable;
+exports.TmplAstViewportDeferredTrigger = ViewportDeferredTrigger;
 exports.Token = Token;
 exports.TransplantedType = TransplantedType;
 exports.TreeError = TreeError;