@angular/compiler 16.2.0-next.2 → 16.2.0-next.4

package/fesm2022/compiler.mjs

@@ -1,5 +1,5 @@
 /**
- * @license Angular v16.2.0-next.2
+ * @license Angular v16.2.0-next.4
  * (c) 2010-2022 Google LLC. https://angular.io/
  * License: MIT
  */
@@ -1621,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);
@@ -2009,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);
@@ -2247,6 +2268,7 @@ var output_ast = /*#__PURE__*/Object.freeze({
     ExternalExpr: ExternalExpr,
     ExternalReference: ExternalReference,
     ConditionalExpr: ConditionalExpr,
+    DynamicImportExpr: DynamicImportExpr,
     NotExpr: NotExpr,
     FnParam: FnParam,
     FunctionExpr: FunctionExpr,
@@ -2825,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++) {
@@ -3313,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);
@@ -3886,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.
@@ -3973,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) { }
@@ -3982,6 +4108,7 @@ class RecursiveVisitor$1 {
     visitText(text) { }
     visitBoundText(text) { }
     visitIcu(icu) { }
+    visitDeferredTrigger(trigger) { }
 }
 function visitAll$1(visitor, nodes) {
     const result = [];
@@ -8685,38 +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"] = 22] = "InterpolateAttribute";
+    OpKind[OpKind["InterpolateAttribute"] = 25] = "InterpolateAttribute";
 })(OpKind || (OpKind = {}));
 /**
  * Distinguishes different kinds of IR expressions.
@@ -9454,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);
@@ -9977,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 {
@@ -9988,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`.
  */
@@ -10062,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`.
  */
@@ -10119,25 +10302,30 @@ function phaseVarCounting(cpl) {
 function varsUsedByOp(op) {
     switch (op.kind) {
         case OpKind.Property:
-        case OpKind.StyleProp:
-        case OpKind.StyleMap:
-            // Property bindings use 1 variable slot.
-            return 1;
         case OpKind.Attribute:
-            // Attribute bindings use 1 variable slot.
+            // Property & attribute bindings use 1 variable slot.
             return 1;
+        case OpKind.StyleProp:
+        case OpKind.ClassProp:
+        case OpKind.StyleMap:
+        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]}`);
     }
@@ -10257,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
@@ -10284,6 +10473,16 @@ const CHAINABLE = new Set([
     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,
@@ -10426,87 +10625,238 @@ 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);
-        }
-        // 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
-                // the `slotMap`.
-                throw new Error(`AssertionError: reference to unknown slot for var ${op.target}`);
-            }
-            const slot = slotMap.get(op.target);
-            // Does the slot counter need to be adjusted?
-            if (slotContext !== slot) {
-                // If so, generate an `ir.AdvanceOp` to advance the counter.
-                const delta = slot - slotContext;
-                if (delta < 0) {
-                    throw new Error(`AssertionError: slot counter should never need to move backwards`);
-                }
-                OpList.insertBefore(createAdvanceOp(delta), op);
-                slotContext = slot;
-            }
+        for (const op of view.ops()) {
+            transformExpressionsInOp(op, e => safeTransform(e, { cpl, compatibility }), VisitorContextFlag.None);
+            transformExpressionsInOp(op, ternaryTransform, VisitorContextFlag.None);
         }
     }
 }
-
-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);
-        }
+// 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;
 }
-
-/**
- * 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.
- *
- * Variables generated include:
- *   * a saved view context to be used to restore the current view in event listeners.
- *   * the context of the restored view within event listener handlers.
- *   * context variables from the current view as well as all parent views (including the root
- *     context if needed).
- *   * local references from elements within the current view and any lexical parents.
- *
- * Variables are generated here unconditionally, and may optimized away in future operations if it
- * turns out their values (and any side effects) are unused.
- */
-function phaseGenerateVariables(cpl) {
-    recursivelyProcessView(cpl.root, /* there is no parent scope for the root view */ null);
+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
+                // the `slotMap`.
+                throw new Error(`AssertionError: reference to unknown slot for var ${op.target}`);
+            }
+            const slot = slotMap.get(op.target);
+            // Does the slot counter need to be adjusted?
+            if (slotContext !== slot) {
+                // If so, generate an `ir.AdvanceOp` to advance the counter.
+                const delta = slot - slotContext;
+                if (delta < 0) {
+                    throw new Error(`AssertionError: slot counter should never need to move backwards`);
+                }
+                OpList.insertBefore(createAdvanceOp(delta), op);
+                slotContext = slot;
+            }
+        }
+    }
+}
+
+/**
+ * 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.
+ *
+ * Variables generated include:
+ *   * a saved view context to be used to restore the current view in event listeners.
+ *   * the context of the restored view within event listener handlers.
+ *   * context variables from the current view as well as all parent views (including the root
+ *     context if needed).
+ *   * local references from elements within the current view and any lexical parents.
+ *
+ * Variables are generated here unconditionally, and may optimized away in future operations if it
+ * turns out their values (and any side effects) are unused.
+ */
+function phaseGenerateVariables(cpl) {
+    recursivelyProcessView(cpl.root, /* there is no parent scope for the root view */ null);
 }
 /**
  * Process the given `ViewCompilation` and generate preambles for it and any listeners that it
@@ -10647,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.
@@ -10672,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:
@@ -10683,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;
         }
     }
@@ -10716,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.
@@ -10801,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);
@@ -10867,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()) {
@@ -11066,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,
@@ -11131,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),
@@ -11212,7 +11770,7 @@ const PROPERTY_INTERPOLATE_CONFIG = {
  */
 const STYLE_PROP_INTERPOLATE_CONFIG = {
     constant: [
-        null,
+        Identifiers.styleProp,
         Identifiers.stylePropInterpolate1,
         Identifiers.stylePropInterpolate2,
         Identifiers.stylePropInterpolate3,
@@ -11227,9 +11785,6 @@ const STYLE_PROP_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;
     },
 };
@@ -11261,7 +11816,7 @@ const ATTRIBUTE_INTERPOLATE_CONFIG = {
  */
 const STYLE_MAP_INTERPOLATE_CONFIG = {
     constant: [
-        null,
+        Identifiers.styleMap,
         Identifiers.styleMapInterpolate1,
         Identifiers.styleMapInterpolate2,
         Identifiers.styleMapInterpolate3,
@@ -11276,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;
     },
@@ -11396,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;
@@ -11408,6 +11989,9 @@ 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;
@@ -11765,27 +12349,71 @@ function phaseSlotAllocation(cpl) {
                     // We do expect to find a slot allocated for everything which might be referenced.
                     throw new Error(`AssertionError: no slot allocated for ${OpKind[op.kind]} target ${op.target}`);
                 }
-                op.slot = slotMap.get(op.target);
+                op.slot = slotMap.get(op.target);
+            }
+            // Process all `ir.Expression`s within this view, and look for `usesSlotIndexExprTrait`.
+            visitExpressionsInOp(op, expr => {
+                if (!isIrExpression(expr)) {
+                    return;
+                }
+                if (!hasUsesSlotIndexTrait(expr) || expr.slot !== null) {
+                    return;
+                }
+                // The `UsesSlotIndexExprTrait` indicates that this expression references something declared
+                // in this component template by its slot index. Use the `target` `ir.XrefId` to find the
+                // allocated slot for that declaration in `slotMap`.
+                if (!slotMap.has(expr.target)) {
+                    // We do expect to find a slot allocated for everything which might be referenced.
+                    throw new Error(`AssertionError: no slot allocated for ${expr.constructor.name} target ${expr.target}`);
+                }
+                // Record the allocated slot on the expression.
+                expr.slot = slotMap.get(expr.target);
+            });
+        }
+    }
+}
+
+/**
+ * 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++}`);
             }
-            // Process all `ir.Expression`s within this view, and look for `usesSlotIndexExprTrait`.
             visitExpressionsInOp(op, expr => {
-                if (!isIrExpression(expr)) {
-                    return;
-                }
-                if (!hasUsesSlotIndexTrait(expr) || expr.slot !== null) {
-                    return;
-                }
-                // The `UsesSlotIndexExprTrait` indicates that this expression references something declared
-                // in this component template by its slot index. Use the `target` `ir.XrefId` to find the
-                // allocated slot for that declaration in `slotMap`.
-                if (!slotMap.has(expr.target)) {
-                    // We do expect to find a slot allocated for everything which might be referenced.
-                    throw new Error(`AssertionError: no slot allocated for ${expr.constructor.name} target ${expr.target}`);
+                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;
                 }
-                // Record the allocated slot on the expression.
-                expr.slot = slotMap.get(expr.target);
             });
+            generatedStatements.push(...Array.from(defs.values())
+                .map(name => createStatementOp(new DeclareVarStmt(name))));
+            opCount++;
         }
+        view.update.prepend(generatedStatements);
     }
 }
 
@@ -12152,225 +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, compatibility) {
-    for (const [_, view] of cpl.views) {
-        for (const op of view.ops()) {
-            transformExpressionsInOp(op, e => safeTransform(e, { cpl, compatibility }), VisitorContextFlag.None);
-            transformExpressionsInOp(op, ternaryTransform, VisitorContextFlag.None);
-        }
-    }
-}
-// 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);
-}
-
-/**
- * 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);
-    }
-}
-
 /**
  * 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);
@@ -12386,13 +12801,14 @@ function transformTemplate(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);
 }
@@ -12828,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))));
                 }
@@ -12845,8 +13267,11 @@ function ingestPropertyBinding(view, xref, bindingKind, { name, value, type, uni
                 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}`);
         }
     }
@@ -12860,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)));
                 }
@@ -12877,8 +13308,15 @@ function ingestPropertyBinding(view, xref, bindingKind, { name, value, type, uni
                 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}`);
         }
     }
@@ -12907,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.
@@ -18151,10 +18510,10 @@ class _Tokenizer {
             this._beginToken(28 /* TokenType.BLOCK_PARAMETER */);
             const start = this._cursor.clone();
             let inQuote = null;
+            let openBraces = 0;
             // Consume the parameter until the next semicolon or brace.
             // Note that we skip over semicolons/braces inside of strings.
-            while ((this._cursor.peek() !== $SEMICOLON && this._cursor.peek() !== $RBRACE &&
-                this._cursor.peek() !== $EOF) ||
+            while ((this._cursor.peek() !== $SEMICOLON && this._cursor.peek() !== $EOF) ||
                 inQuote !== null) {
                 const char = this._cursor.peek();
                 // Skip to the next character if it was escaped.
@@ -18167,6 +18526,17 @@ class _Tokenizer {
                 else if (inQuote === null && isQuote(char)) {
                     inQuote = char;
                 }
+                else if (char === $LBRACE && inQuote === null) {
+                    openBraces++;
+                }
+                else if (char === $RBRACE && inQuote === null) {
+                    if (openBraces === 0) {
+                        break;
+                    }
+                    else if (openBraces > 0) {
+                        openBraces--;
+                    }
+                }
                 this._cursor.advance();
             }
             this._endToken([this._cursor.getChars(start)]);
@@ -19904,7 +20274,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) {
@@ -19926,11 +20296,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 ?
@@ -20207,6 +20577,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;
@@ -20330,7 +21109,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>`
@@ -20429,14 +21217,22 @@ class HtmlAstToIvyAst {
         return null;
     }
     visitBlockGroup(group, context) {
-        throw new Error('TODO');
-    }
-    visitBlock(block, context) {
-        throw new Error('TODO');
-    }
-    visitBlockParameter(parameter, context) {
-        throw new Error('TODO');
+        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 = [];
@@ -20615,13 +21411,23 @@ class NonBindableVisitor {
         return null;
     }
     visitBlockGroup(group, context) {
-        throw new Error('TODO');
+        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) {
-        throw new Error('TODO');
+        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) {
-        throw new Error('TODO');
+        return null;
     }
 }
 const NON_BINDABLE_VISITOR = new NonBindableVisitor();
@@ -22469,6 +23275,12 @@ class TemplateDefinitionBuilder {
         }
         return null;
     }
+    // TODO: implement deferred block instructions.
+    visitDeferredBlock(deferred) { }
+    visitDeferredTrigger(trigger) { }
+    visitDeferredBlockPlaceholder(block) { }
+    visitDeferredBlockError(block) { }
+    visitDeferredBlockLoading(block) { }
     allocateDataSlot() {
         return this._dataIndex++;
     }
@@ -23205,7 +24017,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 = {
@@ -23256,7 +24073,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,
@@ -24533,7 +25353,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}`);
@@ -24722,7 +25546,7 @@ function publishFacade(global) {
  * @description
  * Entry point for all public APIs of the compiler package.
  */
-const VERSION = new Version('16.2.0-next.2');
+const VERSION = new Version('16.2.0-next.4');
 
 class CompilerConfig {
     constructor({ defaultEncapsulation = ViewEncapsulation.Emulated, useJit = true, missingTranslation = null, preserveWhitespaces, strictInjectionParameters } = {}) {
@@ -26267,6 +27091,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) { }
@@ -26275,6 +27114,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)) {
@@ -26412,6 +27252,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) { }
@@ -26423,6 +27278,7 @@ class DirectiveBinder {
     visitText(text) { }
     visitBoundText(text) { }
     visitIcu(icu) { }
+    visitDeferredTrigger(trigger) { }
 }
 /**
  * Processes a template and extract metadata about expressions and symbols within.
@@ -26460,7 +27316,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
@@ -26469,14 +27325,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) {
@@ -26538,6 +27395,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);
     }
@@ -26676,7 +27555,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.2'));
+    definitionMap.set('version', literal('16.2.0-next.4'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', metadata.type);
     definitionMap.set('decorators', metadata.decorators);
@@ -26779,7 +27658,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.2'));
+    definitionMap.set('version', literal('16.2.0-next.4'));
     // e.g. `type: MyDirective`
     definitionMap.set('type', meta.type.value);
     if (meta.isStandalone) {
@@ -27007,7 +27886,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.2'));
+    definitionMap.set('version', literal('16.2.0-next.4'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', meta.type.value);
     definitionMap.set('deps', compileDependencies(meta.deps));
@@ -27042,7 +27921,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.2'));
+    definitionMap.set('version', literal('16.2.0-next.4'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', meta.type.value);
     // Only generate providedIn property if it has a non-null value
@@ -27093,7 +27972,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.2'));
+    definitionMap.set('version', literal('16.2.0-next.4'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', meta.type.value);
     definitionMap.set('providers', meta.providers);
@@ -27126,7 +28005,7 @@ function createNgModuleDefinitionMap(meta) {
         throw new Error('Invalid path! Local compilation mode should not get into the partial compilation path');
     }
     definitionMap.set('minVersion', literal(MINIMUM_PARTIAL_LINKER_VERSION$1));
-    definitionMap.set('version', literal('16.2.0-next.2'));
+    definitionMap.set('version', literal('16.2.0-next.4'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', meta.type.value);
     // We only generate the keys in the metadata if the arrays contain values.
@@ -27177,7 +28056,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.2'));
+    definitionMap.set('version', literal('16.2.0-next.4'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     // e.g. `type: MyPipe`
     definitionMap.set('type', meta.type.value);
@@ -27210,5 +28089,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, 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, 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, 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