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

package/fesm2022/compiler.mjs

@@ -1,5 +1,5 @@
 /**
- * @license Angular v16.2.0-next.1
+ * @license Angular v16.2.0-next.3
  * (c) 2010-2022 Google LLC. https://angular.io/
  * License: MIT
  */
@@ -1339,6 +1339,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;
@@ -1617,6 +1621,24 @@ class ConditionalExpr extends Expression {
         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) {
         super(BOOL_TYPE, sourceSpan);
@@ -1721,6 +1743,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;
@@ -2001,6 +2027,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);
@@ -2239,6 +2268,7 @@ var output_ast = /*#__PURE__*/Object.freeze({
     ExternalExpr: ExternalExpr,
     ExternalReference: ExternalReference,
     ConditionalExpr: ConditionalExpr,
+    DynamicImportExpr: DynamicImportExpr,
     NotExpr: NotExpr,
     FnParam: FnParam,
     FunctionExpr: FunctionExpr,
@@ -2817,13 +2847,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;
 function newArray(size, value) {
     const list = [];
     for (let i = 0; i < size; i++) {
@@ -3305,6 +3329,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);
@@ -3878,6 +3905,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.
@@ -3965,6 +4082,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) { }
@@ -3974,6 +4108,7 @@ class RecursiveVisitor$1 {
     visitText(text) { }
     visitBoundText(text) { }
     visitIcu(icu) { }
+    visitDeferredTrigger(trigger) { }
 }
 function visitAll$1(visitor, nodes) {
     const result = [];
@@ -5717,31 +5852,49 @@ var R3SelectorScopeMode;
      */
     R3SelectorScopeMode[R3SelectorScopeMode["Omit"] = 2] = "Omit";
 })(R3SelectorScopeMode || (R3SelectorScopeMode = {}));
+/**
+ * The type of the NgModule meta data.
+ * - Global: Used for full and partial compilation modes which mainly includes R3References.
+ * - Local: Used for the local compilation mode which mainly includes the raw expressions as appears
+ * in the NgModule decorator.
+ */
+var R3NgModuleMetadataKind;
+(function (R3NgModuleMetadataKind) {
+    R3NgModuleMetadataKind[R3NgModuleMetadataKind["Global"] = 0] = "Global";
+    R3NgModuleMetadataKind[R3NgModuleMetadataKind["Local"] = 1] = "Local";
+})(R3NgModuleMetadataKind || (R3NgModuleMetadataKind = {}));
 /**
  * Construct an `R3NgModuleDef` for the given `R3NgModuleMetadata`.
  */
 function compileNgModule(meta) {
-    const { type: moduleType, bootstrap, declarations, imports, exports, schemas, containsForwardDecls, selectorScopeMode, id } = meta;
     const statements = [];
     const definitionMap = new DefinitionMap();
-    definitionMap.set('type', moduleType.value);
-    if (bootstrap.length > 0) {
-        definitionMap.set('bootstrap', refsToArray(bootstrap, containsForwardDecls));
+    definitionMap.set('type', meta.type.value);
+    // Assign bootstrap definition
+    if (meta.kind === R3NgModuleMetadataKind.Global) {
+        if (meta.bootstrap.length > 0) {
+            definitionMap.set('bootstrap', refsToArray(meta.bootstrap, meta.containsForwardDecls));
+        }
+    }
+    else {
+        if (meta.bootstrapExpression) {
+            definitionMap.set('bootstrap', meta.bootstrapExpression);
+        }
     }
-    if (selectorScopeMode === R3SelectorScopeMode.Inline) {
+    if (meta.selectorScopeMode === R3SelectorScopeMode.Inline) {
         // If requested to emit scope information inline, pass the `declarations`, `imports` and
         // `exports` to the `ɵɵdefineNgModule()` call directly.
-        if (declarations.length > 0) {
-            definitionMap.set('declarations', refsToArray(declarations, containsForwardDecls));
+        if (meta.declarations.length > 0) {
+            definitionMap.set('declarations', refsToArray(meta.declarations, meta.containsForwardDecls));
         }
-        if (imports.length > 0) {
-            definitionMap.set('imports', refsToArray(imports, containsForwardDecls));
+        if (meta.imports.length > 0) {
+            definitionMap.set('imports', refsToArray(meta.imports, meta.containsForwardDecls));
         }
-        if (exports.length > 0) {
-            definitionMap.set('exports', refsToArray(exports, containsForwardDecls));
+        if (meta.exports.length > 0) {
+            definitionMap.set('exports', refsToArray(meta.exports, meta.containsForwardDecls));
         }
     }
-    else if (selectorScopeMode === R3SelectorScopeMode.SideEffect) {
+    else if (meta.selectorScopeMode === R3SelectorScopeMode.SideEffect) {
         // In this mode, scope information is not passed into `ɵɵdefineNgModule` as it
         // would prevent tree-shaking of the declarations, imports and exports references. Instead, it's
         // patched onto the NgModule definition with a `ɵɵsetNgModuleScope` call that's guarded by the
@@ -5754,14 +5907,14 @@ function compileNgModule(meta) {
     else {
         // Selector scope emit was not requested, so skip it.
     }
-    if (schemas !== null && schemas.length > 0) {
-        definitionMap.set('schemas', literalArr(schemas.map(ref => ref.value)));
+    if (meta.schemas !== null && meta.schemas.length > 0) {
+        definitionMap.set('schemas', literalArr(meta.schemas.map(ref => ref.value)));
     }
-    if (id !== null) {
-        definitionMap.set('id', id);
+    if (meta.id !== null) {
+        definitionMap.set('id', meta.id);
         // Generate a side-effectful call to register this NgModule by its id, as per the semantics of
         // NgModule ids.
-        statements.push(importExpr(Identifiers.registerNgModuleType).callFn([moduleType.value, id]).toStmt());
+        statements.push(importExpr(Identifiers.registerNgModuleType).callFn([meta.type.value, meta.id]).toStmt());
     }
     const expression = importExpr(Identifiers.defineNgModule).callFn([definitionMap.toLiteralMap()], undefined, true);
     const type = createNgModuleType(meta);
@@ -5794,7 +5947,11 @@ function compileNgModuleDeclarationExpression(meta) {
     }
     return importExpr(Identifiers.defineNgModule).callFn([definitionMap.toLiteralMap()]);
 }
-function createNgModuleType({ type: moduleType, declarations, exports, imports, includeImportTypes, publicDeclarationTypes }) {
+function createNgModuleType(meta) {
+    if (meta.kind === R3NgModuleMetadataKind.Local) {
+        return new ExpressionType(meta.type.value);
+    }
+    const { type: moduleType, declarations, exports, imports, includeImportTypes, publicDeclarationTypes } = meta;
     return new ExpressionType(importExpr(Identifiers.NgModuleDeclaration, [
         new ExpressionType(moduleType.type),
         publicDeclarationTypes === null ? tupleTypeOf(declarations) :
@@ -5810,16 +5967,36 @@ function createNgModuleType({ type: moduleType, declarations, exports, imports,
  * symbols to become tree-shakeable.
  */
 function generateSetNgModuleScopeCall(meta) {
-    const { type: moduleType, declarations, imports, exports, containsForwardDecls } = meta;
     const scopeMap = new DefinitionMap();
-    if (declarations.length > 0) {
-        scopeMap.set('declarations', refsToArray(declarations, containsForwardDecls));
+    if (meta.kind === R3NgModuleMetadataKind.Global) {
+        if (meta.declarations.length > 0) {
+            scopeMap.set('declarations', refsToArray(meta.declarations, meta.containsForwardDecls));
+        }
+    }
+    else {
+        if (meta.declarationsExpression) {
+            scopeMap.set('declarations', meta.declarationsExpression);
+        }
+    }
+    if (meta.kind === R3NgModuleMetadataKind.Global) {
+        if (meta.imports.length > 0) {
+            scopeMap.set('imports', refsToArray(meta.imports, meta.containsForwardDecls));
+        }
+    }
+    else {
+        if (meta.importsExpression) {
+            scopeMap.set('imports', meta.importsExpression);
+        }
     }
-    if (imports.length > 0) {
-        scopeMap.set('imports', refsToArray(imports, containsForwardDecls));
+    if (meta.kind === R3NgModuleMetadataKind.Global) {
+        if (meta.exports.length > 0) {
+            scopeMap.set('exports', refsToArray(meta.exports, meta.containsForwardDecls));
+        }
     }
-    if (exports.length > 0) {
-        scopeMap.set('exports', refsToArray(exports, containsForwardDecls));
+    else {
+        if (meta.exportsExpression) {
+            scopeMap.set('exports', meta.exportsExpression);
+        }
     }
     if (Object.keys(scopeMap.values).length === 0) {
         return null;
@@ -5827,7 +6004,7 @@ function generateSetNgModuleScopeCall(meta) {
     // setNgModuleScope(...)
     const fnCall = new InvokeFunctionExpr(
     /* fn */ importExpr(Identifiers.setNgModuleScope), 
-    /* args */ [moduleType.value, scopeMap.toLiteralMap()]);
+    /* args */ [meta.type.value, scopeMap.toLiteralMap()]);
     // (ngJitMode guard) && setNgModuleScope(...)
     const guardedCall = jitOnlyGuardedExpression(fnCall);
     // function() { (ngJitMode guard) && setNgModuleScope(...); }
@@ -7946,7 +8123,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')) {
@@ -8635,34 +8812,50 @@ var OpKind;
      * An operation to bind an expression to a style property of an element.
      */
     OpKind[OpKind["StyleProp"] = 14] = "StyleProp";
+    /**
+     * An operation to bind an expression to a class property of an element.
+     */
+    OpKind[OpKind["ClassProp"] = 15] = "ClassProp";
     /**
      * An operation to bind an expression to the styles of an element.
      */
-    OpKind[OpKind["StyleMap"] = 15] = "StyleMap";
+    OpKind[OpKind["StyleMap"] = 16] = "StyleMap";
+    /**
+     * An operation to bind an expression to the classes of an element.
+     */
+    OpKind[OpKind["ClassMap"] = 17] = "ClassMap";
     /**
      * An operation to interpolate text into a property binding.
      */
-    OpKind[OpKind["InterpolateProperty"] = 16] = "InterpolateProperty";
+    OpKind[OpKind["InterpolateProperty"] = 18] = "InterpolateProperty";
     /**
      * An operation to interpolate text into a style property binding.
      */
-    OpKind[OpKind["InterpolateStyleProp"] = 17] = "InterpolateStyleProp";
+    OpKind[OpKind["InterpolateStyleProp"] = 19] = "InterpolateStyleProp";
     /**
      * An operation to interpolate text into a style mapping.
      */
-    OpKind[OpKind["InterpolateStyleMap"] = 18] = "InterpolateStyleMap";
+    OpKind[OpKind["InterpolateStyleMap"] = 20] = "InterpolateStyleMap";
+    /**
+     * An operation to interpolate text into a class mapping.
+     */
+    OpKind[OpKind["InterpolateClassMap"] = 21] = "InterpolateClassMap";
     /**
      * An operation to advance the runtime's implicit slot context during the update phase of a view.
      */
-    OpKind[OpKind["Advance"] = 19] = "Advance";
+    OpKind[OpKind["Advance"] = 22] = "Advance";
     /**
      * An operation to instantiate a pipe.
      */
-    OpKind[OpKind["Pipe"] = 20] = "Pipe";
+    OpKind[OpKind["Pipe"] = 23] = "Pipe";
     /**
      * An operation to associate an attribute with an element.
      */
-    OpKind[OpKind["Attribute"] = 21] = "Attribute";
+    OpKind[OpKind["Attribute"] = 24] = "Attribute";
+    /**
+     * An operation to interpolate text into an attribute binding.
+     */
+    OpKind[OpKind["InterpolateAttribute"] = 25] = "InterpolateAttribute";
 })(OpKind || (OpKind = {}));
 /**
  * Distinguishes different kinds of IR expressions.
@@ -8737,6 +8930,14 @@ var ExpressionKind;
      * 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";
 })(ExpressionKind || (ExpressionKind = {}));
 /**
  * Distinguishes between different kinds of `SemanticVariable`s.
@@ -9204,7 +9405,13 @@ class SafePropertyReadExpr extends ExpressionBase {
         this.name = name;
         this.kind = ExpressionKind.SafePropertyRead;
     }
-    visitExpression(visitor, context) { }
+    // An alias for name, which allows other logic to handle property reads and keyed reads together.
+    get index() {
+        return this.name;
+    }
+    visitExpression(visitor, context) {
+        this.receiver.visitExpression(visitor, context);
+    }
     isEquivalent() {
         return false;
     }
@@ -9225,7 +9432,10 @@ class SafeKeyedReadExpr extends ExpressionBase {
         this.index = index;
         this.kind = ExpressionKind.SafeKeyedRead;
     }
-    visitExpression(visitor, context) { }
+    visitExpression(visitor, context) {
+        this.receiver.visitExpression(visitor, context);
+        this.index.visitExpression(visitor, context);
+    }
     isEquivalent() {
         return false;
     }
@@ -9247,7 +9457,12 @@ class SafeInvokeFunctionExpr extends ExpressionBase {
         this.args = args;
         this.kind = ExpressionKind.SafeInvokeFunction;
     }
-    visitExpression(visitor, context) { }
+    visitExpression(visitor, context) {
+        this.receiver.visitExpression(visitor, context);
+        for (const a of this.args) {
+            a.visitExpression(visitor, context);
+        }
+    }
     isEquivalent() {
         return false;
     }
@@ -9271,7 +9486,10 @@ class SafeTernaryExpr extends ExpressionBase {
         this.expr = expr;
         this.kind = ExpressionKind.SafeTernaryExpr;
     }
-    visitExpression(visitor, context) { }
+    visitExpression(visitor, context) {
+        this.guard.visitExpression(visitor, context);
+        this.expr.visitExpression(visitor, context);
+    }
     isEquivalent() {
         return false;
     }
@@ -9303,6 +9521,53 @@ class EmptyExpr extends ExpressionBase {
     }
     transformInternalExpressions() { }
 }
+class AssignTemporaryExpr extends ExpressionBase {
+    constructor(expr, xref) {
+        super();
+        this.expr = expr;
+        this.xref = xref;
+        this.kind = ExpressionKind.AssignTemporaryExpr;
+        this.name = null;
+    }
+    visitExpression(visitor, context) {
+        this.expr.visitExpression(visitor, context);
+    }
+    isEquivalent() {
+        return false;
+    }
+    isConstant() {
+        return false;
+    }
+    transformInternalExpressions(transform, flags) {
+        this.expr = transformExpressionsInExpression(this.expr, transform, flags);
+    }
+    clone() {
+        const a = new AssignTemporaryExpr(this.expr, this.xref);
+        a.name = this.name;
+        return a;
+    }
+}
+class ReadTemporaryExpr extends ExpressionBase {
+    constructor(xref) {
+        super();
+        this.xref = xref;
+        this.kind = ExpressionKind.ReadTemporaryExpr;
+        this.name = null;
+    }
+    visitExpression(visitor, context) { }
+    isEquivalent() {
+        return this.xref === this.xref;
+    }
+    isConstant() {
+        return false;
+    }
+    transformInternalExpressions(transform, flags) { }
+    clone() {
+        const r = new ReadTemporaryExpr(this.xref);
+        r.name = this.name;
+        return r;
+    }
+}
 /**
  * Visits all `Expression`s in the AST of `op` with the `visitor` function.
  */
@@ -9328,11 +9593,14 @@ function transformExpressionsInOp(op, transform, flags) {
         case OpKind.Property:
         case OpKind.StyleProp:
         case OpKind.StyleMap:
+        case OpKind.ClassProp:
+        case OpKind.ClassMap:
             op.expression = transformExpressionsInExpression(op.expression, transform, flags);
             break;
         case OpKind.InterpolateProperty:
         case OpKind.InterpolateStyleProp:
         case OpKind.InterpolateStyleMap:
+        case OpKind.InterpolateClassMap:
         case OpKind.InterpolateText:
             for (let i = 0; i < op.expressions.length; i++) {
                 op.expressions[i] = transformExpressionsInExpression(op.expressions[i], transform, flags);
@@ -9343,7 +9611,12 @@ function transformExpressionsInOp(op, transform, flags) {
             break;
         case OpKind.Attribute:
             if (op.value) {
-                transformExpressionsInExpression(op.value, transform, flags);
+                op.value = transformExpressionsInExpression(op.value, transform, flags);
+            }
+            break;
+        case OpKind.InterpolateAttribute:
+            for (let i = 0; i < op.expressions.length; i++) {
+                op.expressions[i] = transformExpressionsInExpression(op.expressions[i], transform, flags);
             }
             break;
         case OpKind.Variable:
@@ -9446,6 +9719,11 @@ function transformExpressionsInStatement(stmt, transform, flags) {
     else if (stmt instanceof ReturnStatement) {
         stmt.value = transformExpressionsInExpression(stmt.value, transform, flags);
     }
+    else if (stmt instanceof DeclareVarStmt) {
+        if (stmt.value !== undefined) {
+            stmt.value = transformExpressionsInExpression(stmt.value, transform, flags);
+        }
+    }
     else {
         throw new Error(`Unhandled statement kind: ${stmt.constructor.name}`);
     }
@@ -9841,6 +10119,20 @@ function createStylePropOp(xref, name, expression, unit) {
         ...NEW_OP,
     };
 }
+/**
+ * Create a `ClassPropOp`.
+ */
+function createClassPropOp(xref, name, expression) {
+    return {
+        kind: OpKind.ClassProp,
+        target: xref,
+        name,
+        expression,
+        ...TRAIT_DEPENDS_ON_SLOT_CONTEXT,
+        ...TRAIT_CONSUMES_VARS,
+        ...NEW_OP,
+    };
+}
 /** Create a `StyleMapOp`. */
 function createStyleMapOp(xref, expression) {
     return {
@@ -9852,6 +10144,19 @@ function createStyleMapOp(xref, expression) {
         ...NEW_OP,
     };
 }
+/**
+ * Create a `ClassMapOp`.
+ */
+function createClassMapOp(xref, expression) {
+    return {
+        kind: OpKind.ClassMap,
+        target: xref,
+        expression,
+        ...TRAIT_DEPENDS_ON_SLOT_CONTEXT,
+        ...TRAIT_CONSUMES_VARS,
+        ...NEW_OP,
+    };
+}
 /**
  * Create an `AttributeOp`.
  */
@@ -9862,6 +10167,8 @@ function createAttributeOp(target, attributeKind, name, value) {
         attributeKind,
         name,
         value,
+        ...TRAIT_DEPENDS_ON_SLOT_CONTEXT,
+        ...TRAIT_CONSUMES_VARS,
         ...NEW_OP,
     };
 }
@@ -9881,6 +10188,19 @@ function createInterpolatePropertyOp(xref, bindingKind, name, strings, expressio
         ...NEW_OP,
     };
 }
+function createInterpolateAttributeOp(target, attributeKind, name, strings, expressions) {
+    return {
+        kind: OpKind.InterpolateAttribute,
+        target: target,
+        attributeKind,
+        name,
+        strings,
+        expressions,
+        ...TRAIT_DEPENDS_ON_SLOT_CONTEXT,
+        ...TRAIT_CONSUMES_VARS,
+        ...NEW_OP,
+    };
+}
 /**
  * Create a `InterpolateStyleProp`.
  */
@@ -9911,6 +10231,20 @@ function createInterpolateStyleMapOp(xref, strings, expressions) {
         ...NEW_OP,
     };
 }
+/**
+ * Create a `InterpolateStyleMap`.
+ */
+function createInterpolateClassMapOp(xref, strings, expressions) {
+    return {
+        kind: OpKind.InterpolateClassMap,
+        target: xref,
+        strings,
+        expressions,
+        ...TRAIT_DEPENDS_ON_SLOT_CONTEXT,
+        ...TRAIT_CONSUMES_VARS,
+        ...NEW_OP,
+    };
+}
 /**
  * Create an `AdvanceOp`.
  */
@@ -9968,19 +10302,30 @@ function phaseVarCounting(cpl) {
 function varsUsedByOp(op) {
     switch (op.kind) {
         case OpKind.Property:
+        case OpKind.Attribute:
+            // Property & attribute bindings use 1 variable slot.
+            return 1;
         case OpKind.StyleProp:
+        case OpKind.ClassProp:
         case OpKind.StyleMap:
-            // Property bindings use 1 variable slot.
-            return 1;
+        case OpKind.ClassMap:
+            // Style & class bindings use 2 variable slots.
+            return 2;
         case OpKind.InterpolateText:
             // `ir.InterpolateTextOp`s use a variable slot for each dynamic expression.
             return op.expressions.length;
         case OpKind.InterpolateProperty:
-        case OpKind.InterpolateStyleProp:
-        case OpKind.InterpolateStyleMap:
             // `ir.InterpolatePropertyOp`s use a variable slot for each dynamic expression, plus one for
             // the result.
             return 1 + op.expressions.length;
+        case OpKind.InterpolateAttribute:
+            // One variable slot for each dynamic expression, plus one for the result.
+            return 1 + op.expressions.length;
+        case OpKind.InterpolateStyleProp:
+        case OpKind.InterpolateStyleMap:
+        case OpKind.InterpolateClassMap:
+            // One variable slot for each dynamic expression, plus two for binding the result.
+            return 2 + op.expressions.length;
         default:
             throw new Error(`Unhandled op: ${OpKind[op.kind]}`);
     }
@@ -10100,6 +10445,7 @@ function populateElementAttributes(view, compatibility) {
                 ownerOp.attributes.add(op.bindingKind, op.name, null);
                 break;
             case OpKind.StyleProp:
+            case OpKind.ClassProp:
                 ownerOp = lookupElement(elements, op.target);
                 assertIsElementAttributes(ownerOp.attributes);
                 // The old compiler treated empty style bindings as regular bindings for the purpose of
@@ -10126,6 +10472,17 @@ const CHAINABLE = new Set([
     Identifiers.elementEnd,
     Identifiers.property,
     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.elementContainerStart,
     Identifiers.elementContainerEnd,
     Identifiers.elementContainer,
@@ -10268,32 +10625,201 @@ function phaseEmptyElements(cpl) {
 }
 
 /**
- * Generate `ir.AdvanceOp`s in between `ir.UpdateOp`s that ensure the runtime's implicit slot
- * context will be advanced correctly.
+ * Finds all unresolved safe read expressions, and converts them into the appropriate output AST
+ * reads, guarded by null checks.
  */
-function phaseGenerateAdvance(cpl) {
+function phaseExpandSafeReads(cpl, compatibility) {
     for (const [_, view] of cpl.views) {
-        // First build a map of all of the declarations in the view that have assigned slots.
-        const slotMap = new Map();
-        for (const op of view.create) {
-            if (!hasConsumesSlotTrait(op)) {
-                continue;
-            }
-            else if (op.slot === null) {
-                throw new Error(`AssertionError: expected slots to have been allocated before generating advance() calls`);
-            }
-            slotMap.set(op.xref, op.slot);
+        for (const op of view.ops()) {
+            transformExpressionsInOp(op, e => safeTransform(e, { cpl, compatibility }), VisitorContextFlag.None);
+            transformExpressionsInOp(op, ternaryTransform, VisitorContextFlag.None);
         }
-        // Next, step through the update operations and generate `ir.AdvanceOp`s as required to ensure
-        // the runtime's implicit slot counter will be set to the correct slot before executing each
-        // update operation which depends on it.
-        //
-        // To do that, we track what the runtime's slot counter will be through the update operations.
-        let slotContext = 0;
-        for (const op of view.update) {
-            if (!hasDependsOnSlotContextTrait(op)) {
-                // `op` doesn't depend on the slot counter, so it can be skipped.
-                continue;
+    }
+}
+// A lookup set of all the expression kinds that require a temporary variable to be generated.
+const requiresTemporary = [
+    InvokeFunctionExpr, LiteralArrayExpr, LiteralMapExpr, SafeInvokeFunctionExpr,
+    PipeBindingExpr
+].map(e => e.constructor.name);
+function needsTemporaryInSafeAccess(e) {
+    // TODO: We probably want to use an expression visitor to recursively visit all descendents.
+    // However, that would potentially do a lot of extra work (because it cannot short circuit), so we
+    // implement the logic ourselves for now.
+    if (e instanceof UnaryOperatorExpr) {
+        return needsTemporaryInSafeAccess(e.expr);
+    }
+    else if (e instanceof BinaryOperatorExpr) {
+        return needsTemporaryInSafeAccess(e.lhs) || needsTemporaryInSafeAccess(e.rhs);
+    }
+    else if (e instanceof ConditionalExpr) {
+        if (e.falseCase && needsTemporaryInSafeAccess(e.falseCase))
+            return true;
+        return needsTemporaryInSafeAccess(e.condition) || needsTemporaryInSafeAccess(e.trueCase);
+    }
+    else if (e instanceof NotExpr) {
+        return needsTemporaryInSafeAccess(e.condition);
+    }
+    else if (e instanceof AssignTemporaryExpr) {
+        return needsTemporaryInSafeAccess(e.expr);
+    }
+    else if (e instanceof ReadPropExpr) {
+        return needsTemporaryInSafeAccess(e.receiver);
+    }
+    else if (e instanceof ReadKeyExpr) {
+        return needsTemporaryInSafeAccess(e.receiver) || needsTemporaryInSafeAccess(e.index);
+    }
+    // TODO: Switch to a method which is exhaustive of newly added expression subtypes.
+    return e instanceof InvokeFunctionExpr || e instanceof LiteralArrayExpr ||
+        e instanceof LiteralMapExpr || e instanceof SafeInvokeFunctionExpr ||
+        e instanceof PipeBindingExpr;
+}
+function temporariesIn(e) {
+    const temporaries = new Set();
+    // TODO: Although it's not currently supported by the transform helper, we should be able to
+    // short-circuit exploring the tree to do less work. In particular, we don't have to penetrate
+    // into the subexpressions of temporary assignments.
+    transformExpressionsInExpression(e, e => {
+        if (e instanceof AssignTemporaryExpr) {
+            temporaries.add(e.xref);
+        }
+        return e;
+    }, VisitorContextFlag.None);
+    return temporaries;
+}
+function eliminateTemporaryAssignments(e, tmps, ctx) {
+    // TODO: We can be more efficient than the transform helper here. We don't need to visit any
+    // descendents of temporary assignments.
+    transformExpressionsInExpression(e, e => {
+        if (e instanceof AssignTemporaryExpr && tmps.has(e.xref)) {
+            const read = new ReadTemporaryExpr(e.xref);
+            // `TemplateDefinitionBuilder` has the (accidental?) behavior of generating assignments of
+            // temporary variables to themselves. This happens because some subexpression that the
+            // temporary refers to, possibly through nested temporaries, has a function call. We copy that
+            // behavior here.
+            return ctx.compatibility ? new AssignTemporaryExpr(read, read.xref) : read;
+        }
+        return e;
+    }, VisitorContextFlag.None);
+    return e;
+}
+/**
+ * Creates a safe ternary guarded by the input expression, and with a body generated by the provided
+ * callback on the input expression. Generates a temporary variable assignment if needed, and
+ * deduplicates nested temporary assignments if needed.
+ */
+function safeTernaryWithTemporary(guard, body, ctx) {
+    let result;
+    if (needsTemporaryInSafeAccess(guard)) {
+        const xref = ctx.cpl.allocateXrefId();
+        result = [new AssignTemporaryExpr(guard, xref), new ReadTemporaryExpr(xref)];
+    }
+    else {
+        result = [guard, guard.clone()];
+        // Consider an expression like `a?.[b?.c()]?.d`. The `b?.c()` will be transformed first,
+        // introducing a temporary assignment into the key. Then, as part of expanding the `?.d`. That
+        // assignment will be duplicated into both the guard and expression sides. We de-duplicate it,
+        // by transforming it from an assignment into a read on the expression side.
+        eliminateTemporaryAssignments(result[1], temporariesIn(result[0]), ctx);
+    }
+    return new SafeTernaryExpr(result[0], body(result[1]));
+}
+function isSafeAccessExpression(e) {
+    return e instanceof SafePropertyReadExpr || e instanceof SafeKeyedReadExpr;
+}
+function isUnsafeAccessExpression(e) {
+    return e instanceof ReadPropExpr || e instanceof ReadKeyExpr ||
+        e instanceof InvokeFunctionExpr;
+}
+function isAccessExpression(e) {
+    return isSafeAccessExpression(e) || isUnsafeAccessExpression(e);
+}
+function deepestSafeTernary(e) {
+    if (isAccessExpression(e) && e.receiver instanceof SafeTernaryExpr) {
+        let st = e.receiver;
+        while (st.expr instanceof SafeTernaryExpr) {
+            st = st.expr;
+        }
+        return st;
+    }
+    return null;
+}
+// TODO: When strict compatibility with TemplateDefinitionBuilder is not required, we can use `&&`
+// instead to save some code size.
+function safeTransform(e, ctx) {
+    if (e instanceof SafeInvokeFunctionExpr) {
+        // TODO: Implement safe function calls in a subsequent commit.
+        return new InvokeFunctionExpr(e.receiver, e.args);
+    }
+    if (!isAccessExpression(e)) {
+        return e;
+    }
+    const dst = deepestSafeTernary(e);
+    if (dst) {
+        if (e instanceof InvokeFunctionExpr) {
+            dst.expr = dst.expr.callFn(e.args);
+            return e.receiver;
+        }
+        if (e instanceof ReadPropExpr) {
+            dst.expr = dst.expr.prop(e.name);
+            return e.receiver;
+        }
+        if (e instanceof ReadKeyExpr) {
+            dst.expr = dst.expr.key(e.index);
+            return e.receiver;
+        }
+        if (e instanceof SafePropertyReadExpr) {
+            dst.expr = safeTernaryWithTemporary(dst.expr, (r) => r.prop(e.name), ctx);
+            return e.receiver;
+        }
+        if (e instanceof SafeKeyedReadExpr) {
+            dst.expr = safeTernaryWithTemporary(dst.expr, (r) => r.key(e.index), ctx);
+            return e.receiver;
+        }
+    }
+    else {
+        if (e instanceof SafePropertyReadExpr) {
+            return safeTernaryWithTemporary(e.receiver, (r) => r.prop(e.name), ctx);
+        }
+        if (e instanceof SafeKeyedReadExpr) {
+            return safeTernaryWithTemporary(e.receiver, (r) => r.key(e.index), ctx);
+        }
+    }
+    return e;
+}
+function ternaryTransform(e) {
+    if (!(e instanceof SafeTernaryExpr)) {
+        return e;
+    }
+    return new ConditionalExpr(new BinaryOperatorExpr(BinaryOperator.Equals, e.guard, NULL_EXPR), NULL_EXPR, e.expr);
+}
+
+/**
+ * Generate `ir.AdvanceOp`s in between `ir.UpdateOp`s that ensure the runtime's implicit slot
+ * context will be advanced correctly.
+ */
+function phaseGenerateAdvance(cpl) {
+    for (const [_, view] of cpl.views) {
+        // First build a map of all of the declarations in the view that have assigned slots.
+        const slotMap = new Map();
+        for (const op of view.create) {
+            if (!hasConsumesSlotTrait(op)) {
+                continue;
+            }
+            else if (op.slot === null) {
+                throw new Error(`AssertionError: expected slots to have been allocated before generating advance() calls`);
+            }
+            slotMap.set(op.xref, op.slot);
+        }
+        // Next, step through the update operations and generate `ir.AdvanceOp`s as required to ensure
+        // the runtime's implicit slot counter will be set to the correct slot before executing each
+        // update operation which depends on it.
+        //
+        // To do that, we track what the runtime's slot counter will be through the update operations.
+        let slotContext = 0;
+        for (const op of view.update) {
+            if (!hasDependsOnSlotContextTrait(op)) {
+                // `op` doesn't depend on the slot counter, so it can be skipped.
+                continue;
             }
             else if (!slotMap.has(op.target)) {
                 // We expect ops that _do_ depend on the slot counter to point at declarations that exist in
@@ -10315,23 +10841,6 @@ function phaseGenerateAdvance(cpl) {
     }
 }
 
-function phaseNullishCoalescing(cpl) {
-    for (const view of cpl.views.values()) {
-        for (const op of view.ops()) {
-            transformExpressionsInOp(op, expr => {
-                if (!(expr instanceof BinaryOperatorExpr) ||
-                    expr.operator !== BinaryOperator.NullishCoalesce) {
-                    return expr;
-                }
-                // TODO: We need to unconditionally emit a temporary variable to match
-                // TemplateDefinitionBuilder. (We could also emit one conditionally when not in
-                // compatibility mode.)
-                return new ConditionalExpr(new BinaryOperatorExpr(BinaryOperator.And, new BinaryOperatorExpr(BinaryOperator.NotIdentical, expr.lhs, NULL_EXPR), new BinaryOperatorExpr(BinaryOperator.NotIdentical, expr.lhs, new LiteralExpr(undefined))), expr.lhs, expr.rhs);
-            }, VisitorContextFlag.None);
-        }
-    }
-}
-
 /**
  * Generate a preamble sequence for each view creation block and listener function which declares
  * any variables that be referenced in other operations in the block.
@@ -10359,11 +10868,6 @@ function phaseGenerateVariables(cpl) {
 function recursivelyProcessView(view, parentScope) {
     // Extract a `Scope` from this view.
     const scope = getScopeForView(view, parentScope);
-    // Embedded views require an operation to save/restore the view context.
-    if (view.parent !== null) {
-        // Start the view creation block with an operation to save the current view context. This may be
-        // used to restore the view context in any listeners that may be present.
-    }
     for (const op of view.create) {
         switch (op.kind) {
             case OpKind.Template:
@@ -10493,18 +10997,97 @@ function serializeLocalRefs(refs) {
     return literalArr(constRefs);
 }
 
+/**
+ * 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();
+}
+
 /**
  * Generate names for functions and variables across all views.
  *
  * This includes propagating those names into any `ir.ReadVariableExpr`s of those variables, so that
  * the reads can be emitted correctly.
  */
-function phaseNaming(cpl) {
-    addNamesToView(cpl.root, cpl.componentName, { index: 0 });
+function phaseNaming(cpl, compatibility) {
+    addNamesToView(cpl.root, cpl.componentName, { index: 0 }, compatibility);
 }
-function addNamesToView(view, baseName, state) {
+function addNamesToView(view, baseName, state, compatibility) {
     if (view.fnName === null) {
-        view.fnName = `${baseName}_Template`;
+        view.fnName = sanitizeIdentifier(`${baseName}_Template`);
     }
     // Keep track of the names we assign to variables in the view. We'll need to propagate these
     // into reads of those variables afterwards.
@@ -10518,7 +11101,8 @@ function addNamesToView(view, baseName, state) {
                     if (op.slot === null) {
                         throw new Error(`Expected a slot to be assigned`);
                     }
-                    op.handlerFnName = `${view.fnName}_${op.tag}_${op.name}_${op.slot}_listener`;
+                    op.handlerFnName =
+                        sanitizeIdentifier(`${view.fnName}_${op.tag}_${op.name}_${op.slot}_listener`);
                 }
                 break;
             case OpKind.Variable:
@@ -10529,9 +11113,19 @@ function addNamesToView(view, baseName, state) {
                 if (op.slot === null) {
                     throw new Error(`Expected slot to be assigned`);
                 }
-                // TODO: properly escape the tag name.
-                const safeTagName = op.tag.replace('-', '_');
-                addNamesToView(childView, `${baseName}_${safeTagName}_${op.slot}`, state);
+                addNamesToView(childView, `${baseName}_${op.tag}_${op.slot}`, state, compatibility);
+                break;
+            case OpKind.StyleProp:
+            case OpKind.InterpolateStyleProp:
+                op.name = normalizeStylePropName(op.name);
+                if (compatibility) {
+                    op.name = stripImportant(op.name);
+                }
+                break;
+            case OpKind.ClassProp:
+                if (compatibility) {
+                    op.name = stripImportant(op.name);
+                }
                 break;
         }
     }
@@ -10562,6 +11156,22 @@ function getVariableName(variable, state) {
     }
     return variable.name;
 }
+/**
+ * Normalizes a style prop name by hyphenating it (unless its a CSS variable).
+ */
+function normalizeStylePropName(name) {
+    return name.startsWith('--') ? name : hyphenate(name);
+}
+/**
+ * Strips `!important` out of the given style or class name.
+ */
+function stripImportant(name) {
+    const importantIndex = name.indexOf('!important');
+    if (importantIndex > -1) {
+        return name.substring(0, importantIndex);
+    }
+    return name;
+}
 
 /**
  * Merges logically sequential `NextContextExpr` operations.
@@ -10647,6 +11257,24 @@ function phaseNgContainer(cpl) {
     }
 }
 
+function phaseNullishCoalescing(cpl) {
+    for (const view of cpl.views.values()) {
+        for (const op of view.ops()) {
+            transformExpressionsInOp(op, expr => {
+                if (!(expr instanceof BinaryOperatorExpr) ||
+                    expr.operator !== BinaryOperator.NullishCoalesce) {
+                    return expr;
+                }
+                const assignment = new AssignTemporaryExpr(expr.lhs.clone(), cpl.allocateXrefId());
+                const read = new ReadTemporaryExpr(assignment.xref);
+                // TODO: When not in compatibility mode for TemplateDefinitionBuilder, we can just emit
+                // `t != null` instead of including an undefined check as well.
+                return new ConditionalExpr(new BinaryOperatorExpr(BinaryOperator.And, new BinaryOperatorExpr(BinaryOperator.NotIdentical, assignment, NULL_EXPR), new BinaryOperatorExpr(BinaryOperator.NotIdentical, read, new LiteralExpr(undefined))), read.clone(), expr.rhs);
+            }, VisitorContextFlag.None);
+        }
+    }
+}
+
 function phasePipeCreation(cpl) {
     for (const view of cpl.views.values()) {
         processPipeBindingsInView(view);
@@ -10713,6 +11341,80 @@ function phasePipeVariadic(cpl) {
     }
 }
 
+/**
+ * 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.
+ */
+const ORDERING = [
+    { kinds: new Set([OpKind.StyleMap, OpKind.InterpolateStyleMap]), transform: keepLast },
+    { kinds: new Set([OpKind.ClassMap, OpKind.InterpolateClassMap]), transform: keepLast },
+    { kinds: new Set([OpKind.StyleProp, OpKind.InterpolateStyleProp]) },
+    { kinds: new Set([OpKind.ClassProp]) },
+    { kinds: new Set([OpKind.InterpolateProperty]) },
+    { kinds: new Set([OpKind.Property]) },
+    { kinds: new Set([OpKind.Attribute, OpKind.InterpolateAttribute]) },
+];
+/**
+ * The set of all op kinds we handle in the reordering phase.
+ */
+const handledOpKinds = new Set(ORDERING.flatMap(group => [...group.kinds]));
+/**
+ * Reorders property and attribute ops according to the following ordering:
+ * 1. styleMap & styleMapInterpolate (drops all but the last op in the group)
+ * 2. classMap & classMapInterpolate (drops all but the last op in the group)
+ * 3. styleProp & stylePropInterpolate (ordering preserved within group)
+ * 4. classProp (ordering preserved within group)
+ * 5. propertyInterpolate (ordering preserved within group)
+ * 6. property (ordering preserved within group)
+ * 7. attribute & attributeInterpolate (ordering preserve within group)
+ */
+function phasePropertyOrdering(cpl) {
+    for (const [_, view] of cpl.views) {
+        let opsToOrder = [];
+        for (const op of view.update) {
+            if (handledOpKinds.has(op.kind)) {
+                // Pull out ops that need o be ordered.
+                opsToOrder.push(op);
+                OpList.remove(op);
+            }
+            else {
+                // When we encounter an op that shouldn't be reordered, put the ones we've pulled so far
+                // back in the correct order.
+                for (const orderedOp of reorder(opsToOrder)) {
+                    OpList.insertBefore(orderedOp, op);
+                }
+                opsToOrder = [];
+            }
+        }
+        // If we still have ops pulled at the end, put them back in the correct order.
+        for (const orderedOp of reorder(opsToOrder)) {
+            view.update.push(orderedOp);
+        }
+    }
+}
+/**
+ * Reorders the given list of ops according to the ordering defined by `ORDERING`.
+ */
+function reorder(ops) {
+    // Break the ops list into groups based on OpKind.
+    const groups = Array.from(ORDERING, () => new Array());
+    for (const op of ops) {
+        const groupIndex = ORDERING.findIndex(o => o.kinds.has(op.kind));
+        groups[groupIndex].push(op);
+    }
+    // Reassemble the groups into a single list, in the correct order.
+    return groups.flatMap((group, i) => {
+        const transform = ORDERING[i].transform;
+        return transform ? transform(group) : group;
+    });
+}
+/**
+ * Keeps only the last op in a list of ops.
+ */
+function keepLast(ops) {
+    return ops.slice(ops.length - 1);
+}
+
 function phasePureFunctionExtraction(cpl) {
     for (const view of cpl.views.values()) {
         for (const op of view.ops()) {
@@ -10902,6 +11604,9 @@ function property(name, expression) {
         expression,
     ]);
 }
+function attribute(name, expression) {
+    return call(Identifiers.attribute, [literal(name), expression]);
+}
 function styleProp(name, expression, unit) {
     const args = [literal(name), expression];
     if (unit !== null) {
@@ -10909,9 +11614,15 @@ function styleProp(name, expression, unit) {
     }
     return call(Identifiers.styleProp, args);
 }
+function classProp(name, expression) {
+    return call(Identifiers.classProp, [literal(name), expression]);
+}
 function styleMap(expression) {
     return call(Identifiers.styleMap, [expression]);
 }
+function classMap(expression) {
+    return call(Identifiers.classMap, [expression]);
+}
 const PIPE_BINDINGS = [
     Identifiers.pipeBind1,
     Identifiers.pipeBind2,
@@ -10958,6 +11669,10 @@ function propertyInterpolate(name, strings, expressions) {
     const interpolationArgs = collateInterpolationArgs(strings, expressions);
     return callVariadicInstruction(PROPERTY_INTERPOLATE_CONFIG, [literal(name)], interpolationArgs);
 }
+function attributeInterpolate(name, strings, expressions) {
+    const interpolationArgs = collateInterpolationArgs(strings, expressions);
+    return callVariadicInstruction(ATTRIBUTE_INTERPOLATE_CONFIG, [literal(name)], interpolationArgs);
+}
 function stylePropInterpolate(name, strings, expressions, unit) {
     const interpolationArgs = collateInterpolationArgs(strings, expressions);
     const extraArgs = [];
@@ -10970,6 +11685,10 @@ function styleMapInterpolate(strings, expressions) {
     const interpolationArgs = collateInterpolationArgs(strings, expressions);
     return callVariadicInstruction(STYLE_MAP_INTERPOLATE_CONFIG, [], interpolationArgs);
 }
+function classMapInterpolate(strings, expressions) {
+    const interpolationArgs = collateInterpolationArgs(strings, expressions);
+    return callVariadicInstruction(CLASS_MAP_INTERPOLATE_CONFIG, [], interpolationArgs);
+}
 function pureFunction(varOffset, fn, args) {
     return callVariadicInstructionExpr(PURE_FUNCTION_CONFIG, [
         literal(varOffset),
@@ -11051,7 +11770,7 @@ const PROPERTY_INTERPOLATE_CONFIG = {
  */
 const STYLE_PROP_INTERPOLATE_CONFIG = {
     constant: [
-        null,
+        Identifiers.styleProp,
         Identifiers.stylePropInterpolate1,
         Identifiers.stylePropInterpolate2,
         Identifiers.stylePropInterpolate3,
@@ -11061,14 +11780,34 @@ const STYLE_PROP_INTERPOLATE_CONFIG = {
         Identifiers.stylePropInterpolate7,
         Identifiers.stylePropInterpolate8,
     ],
-    variable: Identifiers.stylePropInterpolateV,
+    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.
+ */
+const ATTRIBUTE_INTERPOLATE_CONFIG = {
+    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`);
         }
-        if (n < 3) {
-            throw new Error(`Expected at least 3 arguments`);
-        }
         return (n - 1) / 2;
     },
 };
@@ -11077,7 +11816,7 @@ const STYLE_PROP_INTERPOLATE_CONFIG = {
  */
 const STYLE_MAP_INTERPOLATE_CONFIG = {
     constant: [
-        null,
+        Identifiers.styleMap,
         Identifiers.styleMapInterpolate1,
         Identifiers.styleMapInterpolate2,
         Identifiers.styleMapInterpolate3,
@@ -11092,8 +11831,28 @@ const STYLE_MAP_INTERPOLATE_CONFIG = {
         if (n % 2 === 0) {
             throw new Error(`Expected odd number of arguments`);
         }
-        if (n < 3) {
-            throw new Error(`Expected at least 3 arguments`);
+        return (n - 1) / 2;
+    },
+};
+/**
+ * `InterpolationConfig` for the `classMapInterpolate` instruction.
+ */
+const CLASS_MAP_INTERPOLATE_CONFIG = {
+    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;
     },
@@ -11212,9 +11971,15 @@ function reifyUpdateOperations(_view, ops) {
             case OpKind.StyleProp:
                 OpList.replace(op, styleProp(op.name, op.expression, op.unit));
                 break;
+            case OpKind.ClassProp:
+                OpList.replace(op, classProp(op.name, op.expression));
+                break;
             case OpKind.StyleMap:
                 OpList.replace(op, styleMap(op.expression));
                 break;
+            case OpKind.ClassMap:
+                OpList.replace(op, classMap(op.expression));
+                break;
             case OpKind.InterpolateProperty:
                 OpList.replace(op, propertyInterpolate(op.name, op.strings, op.expressions));
                 break;
@@ -11224,9 +11989,18 @@ function reifyUpdateOperations(_view, ops) {
             case OpKind.InterpolateStyleMap:
                 OpList.replace(op, styleMapInterpolate(op.strings, op.expressions));
                 break;
+            case OpKind.InterpolateClassMap:
+                OpList.replace(op, classMapInterpolate(op.strings, op.expressions));
+                break;
             case OpKind.InterpolateText:
                 OpList.replace(op, textInterpolate(op.strings, op.expressions));
                 break;
+            case OpKind.Attribute:
+                OpList.replace(op, attribute(op.name, op.value));
+                break;
+            case OpKind.InterpolateAttribute:
+                OpList.replace(op, attributeInterpolate(op.name, op.strings, op.expressions));
+                break;
             case OpKind.Variable:
                 if (op.variable.name === null) {
                     throw new Error(`AssertionError: unnamed variable ${op.xref}`);
@@ -11266,6 +12040,16 @@ function reifyIrExpression(expr) {
                 throw new Error(`Read of unnamed variable ${expr.xref}`);
             }
             return variable(expr.name);
+        case ExpressionKind.ReadTemporaryExpr:
+            if (expr.name === null) {
+                throw new Error(`Read of unnamed temporary ${expr.xref}`);
+            }
+            return variable(expr.name);
+        case ExpressionKind.AssignTemporaryExpr:
+            if (expr.name === null) {
+                throw new Error(`Assign of unnamed temporary ${expr.xref}`);
+            }
+            return variable(expr.name).set(expr.expr);
         case ExpressionKind.PureFunctionExpr:
             if (expr.fn === null) {
                 throw new Error(`AssertionError: expected PureFunctions to have been extracted`);
@@ -11453,14 +12237,17 @@ function processLexicalScope(view, ops, savedView) {
             }
         }, VisitorContextFlag.None);
     }
+    for (const op of ops) {
+        visitExpressionsInOp(op, expr => {
+            if (expr instanceof LexicalReadExpr) {
+                throw new Error(`AssertionError: no lexical reads should remain, but found read of ${expr.name}`);
+            }
+        });
+    }
 }
 
 function phaseSaveRestoreView(cpl) {
     for (const view of cpl.views.values()) {
-        if (view === cpl.root) {
-            // Save/restore operations are not necessary for the root view.
-            continue;
-        }
         view.create.prepend([
             createVariableOp(view.tpl.allocateXrefId(), {
                 kind: SemanticVariableKind.SavedView,
@@ -11472,22 +12259,39 @@ function phaseSaveRestoreView(cpl) {
             if (op.kind !== OpKind.Listener) {
                 continue;
             }
-            op.handlerOps.prepend([
-                createVariableOp(view.tpl.allocateXrefId(), {
-                    kind: SemanticVariableKind.Context,
-                    name: null,
-                    view: view.xref,
-                }, new RestoreViewExpr(view.xref)),
-            ]);
-            // The "restore view" operation in listeners requires a call to `resetView` to reset the
-            // context prior to returning from the listener operation. Find any `return` statements in
-            // the listener body and wrap them in a call to reset the view.
-            for (const handlerOp of op.handlerOps) {
-                if (handlerOp.kind === OpKind.Statement &&
-                    handlerOp.statement instanceof ReturnStatement) {
-                    handlerOp.statement.value = new ResetViewExpr(handlerOp.statement.value);
+            // Embedded views always need the save/restore view operation.
+            let needsRestoreView = view !== cpl.root;
+            if (!needsRestoreView) {
+                for (const handlerOp of op.handlerOps) {
+                    visitExpressionsInOp(handlerOp, expr => {
+                        if (expr instanceof ReferenceExpr) {
+                            // Listeners that reference() a local ref need the save/restore view operation.
+                            needsRestoreView = true;
+                        }
+                    });
                 }
             }
+            if (needsRestoreView) {
+                addSaveRestoreViewOperationToListener(view, op);
+            }
+        }
+    }
+}
+function addSaveRestoreViewOperationToListener(view, op) {
+    op.handlerOps.prepend([
+        createVariableOp(view.tpl.allocateXrefId(), {
+            kind: SemanticVariableKind.Context,
+            name: null,
+            view: view.xref,
+        }, new RestoreViewExpr(view.xref)),
+    ]);
+    // The "restore view" operation in listeners requires a call to `resetView` to reset the
+    // context prior to returning from the listener operation. Find any `return` statements in
+    // the listener body and wrap them in a call to reset the view.
+    for (const handlerOp of op.handlerOps) {
+        if (handlerOp.kind === OpKind.Statement &&
+            handlerOp.statement instanceof ReturnStatement) {
+            handlerOp.statement.value = new ResetViewExpr(handlerOp.statement.value);
         }
     }
 }
@@ -11569,6 +12373,50 @@ function phaseSlotAllocation(cpl) {
     }
 }
 
+/**
+ * Find all assignments and usages of temporary variables, which are linked to each other with cross
+ * references. Generate names for each cross-reference, and add a `DeclareVarStmt` to initialize
+ * them at the beginning of the update block.
+ *
+ * TODO: Sometimes, it will be possible to reuse names across different subexpressions. For example,
+ * in the double keyed read `a?.[f()]?.[f()]`, the two function calls have non-overlapping scopes.
+ * Implement an algorithm for reuse.
+ */
+function phaseTemporaryVariables(cpl) {
+    for (const view of cpl.views.values()) {
+        let opCount = 0;
+        let generatedStatements = [];
+        for (const op of view.ops()) {
+            let count = 0;
+            let xrefs = new Set();
+            let defs = new Map();
+            visitExpressionsInOp(op, expr => {
+                if (expr instanceof ReadTemporaryExpr || expr instanceof AssignTemporaryExpr) {
+                    xrefs.add(expr.xref);
+                }
+            });
+            for (const xref of xrefs) {
+                // TODO: Exactly replicate the naming scheme used by `TemplateDefinitionBuilder`. It seems
+                // to rely on an expression index instead of an op index.
+                defs.set(xref, `tmp_${opCount}_${count++}`);
+            }
+            visitExpressionsInOp(op, expr => {
+                if (expr instanceof ReadTemporaryExpr || expr instanceof AssignTemporaryExpr) {
+                    const name = defs.get(expr.xref);
+                    if (name === undefined) {
+                        throw new Error('Found xref with unassigned name');
+                    }
+                    expr.name = name;
+                }
+            });
+            generatedStatements.push(...Array.from(defs.values())
+                .map(name => createStatementOp(new DeclareVarStmt(name))));
+            opCount++;
+        }
+        view.update.prepend(generatedStatements);
+    }
+}
+
 /**
  * Optimize variables declared and used in the IR.
  *
@@ -11932,89 +12780,12 @@ function allowConservativeInlining(decl, target) {
     }
 }
 
-/**
- * Finds all unresolved safe read expressions, and converts them into the appropriate output AST
- * reads, guarded by null checks.
- */
-function phaseExpandSafeReads(cpl) {
-    for (const [_, view] of cpl.views) {
-        for (const op of view.ops()) {
-            transformExpressionsInOp(op, safeTransform, VisitorContextFlag.None);
-            transformExpressionsInOp(op, ternaryTransform, VisitorContextFlag.None);
-        }
-    }
-}
-function isSafeAccessExpression(e) {
-    return e instanceof SafePropertyReadExpr || e instanceof SafeKeyedReadExpr;
-}
-function isUnsafeAccessExpression(e) {
-    return e instanceof ReadPropExpr || e instanceof ReadKeyExpr;
-}
-function isAccessExpression(e) {
-    return isSafeAccessExpression(e) || isUnsafeAccessExpression(e);
-}
-function deepestSafeTernary(e) {
-    if (isAccessExpression(e) && e.receiver instanceof SafeTernaryExpr) {
-        let st = e.receiver;
-        while (st.expr instanceof SafeTernaryExpr) {
-            st = st.expr;
-        }
-        return st;
-    }
-    return null;
-}
-// TODO: When strict compatibility with TemplateDefinitionBuilder is not required, we can use `&&`
-// instead.
-function safeTransform(e) {
-    if (e instanceof SafeInvokeFunctionExpr) {
-        // TODO: Implement safe function calls in a subsequent commit.
-        return new InvokeFunctionExpr(e.receiver, e.args);
-    }
-    if (!isAccessExpression(e)) {
-        return e;
-    }
-    const dst = deepestSafeTernary(e);
-    if (dst) {
-        if (e instanceof ReadPropExpr) {
-            dst.expr = dst.expr.prop(e.name);
-            return e.receiver;
-        }
-        if (e instanceof ReadKeyExpr) {
-            dst.expr = dst.expr.key(e.index);
-            return e.receiver;
-        }
-        if (e instanceof SafePropertyReadExpr) {
-            dst.expr = new SafeTernaryExpr(dst.expr.clone(), dst.expr.prop(e.name));
-            return e.receiver;
-        }
-        if (e instanceof SafeKeyedReadExpr) {
-            dst.expr = new SafeTernaryExpr(dst.expr.clone(), dst.expr.key(e.index));
-            return e.receiver;
-        }
-    }
-    else {
-        if (e instanceof SafePropertyReadExpr) {
-            return new SafeTernaryExpr(e.receiver.clone(), e.receiver.prop(e.name));
-        }
-        if (e instanceof SafeKeyedReadExpr) {
-            return new SafeTernaryExpr(e.receiver.clone(), e.receiver.key(e.index));
-        }
-    }
-    return e;
-}
-function ternaryTransform(e) {
-    if (!(e instanceof SafeTernaryExpr)) {
-        return e;
-    }
-    return new ConditionalExpr(new BinaryOperatorExpr(BinaryOperator.Equals, e.guard, NULL_EXPR), NULL_EXPR, e.expr);
-}
-
 /**
  * Run all transformation phases in the correct order against a `ComponentCompilation`. After this
  * processing, the compilation should be in a state where it can be emitted via `emitTemplateFn`.s
  */
 function transformTemplate(cpl) {
-    phaseAttributeExtraction(cpl, true);
+    phaseAttributeExtraction(cpl, /* compatibility */ true);
     phasePipeCreation(cpl);
     phasePipeVariadic(cpl);
     phasePureLiteralStructures(cpl);
@@ -12025,17 +12796,19 @@ function transformTemplate(cpl) {
     phaseLocalRefs(cpl);
     phaseConstCollection(cpl);
     phaseNullishCoalescing(cpl);
-    phaseExpandSafeReads(cpl);
+    phaseExpandSafeReads(cpl, true);
+    phaseTemporaryVariables(cpl);
     phaseSlotAllocation(cpl);
     phaseVarCounting(cpl);
     phaseGenerateAdvance(cpl);
-    phaseNaming(cpl);
+    phaseNaming(cpl, /* compatibility */ true);
     phaseVariableOptimization(cpl, { conservative: true });
     phaseMergeNextContext(cpl);
     phaseNgContainer(cpl);
     phaseEmptyElements(cpl);
     phasePureFunctionExtraction(cpl);
     phaseAlignPipeVariadicVarOffset(cpl);
+    phasePropertyOrdering(cpl);
     phaseReify(cpl);
     phaseChaining(cpl);
 }
@@ -12422,6 +13195,9 @@ function ingestBindings(view, op, element) {
         }
     }
     for (const attr of element.attributes) {
+        // This is only attribute TextLiteral bindings, such as `attr.foo="bar'`. This can never be
+        // `[attr.foo]="bar"` or `attr.foo="{{bar}}"`, both of which will be handled as inputs with
+        // `BindingType.Attribute`.
         view.update.push(createAttributeOp(op.xref, ElementAttributeKind.Attribute, attr.name, literal(attr.value)));
     }
     for (const input of element.inputs) {
@@ -12468,6 +13244,12 @@ function ingestPropertyBinding(view, xref, bindingKind, { name, value, type, uni
                     }
                     view.update.push(createInterpolateStyleMapOp(xref, value.strings, value.expressions.map(expr => convertAst(expr, view.tpl))));
                 }
+                else if (name === 'class') {
+                    if (bindingKind !== ElementAttributeKind.Binding) {
+                        throw Error('Unexpected class binding on ng-template');
+                    }
+                    view.update.push(createInterpolateClassMapOp(xref, value.strings, value.expressions.map(expr => convertAst(expr, view.tpl))));
+                }
                 else {
                     view.update.push(createInterpolatePropertyOp(xref, bindingKind, name, value.strings, value.expressions.map(expr => convertAst(expr, view.tpl))));
                 }
@@ -12478,8 +13260,18 @@ function ingestPropertyBinding(view, xref, bindingKind, { name, value, type, uni
                 }
                 view.update.push(createInterpolateStylePropOp(xref, name, value.strings, value.expressions.map(expr => convertAst(expr, view.tpl)), unit));
                 break;
+            case 1 /* e.BindingType.Attribute */:
+                if (bindingKind !== ElementAttributeKind.Binding) {
+                    throw new Error('Attribute bindings on templates are not expected to be valid');
+                }
+                const attributeInterpolate = createInterpolateAttributeOp(xref, bindingKind, name, value.strings, value.expressions.map(expr => convertAst(expr, view.tpl)));
+                view.update.push(attributeInterpolate);
+                break;
+            case 2 /* e.BindingType.Class */:
+                throw Error('Unexpected interpolation in class property binding');
+            // TODO: implement remaining binding types.
+            case 4 /* e.BindingType.Animation */:
             default:
-                // TODO: implement remaining binding types.
                 throw Error(`Interpolated property binding type not handled: ${type}`);
         }
     }
@@ -12493,6 +13285,12 @@ function ingestPropertyBinding(view, xref, bindingKind, { name, value, type, uni
                     }
                     view.update.push(createStyleMapOp(xref, convertAst(value, view.tpl)));
                 }
+                else if (name === 'class') {
+                    if (bindingKind !== ElementAttributeKind.Binding) {
+                        throw Error('Unexpected class binding on ng-template');
+                    }
+                    view.update.push(createClassMapOp(xref, convertAst(value, view.tpl)));
+                }
                 else {
                     view.update.push(createPropertyOp(xref, bindingKind, name, convertAst(value, view.tpl)));
                 }
@@ -12503,8 +13301,22 @@ function ingestPropertyBinding(view, xref, bindingKind, { name, value, type, uni
                 }
                 view.update.push(createStylePropOp(xref, name, convertAst(value, view.tpl), unit));
                 break;
+            case 1 /* e.BindingType.Attribute */:
+                if (bindingKind !== ElementAttributeKind.Binding) {
+                    throw new Error('Attribute bindings on templates are not expected to be valid');
+                }
+                const attrOp = createAttributeOp(xref, bindingKind, name, convertAst(value, view.tpl));
+                view.update.push(attrOp);
+                break;
+            case 2 /* e.BindingType.Class */:
+                if (bindingKind !== ElementAttributeKind.Binding) {
+                    throw Error('Unexpected class binding on ng-template');
+                }
+                view.update.push(createClassPropOp(xref, name, convertAst(value, view.tpl)));
+                break;
+            // TODO: implement remaining binding types.
+            case 4 /* e.BindingType.Animation */:
             default:
-                // TODO: implement remaining binding types.
                 throw Error(`Property binding type not handled: ${type}`);
         }
     }
@@ -12533,85 +13345,6 @@ function assertIsArray(value) {
 
 const USE_TEMPLATE_PIPELINE = false;
 
-/**
- * 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.
@@ -14826,29 +15559,62 @@ class Attribute extends NodeWithI18n {
         this.valueTokens = valueTokens;
     }
     visit(visitor, context) {
-        return visitor.visitAttribute(this, context);
+        return visitor.visitAttribute(this, context);
+    }
+}
+class Element extends NodeWithI18n {
+    constructor(name, attrs, children, sourceSpan, startSourceSpan, endSourceSpan = null, i18n) {
+        super(sourceSpan, i18n);
+        this.name = name;
+        this.attrs = attrs;
+        this.children = children;
+        this.startSourceSpan = startSourceSpan;
+        this.endSourceSpan = endSourceSpan;
+    }
+    visit(visitor, context) {
+        return visitor.visitElement(this, context);
+    }
+}
+class Comment {
+    constructor(value, sourceSpan) {
+        this.value = value;
+        this.sourceSpan = sourceSpan;
+    }
+    visit(visitor, context) {
+        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 Element extends NodeWithI18n {
-    constructor(name, attrs, children, sourceSpan, startSourceSpan, endSourceSpan = null, i18n) {
-        super(sourceSpan, i18n);
+class Block {
+    constructor(name, parameters, children, sourceSpan, startSourceSpan, endSourceSpan = null) {
         this.name = name;
-        this.attrs = attrs;
+        this.parameters = parameters;
         this.children = children;
+        this.sourceSpan = sourceSpan;
         this.startSourceSpan = startSourceSpan;
         this.endSourceSpan = endSourceSpan;
     }
     visit(visitor, context) {
-        return visitor.visitElement(this, context);
+        return visitor.visitBlock(this, context);
     }
 }
-class Comment {
-    constructor(value, sourceSpan) {
-        this.value = value;
+class BlockParameter {
+    constructor(expression, sourceSpan) {
+        this.expression = expression;
         this.sourceSpan = sourceSpan;
     }
     visit(visitor, context) {
-        return visitor.visitComment(this, context);
+        return visitor.visitBlockParameter(this, context);
     }
 }
 function visitAll(visitor, nodes, context = null) {
@@ -14881,6 +15647,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;
@@ -17633,8 +18411,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();
         }
@@ -17675,6 +18453,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.
@@ -17688,6 +18475,64 @@ 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;
+            // 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() !== $RBRACE &&
+                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;
+                }
+                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
@@ -18021,7 +18866,6 @@ class _Tokenizer {
         this._endToken(prefixAndName);
     }
     _consumeAttributeValue() {
-        let value;
         if (this._cursor.peek() === $SQ || this._cursor.peek() === $DQ) {
             const quoteChar = this._cursor.peek();
             this._consumeQuote(quoteChar);
@@ -18210,7 +19054,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) {
@@ -18243,6 +19087,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);
@@ -18298,6 +19159,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;
@@ -18585,7 +19452,7 @@ class _TreeBuilder {
         this.tokens = tokens;
         this.getTagDefinition = getTagDefinition;
         this._index = -1;
-        this._elementStack = [];
+        this._containerStack = [];
         this.rootNodes = [];
         this.errors = [];
         this._advance();
@@ -18615,6 +19482,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();
@@ -18731,7 +19610,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);
@@ -18762,9 +19646,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) {
@@ -18773,7 +19657,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...
@@ -18794,33 +19678,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));
         }
@@ -18831,20 +19716,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.
@@ -18903,16 +19791,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) {
@@ -19026,6 +19990,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 };
@@ -19290,7 +20263,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) {
@@ -19312,11 +20285,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, 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 ?
@@ -19593,6 +20566,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 === 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;
@@ -19716,7 +21098,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>`
@@ -19814,6 +21205,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 = [];
@@ -19991,6 +21399,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) {
@@ -20438,6 +21865,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.
      *
@@ -20684,6 +22122,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`.
@@ -21815,6 +23264,12 @@ class TemplateDefinitionBuilder {
         }
         return null;
     }
+    // TODO: implement deferred block instructions.
+    visitDeferredBlock(deferred) { }
+    visitDeferredTrigger(trigger) { }
+    visitDeferredBlockPlaceholder(block) { }
+    visitDeferredBlockError(block) { }
+    visitDeferredBlockLoading(block) { }
     allocateDataSlot() {
         return this._dataIndex++;
     }
@@ -22551,7 +24006,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 = {
@@ -22602,7 +24062,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,
@@ -23556,6 +25019,7 @@ class CompilerFacadeImpl {
     }
     compileNgModule(angularCoreEnv, sourceMapUrl, facade) {
         const meta = {
+            kind: R3NgModuleMetadataKind.Global,
             type: wrapReference(facade.type),
             bootstrap: facade.bootstrap.map(wrapReference),
             declarations: facade.declarations.map(wrapReference),
@@ -23878,7 +25342,11 @@ 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: new Set(), // TODO: enable deferred blocks when testing in JIT mode.
+    });
     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}`);
@@ -24067,7 +25535,7 @@ function publishFacade(global) {
  * @description
  * Entry point for all public APIs of the compiler package.
  */
-const VERSION = new Version('16.2.0-next.1');
+const VERSION = new Version('16.2.0-next.3');
 
 class CompilerConfig {
     constructor({ defaultEncapsulation = ViewEncapsulation.Emulated, useJit = true, missingTranslation = null, preserveWhitespaces, strictInjectionParameters } = {}) {
@@ -24288,6 +25756,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;
@@ -24500,8 +25975,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 });
     }
 }
 
@@ -24685,6 +26161,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));
     }
@@ -24735,6 +26214,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));
     }
@@ -24958,6 +26440,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));
     }
@@ -25025,6 +26510,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));
     }
@@ -25159,6 +26647,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));
     }
@@ -25207,6 +26698,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));
     }
@@ -25586,6 +27080,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) { }
@@ -25594,6 +27103,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)) {
@@ -25731,6 +27241,21 @@ class DirectiveBinder {
         // Recurse into the node's children.
         node.children.forEach(child => child.visit(this));
     }
+    visitDeferredBlock(deferred) {
+        deferred.children.forEach(child => child.visit(this));
+        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) { }
@@ -25742,6 +27267,7 @@ class DirectiveBinder {
     visitText(text) { }
     visitBoundText(text) { }
     visitIcu(icu) { }
+    visitDeferredTrigger(trigger) { }
 }
 /**
  * Processes a template and extract metadata about expressions and symbols within.
@@ -25779,7 +27305,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
@@ -25788,14 +27314,15 @@ 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 template = nodes instanceof Template ? nodes : null;
         // 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);
+        const binder = new TemplateBinder(expressions, symbols, usedPipes, nestingLevel, scope, template, 0);
+        binder.ingest(nodes);
         return { expressions, symbols, nestingLevel, usedPipes };
     }
     ingest(template) {
@@ -25857,6 +27384,28 @@ class TemplateBinder extends RecursiveAstVisitor {
     visitBoundEvent(event) {
         event.handler.visit(this);
     }
+    visitDeferredBlock(deferred) {
+        deferred.triggers.forEach(this.visitNode);
+        deferred.prefetchTriggers.forEach(this.visitNode);
+        deferred.children.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);
     }
@@ -25995,7 +27544,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.2.0-next.1'));
+    definitionMap.set('version', literal('16.2.0-next.3'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', metadata.type);
     definitionMap.set('decorators', metadata.decorators);
@@ -26098,7 +27647,7 @@ function compileDeclareDirectiveFromMetadata(meta) {
 function createDirectiveDefinitionMap(meta) {
     const definitionMap = new DefinitionMap();
     definitionMap.set('minVersion', literal(MINIMUM_PARTIAL_LINKER_VERSION$5));
-    definitionMap.set('version', literal('16.2.0-next.1'));
+    definitionMap.set('version', literal('16.2.0-next.3'));
     // e.g. `type: MyDirective`
     definitionMap.set('type', meta.type.value);
     if (meta.isStandalone) {
@@ -26326,7 +27875,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.2.0-next.1'));
+    definitionMap.set('version', literal('16.2.0-next.3'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', meta.type.value);
     definitionMap.set('deps', compileDependencies(meta.deps));
@@ -26361,7 +27910,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.2.0-next.1'));
+    definitionMap.set('version', literal('16.2.0-next.3'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', meta.type.value);
     // Only generate providedIn property if it has a non-null value
@@ -26412,7 +27961,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.2.0-next.1'));
+    definitionMap.set('version', literal('16.2.0-next.3'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', meta.type.value);
     definitionMap.set('providers', meta.providers);
@@ -26441,8 +27990,11 @@ function compileDeclareNgModuleFromMetadata(meta) {
  */
 function createNgModuleDefinitionMap(meta) {
     const definitionMap = new DefinitionMap();
+    if (meta.kind === R3NgModuleMetadataKind.Local) {
+        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.2.0-next.1'));
+    definitionMap.set('version', literal('16.2.0-next.3'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', meta.type.value);
     // We only generate the keys in the metadata if the arrays contain values.
@@ -26493,7 +28045,7 @@ function compileDeclarePipeFromMetadata(meta) {
 function createPipeDefinitionMap(meta) {
     const definitionMap = new DefinitionMap();
     definitionMap.set('minVersion', literal(MINIMUM_PARTIAL_LINKER_VERSION));
-    definitionMap.set('version', literal('16.2.0-next.1'));
+    definitionMap.set('version', literal('16.2.0-next.3'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     // e.g. `type: MyPipe`
     definitionMap.set('type', meta.type.value);
@@ -26526,5 +28078,5 @@ publishFacade(_global);
 
 // This file is not used to build this module. It is only used during editing
 
-export { AST, ASTWithName, ASTWithSource, AbsoluteSourceSpan, ArrayType, AstMemoryEfficientTransformer, AstTransformer, Attribute, Binary, BinaryOperator, BinaryOperatorExpr, BindingPipe, BoundElementProperty, BuiltinType, BuiltinTypeName, CUSTOM_ELEMENTS_SCHEMA, Call, Chain, ChangeDetectionStrategy, CommaExpr, Comment, CompilerConfig, Conditional, ConditionalExpr, ConstantPool, CssSelector, DEFAULT_INTERPOLATION_CONFIG, DYNAMIC_TYPE, DeclareFunctionStmt, DeclareVarStmt, DomElementSchemaRegistry, EOF, Element, ElementSchemaRegistry, EmitterVisitorContext, EmptyExpr$1 as EmptyExpr, Expansion, ExpansionCase, Expression, ExpressionBinding, ExpressionStatement, ExpressionType, ExternalExpr, ExternalReference, FactoryTarget$1 as FactoryTarget, FunctionExpr, HtmlParser, HtmlTagDefinition, I18NHtmlParser, IfStmt, ImplicitReceiver, InstantiateExpr, Interpolation, InterpolationConfig, InvokeFunctionExpr, JSDocComment, JitEvaluator, KeyedRead, KeyedWrite, LeadingComment, Lexer, LiteralArray, LiteralArrayExpr, LiteralExpr, LiteralMap, LiteralMapExpr, LiteralPrimitive, LocalizedString, MapType, MessageBundle, NONE_TYPE, NO_ERRORS_SCHEMA, NodeWithI18n, NonNullAssert, NotExpr, ParseError, ParseErrorLevel, ParseLocation, ParseSourceFile, ParseSourceSpan, ParseSpan, ParseTreeResult, ParsedEvent, ParsedProperty, ParsedPropertyType, ParsedVariable, Parser$1 as Parser, ParserError, PrefixNot, PropertyRead, PropertyWrite, R3BoundTarget, Identifiers as R3Identifiers, R3SelectorScopeMode, R3TargetBinder, R3TemplateDependencyKind, ReadKeyExpr, ReadPropExpr, ReadVarExpr, RecursiveAstVisitor, RecursiveVisitor, ResourceLoader, ReturnStatement, STRING_TYPE, SafeCall, SafeKeyedRead, SafePropertyRead, SelectorContext, SelectorListContext, SelectorMatcher, Serializer, SplitInterpolation, Statement, StmtModifier, TagContentType, TaggedTemplateExpr, TemplateBindingParseResult, TemplateLiteral, TemplateLiteralElement, Text, ThisReceiver, BoundAttribute as TmplAstBoundAttribute, BoundEvent as TmplAstBoundEvent, BoundText as TmplAstBoundText, Content as TmplAstContent, Element$1 as TmplAstElement, Icu$1 as TmplAstIcu, RecursiveVisitor$1 as TmplAstRecursiveVisitor, Reference as TmplAstReference, Template as TmplAstTemplate, Text$3 as TmplAstText, TextAttribute as TmplAstTextAttribute, Variable as TmplAstVariable, Token, TokenType, TransplantedType, TreeError, Type, TypeModifier, TypeofExpr, Unary, UnaryOperator, UnaryOperatorExpr, VERSION, VariableBinding, Version, ViewEncapsulation, WrappedNodeExpr, WriteKeyExpr, WritePropExpr, WriteVarExpr, Xliff, Xliff2, Xmb, XmlParser, Xtb, _ParseAST, compileClassMetadata, compileComponentFromMetadata, compileDeclareClassMetadata, compileDeclareComponentFromMetadata, compileDeclareDirectiveFromMetadata, compileDeclareFactoryFunction, compileDeclareInjectableFromMetadata, compileDeclareInjectorFromMetadata, compileDeclareNgModuleFromMetadata, compileDeclarePipeFromMetadata, compileDirectiveFromMetadata, compileFactoryFunction, compileInjectable, compileInjector, compileNgModule, compilePipeFromMetadata, computeMsgId, core, createInjectableType, createMayBeForwardRefExpression, devOnlyGuardedExpression, emitDistinctChangesOnlyDefaultValue, getHtmlTagDefinition, getNsPrefix, getSafePropertyAccessString, identifierName, isIdentifier, isNgContainer, isNgContent, isNgTemplate, jsDocComment, leadingComment, literalMap, makeBindingParser, mergeNsAndName, output_ast as outputAst, parseHostBindings, parseTemplate, preserveWhitespacesDefault, publishFacade, r3JitTypeSourceSpan, sanitizeIdentifier, splitNsName, verifyHostBindings, visitAll };
+export { AST, ASTWithName, ASTWithSource, AbsoluteSourceSpan, ArrayType, AstMemoryEfficientTransformer, AstTransformer, Attribute, Binary, BinaryOperator, BinaryOperatorExpr, BindingPipe, Block, BlockGroup, BlockParameter, BoundElementProperty, BuiltinType, BuiltinTypeName, CUSTOM_ELEMENTS_SCHEMA, Call, Chain, ChangeDetectionStrategy, CommaExpr, Comment, CompilerConfig, Conditional, ConditionalExpr, ConstantPool, CssSelector, DEFAULT_INTERPOLATION_CONFIG, DYNAMIC_TYPE, DeclareFunctionStmt, DeclareVarStmt, DomElementSchemaRegistry, DynamicImportExpr, EOF, Element, ElementSchemaRegistry, EmitterVisitorContext, EmptyExpr$1 as EmptyExpr, Expansion, ExpansionCase, Expression, ExpressionBinding, ExpressionStatement, ExpressionType, ExternalExpr, ExternalReference, FactoryTarget$1 as FactoryTarget, FunctionExpr, HtmlParser, HtmlTagDefinition, I18NHtmlParser, IfStmt, ImplicitReceiver, InstantiateExpr, Interpolation, InterpolationConfig, InvokeFunctionExpr, JSDocComment, JitEvaluator, KeyedRead, KeyedWrite, LeadingComment, Lexer, LiteralArray, LiteralArrayExpr, LiteralExpr, LiteralMap, LiteralMapExpr, LiteralPrimitive, LocalizedString, MapType, MessageBundle, NONE_TYPE, NO_ERRORS_SCHEMA, NodeWithI18n, NonNullAssert, NotExpr, ParseError, ParseErrorLevel, ParseLocation, ParseSourceFile, ParseSourceSpan, ParseSpan, ParseTreeResult, ParsedEvent, ParsedProperty, ParsedPropertyType, ParsedVariable, Parser$1 as Parser, ParserError, PrefixNot, PropertyRead, PropertyWrite, R3BoundTarget, Identifiers as R3Identifiers, R3NgModuleMetadataKind, R3SelectorScopeMode, R3TargetBinder, R3TemplateDependencyKind, ReadKeyExpr, ReadPropExpr, ReadVarExpr, RecursiveAstVisitor, RecursiveVisitor, ResourceLoader, ReturnStatement, STRING_TYPE, SafeCall, SafeKeyedRead, SafePropertyRead, SelectorContext, SelectorListContext, SelectorMatcher, Serializer, SplitInterpolation, Statement, StmtModifier, TagContentType, TaggedTemplateExpr, TemplateBindingParseResult, TemplateLiteral, TemplateLiteralElement, Text, ThisReceiver, BoundAttribute as TmplAstBoundAttribute, BoundDeferredTrigger as TmplAstBoundDeferredTrigger, BoundEvent as TmplAstBoundEvent, BoundText as TmplAstBoundText, Content as TmplAstContent, DeferredBlock as TmplAstDeferredBlock, DeferredBlockError as TmplAstDeferredBlockError, DeferredBlockLoading as TmplAstDeferredBlockLoading, DeferredBlockPlaceholder as TmplAstDeferredBlockPlaceholder, DeferredTrigger as TmplAstDeferredTrigger, Element$1 as TmplAstElement, HoverDeferredTrigger as TmplAstHoverDeferredTrigger, Icu$1 as TmplAstIcu, IdleDeferredTrigger as TmplAstIdleDeferredTrigger, ImmediateDeferredTrigger as TmplAstImmediateDeferredTrigger, InteractionDeferredTrigger as TmplAstInteractionDeferredTrigger, RecursiveVisitor$1 as TmplAstRecursiveVisitor, Reference as TmplAstReference, Template as TmplAstTemplate, Text$3 as TmplAstText, TextAttribute as TmplAstTextAttribute, TimerDeferredTrigger as TmplAstTimerDeferredTrigger, Variable as TmplAstVariable, ViewportDeferredTrigger as TmplAstViewportDeferredTrigger, Token, TokenType, TransplantedType, TreeError, Type, TypeModifier, TypeofExpr, Unary, UnaryOperator, UnaryOperatorExpr, VERSION, VariableBinding, Version, ViewEncapsulation, WrappedNodeExpr, WriteKeyExpr, WritePropExpr, WriteVarExpr, Xliff, Xliff2, Xmb, XmlParser, Xtb, _ParseAST, compileClassMetadata, compileComponentFromMetadata, compileDeclareClassMetadata, compileDeclareComponentFromMetadata, compileDeclareDirectiveFromMetadata, compileDeclareFactoryFunction, compileDeclareInjectableFromMetadata, compileDeclareInjectorFromMetadata, compileDeclareNgModuleFromMetadata, compileDeclarePipeFromMetadata, compileDirectiveFromMetadata, compileFactoryFunction, compileInjectable, compileInjector, compileNgModule, compilePipeFromMetadata, computeMsgId, core, createInjectableType, createMayBeForwardRefExpression, devOnlyGuardedExpression, emitDistinctChangesOnlyDefaultValue, getHtmlTagDefinition, getNsPrefix, getSafePropertyAccessString, identifierName, isIdentifier, isNgContainer, isNgContent, isNgTemplate, jsDocComment, leadingComment, literalMap, makeBindingParser, mergeNsAndName, output_ast as outputAst, parseHostBindings, parseTemplate, preserveWhitespacesDefault, publishFacade, r3JitTypeSourceSpan, sanitizeIdentifier, splitNsName, verifyHostBindings, visitAll };
 //# sourceMappingURL=compiler.mjs.map