@angular/compiler 16.2.2 → 17.0.0-next.1

package/fesm2022/compiler.mjs

@@ -1,5 +1,5 @@
 /**
- * @license Angular v16.2.2
+ * @license Angular v17.0.0-next.1
  * (c) 2010-2022 Google LLC. https://angular.io/
  * License: MIT
  */
@@ -2614,6 +2614,21 @@ class Identifiers {
     static { this.resetView = { name: 'ɵɵresetView', moduleName: CORE }; }
     static { this.templateCreate = { name: 'ɵɵtemplate', moduleName: CORE }; }
     static { this.defer = { name: 'ɵɵdefer', moduleName: CORE }; }
+    static { this.deferWhen = { name: 'ɵɵdeferWhen', moduleName: CORE }; }
+    static { this.deferOnIdle = { name: 'ɵɵdeferOnIdle', moduleName: CORE }; }
+    static { this.deferOnImmediate = { name: 'ɵɵdeferOnImmediate', moduleName: CORE }; }
+    static { this.deferOnTimer = { name: 'ɵɵdeferOnTimer', moduleName: CORE }; }
+    static { this.deferOnHover = { name: 'ɵɵdeferOnHover', moduleName: CORE }; }
+    static { this.deferOnInteraction = { name: 'ɵɵdeferOnInteraction', moduleName: CORE }; }
+    static { this.deferOnViewport = { name: 'ɵɵdeferOnViewport', moduleName: CORE }; }
+    static { this.deferPrefetchWhen = { name: 'ɵɵdeferPrefetchWhen', moduleName: CORE }; }
+    static { this.deferPrefetchOnIdle = { name: 'ɵɵdeferPrefetchOnIdle', moduleName: CORE }; }
+    static { this.deferPrefetchOnImmediate = { name: 'ɵɵdeferPrefetchOnImmediate', moduleName: CORE }; }
+    static { this.deferPrefetchOnTimer = { name: 'ɵɵdeferPrefetchOnTimer', moduleName: CORE }; }
+    static { this.deferPrefetchOnHover = { name: 'ɵɵdeferPrefetchOnHover', moduleName: CORE }; }
+    static { this.deferPrefetchOnInteraction = { name: 'ɵɵdeferPrefetchOnInteraction', moduleName: CORE }; }
+    static { this.deferPrefetchOnViewport = { name: 'ɵɵdeferPrefetchOnViewport', moduleName: CORE }; }
+    static { this.conditional = { name: 'ɵɵconditional', moduleName: CORE }; }
     static { this.text = { name: 'ɵɵtext', moduleName: CORE }; }
     static { this.enableBindings = { name: 'ɵɵenableBindings', moduleName: CORE }; }
     static { this.disableBindings = { name: 'ɵɵdisableBindings', moduleName: CORE }; }
@@ -2681,6 +2696,7 @@ class Identifiers {
     static { this.resolveWindow = { name: 'ɵɵresolveWindow', moduleName: CORE }; }
     static { this.resolveDocument = { name: 'ɵɵresolveDocument', moduleName: CORE }; }
     static { this.resolveBody = { name: 'ɵɵresolveBody', moduleName: CORE }; }
+    static { this.getComponentDepsFactory = { name: 'ɵɵgetComponentDepsFactory', moduleName: CORE }; }
     static { this.defineComponent = { name: 'ɵɵdefineComponent', moduleName: CORE }; }
     static { this.declareComponent = { name: 'ɵɵngDeclareComponent', moduleName: CORE }; }
     static { this.setComponentScope = { name: 'ɵɵsetComponentScope', moduleName: CORE }; }
@@ -2729,6 +2745,7 @@ class Identifiers {
     static { this.declarePipe = { name: 'ɵɵngDeclarePipe', moduleName: CORE }; }
     static { this.declareClassMetadata = { name: 'ɵɵngDeclareClassMetadata', moduleName: CORE }; }
     static { this.setClassMetadata = { name: 'ɵsetClassMetadata', moduleName: CORE }; }
+    static { this.setClassMetadataAsync = { name: 'ɵsetClassMetadataAsync', moduleName: CORE }; }
     static { this.queryRefresh = { name: 'ɵɵqueryRefresh', moduleName: CORE }; }
     static { this.viewQuery = { name: 'ɵɵviewQuery', moduleName: CORE }; }
     static { this.loadQuery = { name: 'ɵɵloadQuery', moduleName: CORE }; }
@@ -3983,18 +4000,107 @@ class DeferredBlockError {
 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;
+        this.triggers = triggers;
+        this.prefetchTriggers = prefetchTriggers;
+        // We cache the keys since we know that they won't change and we
+        // don't want to enumarate them every time we're traversing the AST.
+        this.definedTriggers = Object.keys(triggers);
+        this.definedPrefetchTriggers = Object.keys(prefetchTriggers);
     }
     visit(visitor) {
         return visitor.visitDeferredBlock(this);
     }
+    visitAll(visitor) {
+        this.visitTriggers(this.definedTriggers, this.triggers, visitor);
+        this.visitTriggers(this.definedPrefetchTriggers, this.prefetchTriggers, visitor);
+        visitAll$1(visitor, this.children);
+        this.placeholder && visitor.visitDeferredBlockPlaceholder(this.placeholder);
+        this.loading && visitor.visitDeferredBlockLoading(this.loading);
+        this.error && visitor.visitDeferredBlockError(this.error);
+    }
+    visitTriggers(keys, triggers, visitor) {
+        for (const key of keys) {
+            visitor.visitDeferredTrigger(triggers[key]);
+        }
+    }
+}
+class SwitchBlock {
+    constructor(expression, cases, sourceSpan, startSourceSpan, endSourceSpan) {
+        this.expression = expression;
+        this.cases = cases;
+        this.sourceSpan = sourceSpan;
+        this.startSourceSpan = startSourceSpan;
+        this.endSourceSpan = endSourceSpan;
+    }
+    visit(visitor) {
+        return visitor.visitSwitchBlock(this);
+    }
+}
+class SwitchBlockCase {
+    constructor(expression, children, sourceSpan, startSourceSpan) {
+        this.expression = expression;
+        this.children = children;
+        this.sourceSpan = sourceSpan;
+        this.startSourceSpan = startSourceSpan;
+    }
+    visit(visitor) {
+        return visitor.visitSwitchBlockCase(this);
+    }
+}
+class ForLoopBlock {
+    constructor(itemName, expression, trackBy, contextVariables, children, empty, sourceSpan, startSourceSpan, endSourceSpan) {
+        this.itemName = itemName;
+        this.expression = expression;
+        this.trackBy = trackBy;
+        this.contextVariables = contextVariables;
+        this.children = children;
+        this.empty = empty;
+        this.sourceSpan = sourceSpan;
+        this.startSourceSpan = startSourceSpan;
+        this.endSourceSpan = endSourceSpan;
+    }
+    visit(visitor) {
+        return visitor.visitForLoopBlock(this);
+    }
+}
+class ForLoopBlockEmpty {
+    constructor(children, sourceSpan, startSourceSpan) {
+        this.children = children;
+        this.sourceSpan = sourceSpan;
+        this.startSourceSpan = startSourceSpan;
+    }
+    visit(visitor) {
+        return visitor.visitForLoopBlockEmpty(this);
+    }
+}
+class IfBlock {
+    constructor(branches, sourceSpan, startSourceSpan, endSourceSpan) {
+        this.branches = branches;
+        this.sourceSpan = sourceSpan;
+        this.startSourceSpan = startSourceSpan;
+        this.endSourceSpan = endSourceSpan;
+    }
+    visit(visitor) {
+        return visitor.visitIfBlock(this);
+    }
+}
+class IfBlockBranch {
+    constructor(expression, children, expressionAlias, sourceSpan, startSourceSpan) {
+        this.expression = expression;
+        this.children = children;
+        this.expressionAlias = expressionAlias;
+        this.sourceSpan = sourceSpan;
+        this.startSourceSpan = startSourceSpan;
+    }
+    visit(visitor) {
+        return visitor.visitIfBlockBranch(this);
+    }
 }
 class Template {
     constructor(
@@ -4084,12 +4190,7 @@ class RecursiveVisitor$1 {
         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);
+        deferred.visitAll(this);
     }
     visitDeferredBlockPlaceholder(block) {
         visitAll$1(this, block.children);
@@ -4100,6 +4201,25 @@ class RecursiveVisitor$1 {
     visitDeferredBlockLoading(block) {
         visitAll$1(this, block.children);
     }
+    visitSwitchBlock(block) {
+        visitAll$1(this, block.cases);
+    }
+    visitSwitchBlockCase(block) {
+        visitAll$1(this, block.children);
+    }
+    visitForLoopBlock(block) {
+        visitAll$1(this, block.children);
+        block.empty?.visit(this);
+    }
+    visitForLoopBlockEmpty(block) {
+        visitAll$1(this, block.children);
+    }
+    visitIfBlock(block) {
+        visitAll$1(this, block.branches);
+    }
+    visitIfBlockBranch(block) {
+        visitAll$1(this, block.children);
+    }
     visitContent(content) { }
     visitVariable(variable) { }
     visitReference(reference) { }
@@ -4749,7 +4869,7 @@ function declareI18nVariable(variable) {
 /**
  * Checks whether an object key contains potentially unsafe chars, thus the key should be wrapped in
  * quotes. Note: we do not wrap all keys into quotes, as it may have impact on minification and may
- * bot work in some cases when object keys are mangled by minifier.
+ * not work in some cases when object keys are mangled by a minifier.
  *
  * TODO(FW-1136): this is a temporary solution, we need to come up with a better way of working with
  * inputs that contain potentially unsafe chars.
@@ -4769,6 +4889,8 @@ const IMPLICIT_REFERENCE = '$implicit';
 const NON_BINDABLE_ATTR = 'ngNonBindable';
 /** Name for the variable keeping track of the context returned by `ɵɵrestoreView`. */
 const RESTORED_VIEW_CONTEXT_NAME = 'restoredCtx';
+/** Special value representing a direct access to a template's context. */
+const DIRECT_CONTEXT_REFERENCE = '#context';
 /**
  * Maximum length of a single instruction chain. Because our output AST uses recursion, we're
  * limited in how many expressions we can nest before we reach the call stack limit. This
@@ -8615,140 +8737,6 @@ function repeatGroups(groups, multiples) {
     }
 }
 
-var TagContentType;
-(function (TagContentType) {
-    TagContentType[TagContentType["RAW_TEXT"] = 0] = "RAW_TEXT";
-    TagContentType[TagContentType["ESCAPABLE_RAW_TEXT"] = 1] = "ESCAPABLE_RAW_TEXT";
-    TagContentType[TagContentType["PARSABLE_DATA"] = 2] = "PARSABLE_DATA";
-})(TagContentType || (TagContentType = {}));
-function splitNsName(elementName) {
-    if (elementName[0] != ':') {
-        return [null, elementName];
-    }
-    const colonIndex = elementName.indexOf(':', 1);
-    if (colonIndex === -1) {
-        throw new Error(`Unsupported format "${elementName}" expecting ":namespace:name"`);
-    }
-    return [elementName.slice(1, colonIndex), elementName.slice(colonIndex + 1)];
-}
-// `<ng-container>` tags work the same regardless the namespace
-function isNgContainer(tagName) {
-    return splitNsName(tagName)[1] === 'ng-container';
-}
-// `<ng-content>` tags work the same regardless the namespace
-function isNgContent(tagName) {
-    return splitNsName(tagName)[1] === 'ng-content';
-}
-// `<ng-template>` tags work the same regardless the namespace
-function isNgTemplate(tagName) {
-    return splitNsName(tagName)[1] === 'ng-template';
-}
-function getNsPrefix(fullName) {
-    return fullName === null ? null : splitNsName(fullName)[0];
-}
-function mergeNsAndName(prefix, localName) {
-    return prefix ? `:${prefix}:${localName}` : localName;
-}
-
-/**
- * Enumeration of the types of attributes which can be applied to an element.
- */
-var BindingKind;
-(function (BindingKind) {
-    /**
-     * Static attributes.
-     */
-    BindingKind[BindingKind["Attribute"] = 0] = "Attribute";
-    /**
-     * Class bindings.
-     */
-    BindingKind[BindingKind["ClassName"] = 1] = "ClassName";
-    /**
-     * Style bindings.
-     */
-    BindingKind[BindingKind["StyleProperty"] = 2] = "StyleProperty";
-    /**
-     * Dynamic property bindings.
-     */
-    BindingKind[BindingKind["Property"] = 3] = "Property";
-    /**
-     * Property or attribute bindings on a template.
-     */
-    BindingKind[BindingKind["Template"] = 4] = "Template";
-    /**
-     * Internationalized attributes.
-     */
-    BindingKind[BindingKind["I18n"] = 5] = "I18n";
-    /**
-     * TODO: Consider how Animations are handled, and if they should be a distinct BindingKind.
-     */
-    BindingKind[BindingKind["Animation"] = 6] = "Animation";
-})(BindingKind || (BindingKind = {}));
-const FLYWEIGHT_ARRAY = Object.freeze([]);
-/**
- * Container for all of the various kinds of attributes which are applied on an element.
- */
-class ElementAttributes {
-    constructor() {
-        this.known = new Set();
-        this.byKind = new Map;
-        this.projectAs = null;
-    }
-    get attributes() {
-        return this.byKind.get(BindingKind.Attribute) ?? FLYWEIGHT_ARRAY;
-    }
-    get classes() {
-        return this.byKind.get(BindingKind.ClassName) ?? FLYWEIGHT_ARRAY;
-    }
-    get styles() {
-        return this.byKind.get(BindingKind.StyleProperty) ?? FLYWEIGHT_ARRAY;
-    }
-    get bindings() {
-        return this.byKind.get(BindingKind.Property) ?? FLYWEIGHT_ARRAY;
-    }
-    get template() {
-        return this.byKind.get(BindingKind.Template) ?? FLYWEIGHT_ARRAY;
-    }
-    get i18n() {
-        return this.byKind.get(BindingKind.I18n) ?? FLYWEIGHT_ARRAY;
-    }
-    add(kind, name, value) {
-        if (this.known.has(name)) {
-            return;
-        }
-        this.known.add(name);
-        const array = this.arrayFor(kind);
-        array.push(...getAttributeNameLiterals$1(name));
-        if (kind === BindingKind.Attribute || kind === BindingKind.StyleProperty) {
-            if (value === null) {
-                throw Error('Attribute & style element attributes must have a value');
-            }
-            array.push(value);
-        }
-    }
-    arrayFor(kind) {
-        if (!this.byKind.has(kind)) {
-            this.byKind.set(kind, []);
-        }
-        return this.byKind.get(kind);
-    }
-}
-function getAttributeNameLiterals$1(name) {
-    const [attributeNamespace, attributeName] = splitNsName(name);
-    const nameLiteral = literal(attributeName);
-    if (attributeNamespace) {
-        return [
-            literal(0 /* core.AttributeMarker.NamespaceURI */), literal(attributeNamespace), nameLiteral
-        ];
-    }
-    return [nameLiteral];
-}
-function assertIsElementAttributes(attrs) {
-    if (!(attrs instanceof ElementAttributes)) {
-        throw new Error(`AssertionError: ElementAttributes has already been coalesced into the view constants`);
-    }
-}
-
 /**
  * Distinguishes different kinds of IR operations.
  *
@@ -8855,14 +8843,18 @@ var OpKind;
      * An operation to associate an attribute with an element.
      */
     OpKind[OpKind["Attribute"] = 23] = "Attribute";
+    /**
+     * An attribute that has been extracted for inclusion in the consts array.
+     */
+    OpKind[OpKind["ExtractedAttribute"] = 24] = "ExtractedAttribute";
     /**
      * A host binding property.
      */
-    OpKind[OpKind["HostProperty"] = 24] = "HostProperty";
+    OpKind[OpKind["HostProperty"] = 25] = "HostProperty";
     /**
      * A namespace change, which causes the subsequent elements to be processed as either HTML or SVG.
      */
-    OpKind[OpKind["Namespace"] = 25] = "Namespace";
+    OpKind[OpKind["Namespace"] = 26] = "Namespace";
     // TODO: Add Host Listeners, and possibly other host ops also.
 })(OpKind || (OpKind = {}));
 /**
@@ -8991,6 +8983,40 @@ var SanitizerFn;
     SanitizerFn[SanitizerFn["ResourceUrl"] = 4] = "ResourceUrl";
     SanitizerFn[SanitizerFn["IframeAttribute"] = 5] = "IframeAttribute";
 })(SanitizerFn || (SanitizerFn = {}));
+/**
+ * Enumeration of the types of attributes which can be applied to an element.
+ */
+var BindingKind;
+(function (BindingKind) {
+    /**
+     * Static attributes.
+     */
+    BindingKind[BindingKind["Attribute"] = 0] = "Attribute";
+    /**
+     * Class bindings.
+     */
+    BindingKind[BindingKind["ClassName"] = 1] = "ClassName";
+    /**
+     * Style bindings.
+     */
+    BindingKind[BindingKind["StyleProperty"] = 2] = "StyleProperty";
+    /**
+     * Dynamic property bindings.
+     */
+    BindingKind[BindingKind["Property"] = 3] = "Property";
+    /**
+     * Property or attribute bindings on a template.
+     */
+    BindingKind[BindingKind["Template"] = 4] = "Template";
+    /**
+     * Internationalized attributes.
+     */
+    BindingKind[BindingKind["I18n"] = 5] = "I18n";
+    /**
+     * Animation property bindings.
+     */
+    BindingKind[BindingKind["Animation"] = 6] = "Animation";
+})(BindingKind || (BindingKind = {}));
 
 /**
  * Marker symbol for `ConsumesSlotOpTrait`.
@@ -9133,7 +9159,7 @@ class Interpolation {
 /**
  * Create a `BindingOp`, not yet transformed into a particular type of binding.
  */
-function createBindingOp(target, kind, name, expression, unit, securityContext, isTemplate, sourceSpan) {
+function createBindingOp(target, kind, name, expression, unit, securityContext, isTextAttribute, isTemplate, sourceSpan) {
     return {
         kind: OpKind.Binding,
         bindingKind: kind,
@@ -9142,6 +9168,7 @@ function createBindingOp(target, kind, name, expression, unit, securityContext,
         expression,
         unit,
         securityContext,
+        isTextAttribute,
         isTemplate,
         sourceSpan,
         ...NEW_OP,
@@ -9224,7 +9251,7 @@ function createClassMapOp(xref, expression, sourceSpan) {
 /**
  * Create an `AttributeOp`.
  */
-function createAttributeOp(target, name, expression, securityContext, isTemplate, sourceSpan) {
+function createAttributeOp(target, name, expression, securityContext, isTextAttribute, isTemplate, sourceSpan) {
     return {
         kind: OpKind.Attribute,
         target,
@@ -9232,6 +9259,7 @@ function createAttributeOp(target, name, expression, securityContext, isTemplate
         expression,
         securityContext,
         sanitizer: null,
+        isTextAttribute,
         isTemplate,
         sourceSpan,
         ...TRAIT_DEPENDS_ON_SLOT_CONTEXT,
@@ -9861,6 +9889,10 @@ function transformExpressionsInOp(op, transform, flags) {
                 transformExpressionsInOp(innerOp, transform, flags | VisitorContextFlag.InChildOperation);
             }
             break;
+        case OpKind.ExtractedAttribute:
+            op.expression =
+                op.expression && transformExpressionsInExpression(op.expression, transform, flags);
+            break;
         case OpKind.Element:
         case OpKind.ElementStart:
         case OpKind.ElementEnd:
@@ -9965,6 +9997,12 @@ function transformExpressionsInStatement(stmt, transform, flags) {
         throw new Error(`Unhandled statement kind: ${stmt.constructor.name}`);
     }
 }
+/**
+ * Checks whether the given expression is a string literal.
+ */
+function isStringLiteral(expr) {
+    return expr instanceof LiteralExpr && typeof expr.value === 'string';
+}
 
 /**
  * A linked list of `Op` nodes of a given subtype.
@@ -10227,7 +10265,7 @@ function createElementStartOp(tag, xref, namespace, sourceSpan) {
         kind: OpKind.ElementStart,
         xref,
         tag,
-        attributes: new ElementAttributes(),
+        attributes: null,
         localRefs: [],
         nonBindable: false,
         namespace,
@@ -10243,7 +10281,7 @@ function createTemplateOp(xref, tag, namespace, sourceSpan) {
     return {
         kind: OpKind.Template,
         xref,
-        attributes: new ElementAttributes(),
+        attributes: null,
         tag,
         decls: null,
         vars: null,
@@ -10354,6 +10392,19 @@ function createNamespaceOp(namespace) {
         ...NEW_OP,
     };
 }
+/**
+ * Create an `ExtractedAttributeOp`.
+ */
+function createExtractedAttributeOp(target, bindingKind, name, expression) {
+    return {
+        kind: OpKind.ExtractedAttribute,
+        target,
+        bindingKind,
+        name,
+        expression,
+        ...NEW_OP,
+    };
+}
 
 function createHostPropertyOp(name, expression, sourceSpan) {
     return {
@@ -10663,86 +10714,7 @@ function removeAnys(e) {
 }
 
 /**
- * Parses string representation of a style and converts it into object literal.
- *
- * @param value string representation of style as used in the `style` attribute in HTML.
- *   Example: `color: red; height: auto`.
- * @returns An array of style property name and value pairs, e.g. `['color', 'red', 'height',
- * 'auto']`
- */
-function parse(value) {
-    // we use a string array here instead of a string map
-    // because a string-map is not guaranteed to retain the
-    // order of the entries whereas a string array can be
-    // constructed in a [key, value, key, value] format.
-    const styles = [];
-    let i = 0;
-    let parenDepth = 0;
-    let quote = 0 /* Char.QuoteNone */;
-    let valueStart = 0;
-    let propStart = 0;
-    let currentProp = null;
-    while (i < value.length) {
-        const token = value.charCodeAt(i++);
-        switch (token) {
-            case 40 /* Char.OpenParen */:
-                parenDepth++;
-                break;
-            case 41 /* Char.CloseParen */:
-                parenDepth--;
-                break;
-            case 39 /* Char.QuoteSingle */:
-                // valueStart needs to be there since prop values don't
-                // have quotes in CSS
-                if (quote === 0 /* Char.QuoteNone */) {
-                    quote = 39 /* Char.QuoteSingle */;
-                }
-                else if (quote === 39 /* Char.QuoteSingle */ && value.charCodeAt(i - 1) !== 92 /* Char.BackSlash */) {
-                    quote = 0 /* Char.QuoteNone */;
-                }
-                break;
-            case 34 /* Char.QuoteDouble */:
-                // same logic as above
-                if (quote === 0 /* Char.QuoteNone */) {
-                    quote = 34 /* Char.QuoteDouble */;
-                }
-                else if (quote === 34 /* Char.QuoteDouble */ && value.charCodeAt(i - 1) !== 92 /* Char.BackSlash */) {
-                    quote = 0 /* Char.QuoteNone */;
-                }
-                break;
-            case 58 /* Char.Colon */:
-                if (!currentProp && parenDepth === 0 && quote === 0 /* Char.QuoteNone */) {
-                    currentProp = hyphenate$1(value.substring(propStart, i - 1).trim());
-                    valueStart = i;
-                }
-                break;
-            case 59 /* Char.Semicolon */:
-                if (currentProp && valueStart > 0 && parenDepth === 0 && quote === 0 /* Char.QuoteNone */) {
-                    const styleVal = value.substring(valueStart, i - 1).trim();
-                    styles.push(currentProp, styleVal);
-                    propStart = i;
-                    valueStart = 0;
-                    currentProp = null;
-                }
-                break;
-        }
-    }
-    if (currentProp && valueStart) {
-        const styleVal = value.slice(valueStart).trim();
-        styles.push(currentProp, styleVal);
-    }
-    return styles;
-}
-function hyphenate$1(value) {
-    return value
-        .replace(/[a-z][A-Z]/g, v => {
-        return v.charAt(0) + '-' + v.charAt(1);
-    })
-        .toLowerCase();
-}
-
-/**
- * Gets a map of all elements in the given view by their xref id.
+ * Gets a map of all elements in the given view by their xref id.
  */
 function getElementsByXrefId(view) {
     const elements = new Map();
@@ -10756,12 +10728,39 @@ function getElementsByXrefId(view) {
 }
 
 /**
- * Find all attribute and binding ops, and collect them into the ElementAttribute structures.
+ * Find all extractable attribute and binding ops, and create ExtractedAttributeOps for them.
  * In cases where no instruction needs to be generated for the attribute or binding, it is removed.
  */
 function phaseAttributeExtraction(cpl) {
     for (const [_, view] of cpl.views) {
-        populateElementAttributes(view);
+        const elements = getElementsByXrefId(view);
+        for (const op of view.ops()) {
+            switch (op.kind) {
+                case OpKind.Attribute:
+                    extractAttributeOp(view, op, elements);
+                    break;
+                case OpKind.Property:
+                    if (!op.isAnimationTrigger) {
+                        OpList.insertBefore(createExtractedAttributeOp(op.target, op.isTemplate ? BindingKind.Template : BindingKind.Property, op.name, null), lookupElement$2(elements, op.target));
+                    }
+                    break;
+                case OpKind.StyleProp:
+                case OpKind.ClassProp:
+                    // The old compiler treated empty style bindings as regular bindings for the purpose of
+                    // directive matching. That behavior is incorrect, but we emulate it in compatibility
+                    // mode.
+                    if (view.compatibility === CompatibilityMode.TemplateDefinitionBuilder &&
+                        op.expression instanceof EmptyExpr) {
+                        OpList.insertBefore(createExtractedAttributeOp(op.target, BindingKind.Property, op.name, null), lookupElement$2(elements, op.target));
+                    }
+                    break;
+                case OpKind.Listener:
+                    if (!op.isAnimationListener) {
+                        OpList.insertBefore(createExtractedAttributeOp(op.target, BindingKind.Property, op.name, null), lookupElement$2(elements, op.target));
+                    }
+                    break;
+            }
+        }
     }
 }
 /**
@@ -10775,84 +10774,28 @@ function lookupElement$2(elements, xref) {
     return el;
 }
 /**
- * Populates the ElementAttributes map for the given view, and removes ops for any bindings that do
- * not need further processing.
+ * Extracts an attribute binding.
  */
-function populateElementAttributes(view) {
-    const elements = getElementsByXrefId(view);
-    for (const op of view.ops()) {
-        let ownerOp;
-        switch (op.kind) {
-            case OpKind.Attribute:
-                extractAttributeOp(view, op, elements);
-                break;
-            case OpKind.Property:
-                if (op.isAnimationTrigger) {
-                    continue; // Don't extract animation properties.
-                }
-                ownerOp = lookupElement$2(elements, op.target);
-                assertIsElementAttributes(ownerOp.attributes);
-                ownerOp.attributes.add(op.isTemplate ? BindingKind.Template : BindingKind.Property, op.name, null);
-                break;
-            case OpKind.StyleProp:
-            case OpKind.ClassProp:
-                ownerOp = lookupElement$2(elements, op.target);
-                assertIsElementAttributes(ownerOp.attributes);
-                // Empty StyleProperty and ClassName expressions are treated differently depending on
-                // compatibility mode.
-                if (view.compatibility === CompatibilityMode.TemplateDefinitionBuilder &&
-                    op.expression instanceof EmptyExpr) {
-                    // The old compiler treated empty style bindings as regular bindings for the purpose of
-                    // directive matching. That behavior is incorrect, but we emulate it in compatibility
-                    // mode.
-                    ownerOp.attributes.add(BindingKind.Property, op.name, null);
-                }
-                break;
-            case OpKind.Listener:
-                if (op.isAnimationListener) {
-                    continue; // Don't extract animation listeners.
-                }
-                ownerOp = lookupElement$2(elements, op.target);
-                assertIsElementAttributes(ownerOp.attributes);
-                ownerOp.attributes.add(BindingKind.Property, op.name, null);
-                break;
-        }
-    }
-}
-function isStringLiteral(expr) {
-    return expr instanceof LiteralExpr && typeof expr.value === 'string';
-}
 function extractAttributeOp(view, op, elements) {
     if (op.expression instanceof Interpolation) {
         return;
     }
     const ownerOp = lookupElement$2(elements, op.target);
-    assertIsElementAttributes(ownerOp.attributes);
-    if (op.name === 'style' && isStringLiteral(op.expression)) {
-        // TemplateDefinitionBuilder did not extract style attributes that had a security context.
-        if (view.compatibility === CompatibilityMode.TemplateDefinitionBuilder &&
-            op.securityContext !== SecurityContext.NONE) {
-            return;
-        }
-        // Extract style attributes.
-        const parsedStyles = parse(op.expression.value);
-        for (let i = 0; i < parsedStyles.length - 1; i += 2) {
-            ownerOp.attributes.add(BindingKind.StyleProperty, parsedStyles[i], literal(parsedStyles[i + 1]));
-        }
+    let extractable = op.expression.isConstant();
+    if (view.compatibility === CompatibilityMode.TemplateDefinitionBuilder) {
+        // TemplateDefinitionBuilder only extracted attributes that were string literals.
+        extractable = isStringLiteral(op.expression);
+        if (op.name === 'style' || op.name === 'class') {
+            // For style and class attributes, TemplateDefinitionBuilder only extracted them if they were
+            // text attributes. For example, `[attr.class]="'my-class'"` was not extracted despite being a
+            // string literal, because it is not a text attribute.
+            extractable &&= op.isTextAttribute;
+        }
+    }
+    if (extractable) {
+        OpList.insertBefore(createExtractedAttributeOp(op.target, op.isTemplate ? BindingKind.Template : BindingKind.Attribute, op.name, op.expression), ownerOp);
         OpList.remove(op);
     }
-    else {
-        // The old compiler only extracted string constants, so we emulate that behavior in
-        // compaitiblity mode, otherwise we optimize more aggressively.
-        let extractable = view.compatibility === CompatibilityMode.TemplateDefinitionBuilder ?
-            (op.expression instanceof LiteralExpr && typeof op.expression.value === 'string') :
-            op.expression.isConstant();
-        // We don't need to generate instructions for attributes that can be extracted as consts.
-        if (extractable) {
-            ownerOp.attributes.add(op.isTemplate ? BindingKind.Template : BindingKind.Attribute, op.name, op.expression);
-            OpList.remove(op);
-        }
-    }
 }
 
 /**
@@ -10888,7 +10831,7 @@ function phaseBindingSpecialization(job) {
                         target.nonBindable = true;
                     }
                     else {
-                        OpList.replace(op, createAttributeOp(op.target, op.name, op.expression, op.securityContext, op.isTemplate, op.sourceSpan));
+                        OpList.replace(op, createAttributeOp(op.target, op.name, op.expression, op.securityContext, op.isTextAttribute, op.isTemplate, op.sourceSpan));
                     }
                     break;
                 case BindingKind.Property:
@@ -10997,30 +10940,142 @@ function chainOperationsInList(opList) {
     }
 }
 
+var TagContentType;
+(function (TagContentType) {
+    TagContentType[TagContentType["RAW_TEXT"] = 0] = "RAW_TEXT";
+    TagContentType[TagContentType["ESCAPABLE_RAW_TEXT"] = 1] = "ESCAPABLE_RAW_TEXT";
+    TagContentType[TagContentType["PARSABLE_DATA"] = 2] = "PARSABLE_DATA";
+})(TagContentType || (TagContentType = {}));
+function splitNsName(elementName) {
+    if (elementName[0] != ':') {
+        return [null, elementName];
+    }
+    const colonIndex = elementName.indexOf(':', 1);
+    if (colonIndex === -1) {
+        throw new Error(`Unsupported format "${elementName}" expecting ":namespace:name"`);
+    }
+    return [elementName.slice(1, colonIndex), elementName.slice(colonIndex + 1)];
+}
+// `<ng-container>` tags work the same regardless the namespace
+function isNgContainer(tagName) {
+    return splitNsName(tagName)[1] === 'ng-container';
+}
+// `<ng-content>` tags work the same regardless the namespace
+function isNgContent(tagName) {
+    return splitNsName(tagName)[1] === 'ng-content';
+}
+// `<ng-template>` tags work the same regardless the namespace
+function isNgTemplate(tagName) {
+    return splitNsName(tagName)[1] === 'ng-template';
+}
+function getNsPrefix(fullName) {
+    return fullName === null ? null : splitNsName(fullName)[0];
+}
+function mergeNsAndName(prefix, localName) {
+    return prefix ? `:${prefix}:${localName}` : localName;
+}
+
 /**
  * Converts the semantic attributes of element-like operations (elements, templates) into constant
  * array expressions, and lifts them into the overall component `consts`.
  */
 function phaseConstCollection(cpl) {
+    // Collect all extracted attributes.
+    const elementAttributes = new Map();
     for (const [_, view] of cpl.views) {
         for (const op of view.create) {
-            if (op.kind !== OpKind.ElementStart && op.kind !== OpKind.Element &&
-                op.kind !== OpKind.Template) {
-                continue;
-            }
-            else if (!(op.attributes instanceof ElementAttributes)) {
-                continue;
+            if (op.kind === OpKind.ExtractedAttribute) {
+                const attributes = elementAttributes.get(op.target) || new ElementAttributes();
+                elementAttributes.set(op.target, attributes);
+                attributes.add(op.bindingKind, op.name, op.expression);
+                OpList.remove(op);
             }
-            const attrArray = serializeAttributes(op.attributes);
-            if (attrArray.entries.length > 0) {
-                op.attributes = cpl.addConst(attrArray);
+        }
+    }
+    // Serialize the extracted attributes into the const array.
+    for (const [_, view] of cpl.views) {
+        for (const op of view.create) {
+            if (op.kind === OpKind.Element || op.kind === OpKind.ElementStart ||
+                op.kind === OpKind.Template) {
+                const attributes = elementAttributes.get(op.xref);
+                if (attributes !== undefined) {
+                    const attrArray = serializeAttributes(attributes);
+                    if (attrArray.entries.length > 0) {
+                        op.attributes = cpl.addConst(attrArray);
+                    }
+                }
             }
-            else {
-                op.attributes = null;
+        }
+    }
+}
+/**
+ * Shared instance of an empty array to avoid unnecessary array allocations.
+ */
+const FLYWEIGHT_ARRAY = Object.freeze([]);
+/**
+ * Container for all of the various kinds of attributes which are applied on an element.
+ */
+class ElementAttributes {
+    constructor() {
+        this.known = new Set();
+        this.byKind = new Map;
+        this.projectAs = null;
+    }
+    get attributes() {
+        return this.byKind.get(BindingKind.Attribute) ?? FLYWEIGHT_ARRAY;
+    }
+    get classes() {
+        return this.byKind.get(BindingKind.ClassName) ?? FLYWEIGHT_ARRAY;
+    }
+    get styles() {
+        return this.byKind.get(BindingKind.StyleProperty) ?? FLYWEIGHT_ARRAY;
+    }
+    get bindings() {
+        return this.byKind.get(BindingKind.Property) ?? FLYWEIGHT_ARRAY;
+    }
+    get template() {
+        return this.byKind.get(BindingKind.Template) ?? FLYWEIGHT_ARRAY;
+    }
+    get i18n() {
+        return this.byKind.get(BindingKind.I18n) ?? FLYWEIGHT_ARRAY;
+    }
+    add(kind, name, value) {
+        if (this.known.has(name)) {
+            return;
+        }
+        this.known.add(name);
+        const array = this.arrayFor(kind);
+        array.push(...getAttributeNameLiterals$1(name));
+        if (kind === BindingKind.Attribute || kind === BindingKind.StyleProperty) {
+            if (value === null) {
+                throw Error('Attribute & style element attributes must have a value');
             }
+            array.push(value);
+        }
+    }
+    arrayFor(kind) {
+        if (!this.byKind.has(kind)) {
+            this.byKind.set(kind, []);
         }
+        return this.byKind.get(kind);
+    }
+}
+/**
+ * Gets an array of literal expressions representing the attribute's namespaced name.
+ */
+function getAttributeNameLiterals$1(name) {
+    const [attributeNamespace, attributeName] = splitNsName(name);
+    const nameLiteral = literal(attributeName);
+    if (attributeNamespace) {
+        return [
+            literal(0 /* core.AttributeMarker.NamespaceURI */), literal(attributeNamespace), nameLiteral
+        ];
     }
+    return [nameLiteral];
 }
+/**
+ * Serializes an ElementAttributes object into an array expression.
+ */
 function serializeAttributes({ attributes, bindings, classes, i18n, projectAs, styles, template }) {
     const attrArray = [...attributes];
     if (projectAs !== null) {
@@ -11426,7 +11481,7 @@ function phaseHostStylePropertyParsing(job) {
             op.bindingKind = BindingKind.StyleProperty;
             op.name = op.name.substring(STYLE_DOT.length);
             if (isCssCustomProperty$1(op.name)) {
-                op.name = hyphenate(op.name);
+                op.name = hyphenate$1(op.name);
             }
             const { property, suffix } = parseProperty$1(op.name);
             op.name = property;
@@ -11449,7 +11504,7 @@ function phaseHostStylePropertyParsing(job) {
 function isCssCustomProperty$1(name) {
     return name.startsWith('--');
 }
-function hyphenate(value) {
+function hyphenate$1(value) {
     return value
         .replace(/[a-z][A-Z]/g, v => {
         return v.charAt(0) + '-' + v.charAt(1);
@@ -11524,6 +11579,85 @@ function phaseNamespace(job) {
     }
 }
 
+/**
+ * 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 BINARY_OPERATORS = new Map([
     ['&&', BinaryOperator.And],
     ['>', BinaryOperator.Bigger],
@@ -11664,7 +11798,7 @@ function getVariableName(variable, state) {
  * Normalizes a style prop name by hyphenating it (unless its a CSS variable).
  */
 function normalizeStylePropName(name) {
-    return name.startsWith('--') ? name : hyphenate$1(name);
+    return name.startsWith('--') ? name : hyphenate(name);
 }
 /**
  * Strips `!important` out of the given style or class name.
@@ -11846,6 +11980,34 @@ function phaseNullishCoalescing(job) {
     }
 }
 
+/**
+ * Parses extracted style and class attributes into separate ExtractedAttributeOps per style or
+ * class property.
+ */
+function phaseParseExtractedStyles(cpl) {
+    for (const [_, view] of cpl.views) {
+        for (const op of view.create) {
+            if (op.kind === OpKind.ExtractedAttribute && op.bindingKind === BindingKind.Attribute &&
+                isStringLiteral(op.expression)) {
+                if (op.name === 'style') {
+                    const parsedStyles = parse(op.expression.value);
+                    for (let i = 0; i < parsedStyles.length - 1; i += 2) {
+                        OpList.insertBefore(createExtractedAttributeOp(op.target, BindingKind.StyleProperty, parsedStyles[i], literal(parsedStyles[i + 1])), op);
+                    }
+                    OpList.remove(op);
+                }
+                else if (op.name === 'class') {
+                    const parsedClasses = op.expression.value.trim().split(/\s+/g);
+                    for (const parsedClass of parsedClasses) {
+                        OpList.insertBefore(createExtractedAttributeOp(op.target, BindingKind.ClassName, parsedClass, null), op);
+                    }
+                    OpList.remove(op);
+                }
+            }
+        }
+    }
+}
+
 function phasePipeCreation(cpl) {
     for (const view of cpl.views.values()) {
         processPipeBindingsInView(view);
@@ -13593,6 +13755,7 @@ function transformTemplate(job) {
     phaseStyleBindingSpecialization(job);
     phaseBindingSpecialization(job);
     phaseAttributeExtraction(job);
+    phaseParseExtractedStyles(job);
     phaseRemoveEmptyBindings(job);
     phaseNoListenersOnTemplates(job);
     phasePipeCreation(job);
@@ -13760,7 +13923,7 @@ function ingestComponent(componentName, template, constantPool) {
 function ingestHostBinding(input, bindingParser, constantPool) {
     const job = new HostBindingCompilationJob(input.componentName, constantPool, compatibilityMode);
     for (const property of input.properties ?? []) {
-        ingestHostProperty(job, property);
+        ingestHostProperty(job, property, false);
     }
     for (const event of input.events ?? []) {
         ingestHostEvent(job, event);
@@ -13769,7 +13932,7 @@ function ingestHostBinding(input, bindingParser, constantPool) {
 }
 // TODO: We should refactor the parser to use the same types and structures for host bindings as
 // with ordinary components. This would allow us to share a lot more ingestion code.
-function ingestHostProperty(job, property) {
+function ingestHostProperty(job, property, isTextAttribute) {
     let expression;
     const ast = property.expression.ast;
     if (ast instanceof Interpolation$1) {
@@ -13786,7 +13949,7 @@ function ingestHostProperty(job, property) {
         bindingKind = BindingKind.Attribute;
     }
     job.update.push(createBindingOp(job.root.xref, bindingKind, property.name, expression, null, SecurityContext
-        .NONE /* TODO: what should we pass as security context? Passing NONE for now. */, false, property.sourceSpan));
+        .NONE /* TODO: what should we pass as security context? Passing NONE for now. */, isTextAttribute, false, property.sourceSpan));
 }
 function ingestHostEvent(job, event) { }
 /**
@@ -13964,10 +14127,10 @@ function ingestBindings(view, op, element) {
     if (element instanceof Template) {
         for (const attr of element.templateAttrs) {
             if (attr instanceof TextAttribute) {
-                ingestBinding(view, op.xref, attr.name, literal(attr.value), 1 /* e.BindingType.Attribute */, null, SecurityContext.NONE, attr.sourceSpan, true);
+                ingestBinding(view, op.xref, attr.name, literal(attr.value), 1 /* e.BindingType.Attribute */, null, SecurityContext.NONE, attr.sourceSpan, true, true);
             }
             else {
-                ingestBinding(view, op.xref, attr.name, attr.value, attr.type, attr.unit, attr.securityContext, attr.sourceSpan, true);
+                ingestBinding(view, op.xref, attr.name, attr.value, attr.type, attr.unit, attr.securityContext, attr.sourceSpan, false, true);
             }
         }
     }
@@ -13975,10 +14138,10 @@ function ingestBindings(view, op, element) {
         // This is only attribute TextLiteral bindings, such as `attr.foo="bar"`. This can never be
         // `[attr.foo]="bar"` or `attr.foo="{{bar}}"`, both of which will be handled as inputs with
         // `BindingType.Attribute`.
-        ingestBinding(view, op.xref, attr.name, literal(attr.value), 1 /* e.BindingType.Attribute */, null, SecurityContext.NONE, attr.sourceSpan, false);
+        ingestBinding(view, op.xref, attr.name, literal(attr.value), 1 /* e.BindingType.Attribute */, null, SecurityContext.NONE, attr.sourceSpan, true, false);
     }
     for (const input of element.inputs) {
-        ingestBinding(view, op.xref, input.name, input.value, input.type, input.unit, input.securityContext, input.sourceSpan, false);
+        ingestBinding(view, op.xref, input.name, input.value, input.type, input.unit, input.securityContext, input.sourceSpan, false, false);
     }
     for (const output of element.outputs) {
         let listenerOp;
@@ -14024,7 +14187,7 @@ const BINDING_KINDS = new Map([
     [3 /* e.BindingType.Style */, BindingKind.StyleProperty],
     [4 /* e.BindingType.Animation */, BindingKind.Animation],
 ]);
-function ingestBinding(view, xref, name, value, type, unit, securityContext, sourceSpan, isTemplateBinding) {
+function ingestBinding(view, xref, name, value, type, unit, securityContext, sourceSpan, isTextAttribute, isTemplateBinding) {
     if (value instanceof ASTWithSource) {
         value = value.ast;
     }
@@ -14039,7 +14202,7 @@ function ingestBinding(view, xref, name, value, type, unit, securityContext, sou
         expression = value;
     }
     const kind = BINDING_KINDS.get(type);
-    view.update.push(createBindingOp(xref, kind, name, expression, unit, securityContext, isTemplateBinding, sourceSpan));
+    view.update.push(createBindingOp(xref, kind, name, expression, unit, securityContext, isTextAttribute, isTemplateBinding, sourceSpan));
 }
 /**
  * Process all of the local references on an element-like structure in the template AST and
@@ -14234,7 +14397,7 @@ class StylingBuilder {
         // CSS custom properties are case-sensitive so we shouldn't normalize them.
         // See: https://www.w3.org/TR/css-variables-1/#defining-variables
         if (!isCssCustomProperty(name)) {
-            name = hyphenate$1(name);
+            name = hyphenate(name);
         }
         const { property, hasOverrideFlag, suffix: bindingSuffix } = parseProperty(name);
         suffix = typeof suffix === 'string' && suffix.length !== 0 ? suffix : bindingSuffix;
@@ -21301,6 +21464,328 @@ function normalizeNgContentSelect(selectAttr) {
     return selectAttr;
 }
 
+/** Pattern for the expression in a for loop block. */
+const FOR_LOOP_EXPRESSION_PATTERN = /^\s*([0-9A-Za-z_$]*)\s+of\s+(.*)/;
+/** Pattern for the tracking expression in a for loop block. */
+const FOR_LOOP_TRACK_PATTERN = /^track\s+(.*)/;
+/** Pattern for the `as` expression in a conditional block. */
+const CONDITIONAL_ALIAS_PATTERN = /^as\s+(.*)/;
+/** Pattern used to identify an `else if` block. */
+const ELSE_IF_PATTERN = /^if\s/;
+/** Pattern used to identify a `let` parameter. */
+const FOR_LOOP_LET_PATTERN = /^let\s+(.*)/;
+/** Names of variables that are allowed to be used in the `let` expression of a `for` loop. */
+const ALLOWED_FOR_LOOP_LET_VARIABLES = new Set(['$index', '$first', '$last', '$even', '$odd', '$count']);
+/** Creates an `if` loop block from an HTML AST node. */
+function createIfBlock(ast, visitor, bindingParser) {
+    const errors = validateIfBlock(ast);
+    const branches = [];
+    if (errors.length > 0) {
+        return { node: null, errors };
+    }
+    // Assumes that the structure is valid since we validated it above.
+    for (const block of ast.blocks) {
+        const children = visitAll(visitor, block.children);
+        // `{:else}` block.
+        if (block.name === 'else' && block.parameters.length === 0) {
+            branches.push(new IfBlockBranch(null, children, null, block.sourceSpan, block.startSourceSpan));
+            continue;
+        }
+        const params = parseConditionalBlockParameters(block, errors, bindingParser);
+        if (params !== null) {
+            branches.push(new IfBlockBranch(params.expression, children, params.expressionAlias, block.sourceSpan, block.startSourceSpan));
+        }
+    }
+    return {
+        node: new IfBlock(branches, ast.sourceSpan, ast.startSourceSpan, ast.endSourceSpan),
+        errors,
+    };
+}
+/** Creates a `for` loop block from an HTML AST node. */
+function createForLoop(ast, visitor, bindingParser) {
+    const [primaryBlock, ...secondaryBlocks] = ast.blocks;
+    const errors = [];
+    const params = parseForLoopParameters(primaryBlock, errors, bindingParser);
+    let node = null;
+    let empty = null;
+    for (const block of secondaryBlocks) {
+        if (block.name === 'empty') {
+            if (empty !== null) {
+                errors.push(new ParseError(block.sourceSpan, 'For loop can only have one "empty" block'));
+            }
+            else if (block.parameters.length > 0) {
+                errors.push(new ParseError(block.sourceSpan, 'Empty block cannot have parameters'));
+            }
+            else {
+                empty = new ForLoopBlockEmpty(visitAll(visitor, block.children), block.sourceSpan, block.startSourceSpan);
+            }
+        }
+        else {
+            errors.push(new ParseError(block.sourceSpan, `Unrecognized loop block "${block.name}"`));
+        }
+    }
+    if (params !== null) {
+        if (params.trackBy === null) {
+            errors.push(new ParseError(ast.sourceSpan, 'For loop must have a "track" expression'));
+        }
+        else {
+            node = new ForLoopBlock(params.itemName, params.expression, params.trackBy, params.context, visitAll(visitor, primaryBlock.children), empty, ast.sourceSpan, ast.startSourceSpan, ast.endSourceSpan);
+        }
+    }
+    return { node, errors };
+}
+/** Creates a switch block from an HTML AST node. */
+function createSwitchBlock(ast, visitor, bindingParser) {
+    const [primaryBlock, ...secondaryBlocks] = ast.blocks;
+    const errors = validateSwitchBlock(ast);
+    if (errors.length > 0) {
+        return { node: null, errors };
+    }
+    const primaryExpression = parseBlockParameterToBinding(primaryBlock.parameters[0], bindingParser);
+    const cases = [];
+    let defaultCase = null;
+    // Here we assume that all the blocks are valid given that we validated them above.
+    for (const block of secondaryBlocks) {
+        const expression = block.name === 'case' ?
+            parseBlockParameterToBinding(block.parameters[0], bindingParser) :
+            null;
+        const ast = new SwitchBlockCase(expression, visitAll(visitor, block.children), block.sourceSpan, block.startSourceSpan);
+        if (expression === null) {
+            defaultCase = ast;
+        }
+        else {
+            cases.push(ast);
+        }
+    }
+    // Ensure that the default case is last in the array.
+    if (defaultCase !== null) {
+        cases.push(defaultCase);
+    }
+    return {
+        node: new SwitchBlock(primaryExpression, cases, ast.sourceSpan, ast.startSourceSpan, ast.endSourceSpan),
+        errors
+    };
+}
+/** Parses the parameters of a `for` loop block. */
+function parseForLoopParameters(block, errors, bindingParser) {
+    if (block.parameters.length === 0) {
+        errors.push(new ParseError(block.sourceSpan, 'For loop does not have an expression'));
+        return null;
+    }
+    const [expressionParam, ...secondaryParams] = block.parameters;
+    const match = stripOptionalParentheses(expressionParam, errors)?.match(FOR_LOOP_EXPRESSION_PATTERN);
+    if (!match || match[2].trim().length === 0) {
+        errors.push(new ParseError(expressionParam.sourceSpan, 'Cannot parse expression. For loop expression must match the pattern "<identifier> of <expression>"'));
+        return null;
+    }
+    const [, itemName, rawExpression] = match;
+    const result = {
+        itemName,
+        trackBy: null,
+        expression: parseBlockParameterToBinding(expressionParam, bindingParser, rawExpression),
+        context: null,
+    };
+    for (const param of secondaryParams) {
+        const letMatch = param.expression.match(FOR_LOOP_LET_PATTERN);
+        if (letMatch !== null) {
+            result.context = result.context || {};
+            parseLetParameter(param.sourceSpan, letMatch[1], result.context, errors);
+            continue;
+        }
+        const trackMatch = param.expression.match(FOR_LOOP_TRACK_PATTERN);
+        if (trackMatch !== null) {
+            if (result.trackBy !== null) {
+                errors.push(new ParseError(param.sourceSpan, 'For loop can only have one "track" expression'));
+            }
+            else {
+                result.trackBy = parseBlockParameterToBinding(param, bindingParser, trackMatch[1]);
+            }
+            continue;
+        }
+        errors.push(new ParseError(param.sourceSpan, `Unrecognized loop paramater "${param.expression}"`));
+    }
+    return result;
+}
+/** Parses the `let` parameter of a `for` loop block. */
+function parseLetParameter(sourceSpan, expression, context, errors) {
+    const parts = expression.split(',');
+    for (const part of parts) {
+        const expressionParts = part.split('=');
+        const name = expressionParts.length === 2 ? expressionParts[0].trim() : '';
+        const variableName = expressionParts.length === 2 ? expressionParts[1].trim() : '';
+        if (name.length === 0 || variableName.length === 0) {
+            errors.push(new ParseError(sourceSpan, `Invalid for loop "let" parameter. Parameter should match the pattern "<name> = <variable name>"`));
+        }
+        else if (!ALLOWED_FOR_LOOP_LET_VARIABLES.has(variableName)) {
+            errors.push(new ParseError(sourceSpan, `Unknown "let" parameter variable "${variableName}". The allowed variables are: ${Array.from(ALLOWED_FOR_LOOP_LET_VARIABLES).join(', ')}`));
+        }
+        else if (context.hasOwnProperty(variableName)) {
+            errors.push(new ParseError(sourceSpan, `Duplicate "let" parameter variable "${variableName}"`));
+        }
+        else {
+            context[variableName] = name;
+        }
+    }
+}
+/** Checks that the shape of a `if` block is valid. Returns an array of errors. */
+function validateIfBlock(ast) {
+    const errors = [];
+    let hasElse = false;
+    for (let i = 0; i < ast.blocks.length; i++) {
+        const block = ast.blocks[i];
+        // Conditional blocks only allow `if`, `else if` and `else` blocks.
+        if ((block.name !== 'if' || i > 0) && block.name !== 'else') {
+            errors.push(new ParseError(block.sourceSpan, `Unrecognized conditional block "${block.name}"`));
+            continue;
+        }
+        if (block.name === 'if') {
+            continue;
+        }
+        if (block.parameters.length === 0) {
+            if (hasElse) {
+                errors.push(new ParseError(block.sourceSpan, 'Conditional can only have one "else" block'));
+            }
+            else if (ast.blocks.length > 1 && i < ast.blocks.length - 1) {
+                errors.push(new ParseError(block.sourceSpan, 'Else block must be last inside the conditional'));
+            }
+            hasElse = true;
+            // `else if` is an edge case, because it has a space after the block name
+            // which means that the `if` is captured as a part of the parameters.
+        }
+        else if (block.parameters.length > 0 && !ELSE_IF_PATTERN.test(block.parameters[0].expression)) {
+            errors.push(new ParseError(block.sourceSpan, 'Else block cannot have parameters'));
+        }
+    }
+    return errors;
+}
+/** Checks that the shape of a `switch` block is valid. Returns an array of errors. */
+function validateSwitchBlock(ast) {
+    const [primaryBlock, ...secondaryBlocks] = ast.blocks;
+    const errors = [];
+    let hasDefault = false;
+    if (primaryBlock.children.length > 0) {
+        errors.push(new ParseError(primaryBlock.sourceSpan, 'Switch block can only contain "case" and "default" blocks'));
+    }
+    if (primaryBlock.parameters.length !== 1) {
+        errors.push(new ParseError(primaryBlock.sourceSpan, 'Switch block must have exactly one parameter'));
+    }
+    for (const block of secondaryBlocks) {
+        if (block.name === 'case') {
+            if (block.parameters.length !== 1) {
+                errors.push(new ParseError(block.sourceSpan, 'Case block must have exactly one parameter'));
+            }
+        }
+        else if (block.name === 'default') {
+            if (hasDefault) {
+                errors.push(new ParseError(block.sourceSpan, 'Switch block can only have one "default" block'));
+            }
+            else if (block.parameters.length > 0) {
+                errors.push(new ParseError(block.sourceSpan, 'Default block cannot have parameters'));
+            }
+            hasDefault = true;
+        }
+        else {
+            errors.push(new ParseError(block.sourceSpan, 'Switch block can only contain "case" and "default" blocks'));
+        }
+    }
+    return errors;
+}
+function parseBlockParameterToBinding(ast, bindingParser, part = 0) {
+    let start;
+    let end;
+    if (typeof part === 'number') {
+        start = part;
+        end = ast.expression.length;
+    }
+    else {
+        // Note: `lastIndexOf` here should be enough to know the start index of the expression,
+        // because we know that it'll be at the end of the param. Ideally we could use the `d`
+        // flag when matching via regex and get the index from `match.indices`, but it's unclear
+        // if we can use it yet since it's a relatively new feature. See:
+        // https://github.com/tc39/proposal-regexp-match-indices
+        start = Math.max(0, ast.expression.lastIndexOf(part));
+        end = start + part.length;
+    }
+    return bindingParser.parseBinding(ast.expression.slice(start, end), false, ast.sourceSpan, ast.sourceSpan.start.offset + start);
+}
+/** Parses the parameter of a conditional block (`if` or `else if`). */
+function parseConditionalBlockParameters(block, errors, bindingParser) {
+    if (block.parameters.length === 0) {
+        errors.push(new ParseError(block.sourceSpan, 'Conditional block does not have an expression'));
+        return null;
+    }
+    const isPrimaryIfBlock = block.name === 'if';
+    const expression = 
+    // Expressions for `{:else if}` blocks start at 2 to skip the `if` from the expression.
+    parseBlockParameterToBinding(block.parameters[0], bindingParser, isPrimaryIfBlock ? 0 : 2);
+    let expressionAlias = null;
+    // Start from 1 since we processed the first parameter already.
+    for (let i = 1; i < block.parameters.length; i++) {
+        const param = block.parameters[i];
+        const aliasMatch = param.expression.match(CONDITIONAL_ALIAS_PATTERN);
+        // For now conditionals can only have an `as` parameter.
+        // We may want to rework this later if we add more.
+        if (aliasMatch === null) {
+            errors.push(new ParseError(param.sourceSpan, `Unrecognized conditional paramater "${param.expression}"`));
+        }
+        else if (!isPrimaryIfBlock) {
+            errors.push(new ParseError(param.sourceSpan, '"as" expression is only allowed on the primary "if" block'));
+        }
+        else if (expressionAlias !== null) {
+            errors.push(new ParseError(param.sourceSpan, 'Conditional can only have one "as" expression'));
+        }
+        else {
+            expressionAlias = aliasMatch[1].trim();
+        }
+    }
+    return { expression, expressionAlias };
+}
+/** Strips optional parentheses around from a control from expression parameter. */
+function stripOptionalParentheses(param, errors) {
+    const expression = param.expression;
+    const spaceRegex = /^\s$/;
+    let openParens = 0;
+    let start = 0;
+    let end = expression.length - 1;
+    for (let i = 0; i < expression.length; i++) {
+        const char = expression[i];
+        if (char === '(') {
+            start = i + 1;
+            openParens++;
+        }
+        else if (spaceRegex.test(char)) {
+            continue;
+        }
+        else {
+            break;
+        }
+    }
+    if (openParens === 0) {
+        return expression;
+    }
+    for (let i = expression.length - 1; i > -1; i--) {
+        const char = expression[i];
+        if (char === ')') {
+            end = i;
+            openParens--;
+            if (openParens === 0) {
+                break;
+            }
+        }
+        else if (spaceRegex.test(char)) {
+            continue;
+        }
+        else {
+            break;
+        }
+    }
+    if (openParens !== 0) {
+        errors.push(new ParseError(param.sourceSpan, 'Unclosed parentheses in expression'));
+        return null;
+    }
+    return expression.slice(start, end);
+}
+
 /** Pattern for a timing value in a trigger. */
 const TIME_PATTERN = /^\d+(ms|s)?$/;
 /** Pattern for a separator between keywords in a trigger expression. */
@@ -21322,38 +21807,41 @@ var OnTriggerType;
     OnTriggerType["VIEWPORT"] = "viewport";
 })(OnTriggerType || (OnTriggerType = {}));
 /** Parses a `when` deferred trigger. */
-function parseWhenTrigger({ expression, sourceSpan }, bindingParser, errors) {
+function parseWhenTrigger({ expression, sourceSpan }, bindingParser, triggers, 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);
+    else {
+        const start = getTriggerParametersStart(expression, whenIndex + 1);
+        const parsed = bindingParser.parseBinding(expression.slice(start), false, sourceSpan, sourceSpan.start.offset + start);
+        trackTrigger('when', triggers, errors, new BoundDeferredTrigger(parsed, sourceSpan));
+    }
 }
 /** Parses an `on` trigger */
-function parseOnTrigger({ expression, sourceSpan }, errors) {
+function parseOnTrigger({ expression, sourceSpan }, triggers, 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();
+    else {
+        const start = getTriggerParametersStart(expression, onIndex + 1);
+        const parser = new OnTriggerParser(expression, start, sourceSpan, triggers, errors);
+        parser.parse();
+    }
 }
 class OnTriggerParser {
-    constructor(expression, start, span, errors) {
+    constructor(expression, start, span, triggers, errors) {
         this.expression = expression;
         this.start = start;
         this.span = span;
+        this.triggers = triggers;
         this.errors = errors;
         this.index = 0;
-        this.triggers = [];
         this.tokens = new Lexer().tokenize(expression.slice(start));
     }
     parse() {
@@ -21384,7 +21872,6 @@ class OnTriggerParser {
             }
             this.advance();
         }
-        return this.triggers;
     }
     advance() {
         this.index++;
@@ -21405,22 +21892,22 @@ class OnTriggerParser {
         try {
             switch (identifier.toString()) {
                 case OnTriggerType.IDLE:
-                    this.triggers.push(createIdleTrigger(parameters, sourceSpan));
+                    this.trackTrigger('idle', createIdleTrigger(parameters, sourceSpan));
                     break;
                 case OnTriggerType.TIMER:
-                    this.triggers.push(createTimerTrigger(parameters, sourceSpan));
+                    this.trackTrigger('timer', createTimerTrigger(parameters, sourceSpan));
                     break;
                 case OnTriggerType.INTERACTION:
-                    this.triggers.push(createInteractionTrigger(parameters, sourceSpan));
+                    this.trackTrigger('interaction', createInteractionTrigger(parameters, sourceSpan));
                     break;
                 case OnTriggerType.IMMEDIATE:
-                    this.triggers.push(createImmediateTrigger(parameters, sourceSpan));
+                    this.trackTrigger('immediate', createImmediateTrigger(parameters, sourceSpan));
                     break;
                 case OnTriggerType.HOVER:
-                    this.triggers.push(createHoverTrigger(parameters, sourceSpan));
+                    this.trackTrigger('hover', createHoverTrigger(parameters, sourceSpan));
                     break;
                 case OnTriggerType.VIEWPORT:
-                    this.triggers.push(createViewportTrigger(parameters, sourceSpan));
+                    this.trackTrigger('viewport', createViewportTrigger(parameters, sourceSpan));
                     break;
                 default:
                     throw new Error(`Unrecognized trigger type "${identifier}"`);
@@ -21489,6 +21976,9 @@ class OnTriggerParser {
         // Eventually we could expose this information on the token directly.
         return this.expression.slice(this.start + this.token().index, this.start + this.token().end);
     }
+    trackTrigger(name, trigger) {
+        trackTrigger(name, this.triggers, this.errors, trigger);
+    }
     error(token, message) {
         const newStart = this.span.start.moveBy(this.start + token.index);
         const newEnd = newStart.moveBy(token.end - token.index);
@@ -21498,6 +21988,15 @@ class OnTriggerParser {
         this.error(token, `Unexpected token "${token}"`);
     }
 }
+/** Adds a trigger to a map of triggers. */
+function trackTrigger(name, allTriggers, errors, trigger) {
+    if (allTriggers[name]) {
+        errors.push(new ParseError(trigger.sourceSpan, `Duplicate "${name}" trigger is not allowed`));
+    }
+    else {
+        allTriggers[name] = trigger;
+    }
+}
 function createIdleTrigger(parameters, sourceSpan) {
     if (parameters.length > 0) {
         throw new Error(`"${OnTriggerType.IDLE}" trigger cannot have parameters`);
@@ -21641,6 +22140,9 @@ function parsePlaceholderBlock(ast, visitor) {
     let minimumTime = null;
     for (const param of ast.parameters) {
         if (MINIMUM_PARAMETER_PATTERN.test(param.expression)) {
+            if (minimumTime != null) {
+                throw new Error(`Placeholder block can only have one "minimum" parameter`);
+            }
             const parsedTime = parseDeferredTime(param.expression.slice(getTriggerParametersStart(param.expression)));
             if (parsedTime === null) {
                 throw new Error(`Could not parse time value of parameter "minimum"`);
@@ -21658,6 +22160,9 @@ function parseLoadingBlock(ast, visitor) {
     let minimumTime = null;
     for (const param of ast.parameters) {
         if (AFTER_PARAMETER_PATTERN.test(param.expression)) {
+            if (afterTime != null) {
+                throw new Error(`Loading block can only have one "after" parameter`);
+            }
             const parsedTime = parseDeferredTime(param.expression.slice(getTriggerParametersStart(param.expression)));
             if (parsedTime === null) {
                 throw new Error(`Could not parse time value of parameter "after"`);
@@ -21665,6 +22170,9 @@ function parseLoadingBlock(ast, visitor) {
             afterTime = parsedTime;
         }
         else if (MINIMUM_PARAMETER_PATTERN.test(param.expression)) {
+            if (minimumTime != null) {
+                throw new Error(`Loading block can only have one "minimum" parameter`);
+            }
             const parsedTime = parseDeferredTime(param.expression.slice(getTriggerParametersStart(param.expression)));
             if (parsedTime === null) {
                 throw new Error(`Could not parse time value of parameter "minimum"`);
@@ -21684,24 +22192,22 @@ function parseErrorBlock(ast, visitor) {
     return new DeferredBlockError(visitAll(visitor, ast.children), ast.sourceSpan, ast.startSourceSpan, ast.endSourceSpan);
 }
 function parsePrimaryTriggers(params, bindingParser, errors) {
-    const triggers = [];
-    const prefetchTriggers = [];
+    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);
+            parseWhenTrigger(param, bindingParser, triggers, errors);
         }
         else if (ON_PARAMETER_PATTERN.test(param.expression)) {
-            triggers.push(...parseOnTrigger(param, errors));
+            parseOnTrigger(param, triggers, errors);
         }
         else if (PREFETCH_WHEN_PATTERN.test(param.expression)) {
-            const result = parseWhenTrigger(param, bindingParser, errors);
-            result !== null && prefetchTriggers.push(result);
+            parseWhenTrigger(param, bindingParser, prefetchTriggers, errors);
         }
         else if (PREFETCH_ON_PATTERN.test(param.expression)) {
-            prefetchTriggers.push(...parseOnTrigger(param, errors));
+            parseOnTrigger(param, prefetchTriggers, errors);
         }
         else {
             errors.push(new ParseError(param.sourceSpan, 'Unrecognized trigger'));
@@ -21947,13 +22453,33 @@ class HtmlAstToIvyAst {
             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;
+        if (!this.options.enabledBlockTypes.has(primaryBlock.name)) {
+            this.reportError(`Unrecognized block "${primaryBlock.name}".`, primaryBlock.sourceSpan);
+            return null;
         }
-        this.reportError(`Unrecognized block "${primaryBlock.name}".`, primaryBlock.sourceSpan);
-        return null;
+        let result = null;
+        switch (primaryBlock.name) {
+            case 'defer':
+                result = createDeferredBlock(group, this, this.bindingParser);
+                break;
+            case 'switch':
+                result = createSwitchBlock(group, this, this.bindingParser);
+                break;
+            case 'for':
+                result = createForLoop(group, this, this.bindingParser);
+                break;
+            case 'if':
+                result = createIfBlock(group, this, this.bindingParser);
+                break;
+            default:
+                result = {
+                    node: null,
+                    errors: [new ParseError(primaryBlock.sourceSpan, `Unrecognized block "${primaryBlock.name}".`)]
+                };
+                break;
+        }
+        this.errors.push(...result.errors);
+        return result.node;
     }
     visitBlock(block, context) { }
     visitBlockParameter(parameter, context) { }
@@ -23279,6 +23805,11 @@ class TemplateDefinitionBuilder {
         this._currentIndex = 0;
         /** Temporary variable declarations generated from visiting pipes, literals, etc. */
         this._tempVariables = [];
+        /**
+         * Temporary variable used to store state between control flow instructions.
+         * Should be accessed via the `allocateControlFlowTempVariable` method.
+         */
+        this._controlFlowTempVariable = null;
         /**
          * List of callbacks to build nested templates. Nested templates must not be visited until
          * after the parent template has finished visiting all of its nodes. This ensures that all
@@ -23308,6 +23839,12 @@ class TemplateDefinitionBuilder {
         this.visitTextAttribute = invalid;
         this.visitBoundAttribute = invalid;
         this.visitBoundEvent = invalid;
+        this.visitDeferredTrigger = invalid;
+        this.visitDeferredBlockError = invalid;
+        this.visitDeferredBlockLoading = invalid;
+        this.visitDeferredBlockPlaceholder = invalid;
+        this.visitIfBlockBranch = invalid;
+        this.visitSwitchBlockCase = invalid;
         this._bindingScope = parentBindingScope.nestedScope(level);
         // Turn the relative context file path into an identifier by replacing non-alphanumeric
         // characters with underscores.
@@ -23420,8 +23957,16 @@ class TemplateDefinitionBuilder {
     registerContextVariables(variable$1) {
         const scopedName = this._bindingScope.freshReferenceName();
         const retrievalLevel = this.level;
+        const isDirect = variable$1.value === DIRECT_CONTEXT_REFERENCE;
         const lhs = variable(variable$1.name + scopedName);
-        this._bindingScope.set(retrievalLevel, variable$1.name, lhs, 1 /* DeclarationPriority.CONTEXT */, (scope, relativeLevel) => {
+        this._bindingScope.set(retrievalLevel, variable$1.name, scope => {
+            // If we're at the top level and we're referring to the context variable directly, we
+            // can do so through the implicit receiver, instead of renaming it. Note that this does
+            // not apply to listeners, because they need to restore the context.
+            return isDirect && scope.bindingLevel === retrievalLevel && !scope.isListenerScope() ?
+                variable(CONTEXT_NAME) :
+                lhs;
+        }, 1 /* DeclarationPriority.CONTEXT */, (scope, relativeLevel) => {
             let rhs;
             if (scope.bindingLevel === retrievalLevel) {
                 if (scope.isListenerScope() && scope.hasRestoreViewVariable()) {
@@ -23432,6 +23977,11 @@ class TemplateDefinitionBuilder {
                     rhs = variable(RESTORED_VIEW_CONTEXT_NAME);
                     scope.notifyRestoredViewContextUse();
                 }
+                else if (isDirect) {
+                    // If we have a direct read of the context at the top level we don't need to
+                    // declare any variables and we can refer to it directly.
+                    return [];
+                }
                 else {
                     // e.g. ctx
                     rhs = variable(CONTEXT_NAME);
@@ -23442,8 +23992,11 @@ class TemplateDefinitionBuilder {
                 // e.g. ctx_r0   OR  x(2);
                 rhs = sharedCtxVar ? sharedCtxVar : generateNextContextExpr(relativeLevel);
             }
-            // e.g. const $item$ = x(2).$implicit;
-            return [lhs.set(rhs.prop(variable$1.value || IMPLICIT_REFERENCE)).toConstDecl()];
+            return [
+                // e.g. const $items$ = x(2) for direct context references and
+                // const $item$ = x(2).$implicit for indirect ones.
+                lhs.set(isDirect ? rhs : rhs.prop(variable$1.value || IMPLICIT_REFERENCE)).toConstDecl()
+            ];
         });
     }
     i18nAppendBindings(expressions) {
@@ -23864,28 +24417,22 @@ class TemplateDefinitionBuilder {
             this.creationInstruction(span, isNgContainer$1 ? Identifiers.elementContainerEnd : Identifiers.elementEnd);
         }
     }
-    visitTemplate(template) {
-        const NG_TEMPLATE_TAG_NAME = 'ng-template';
+    createEmbeddedTemplateFn(tagName, children, contextNameSuffix, sourceSpan, variables = [], attrsExprs, references, i18n) {
         const templateIndex = this.allocateDataSlot();
-        if (this.i18n) {
-            this.i18n.appendTemplate(template.i18n, templateIndex);
+        if (this.i18n && i18n) {
+            this.i18n.appendTemplate(i18n, templateIndex);
         }
-        const tagNameWithoutNamespace = template.tagName ? splitNsName(template.tagName)[1] : template.tagName;
-        const contextName = `${this.contextName}${template.tagName ? '_' + sanitizeIdentifier(template.tagName) : ''}_${templateIndex}`;
+        const contextName = `${this.contextName}${contextNameSuffix}_${templateIndex}`;
         const templateName = `${contextName}_Template`;
         const parameters = [
             literal(templateIndex),
             variable(templateName),
-            // We don't care about the tag's namespace here, because we infer
-            // it based on the parent nodes inside the template instruction.
-            literal(tagNameWithoutNamespace),
+            literal(tagName),
+            this.addAttrsToConsts(attrsExprs || null),
         ];
-        // prepare attributes parameter (including attributes used for directive matching)
-        const attrsExprs = this.getAttributeExpressions(NG_TEMPLATE_TAG_NAME, template.attributes, template.inputs, template.outputs, undefined /* styles */, template.templateAttrs);
-        parameters.push(this.addAttrsToConsts(attrsExprs));
         // local refs (ex.: <ng-template #foo>)
-        if (template.references && template.references.length) {
-            const refs = this.prepareRefsArray(template.references);
+        if (references && references.length > 0) {
+            const refs = this.prepareRefsArray(references);
             parameters.push(this.addToConsts(refs));
             parameters.push(importExpr(Identifiers.templateRefExtractor));
         }
@@ -23896,17 +24443,28 @@ class TemplateDefinitionBuilder {
         // be able to support bindings in nested templates to local refs that occur after the
         // template definition. e.g. <div *ngIf="showing">{{ foo }}</div>  <div #foo></div>
         this._nestedTemplateFns.push(() => {
-            const templateFunctionExpr = templateVisitor.buildTemplateFunction(template.children, template.variables, this._ngContentReservedSlots.length + this._ngContentSelectorsOffset, template.i18n);
+            const templateFunctionExpr = templateVisitor.buildTemplateFunction(children, variables, this._ngContentReservedSlots.length + this._ngContentSelectorsOffset, i18n);
             this.constantPool.statements.push(templateFunctionExpr.toDeclStmt(templateName));
             if (templateVisitor._ngContentReservedSlots.length) {
                 this._ngContentReservedSlots.push(...templateVisitor._ngContentReservedSlots);
             }
         });
         // e.g. template(1, MyComp_Template_1)
-        this.creationInstruction(template.sourceSpan, Identifiers.templateCreate, () => {
+        this.creationInstruction(sourceSpan, Identifiers.templateCreate, () => {
             parameters.splice(2, 0, literal(templateVisitor.getConstCount()), literal(templateVisitor.getVarCount()));
             return trimTrailingNulls(parameters);
         });
+        return templateIndex;
+    }
+    visitTemplate(template) {
+        // We don't care about the tag's namespace here, because we infer
+        // it based on the parent nodes inside the template instruction.
+        const tagNameWithoutNamespace = template.tagName ? splitNsName(template.tagName)[1] : template.tagName;
+        const contextNameSuffix = template.tagName ? '_' + sanitizeIdentifier(template.tagName) : '';
+        const NG_TEMPLATE_TAG_NAME = 'ng-template';
+        // prepare attributes parameter (including attributes used for directive matching)
+        const attrsExprs = this.getAttributeExpressions(NG_TEMPLATE_TAG_NAME, template.attributes, template.inputs, template.outputs, undefined /* styles */, template.templateAttrs);
+        const templateIndex = this.createEmbeddedTemplateFn(tagNameWithoutNamespace, template.children, contextNameSuffix, template.sourceSpan, template.variables, attrsExprs, template.references, template.i18n);
         // handle property bindings e.g. ɵɵproperty('ngForOf', ctx.items), et al;
         this.templatePropertyBindings(templateIndex, template.templateAttrs);
         // Only add normal input/output binding instructions on explicit <ng-template> elements.
@@ -24000,50 +24558,224 @@ class TemplateDefinitionBuilder {
         }
         return null;
     }
-    visitDeferredBlock(deferred) {
-        const templateIndex = this.allocateDataSlot();
-        const deferredDeps = this.deferBlocks.get(deferred);
-        const contextName = `${this.contextName}_Defer_${templateIndex}`;
-        const depsFnName = `${contextName}_DepsFn`;
-        const parameters = [
-            literal(templateIndex),
-            deferredDeps ? variable(depsFnName) : TYPED_NULL_EXPR,
-        ];
-        if (deferredDeps) {
-            // This defer block has deps for which we need to generate dynamic imports.
-            const dependencyExp = [];
-            for (const deferredDep of deferredDeps) {
-                if (deferredDep.isDeferrable) {
-                    // Callback function, e.g. `function(m) { return m.MyCmp; }`.
-                    const innerFn = fn([new FnParam('m', DYNAMIC_TYPE)], [new ReturnStatement(variable('m').prop(deferredDep.symbolName))]);
-                    const fileName = deferredDep.importPath;
-                    // Dynamic import, e.g. `import('./a').then(...)`.
-                    const importExpr = (new DynamicImportExpr(fileName)).prop('then').callFn([innerFn]);
-                    dependencyExp.push(importExpr);
+    visitIfBlock(block) {
+        // We have to process the block in two steps: once here and again in the update instruction
+        // callback in order to generate the correct expressions when pipes or pure functions are
+        // used inside the branch expressions.
+        const branchData = block.branches.map(({ expression, expressionAlias, children, sourceSpan }) => {
+            let processedExpression = null;
+            if (expression !== null) {
+                processedExpression = expression.visit(this._valueConverter);
+                this.allocateBindingSlots(processedExpression);
+            }
+            // If the branch has an alias, it'll be assigned directly to the container's context.
+            // We define a variable referring directly to the context so that any nested usages can be
+            // rewritten to refer to it.
+            const variables = expressionAlias ?
+                [new Variable(expressionAlias, DIRECT_CONTEXT_REFERENCE, sourceSpan, sourceSpan)] :
+                undefined;
+            return {
+                index: this.createEmbeddedTemplateFn(null, children, '_Conditional', sourceSpan, variables),
+                expression: processedExpression,
+                alias: expressionAlias
+            };
+        });
+        // Use the index of the first block as the index for the entire container.
+        const containerIndex = branchData[0].index;
+        const paramsCallback = () => {
+            let contextVariable = null;
+            const generateBranch = (branchIndex) => {
+                // If we've gone beyond the last branch, return the special -1 value which means that no
+                // view will be rendered. Note that we don't need to reset the context here, because -1
+                // won't render a view so the passed-in context won't be captured.
+                if (branchIndex > branchData.length - 1) {
+                    return literal(-1);
+                }
+                const { index, expression, alias } = branchData[branchIndex];
+                // If the branch has no expression, it means that it's the final `else`.
+                // Return its index and stop the recursion. Assumes that there's only one
+                // `else` condition and that it's the last branch.
+                if (expression === null) {
+                    return literal(index);
+                }
+                let comparisonTarget;
+                if (alias) {
+                    // If the branch is aliased, we need to assign the expression value to the temporary
+                    // variable and then pass it into `conditional`. E.g. for the expression:
+                    // `{#if foo(); as alias}...{/if}` we have to generate:
+                    // ```
+                    // let temp;
+                    // conditional(0, (temp = ctx.foo()) ? 0 : -1, temp);
+                    // ```
+                    contextVariable = this.allocateControlFlowTempVariable();
+                    comparisonTarget = contextVariable.set(this.convertPropertyBinding(expression));
                 }
                 else {
-                    // Non-deferrable symbol, just use a reference to the type.
-                    dependencyExp.push(deferredDep.type);
+                    comparisonTarget = this.convertPropertyBinding(expression);
                 }
+                return comparisonTarget.conditional(literal(index), generateBranch(branchIndex + 1));
+            };
+            const params = [literal(containerIndex), generateBranch(0)];
+            if (contextVariable !== null) {
+                params.push(contextVariable);
             }
-            const depsFnBody = [];
-            depsFnBody.push(new ReturnStatement(literalArr(dependencyExp)));
-            const depsFnExpr = fn([] /* args */, depsFnBody, INFERRED_TYPE, null, depsFnName);
-            this.constantPool.statements.push(depsFnExpr.toDeclStmt(depsFnName));
-        }
-        // e.g. `defer(1, MyComp_Defer_1_DepsFn, ...)`
-        this.creationInstruction(deferred.sourceSpan, Identifiers.defer, () => {
-            return trimTrailingNulls(parameters);
+            return params;
+        };
+        this.updateInstructionWithAdvance(containerIndex, block.branches[0].sourceSpan, Identifiers.conditional, paramsCallback);
+    }
+    visitSwitchBlock(block) {
+        // Allocate slots for the primary block expression.
+        const blockExpression = block.expression.visit(this._valueConverter);
+        this.allocateBindingSlots(blockExpression);
+        // We have to process the block in two steps: once here and again in the update instruction
+        // callback in order to generate the correct expressions when pipes or pure functions are used.
+        const caseData = block.cases.map(currentCase => {
+            const index = this.createEmbeddedTemplateFn(null, currentCase.children, '_Case', currentCase.sourceSpan);
+            let expression = null;
+            if (currentCase.expression !== null) {
+                expression = currentCase.expression.visit(this._valueConverter);
+                this.allocateBindingSlots(expression);
+            }
+            return { index, expression };
+        });
+        // Use the index of the first block as the index for the entire container.
+        const containerIndex = caseData[0].index;
+        this.updateInstructionWithAdvance(containerIndex, block.sourceSpan, Identifiers.conditional, () => {
+            const generateCases = (caseIndex) => {
+                // If we've gone beyond the last branch, return the special -1
+                // value which means that no view will be rendered.
+                if (caseIndex > caseData.length - 1) {
+                    return literal(-1);
+                }
+                const { index, expression } = caseData[caseIndex];
+                // If the case has no expression, it means that it's the `default` case.
+                // Return its index and stop the recursion. Assumes that there's only one
+                // `default` condition and that it's defined last.
+                if (expression === null) {
+                    return literal(index);
+                }
+                // If this is the very first comparison, we need to assign the value of the primary
+                // expression as a part of the comparison so the remaining cases can reuse it. In practice
+                // this looks as follows:
+                // ```
+                // let temp;
+                // conditional(1, (temp = ctx.foo) === 1 ? 1 : temp === 2 ? 2 : temp === 3 ? 3 : 4);
+                // ```
+                const comparisonTarget = caseIndex === 0 ?
+                    this.allocateControlFlowTempVariable().set(this.convertPropertyBinding(blockExpression)) :
+                    this.allocateControlFlowTempVariable();
+                return comparisonTarget.identical(this.convertPropertyBinding(expression))
+                    .conditional(literal(index), generateCases(caseIndex + 1));
+            };
+            return [literal(containerIndex), generateCases(0)];
         });
     }
-    // TODO: implement nested deferred block instructions.
-    visitDeferredTrigger(trigger) { }
-    visitDeferredBlockPlaceholder(block) { }
-    visitDeferredBlockError(block) { }
-    visitDeferredBlockLoading(block) { }
+    visitDeferredBlock(deferred) {
+        const { loading, placeholder, error, triggers, prefetchTriggers } = deferred;
+        const primaryTemplateIndex = this.createEmbeddedTemplateFn(null, deferred.children, '_Defer', deferred.sourceSpan);
+        const loadingIndex = loading ?
+            this.createEmbeddedTemplateFn(null, loading.children, '_DeferLoading', loading.sourceSpan) :
+            null;
+        const loadingConsts = loading ?
+            trimTrailingNulls([literal(loading.minimumTime), literal(loading.afterTime)]) :
+            null;
+        const placeholderIndex = placeholder ?
+            this.createEmbeddedTemplateFn(null, placeholder.children, '_DeferPlaceholder', placeholder.sourceSpan) :
+            null;
+        const placeholderConsts = placeholder && placeholder.minimumTime !== null ?
+            // TODO(crisbeto): potentially pass the time directly instead of storing it in the `consts`
+            // since `{:placeholder}` can only have one parameter?
+            literalArr([literal(placeholder.minimumTime)]) :
+            null;
+        const errorIndex = error ?
+            this.createEmbeddedTemplateFn(null, error.children, '_DeferError', error.sourceSpan) :
+            null;
+        // Note: we generate this last so the index matches the instruction order.
+        const deferredIndex = this.allocateDataSlot();
+        const depsFnName = `${this.contextName}_Defer_${deferredIndex}_DepsFn`;
+        // e.g. `defer(1, 0, MyComp_Defer_1_DepsFn, ...)`
+        this.creationInstruction(deferred.sourceSpan, Identifiers.defer, trimTrailingNulls([
+            literal(deferredIndex),
+            literal(primaryTemplateIndex),
+            this.createDeferredDepsFunction(depsFnName, deferred),
+            literal(loadingIndex),
+            literal(placeholderIndex),
+            literal(errorIndex),
+            loadingConsts?.length ? this.addToConsts(literalArr(loadingConsts)) : TYPED_NULL_EXPR,
+            placeholderConsts ? this.addToConsts(placeholderConsts) : TYPED_NULL_EXPR,
+        ]));
+        this.createDeferTriggerInstructions(deferredIndex, triggers, false);
+        this.createDeferTriggerInstructions(deferredIndex, prefetchTriggers, true);
+    }
+    createDeferredDepsFunction(name, deferred) {
+        const deferredDeps = this.deferBlocks.get(deferred);
+        if (!deferredDeps || deferredDeps.length === 0) {
+            return TYPED_NULL_EXPR;
+        }
+        // This defer block has deps for which we need to generate dynamic imports.
+        const dependencyExp = [];
+        for (const deferredDep of deferredDeps) {
+            if (deferredDep.isDeferrable) {
+                // Callback function, e.g. `function(m) { return m.MyCmp; }`.
+                const innerFn = fn([new FnParam('m', DYNAMIC_TYPE)], [new ReturnStatement(variable('m').prop(deferredDep.symbolName))]);
+                // Dynamic import, e.g. `import('./a').then(...)`.
+                const importExpr = (new DynamicImportExpr(deferredDep.importPath)).prop('then').callFn([innerFn]);
+                dependencyExp.push(importExpr);
+            }
+            else {
+                // Non-deferrable symbol, just use a reference to the type.
+                dependencyExp.push(deferredDep.type);
+            }
+        }
+        const depsFnExpr = fn([], [new ReturnStatement(literalArr(dependencyExp))], INFERRED_TYPE, null, name);
+        this.constantPool.statements.push(depsFnExpr.toDeclStmt(name));
+        return variable(name);
+    }
+    createDeferTriggerInstructions(deferredIndex, triggers, prefetch) {
+        const { when, idle, immediate, timer, hover, interaction, viewport } = triggers;
+        // `deferWhen(ctx.someValue)`
+        if (when) {
+            const value = when.value.visit(this._valueConverter);
+            this.allocateBindingSlots(value);
+            this.updateInstructionWithAdvance(deferredIndex, when.sourceSpan, prefetch ? Identifiers.deferPrefetchWhen : Identifiers.deferWhen, () => this.convertPropertyBinding(value));
+        }
+        // Note that we generate an implicit `on idle` if the `deferred` block has no triggers.
+        // TODO(crisbeto): decide if this should be baked into the `defer` instruction.
+        // `deferOnIdle()`
+        if (idle || (!prefetch && Object.keys(triggers).length === 0)) {
+            this.creationInstruction(idle?.sourceSpan || null, prefetch ? Identifiers.deferPrefetchOnIdle : Identifiers.deferOnIdle);
+        }
+        // `deferOnImmediate()`
+        if (immediate) {
+            this.creationInstruction(immediate.sourceSpan, prefetch ? Identifiers.deferPrefetchOnImmediate : Identifiers.deferOnImmediate);
+        }
+        // `deferOnTimer(1337)`
+        if (timer) {
+            this.creationInstruction(timer.sourceSpan, prefetch ? Identifiers.deferPrefetchOnTimer : Identifiers.deferOnTimer, [literal(timer.delay)]);
+        }
+        // `deferOnHover()`
+        if (hover) {
+            this.creationInstruction(hover.sourceSpan, prefetch ? Identifiers.deferPrefetchOnHover : Identifiers.deferOnHover);
+        }
+        // TODO(crisbeto): currently the reference is passed as a string.
+        // Update this once we figure out how we should refer to the target.
+        // `deferOnInteraction(target)`
+        if (interaction) {
+            this.creationInstruction(interaction.sourceSpan, prefetch ? Identifiers.deferPrefetchOnInteraction : Identifiers.deferOnInteraction, [literal(interaction.reference)]);
+        }
+        // TODO(crisbeto): currently the reference is passed as a string.
+        // Update this once we figure out how we should refer to the target.
+        // `deferOnViewport(target)`
+        if (viewport) {
+            this.creationInstruction(viewport.sourceSpan, prefetch ? Identifiers.deferPrefetchOnViewport : Identifiers.deferOnViewport, [literal(viewport.reference)]);
+        }
+    }
     allocateDataSlot() {
         return this._dataIndex++;
     }
+    // TODO: implement for loop instructions
+    visitForLoopBlock(block) { }
+    visitForLoopBlockEmpty(block) { }
     getConstCount() {
         return this._dataIndex;
     }
@@ -24168,6 +24900,21 @@ class TemplateDefinitionBuilder {
         this._tempVariables.push(...stmts);
         return args;
     }
+    /**
+     * Creates and returns a variable that can be used to
+     * store the state between control flow instructions.
+     */
+    allocateControlFlowTempVariable() {
+        // Note: the assumption here is that we'll only need one temporary variable for all control
+        // flow instructions. It's expected that any instructions will overwrite it before passing it
+        // into the parameters.
+        if (this._controlFlowTempVariable === null) {
+            const name = `${this.contextName}_contFlowTmp`;
+            this._tempVariables.push(new DeclareVarStmt(name));
+            this._controlFlowTempVariable = variable(name);
+        }
+        return this._controlFlowTempVariable;
+    }
     /**
      * Prepares all attribute expression values for the `TAttributes` array.
      *
@@ -24293,7 +25040,8 @@ class TemplateDefinitionBuilder {
         return literal(consts.push(expression) - 1);
     }
     addAttrsToConsts(attrs) {
-        return attrs.length > 0 ? this.addToConsts(literalArr(attrs)) : TYPED_NULL_EXPR;
+        return attrs !== null && attrs.length > 0 ? this.addToConsts(literalArr(attrs)) :
+            TYPED_NULL_EXPR;
     }
     prepareRefsArray(references) {
         if (!references || references.length === 0) {
@@ -24488,7 +25236,7 @@ class BindingScope {
                 if (value.declareLocalCallback && !value.declare) {
                     value.declare = true;
                 }
-                return value.lhs;
+                return typeof value.lhs === 'function' ? value.lhs(this) : value.lhs;
             }
             current = current.parent;
         }
@@ -24592,7 +25340,8 @@ class BindingScope {
         const componentValue = this.map.get(SHARED_CONTEXT_KEY + 0);
         componentValue.declare = true;
         this.maybeRestoreView();
-        return componentValue.lhs.prop(name);
+        const lhs = typeof componentValue.lhs === 'function' ? componentValue.lhs(this) : componentValue.lhs;
+        return name === DIRECT_CONTEXT_REFERENCE ? lhs : lhs.prop(name);
     }
     maybeRestoreView() {
         // View restoration is required for listener instructions inside embedded views, because
@@ -25137,9 +25886,17 @@ function compileComponentFromMetadata(meta, constantPool, bindingParser) {
         }
         definitionMap.set('template', templateFn);
     }
-    if (meta.declarations.length > 0) {
+    if (meta.declarationListEmitMode !== 3 /* DeclarationListEmitMode.RuntimeResolved */ &&
+        meta.declarations.length > 0) {
         definitionMap.set('dependencies', compileDeclarationList(literalArr(meta.declarations.map(decl => decl.type)), meta.declarationListEmitMode));
     }
+    else if (meta.declarationListEmitMode === 3 /* DeclarationListEmitMode.RuntimeResolved */) {
+        const args = [meta.type.value];
+        if (meta.rawImports) {
+            args.push(meta.rawImports);
+        }
+        definitionMap.set('dependencies', importExpr(Identifiers.getComponentDepsFactory).callFn(args));
+    }
     if (meta.encapsulation === null) {
         meta.encapsulation = ViewEncapsulation.Emulated;
     }
@@ -25211,6 +25968,8 @@ function compileDeclarationList(list, mode) {
             // directives: function () { return [MyDir].map(ng.resolveForwardRef); }
             const resolvedList = list.prop('map').callFn([importExpr(Identifiers.resolveForwardRef)]);
             return fn([], [new ReturnStatement(resolvedList)]);
+        case 3 /* DeclarationListEmitMode.RuntimeResolved */:
+            throw new Error(`Unsupported with an array of pre-resolved dependencies`);
     }
 }
 function prepareQueryParams(query, constantPool) {
@@ -26331,7 +27090,7 @@ function publishFacade(global) {
  * @description
  * Entry point for all public APIs of the compiler package.
  */
-const VERSION = new Version('16.2.2');
+const VERSION = new Version('17.0.0-next.1');
 
 class CompilerConfig {
     constructor({ defaultEncapsulation = ViewEncapsulation.Emulated, useJit = true, missingTranslation = null, preserveWhitespaces, strictInjectionParameters } = {}) {
@@ -27891,6 +28650,25 @@ class Scope {
     visitDeferredBlockLoading(block) {
         block.children.forEach(node => node.visit(this));
     }
+    visitSwitchBlock(block) {
+        block.cases.forEach(node => node.visit(this));
+    }
+    visitSwitchBlockCase(block) {
+        block.children.forEach(node => node.visit(this));
+    }
+    visitForLoopBlock(block) {
+        block.children.forEach(node => node.visit(this));
+        block.empty?.visit(this);
+    }
+    visitForLoopBlockEmpty(block) {
+        block.children.forEach(node => node.visit(this));
+    }
+    visitIfBlock(block) {
+        block.branches.forEach(node => node.visit(this));
+    }
+    visitIfBlockBranch(block) {
+        block.children.forEach(node => node.visit(this));
+    }
     // Unused visitors.
     visitContent(content) { }
     visitBoundAttribute(attr) { }
@@ -28045,9 +28823,10 @@ class DirectiveBinder {
         node.children.forEach(child => child.visit(this));
     }
     visitDeferredBlock(deferred) {
+        const wasInDeferBlock = this.isInDeferBlock;
         this.isInDeferBlock = true;
         deferred.children.forEach(child => child.visit(this));
-        this.isInDeferBlock = false;
+        this.isInDeferBlock = wasInDeferBlock;
         deferred.placeholder?.visit(this);
         deferred.loading?.visit(this);
         deferred.error?.visit(this);
@@ -28061,6 +28840,25 @@ class DirectiveBinder {
     visitDeferredBlockLoading(block) {
         block.children.forEach(child => child.visit(this));
     }
+    visitSwitchBlock(block) {
+        block.cases.forEach(node => node.visit(this));
+    }
+    visitSwitchBlockCase(block) {
+        block.children.forEach(node => node.visit(this));
+    }
+    visitForLoopBlock(block) {
+        block.children.forEach(node => node.visit(this));
+        block.empty?.visit(this);
+    }
+    visitForLoopBlockEmpty(block) {
+        block.children.forEach(node => node.visit(this));
+    }
+    visitIfBlock(block) {
+        block.branches.forEach(node => node.visit(this));
+    }
+    visitIfBlockBranch(block) {
+        block.children.forEach(node => node.visit(this));
+    }
     // Unused visitors.
     visitContent(content) { }
     visitVariable(variable) { }
@@ -28197,11 +28995,10 @@ class TemplateBinder extends RecursiveAstVisitor {
     }
     visitDeferredBlock(deferred) {
         this.deferBlocks.add(deferred);
+        const wasInDeferBlock = this.isInDeferBlock;
         this.isInDeferBlock = true;
         deferred.children.forEach(this.visitNode);
-        this.isInDeferBlock = false;
-        deferred.triggers.forEach(this.visitNode);
-        deferred.prefetchTriggers.forEach(this.visitNode);
+        this.isInDeferBlock = wasInDeferBlock;
         deferred.placeholder && this.visitNode(deferred.placeholder);
         deferred.loading && this.visitNode(deferred.loading);
         deferred.error && this.visitNode(deferred.error);
@@ -28220,6 +29017,29 @@ class TemplateBinder extends RecursiveAstVisitor {
     visitDeferredBlockLoading(block) {
         block.children.forEach(this.visitNode);
     }
+    visitSwitchBlock(block) {
+        block.expression.visit(this);
+        block.cases.forEach(this.visitNode);
+    }
+    visitSwitchBlockCase(block) {
+        block.expression?.visit(this);
+        block.children.forEach(this.visitNode);
+    }
+    visitForLoopBlock(block) {
+        block.expression.visit(this);
+        block.children.forEach(this.visitNode);
+        block.empty?.visit(this);
+    }
+    visitForLoopBlockEmpty(block) {
+        block.children.forEach(this.visitNode);
+    }
+    visitIfBlock(block) {
+        block.branches.forEach(node => node.visit(this));
+    }
+    visitIfBlockBranch(block) {
+        block.expression?.visit(this);
+        block.children.forEach(node => node.visit(this));
+    }
     visitBoundText(text) {
         text.value.visit(this);
     }
@@ -28362,6 +29182,60 @@ function compileClassMetadata(metadata) {
     const iife = fn([], [devOnlyGuardedExpression(fnCall).toStmt()]);
     return iife.callFn([]);
 }
+/**
+ * Wraps the `setClassMetadata` function with extra logic that dynamically
+ * loads dependencies from `{#defer}` blocks.
+ *
+ * Generates a call like this:
+ * ```
+ * setClassMetadataAsync(type, () => {
+ *   return [
+ *     import('./cmp-a').then(m => m.CmpA);
+ *     import('./cmp-b').then(m => m.CmpB);
+ *   ];
+ * }, (CmpA, CmpB) => {
+ *   setClassMetadata(type, decorators, ctorParameters, propParameters);
+ * });
+ * ```
+ *
+ * Similar to the `setClassMetadata` call, it's wrapped into the `ngDevMode`
+ * check to tree-shake away this code in production mode.
+ */
+function compileComponentClassMetadata(metadata, deferrableTypes) {
+    if (deferrableTypes.size === 0) {
+        // If there are no deferrable symbols - just generate a regular `setClassMetadata` call.
+        return compileClassMetadata(metadata);
+    }
+    const dynamicImports = [];
+    const importedSymbols = [];
+    for (const [symbolName, importPath] of deferrableTypes) {
+        // e.g. `function(m) { return m.CmpA; }`
+        const innerFn = fn([new FnParam('m', DYNAMIC_TYPE)], [new ReturnStatement(variable('m').prop(symbolName))]);
+        // e.g. `import('./cmp-a').then(...)`
+        const importExpr = (new DynamicImportExpr(importPath)).prop('then').callFn([innerFn]);
+        dynamicImports.push(importExpr);
+        importedSymbols.push(new FnParam(symbolName, DYNAMIC_TYPE));
+    }
+    // e.g. `function() { return [ ... ]; }`
+    const dependencyLoadingFn = fn([], [new ReturnStatement(literalArr(dynamicImports))]);
+    // e.g. `setClassMetadata(...)`
+    const setClassMetadataCall = importExpr(Identifiers.setClassMetadata).callFn([
+        metadata.type,
+        metadata.decorators,
+        metadata.ctorParameters ?? literal(null),
+        metadata.propDecorators ?? literal(null),
+    ]);
+    // e.g. `function(CmpA) { setClassMetadata(...); }`
+    const setClassMetaWrapper = fn(importedSymbols, [setClassMetadataCall.toStmt()]);
+    // Final `setClassMetadataAsync()` call with all arguments
+    const setClassMetaAsync = importExpr(Identifiers.setClassMetadataAsync).callFn([
+        metadata.type, dependencyLoadingFn, setClassMetaWrapper
+    ]);
+    // Generate an ngDevMode guarded call to `setClassMetadataAsync` with
+    // the class identifier and its metadata, so that this call can be tree-shaken.
+    const iife = fn([], [devOnlyGuardedExpression(setClassMetaAsync).toStmt()]);
+    return iife.callFn([]);
+}
 
 /**
  * Every time we make a breaking change to the declaration interface or partial-linker behavior, we
@@ -28374,7 +29248,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.2'));
+    definitionMap.set('version', literal('17.0.0-next.1'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', metadata.type);
     definitionMap.set('decorators', metadata.decorators);
@@ -28482,7 +29356,7 @@ function createDirectiveDefinitionMap(meta) {
     // in 16.1 is actually used.
     const minVersion = hasTransformFunctions ? MINIMUM_PARTIAL_LINKER_VERSION$5 : '14.0.0';
     definitionMap.set('minVersion', literal(minVersion));
-    definitionMap.set('version', literal('16.2.2'));
+    definitionMap.set('version', literal('17.0.0-next.1'));
     // e.g. `type: MyDirective`
     definitionMap.set('type', meta.type.value);
     if (meta.isStandalone) {
@@ -28673,6 +29547,9 @@ function compileUsedDependenciesMetadata(meta) {
     const wrapType = meta.declarationListEmitMode !== 0 /* DeclarationListEmitMode.Direct */ ?
         generateForwardRef :
         (expr) => expr;
+    if (meta.declarationListEmitMode === 3 /* DeclarationListEmitMode.RuntimeResolved */) {
+        throw new Error(`Unsupported emit mode`);
+    }
     return toOptionalLiteralArray(meta.declarations, decl => {
         switch (decl.kind) {
             case R3TemplateDependencyKind.Directive:
@@ -28710,7 +29587,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.2'));
+    definitionMap.set('version', literal('17.0.0-next.1'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', meta.type.value);
     definitionMap.set('deps', compileDependencies(meta.deps));
@@ -28745,7 +29622,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.2'));
+    definitionMap.set('version', literal('17.0.0-next.1'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', meta.type.value);
     // Only generate providedIn property if it has a non-null value
@@ -28796,7 +29673,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.2'));
+    definitionMap.set('version', literal('17.0.0-next.1'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', meta.type.value);
     definitionMap.set('providers', meta.providers);
@@ -28829,7 +29706,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.2'));
+    definitionMap.set('version', literal('17.0.0-next.1'));
     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.
@@ -28880,7 +29757,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.2'));
+    definitionMap.set('version', literal('17.0.0-next.1'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     // e.g. `type: MyPipe`
     definitionMap.set('type', meta.type.value);
@@ -28913,5 +29790,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, DynamicImportExpr, EOF, Element, ElementSchemaRegistry, EmitterVisitorContext, EmptyExpr$1 as EmptyExpr, Expansion, ExpansionCase, Expression, ExpressionBinding, ExpressionStatement, ExpressionType, ExternalExpr, ExternalReference, FactoryTarget$1 as FactoryTarget, FunctionExpr, HtmlParser, HtmlTagDefinition, I18NHtmlParser, IfStmt, ImplicitReceiver, InstantiateExpr, Interpolation$1 as Interpolation, InterpolationConfig, InvokeFunctionExpr, JSDocComment, JitEvaluator, KeyedRead, KeyedWrite, LeadingComment, Lexer, LiteralArray, LiteralArrayExpr, LiteralExpr, LiteralMap, LiteralMapExpr, LiteralPrimitive, LocalizedString, MapType, MessageBundle, NONE_TYPE, NO_ERRORS_SCHEMA, NodeWithI18n, NonNullAssert, NotExpr, ParseError, ParseErrorLevel, ParseLocation, ParseSourceFile, ParseSourceSpan, ParseSpan, ParseTreeResult, ParsedEvent, ParsedProperty, ParsedPropertyType, ParsedVariable, Parser$1 as Parser, ParserError, PrefixNot, PropertyRead, PropertyWrite, R3BoundTarget, Identifiers as R3Identifiers, R3NgModuleMetadataKind, R3SelectorScopeMode, R3TargetBinder, R3TemplateDependencyKind, ReadKeyExpr, ReadPropExpr, ReadVarExpr, RecursiveAstVisitor, RecursiveVisitor, ResourceLoader, ReturnStatement, STRING_TYPE, SafeCall, SafeKeyedRead, SafePropertyRead, SelectorContext, SelectorListContext, SelectorMatcher, Serializer, SplitInterpolation, Statement, StmtModifier, TagContentType, TaggedTemplateExpr, TemplateBindingParseResult, TemplateLiteral, TemplateLiteralElement, Text, ThisReceiver, BoundAttribute as TmplAstBoundAttribute, BoundDeferredTrigger as TmplAstBoundDeferredTrigger, BoundEvent as TmplAstBoundEvent, BoundText as TmplAstBoundText, Content as TmplAstContent, DeferredBlock as TmplAstDeferredBlock, DeferredBlockError as TmplAstDeferredBlockError, DeferredBlockLoading as TmplAstDeferredBlockLoading, DeferredBlockPlaceholder as TmplAstDeferredBlockPlaceholder, DeferredTrigger as TmplAstDeferredTrigger, Element$1 as TmplAstElement, 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 };
+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$1 as Interpolation, InterpolationConfig, InvokeFunctionExpr, JSDocComment, JitEvaluator, KeyedRead, KeyedWrite, LeadingComment, Lexer, LiteralArray, LiteralArrayExpr, LiteralExpr, LiteralMap, LiteralMapExpr, LiteralPrimitive, LocalizedString, MapType, MessageBundle, NONE_TYPE, NO_ERRORS_SCHEMA, NodeWithI18n, NonNullAssert, NotExpr, ParseError, ParseErrorLevel, ParseLocation, ParseSourceFile, ParseSourceSpan, ParseSpan, ParseTreeResult, ParsedEvent, ParsedProperty, ParsedPropertyType, ParsedVariable, Parser$1 as Parser, ParserError, PrefixNot, PropertyRead, PropertyWrite, R3BoundTarget, Identifiers as R3Identifiers, R3NgModuleMetadataKind, R3SelectorScopeMode, R3TargetBinder, R3TemplateDependencyKind, ReadKeyExpr, ReadPropExpr, ReadVarExpr, RecursiveAstVisitor, RecursiveVisitor, ResourceLoader, ReturnStatement, STRING_TYPE, SafeCall, SafeKeyedRead, SafePropertyRead, SelectorContext, SelectorListContext, SelectorMatcher, Serializer, SplitInterpolation, Statement, StmtModifier, TagContentType, TaggedTemplateExpr, TemplateBindingParseResult, TemplateLiteral, TemplateLiteralElement, Text, ThisReceiver, BoundAttribute as TmplAstBoundAttribute, BoundDeferredTrigger as TmplAstBoundDeferredTrigger, BoundEvent as TmplAstBoundEvent, BoundText as TmplAstBoundText, Content as TmplAstContent, DeferredBlock as TmplAstDeferredBlock, DeferredBlockError as TmplAstDeferredBlockError, DeferredBlockLoading as TmplAstDeferredBlockLoading, DeferredBlockPlaceholder as TmplAstDeferredBlockPlaceholder, DeferredTrigger as TmplAstDeferredTrigger, Element$1 as TmplAstElement, ForLoopBlock as TmplAstForLoopBlock, ForLoopBlockEmpty as TmplAstForLoopBlockEmpty, HoverDeferredTrigger as TmplAstHoverDeferredTrigger, Icu$1 as TmplAstIcu, IdleDeferredTrigger as TmplAstIdleDeferredTrigger, IfBlock as TmplAstIfBlock, IfBlockBranch as TmplAstIfBlockBranch, ImmediateDeferredTrigger as TmplAstImmediateDeferredTrigger, InteractionDeferredTrigger as TmplAstInteractionDeferredTrigger, RecursiveVisitor$1 as TmplAstRecursiveVisitor, Reference as TmplAstReference, SwitchBlock as TmplAstSwitchBlock, SwitchBlockCase as TmplAstSwitchBlockCase, Template as TmplAstTemplate, Text$3 as TmplAstText, TextAttribute as TmplAstTextAttribute, TimerDeferredTrigger as TmplAstTimerDeferredTrigger, 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, compileComponentClassMetadata, compileComponentFromMetadata, compileDeclareClassMetadata, compileDeclareComponentFromMetadata, compileDeclareDirectiveFromMetadata, compileDeclareFactoryFunction, compileDeclareInjectableFromMetadata, compileDeclareInjectorFromMetadata, compileDeclareNgModuleFromMetadata, compileDeclarePipeFromMetadata, compileDirectiveFromMetadata, compileFactoryFunction, compileInjectable, compileInjector, compileNgModule, compilePipeFromMetadata, computeMsgId, core, createInjectableType, createMayBeForwardRefExpression, devOnlyGuardedExpression, emitDistinctChangesOnlyDefaultValue, getHtmlTagDefinition, getNsPrefix, getSafePropertyAccessString, identifierName, isIdentifier, isNgContainer, isNgContent, isNgTemplate, jsDocComment, leadingComment, literalMap, makeBindingParser, mergeNsAndName, output_ast as outputAst, parseHostBindings, parseTemplate, preserveWhitespacesDefault, publishFacade, r3JitTypeSourceSpan, sanitizeIdentifier, splitNsName, verifyHostBindings, visitAll };
 //# sourceMappingURL=compiler.mjs.map