@wavemaker-ai/angular-app 1.0.0-rc.332 → 1.0.0-rc.334

package/dependencies/expression-parser.cjs.js

@@ -1,7 +1,7 @@
 'use strict';
 
 /**
- * @license Angular v20.3.19
+ * @license Angular v20.3.28
  * (c) 2010-2025 Google LLC. https://angular.dev/
  * License: MIT
  */
@@ -408,6 +408,151 @@ class SelectorlessMatcher {
         return this.registry.has(name) ? this.registry.get(name) : [];
     }
 }
+
+/**
+ * A SecurityContext marks a location that has dangerous security implications, e.g. a DOM property
+ * like `innerHTML` that could cause Cross Site Scripting (XSS) security bugs when improperly
+ * handled.
+ *
+ * See DomSanitizer for more details on security in Angular applications.
+ *
+ * @publicApi
+ */
+var SecurityContext;
+(function (SecurityContext) {
+    SecurityContext[SecurityContext["NONE"] = 0] = "NONE";
+    SecurityContext[SecurityContext["HTML"] = 1] = "HTML";
+    SecurityContext[SecurityContext["STYLE"] = 2] = "STYLE";
+    SecurityContext[SecurityContext["SCRIPT"] = 3] = "SCRIPT";
+    SecurityContext[SecurityContext["URL"] = 4] = "URL";
+    SecurityContext[SecurityContext["RESOURCE_URL"] = 5] = "RESOURCE_URL";
+    SecurityContext[SecurityContext["ATTRIBUTE_NO_BINDING"] = 6] = "ATTRIBUTE_NO_BINDING";
+})(SecurityContext || (SecurityContext = {}));
+// =================================================================================================
+// =================================================================================================
+// =========== S T O P   -  S T O P   -  S T O P   -  S T O P   -  S T O P   -  S T O P  ===========
+// =================================================================================================
+// =================================================================================================
+//
+//        DO NOT EDIT THIS LIST OF SECURITY SENSITIVE PROPERTIES WITHOUT A SECURITY REVIEW!
+//
+// =================================================================================================
+/**
+ *  Map from tagName|propertyName to SecurityContext. Properties applying to all tags use '*'.
+ */
+let _SECURITY_SCHEMA;
+const SVG_NAMESPACE$1 = 'svg';
+const MATH_ML_NAMESPACE$1 = 'math';
+/**
+ * @remarks Keep is a copy of DOM Security Schema.
+ * @see [SECURITY_SCHEMA](../../../compiler/src/schema/dom_security_schema.ts)
+ */
+function SECURITY_SCHEMA() {
+    if (!_SECURITY_SCHEMA) {
+        _SECURITY_SCHEMA = {};
+        // Case is insignificant below, all element and attribute names are lower-cased for lookup.
+        registerContext(SecurityContext.HTML, /** Namespace */ undefined, [
+            ['iframe', ['srcdoc']],
+            ['*', ['innerHTML', 'outerHTML']],
+        ]);
+        registerContext(SecurityContext.STYLE, /** Namespace */ undefined, [['*', ['style']]]);
+        // NB: no SCRIPT contexts here, they are never allowed due to the parser stripping them.
+        registerContext(SecurityContext.URL, /** Namespace */ undefined, [
+            ['*', ['formAction']],
+            ['area', ['href']],
+            ['a', ['href', 'xlink:href']],
+            ['form', ['action']],
+            // The below two items are safe and should be removed but they require a G3 clean-up as a small number of tests fail.
+            ['img', ['src']],
+            ['video', ['src']],
+        ]);
+        registerContext(SecurityContext.URL, MATH_ML_NAMESPACE$1, [
+            // MathML namespace
+            // https://crsrc.org/c/third_party/blink/renderer/core/sanitizer/sanitizer.cc;l=753-768;drc=b3eb16372dcd3317d65e9e0265015e322494edcd;bpv=1;bpt=1
+            ['*', ['href', 'xlink:href']],
+            ['annotation', ['href', 'xlink:href']],
+            ['annotation-xml', ['href', 'xlink:href']],
+            ['maction', ['href', 'xlink:href']],
+            ['malignmark', ['href', 'xlink:href']],
+            ['math', ['href', 'xlink:href']],
+            ['mroot', ['href', 'xlink:href']],
+            ['msqrt', ['href', 'xlink:href']],
+            ['merror', ['href', 'xlink:href']],
+            ['mfrac', ['href', 'xlink:href']],
+            ['mglyph', ['href', 'xlink:href']],
+            ['msub', ['href', 'xlink:href']],
+            ['msup', ['href', 'xlink:href']],
+            ['msubsup', ['href', 'xlink:href']],
+            ['mmultiscripts', ['href', 'xlink:href']],
+            ['mprescripts', ['href', 'xlink:href']],
+            ['mi', ['href', 'xlink:href']],
+            ['mn', ['href', 'xlink:href']],
+            ['mo', ['href', 'xlink:href']],
+            ['mpadded', ['href', 'xlink:href']],
+            ['mphantom', ['href', 'xlink:href']],
+            ['mrow', ['href', 'xlink:href']],
+            ['ms', ['href', 'xlink:href']],
+            ['mspace', ['href', 'xlink:href']],
+            ['mstyle', ['href', 'xlink:href']],
+            ['mtable', ['href', 'xlink:href']],
+            ['mtd', ['href', 'xlink:href']],
+            ['mtr', ['href', 'xlink:href']],
+            ['mtext', ['href', 'xlink:href']],
+            ['mover', ['href', 'xlink:href']],
+            ['munder', ['href', 'xlink:href']],
+            ['munderover', ['href', 'xlink:href']],
+            ['semantics', ['href', 'xlink:href']],
+            ['none', ['href', 'xlink:href']],
+        ]);
+        registerContext(SecurityContext.RESOURCE_URL, /** Namespace */ undefined, [
+            ['base', ['href']],
+            ['embed', ['src']],
+            ['frame', ['src']],
+            ['iframe', ['src']],
+            ['link', ['href']],
+            ['object', ['codebase', 'data']],
+        ]);
+        registerContext(SecurityContext.URL, SVG_NAMESPACE$1, [['a', ['href', 'xlink:href']]]);
+        // Keep this in sync with SECURITY_SENSITIVE_ELEMENTS in packages/core/src/sanitization/sanitization.ts
+        // Unknown is the internal tag name for unknown elements example used for host-bindings.
+        // These are unsafe as `attributeName` can be `href` or `xlink:href`
+        // See: http://b/463880509#comment7
+        registerContext(SecurityContext.ATTRIBUTE_NO_BINDING, SVG_NAMESPACE$1, [
+            ['animate', ['attributeName', 'values', 'to', 'from']],
+            ['set', ['to', 'attributeName']],
+            ['animateMotion', ['attributeName']],
+            ['animateTransform', ['attributeName']],
+        ]);
+        registerContext(SecurityContext.ATTRIBUTE_NO_BINDING, /** Namespace */ undefined, [
+            [
+                'unknown',
+                [
+                    'attributeName',
+                    'values',
+                    'to',
+                    'from',
+                    'sandbox',
+                    'allow',
+                    'allowFullscreen',
+                    'referrerPolicy',
+                    'csp',
+                    'fetchPriority',
+                ],
+            ],
+            ['iframe', ['sandbox', 'allow', 'allowFullscreen', 'referrerPolicy', 'csp', 'fetchPriority']],
+        ]);
+    }
+    return _SECURITY_SCHEMA;
+}
+function registerContext(ctx, namespace, specs) {
+    for (const [element, attributeNames] of specs) {
+        let tagName = namespace && element !== 'unknown' ? `:${namespace}:${element}` : element;
+        tagName = tagName.toLowerCase();
+        for (const attr of attributeNames) {
+            _SECURITY_SCHEMA[`${tagName}|${attr.toLowerCase()}`] = ctx;
+        }
+    }
+}
 var ViewEncapsulation$1;
 (function (ViewEncapsulation) {
     ViewEncapsulation[ViewEncapsulation["Emulated"] = 0] = "Emulated";
@@ -433,16 +578,6 @@ const CUSTOM_ELEMENTS_SCHEMA = {
 const NO_ERRORS_SCHEMA = {
     name: 'no-errors-schema',
 };
-var SecurityContext;
-(function (SecurityContext) {
-    SecurityContext[SecurityContext["NONE"] = 0] = "NONE";
-    SecurityContext[SecurityContext["HTML"] = 1] = "HTML";
-    SecurityContext[SecurityContext["STYLE"] = 2] = "STYLE";
-    SecurityContext[SecurityContext["SCRIPT"] = 3] = "SCRIPT";
-    SecurityContext[SecurityContext["URL"] = 4] = "URL";
-    SecurityContext[SecurityContext["RESOURCE_URL"] = 5] = "RESOURCE_URL";
-    SecurityContext[SecurityContext["ATTRIBUTE_NO_BINDING"] = 6] = "ATTRIBUTE_NO_BINDING";
-})(SecurityContext || (SecurityContext = {}));
 var MissingTranslationStrategy;
 (function (MissingTranslationStrategy) {
     MissingTranslationStrategy[MissingTranslationStrategy["Error"] = 0] = "Error";
@@ -11451,10 +11586,7 @@ class ElementAttributes {
             if (value === null) {
                 throw Error('Attribute, i18n attribute, & style element attributes must have a value');
             }
-            if (trustedValueFn !== null) {
-                if (!isStringLiteral(value)) {
-                    throw Error('AssertionError: extracted attribute value should be string literal');
-                }
+            if (trustedValueFn !== null && isStringLiteral(value)) {
                 array.push(taggedTemplate(trustedValueFn, new TemplateLiteralExpr([new TemplateLiteralElementExpr(value.value)], []), undefined, value.sourceSpan));
             }
             else {
@@ -19409,162 +19541,8 @@ function interleave(left, right) {
     return result;
 }
 
-// =================================================================================================
-// =================================================================================================
-// =========== S T O P   -  S T O P   -  S T O P   -  S T O P   -  S T O P   -  S T O P  ===========
-// =================================================================================================
-// =================================================================================================
-//
-//        DO NOT EDIT THIS LIST OF SECURITY SENSITIVE PROPERTIES WITHOUT A SECURITY REVIEW!
-//
-// =================================================================================================
-/** Map from tagName|propertyName to SecurityContext. Properties applying to all tags use '*'. */
-let _SECURITY_SCHEMA;
-function SECURITY_SCHEMA() {
-    if (!_SECURITY_SCHEMA) {
-        _SECURITY_SCHEMA = {};
-        // Case is insignificant below, all element and attribute names are lower-cased for lookup.
-        registerContext(SecurityContext.HTML, ['iframe|srcdoc', '*|innerHTML', '*|outerHTML']);
-        registerContext(SecurityContext.STYLE, ['*|style']);
-        // NB: no SCRIPT contexts here, they are never allowed due to the parser stripping them.
-        registerContext(SecurityContext.URL, [
-            '*|formAction',
-            'area|href',
-            'area|ping',
-            'audio|src',
-            'a|href',
-            'a|xlink:href',
-            'a|ping',
-            'blockquote|cite',
-            'body|background',
-            'del|cite',
-            'form|action',
-            'img|src',
-            'input|src',
-            'ins|cite',
-            'q|cite',
-            'source|src',
-            'track|src',
-            'video|poster',
-            'video|src',
-            // MathML namespace
-            // https://crsrc.org/c/third_party/blink/renderer/core/sanitizer/sanitizer.cc;l=753-768;drc=b3eb16372dcd3317d65e9e0265015e322494edcd;bpv=1;bpt=1
-            'annotation|href',
-            'annotation|xlink:href',
-            'annotation-xml|href',
-            'annotation-xml|xlink:href',
-            'maction|href',
-            'maction|xlink:href',
-            'malignmark|href',
-            'malignmark|xlink:href',
-            'math|href',
-            'math|xlink:href',
-            'mroot|href',
-            'mroot|xlink:href',
-            'msqrt|href',
-            'msqrt|xlink:href',
-            'merror|href',
-            'merror|xlink:href',
-            'mfrac|href',
-            'mfrac|xlink:href',
-            'mglyph|href',
-            'mglyph|xlink:href',
-            'msub|href',
-            'msub|xlink:href',
-            'msup|href',
-            'msup|xlink:href',
-            'msubsup|href',
-            'msubsup|xlink:href',
-            'mmultiscripts|href',
-            'mmultiscripts|xlink:href',
-            'mprescripts|href',
-            'mprescripts|xlink:href',
-            'mi|href',
-            'mi|xlink:href',
-            'mn|href',
-            'mn|xlink:href',
-            'mo|href',
-            'mo|xlink:href',
-            'mpadded|href',
-            'mpadded|xlink:href',
-            'mphantom|href',
-            'mphantom|xlink:href',
-            'mrow|href',
-            'mrow|xlink:href',
-            'ms|href',
-            'ms|xlink:href',
-            'mspace|href',
-            'mspace|xlink:href',
-            'mstyle|href',
-            'mstyle|xlink:href',
-            'mtable|href',
-            'mtable|xlink:href',
-            'mtd|href',
-            'mtd|xlink:href',
-            'mtr|href',
-            'mtr|xlink:href',
-            'mtext|href',
-            'mtext|xlink:href',
-            'mover|href',
-            'mover|xlink:href',
-            'munder|href',
-            'munder|xlink:href',
-            'munderover|href',
-            'munderover|xlink:href',
-            'semantics|href',
-            'semantics|xlink:href',
-            'none|href',
-            'none|xlink:href',
-        ]);
-        registerContext(SecurityContext.RESOURCE_URL, [
-            'applet|code',
-            'applet|codebase',
-            'base|href',
-            'embed|src',
-            'frame|src',
-            'head|profile',
-            'html|manifest',
-            'iframe|src',
-            'link|href',
-            'media|src',
-            'object|codebase',
-            'object|data',
-            'script|src',
-            // The below two are for Script SVG
-            // See: https://developer.mozilla.org/en-US/docs/Web/API/SVGScriptElement/href
-            'script|href',
-            'script|xlink:href',
-        ]);
-        // Keep this in sync with SECURITY_SENSITIVE_ELEMENTS in packages/core/src/sanitization/sanitization.ts
-        // Unknown is the internal tag name for unknown elements example used for host-bindings.
-        // These are unsafe as `attributeName` can be `href` or `xlink:href`
-        // See: http://b/463880509#comment7
-        registerContext(SecurityContext.ATTRIBUTE_NO_BINDING, [
-            'animate|attributeName',
-            'set|attributeName',
-            'animateMotion|attributeName',
-            'animateTransform|attributeName',
-            'unknown|attributeName',
-            'iframe|sandbox',
-            'iframe|allow',
-            'iframe|allowFullscreen',
-            'iframe|referrerPolicy',
-            'iframe|csp',
-            'iframe|fetchPriority',
-            'unknown|sandbox',
-            'unknown|allow',
-            'unknown|allowFullscreen',
-            'unknown|referrerPolicy',
-            'unknown|csp',
-            'unknown|fetchPriority',
-        ]);
-    }
-    return _SECURITY_SCHEMA;
-}
-function registerContext(ctx, specs) {
-    for (const spec of specs)
-        _SECURITY_SCHEMA[spec.toLowerCase()] = ctx;
-}
+const SVG_NAMESPACE = 'svg';
+const MATH_ML_NAMESPACE = 'math';
 
 class ElementSchemaRegistry {
 }
@@ -19573,6 +19551,11 @@ const BOOLEAN = 'boolean';
 const NUMBER = 'number';
 const STRING = 'string';
 const OBJECT = 'object';
+function normalizeTagName(tagName) {
+    const tagNameLower = tagName.toLowerCase();
+    const [ns, name] = splitNsName(tagNameLower, false);
+    return ns === SVG_NAMESPACE || ns === MATH_ML_NAMESPACE ? `:${ns}:${name}` : name;
+}
 /**
  * This array represents the DOM schema. It encodes inheritance, properties, and events.
  *
@@ -19918,8 +19901,9 @@ class DomElementSchemaRegistry extends ElementSchemaRegistry {
         if (schemaMetas.some((schema) => schema.name === NO_ERRORS_SCHEMA.name)) {
             return true;
         }
-        if (tagName.indexOf('-') > -1) {
-            if (isNgContainer(tagName) || isNgContent(tagName)) {
+        const normalizedTag = normalizeTagName(tagName);
+        if (normalizedTag.includes('-')) {
+            if (isNgContainer(normalizedTag) || isNgContent(normalizedTag)) {
                 return false;
             }
             if (schemaMetas.some((schema) => schema.name === CUSTOM_ELEMENTS_SCHEMA.name)) {
@@ -19928,15 +19912,16 @@ class DomElementSchemaRegistry extends ElementSchemaRegistry {
                 return true;
             }
         }
-        const elementProperties = this._schema.get(tagName.toLowerCase()) || this._schema.get('unknown');
+        const elementProperties = this._schema.get(normalizedTag) || this._schema.get('unknown');
         return elementProperties.has(propName);
     }
     hasElement(tagName, schemaMetas) {
         if (schemaMetas.some((schema) => schema.name === NO_ERRORS_SCHEMA.name)) {
             return true;
         }
-        if (tagName.indexOf('-') > -1) {
-            if (isNgContainer(tagName) || isNgContent(tagName)) {
+        const normalizedTag = normalizeTagName(tagName);
+        if (normalizedTag.includes('-')) {
+            if (isNgContainer(normalizedTag) || isNgContent(normalizedTag)) {
                 return true;
             }
             if (schemaMetas.some((schema) => schema.name === CUSTOM_ELEMENTS_SCHEMA.name)) {
@@ -19944,7 +19929,7 @@ class DomElementSchemaRegistry extends ElementSchemaRegistry {
                 return true;
             }
         }
-        return this._schema.has(tagName.toLowerCase());
+        return this._schema.has(normalizedTag);
     }
     /**
      * securityContext returns the security context for the given property on the given DOM tag.
@@ -19961,16 +19946,15 @@ class DomElementSchemaRegistry extends ElementSchemaRegistry {
             // NB: For security purposes, use the mapped property name, not the attribute name.
             propName = this.getMappedPropName(propName);
         }
-        // Make sure comparisons are case insensitive, so that case differences between attribute and
-        // property names do not have a security impact.
-        tagName = tagName.toLowerCase();
+        const normalizedTag = normalizeTagName(tagName);
         propName = propName.toLowerCase();
-        let ctx = SECURITY_SCHEMA()[tagName + '|' + propName];
-        if (ctx) {
-            return ctx;
-        }
-        ctx = SECURITY_SCHEMA()['*|' + propName];
-        return ctx ? ctx : SecurityContext.NONE;
+        const [namespace] = splitNsName(normalizedTag, false);
+        const securitySchema = SECURITY_SCHEMA();
+        const ctx = securitySchema[normalizedTag + '|' + propName] ??
+            (namespace ? securitySchema[`:${namespace}:*|${propName}`] : undefined) ??
+            securitySchema['*|' + propName] ??
+            SecurityContext.NONE;
+        return ctx;
     }
     getMappedPropName(propName) {
         return _ATTR_TO_PROP.get(propName) ?? propName;
@@ -20004,12 +19988,14 @@ class DomElementSchemaRegistry extends ElementSchemaRegistry {
         return Array.from(this._schema.keys());
     }
     allKnownAttributesOfElement(tagName) {
-        const elementProperties = this._schema.get(tagName.toLowerCase()) || this._schema.get('unknown');
+        const normalizedTag = normalizeTagName(tagName);
+        const elementProperties = this._schema.get(normalizedTag) || this._schema.get('unknown');
         // Convert properties to attributes.
         return Array.from(elementProperties.keys()).map((prop) => _PROP_TO_ATTR.get(prop) ?? prop);
     }
     allKnownEventsOfElement(tagName) {
-        return Array.from(this._eventSchema.get(tagName.toLowerCase()) ?? []);
+        const normalizedTag = normalizeTagName(tagName);
+        return Array.from(this._eventSchema.get(normalizedTag) ?? []);
     }
     normalizeAnimationStyleProperty(propName) {
         return dashCaseToCamelCase(propName);
@@ -20858,7 +20844,7 @@ class I18nMetaVisitor {
                     else {
                         isTrustedType = isTrustedTypesSink(node.name, name);
                     }
-                    if (isTrustedType) {
+                    if (isTrustedType || isPossibleEventHandler(name)) {
                         this._reportError(attr, `Translating attribute '${name}' is disallowed for security reasons.`);
                     }
                     else {
@@ -20989,6 +20975,16 @@ function i18nMetaToJSDoc(meta) {
     }
     return jsDocComment(tags);
 }
+/**
+ * Check if the propertyName is a potential event handler.
+ * We consider a property to be a potential event handler if its name is longer than 2 characters and starts with 'on' (e.g. 'onclick', 'onload', etc.).
+ * @param propertyName The name of the property to check.
+ * @returns True if the property is a potential event handler, false otherwise.
+ */
+function isPossibleEventHandler(propertyName) {
+    const name = propertyName.toLowerCase();
+    return name.length > 2 && name !== 'only' && name.startsWith('on');
+}
 
 /** Closure uses `goog.getMsg(message)` to lookup translations */
 const GOOG_GET_MSG = 'goog.getMsg';
@@ -24214,6 +24210,61 @@ function updatePlaceholder(op, value, i18nContexts, icuPlaceholders) {
     }
 }
 
+/**
+ * Wraps static i18n extracted attributes in their corresponding sanitizers/validators.
+ */
+function resolveI18nAttrSanitizers(job) {
+    const tagNamesByElement = new Map();
+    for (const unit of job.units) {
+        for (const op of unit.ops()) {
+            if (op.kind === OpKind.ElementStart || op.kind === OpKind.Template) {
+                let tag = op.tag ?? '';
+                switch (op.namespace) {
+                    case Namespace.SVG:
+                        tag = `:${SVG_NAMESPACE}:${tag}`;
+                        break;
+                    case Namespace.Math:
+                        tag = `:${MATH_ML_NAMESPACE}:${tag}`;
+                        break;
+                }
+                tagNamesByElement.set(op.xref, tag);
+            }
+        }
+    }
+    for (const unit of job.units) {
+        for (const op of unit.create) {
+            if (op.kind === OpKind.ExtractedAttribute &&
+                op.i18nContext !== null &&
+                op.expression !== null) {
+                const tagName = tagNamesByElement.get(op.target) ?? '';
+                let expr = op.expression;
+                switch (op.securityContext) {
+                    case SecurityContext.HTML:
+                        expr = importExpr(Identifiers.sanitizeHtml).callFn([expr]);
+                        break;
+                    case SecurityContext.STYLE:
+                        expr = importExpr(Identifiers.sanitizeStyle).callFn([expr]);
+                        break;
+                    case SecurityContext.SCRIPT:
+                        expr = importExpr(Identifiers.sanitizeScript).callFn([expr]);
+                        break;
+                    case SecurityContext.URL:
+                        expr = importExpr(Identifiers.sanitizeUrl).callFn([expr]);
+                        break;
+                    case SecurityContext.RESOURCE_URL:
+                        expr = importExpr(Identifiers.sanitizeResourceUrl).callFn([expr]);
+                        break;
+                    case SecurityContext.ATTRIBUTE_NO_BINDING:
+                        expr = importExpr(Identifiers.validateAttribute)
+                            .callFn([expr, literal(tagName), literal(op.name)]);
+                        break;
+                }
+                op.expression = expr;
+            }
+        }
+    }
+}
+
 /**
  * Resolves lexical references in views (`ir.LexicalReadExpr`) to either a target variable or to
  * property reads on the top-level component context.
@@ -24379,15 +24430,14 @@ function resolveSanitizers(job) {
                 case OpKind.Property:
                 case OpKind.Attribute:
                 case OpKind.DomProperty:
+                case OpKind.TwoWayProperty:
                     let sanitizerFn = null;
                     if (Array.isArray(op.securityContext) &&
-                        op.securityContext.length === 2 &&
-                        op.securityContext.includes(SecurityContext.URL) &&
-                        op.securityContext.includes(SecurityContext.RESOURCE_URL)) {
-                        // When the host element isn't known, some URL attributes (such as "src" and "href") may
-                        // be part of multiple different security contexts. In this case we use special
-                        // sanitization function and select the actual sanitizer at runtime based on a tag name
-                        // that is provided while invoking sanitization function.
+                        hasCompositeUrlSecurityContext(op.securityContext)) {
+                        // When the host element isn't known, attributes such as `href`, `src`, `data`,
+                        // `action`, and `codebase` may be part of multiple security contexts. In this case we
+                        // use a special sanitization function and select the actual behavior at runtime based
+                        // on the concrete host element.
                         sanitizerFn = Identifiers.sanitizeUrlOrResourceUrl;
                     }
                     else {
@@ -24399,21 +24449,47 @@ function resolveSanitizers(job) {
         }
     }
 }
+function hasCompositeUrlSecurityContext(securityContext) {
+    let hasUrlContext = false;
+    let hasResourceUrlContext = false;
+    let hasNoneContext = false;
+    for (const context of securityContext) {
+        switch (context) {
+            case SecurityContext.URL:
+                hasUrlContext = true;
+                break;
+            case SecurityContext.RESOURCE_URL:
+                hasResourceUrlContext = true;
+                break;
+            case SecurityContext.NONE:
+                hasNoneContext = true;
+                break;
+            default:
+                return false;
+        }
+    }
+    return (((hasUrlContext || hasResourceUrlContext) && hasNoneContext) ||
+        (hasUrlContext && hasResourceUrlContext));
+}
 /**
- * Asserts that there is only a single security context and returns it.
+ * Asserts that there is only a single non-NONE security context and returns it.
  */
 function getOnlySecurityContext(securityContext) {
-    if (Array.isArray(securityContext)) {
-        if (securityContext.length > 1) {
-            // TODO: What should we do here? TDB just took the first one, but this feels like something we
-            // would want to know about and create a special case for like we did for Url/ResourceUrl. My
-            // guess is that, outside of the Url/ResourceUrl case, this never actually happens. If there
-            // do turn out to be other cases, throwing an error until we can address it feels safer.
-            throw Error(`AssertionError: Ambiguous security context`);
-        }
-        return securityContext[0] || SecurityContext.NONE;
+    if (!Array.isArray(securityContext)) {
+        return securityContext;
+    }
+    if (securityContext.length < 2) {
+        return securityContext[0] ?? SecurityContext.NONE;
     }
-    return securityContext;
+    const nonNoneSecurityContexts = securityContext.filter((context) => context !== SecurityContext.NONE);
+    if (nonNoneSecurityContexts.length > 1) {
+        // TODO: What should we do here? TDB just took the first one, but this feels like something we
+        // would want to know about and create a special case for like we did for Url/ResourceUrl. My
+        // guess is that, outside of the Url/ResourceUrl case, this never actually happens. If there
+        // do turn out to be other cases, throwing an error until we can address it feels safer.
+        throw Error(`AssertionError: Ambiguous security context`);
+    }
+    return nonNoneSecurityContexts[0] ?? SecurityContext.NONE;
 }
 
 /**
@@ -25613,6 +25689,7 @@ const phases = [
     { kind: CompilationJobKind.Tmpl, fn: resolveI18nExpressionPlaceholders },
     { kind: CompilationJobKind.Tmpl, fn: extractI18nMessages },
     { kind: CompilationJobKind.Tmpl, fn: collectI18nConsts },
+    { kind: CompilationJobKind.Tmpl, fn: resolveI18nAttrSanitizers },
     { kind: CompilationJobKind.Tmpl, fn: collectConstExpressions },
     { kind: CompilationJobKind.Both, fn: collectElementConsts },
     { kind: CompilationJobKind.Tmpl, fn: removeI18nContexts },
@@ -25726,1756 +25803,1801 @@ function emitHostBindingFunction(job) {
     /* sourceSpan */ undefined, job.root.fnName);
 }
 
-const compatibilityMode = CompatibilityMode.TemplateDefinitionBuilder;
-// Schema containing DOM elements and their properties.
-const domSchema = new DomElementSchemaRegistry();
-// Tag name of the `ng-template` element.
-const NG_TEMPLATE_TAG_NAME = 'ng-template';
-// prefix for any animation binding
-const ANIMATE_PREFIX$1 = 'animate.';
-function isI18nRootNode(meta) {
-    return meta instanceof Message;
-}
-function isSingleI18nIcu(meta) {
-    return isI18nRootNode(meta) && meta.nodes.length === 1 && meta.nodes[0] instanceof Icu;
-}
-/**
- * Process a template AST and convert it into a `ComponentCompilation` in the intermediate
- * representation.
- * TODO: Refactor more of the ingestion code into phases.
- */
-function ingestComponent(componentName, template, constantPool, compilationMode, relativeContextFilePath, i18nUseExternalIds, deferMeta, allDeferrableDepsFn, relativeTemplatePath, enableDebugLocations) {
-    const job = new ComponentCompilationJob(componentName, constantPool, compatibilityMode, compilationMode, relativeContextFilePath, i18nUseExternalIds, deferMeta, allDeferrableDepsFn, relativeTemplatePath, enableDebugLocations);
-    ingestNodes(job.root, template);
-    return job;
-}
+const PROPERTY_PARTS_SEPARATOR = '.';
+const ATTRIBUTE_PREFIX = 'attr';
+const ANIMATE_PREFIX$1 = 'animate';
+const CLASS_PREFIX = 'class';
+const STYLE_PREFIX = 'style';
+const TEMPLATE_ATTR_PREFIX$1 = '*';
+const LEGACY_ANIMATE_PROP_PREFIX = 'animate-';
 /**
- * Process a host binding AST and convert it into a `HostBindingCompilationJob` in the intermediate
- * representation.
+ * Parses bindings in templates and in the directive host area.
  */
-function ingestHostBinding(input, bindingParser, constantPool) {
-    const job = new HostBindingCompilationJob(input.componentName, constantPool, compatibilityMode, TemplateCompilationMode.DomOnly);
-    for (const property of input.properties ?? []) {
-        let bindingKind = BindingKind.Property;
-        // TODO: this should really be handled in the parser.
-        if (property.name.startsWith('attr.')) {
-            property.name = property.name.substring('attr.'.length);
-            bindingKind = BindingKind.Attribute;
-        }
-        if (property.isLegacyAnimation) {
-            bindingKind = BindingKind.LegacyAnimation;
-        }
-        if (property.isAnimation) {
-            bindingKind = BindingKind.Animation;
-        }
-        const securityContexts = bindingParser
-            .calcPossibleSecurityContexts(input.componentSelector, property.name, bindingKind === BindingKind.Attribute)
-            .filter((context) => context !== SecurityContext.NONE);
-        ingestDomProperty(job, property, bindingKind, securityContexts);
-    }
-    for (const [name, expr] of Object.entries(input.attributes) ?? []) {
-        const securityContexts = bindingParser
-            .calcPossibleSecurityContexts(input.componentSelector, name, true)
-            .filter((context) => context !== SecurityContext.NONE);
-        ingestHostAttribute(job, name, expr, securityContexts);
+class BindingParser {
+    _exprParser;
+    _interpolationConfig;
+    _schemaRegistry;
+    errors;
+    constructor(_exprParser, _interpolationConfig, _schemaRegistry, errors) {
+        this._exprParser = _exprParser;
+        this._interpolationConfig = _interpolationConfig;
+        this._schemaRegistry = _schemaRegistry;
+        this.errors = errors;
     }
-    for (const event of input.events ?? []) {
-        ingestHostEvent(job, event);
+    get interpolationConfig() {
+        return this._interpolationConfig;
     }
-    return job;
-}
-// 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 ingestDomProperty(job, property, bindingKind, securityContexts) {
-    let expression;
-    const ast = property.expression.ast;
-    if (ast instanceof Interpolation$1) {
-        expression = new Interpolation(ast.strings, ast.expressions.map((expr) => convertAst(expr, job, property.sourceSpan)), []);
+    createBoundHostProperties(properties, sourceSpan) {
+        const boundProps = [];
+        for (const propName of Object.keys(properties)) {
+            const expression = properties[propName];
+            if (typeof expression === 'string') {
+                this.parsePropertyBinding(propName, expression, true, false, sourceSpan, sourceSpan.start.offset, undefined, [], 
+                // Use the `sourceSpan` for  `keySpan`. This isn't really accurate, but neither is the
+                // sourceSpan, as it represents the sourceSpan of the host itself rather than the
+                // source of the host binding (which doesn't exist in the template). Regardless,
+                // neither of these values are used in Ivy but are only here to satisfy the function
+                // signature. This should likely be refactored in the future so that `sourceSpan`
+                // isn't being used inaccurately.
+                boundProps, sourceSpan);
+            }
+            else {
+                this._reportError(`Value of the host property binding "${propName}" needs to be a string representing an expression but got "${expression}" (${typeof expression})`, sourceSpan);
+            }
+        }
+        return boundProps;
     }
-    else {
-        expression = convertAst(ast, job, property.sourceSpan);
+    createDirectiveHostEventAsts(hostListeners, sourceSpan) {
+        const targetEvents = [];
+        for (const propName of Object.keys(hostListeners)) {
+            const expression = hostListeners[propName];
+            if (typeof expression === 'string') {
+                // Use the `sourceSpan` for  `keySpan` and `handlerSpan`. This isn't really accurate, but
+                // neither is the `sourceSpan`, as it represents the `sourceSpan` of the host itself
+                // rather than the source of the host binding (which doesn't exist in the template).
+                // Regardless, neither of these values are used in Ivy but are only here to satisfy the
+                // function signature. This should likely be refactored in the future so that `sourceSpan`
+                // isn't being used inaccurately.
+                this.parseEvent(propName, expression, 
+                /* isAssignmentEvent */ false, sourceSpan, sourceSpan, [], targetEvents, sourceSpan);
+            }
+            else {
+                this._reportError(`Value of the host listener "${propName}" needs to be a string representing an expression but got "${expression}" (${typeof expression})`, sourceSpan);
+            }
+        }
+        return targetEvents;
     }
-    job.root.update.push(createBindingOp(job.root.xref, bindingKind, property.name, expression, null, securityContexts, false, false, null, 
-    /* TODO: How do Host bindings handle i18n attrs? */ null, property.sourceSpan));
-}
-function ingestHostAttribute(job, name, value, securityContexts) {
-    const attrBinding = createBindingOp(job.root.xref, BindingKind.Attribute, name, value, null, securityContexts, 
-    /* Host attributes should always be extracted to const hostAttrs, even if they are not
-     *strictly* text literals */
-    true, false, null, 
-    /* TODO */ null, 
-    /** TODO: May be null? */ value.sourceSpan);
-    job.root.update.push(attrBinding);
-}
-function ingestHostEvent(job, event) {
-    let eventBinding;
-    if (event.type === ParsedEventType.Animation) {
-        eventBinding = createAnimationListenerOp(job.root.xref, new SlotHandle(), event.name, null, makeListenerHandlerOps(job.root, event.handler, event.handlerSpan), event.name.endsWith('enter') ? "enter" /* ir.AnimationKind.ENTER */ : "leave" /* ir.AnimationKind.LEAVE */, event.targetOrPhase, true, event.sourceSpan);
-    }
-    else {
-        const [phase, target] = event.type !== ParsedEventType.LegacyAnimation
-            ? [null, event.targetOrPhase]
-            : [event.targetOrPhase, null];
-        eventBinding = createListenerOp(job.root.xref, new SlotHandle(), event.name, null, makeListenerHandlerOps(job.root, event.handler, event.handlerSpan), phase, target, true, event.sourceSpan);
+    parseInterpolation(value, sourceSpan, interpolatedTokens) {
+        const absoluteOffset = sourceSpan.fullStart.offset;
+        try {
+            const ast = this._exprParser.parseInterpolation(value, sourceSpan, absoluteOffset, interpolatedTokens, this._interpolationConfig);
+            if (ast) {
+                this.errors.push(...ast.errors);
+            }
+            return ast;
+        }
+        catch (e) {
+            this._reportError(`${e}`, sourceSpan);
+            return this._exprParser.wrapLiteralPrimitive('ERROR', sourceSpan, absoluteOffset);
+        }
     }
-    job.root.create.push(eventBinding);
-}
-/**
- * Ingest the nodes of a template AST into the given `ViewCompilation`.
- */
-function ingestNodes(unit, template) {
-    for (const node of template) {
-        if (node instanceof Element$1) {
-            ingestElement(unit, node);
+    /**
+     * Similar to `parseInterpolation`, but treats the provided string as a single expression
+     * element that would normally appear within the interpolation prefix and suffix (`{{` and `}}`).
+     * This is used for parsing the switch expression in ICUs.
+     */
+    parseInterpolationExpression(expression, sourceSpan) {
+        const absoluteOffset = sourceSpan.start.offset;
+        try {
+            const ast = this._exprParser.parseInterpolationExpression(expression, sourceSpan, absoluteOffset);
+            if (ast) {
+                this.errors.push(...ast.errors);
+            }
+            return ast;
         }
-        else if (node instanceof Template) {
-            ingestTemplate(unit, node);
+        catch (e) {
+            this._reportError(`${e}`, sourceSpan);
+            return this._exprParser.wrapLiteralPrimitive('ERROR', sourceSpan, absoluteOffset);
         }
-        else if (node instanceof Content) {
-            ingestContent(unit, node);
+    }
+    /**
+     * Parses the bindings in a microsyntax expression, and converts them to
+     * `ParsedProperty` or `ParsedVariable`.
+     *
+     * @param tplKey template binding name
+     * @param tplValue template binding value
+     * @param sourceSpan span of template binding relative to entire the template
+     * @param absoluteValueOffset start of the tplValue relative to the entire template
+     * @param targetMatchableAttrs potential attributes to match in the template
+     * @param targetProps target property bindings in the template
+     * @param targetVars target variables in the template
+     */
+    parseInlineTemplateBinding(tplKey, tplValue, sourceSpan, absoluteValueOffset, targetMatchableAttrs, targetProps, targetVars, isIvyAst) {
+        const absoluteKeyOffset = sourceSpan.start.offset + TEMPLATE_ATTR_PREFIX$1.length;
+        const bindings = this._parseTemplateBindings(tplKey, tplValue, sourceSpan, absoluteKeyOffset, absoluteValueOffset);
+        for (const binding of bindings) {
+            // sourceSpan is for the entire HTML attribute. bindingSpan is for a particular
+            // binding within the microsyntax expression so it's more narrow than sourceSpan.
+            const bindingSpan = moveParseSourceSpan(sourceSpan, binding.sourceSpan);
+            const key = binding.key.source;
+            const keySpan = moveParseSourceSpan(sourceSpan, binding.key.span);
+            if (binding instanceof VariableBinding) {
+                const value = binding.value ? binding.value.source : '$implicit';
+                const valueSpan = binding.value
+                    ? moveParseSourceSpan(sourceSpan, binding.value.span)
+                    : undefined;
+                targetVars.push(new ParsedVariable(key, value, bindingSpan, keySpan, valueSpan));
+            }
+            else if (binding.value) {
+                const srcSpan = isIvyAst ? bindingSpan : sourceSpan;
+                const valueSpan = moveParseSourceSpan(sourceSpan, binding.value.ast.sourceSpan);
+                this._parsePropertyAst(key, binding.value, false, srcSpan, keySpan, valueSpan, targetMatchableAttrs, targetProps);
+            }
+            else {
+                targetMatchableAttrs.push([key, '' /* value */]);
+                // Since this is a literal attribute with no RHS, source span should be
+                // just the key span.
+                this.parseLiteralAttr(key, null /* value */, keySpan, absoluteValueOffset, undefined /* valueSpan */, targetMatchableAttrs, targetProps, keySpan);
+            }
         }
-        else if (node instanceof Text$3) {
-            ingestText(unit, node, null);
+    }
+    /**
+     * Parses the bindings in a microsyntax expression, e.g.
+     * ```html
+     *    <tag *tplKey="let value1 = prop; let value2 = localVar">
+     * ```
+     *
+     * @param tplKey template binding name
+     * @param tplValue template binding value
+     * @param sourceSpan span of template binding relative to entire the template
+     * @param absoluteKeyOffset start of the `tplKey`
+     * @param absoluteValueOffset start of the `tplValue`
+     */
+    _parseTemplateBindings(tplKey, tplValue, sourceSpan, absoluteKeyOffset, absoluteValueOffset) {
+        try {
+            const bindingsResult = this._exprParser.parseTemplateBindings(tplKey, tplValue, sourceSpan, absoluteKeyOffset, absoluteValueOffset);
+            bindingsResult.errors.forEach((e) => this.errors.push(e));
+            bindingsResult.warnings.forEach((warning) => {
+                this._reportError(warning, sourceSpan, ParseErrorLevel.WARNING);
+            });
+            return bindingsResult.templateBindings;
         }
-        else if (node instanceof BoundText) {
-            ingestBoundText(unit, node, null);
+        catch (e) {
+            this._reportError(`${e}`, sourceSpan);
+            return [];
         }
-        else if (node instanceof IfBlock) {
-            ingestIfBlock(unit, node);
+    }
+    parseLiteralAttr(name, value, sourceSpan, absoluteOffset, valueSpan, targetMatchableAttrs, targetProps, keySpan) {
+        if (isLegacyAnimationLabel(name)) {
+            name = name.substring(1);
+            if (keySpan !== undefined) {
+                keySpan = moveParseSourceSpan(keySpan, new AbsoluteSourceSpan(keySpan.start.offset + 1, keySpan.end.offset));
+            }
+            if (value) {
+                this._reportError(`Assigning animation triggers via @prop="exp" attributes with an expression is invalid.` +
+                    ` Use property bindings (e.g. [@prop]="exp") or use an attribute without a value (e.g. @prop) instead.`, sourceSpan, ParseErrorLevel.ERROR);
+            }
+            this._parseLegacyAnimation(name, value, sourceSpan, absoluteOffset, keySpan, valueSpan, targetMatchableAttrs, targetProps);
         }
-        else if (node instanceof SwitchBlock) {
-            ingestSwitchBlock(unit, node);
+        else {
+            targetProps.push(new ParsedProperty(name, this._exprParser.wrapLiteralPrimitive(value, '', absoluteOffset), ParsedPropertyType.LITERAL_ATTR, sourceSpan, keySpan, valueSpan));
         }
-        else if (node instanceof DeferredBlock) {
-            ingestDeferBlock(unit, node);
+    }
+    parsePropertyBinding(name, expression, isHost, isPartOfAssignmentBinding, sourceSpan, absoluteOffset, valueSpan, targetMatchableAttrs, targetProps, keySpan) {
+        if (name.length === 0) {
+            this._reportError(`Property name is missing in binding`, sourceSpan);
         }
-        else if (node instanceof Icu$1) {
-            ingestIcu(unit, node);
+        let isLegacyAnimationProp = false;
+        if (name.startsWith(LEGACY_ANIMATE_PROP_PREFIX)) {
+            isLegacyAnimationProp = true;
+            name = name.substring(LEGACY_ANIMATE_PROP_PREFIX.length);
+            if (keySpan !== undefined) {
+                keySpan = moveParseSourceSpan(keySpan, new AbsoluteSourceSpan(keySpan.start.offset + LEGACY_ANIMATE_PROP_PREFIX.length, keySpan.end.offset));
+            }
         }
-        else if (node instanceof ForLoopBlock) {
-            ingestForBlock(unit, node);
+        else if (isLegacyAnimationLabel(name)) {
+            isLegacyAnimationProp = true;
+            name = name.substring(1);
+            if (keySpan !== undefined) {
+                keySpan = moveParseSourceSpan(keySpan, new AbsoluteSourceSpan(keySpan.start.offset + 1, keySpan.end.offset));
+            }
         }
-        else if (node instanceof LetDeclaration$1) {
-            ingestLetDeclaration(unit, node);
+        if (isLegacyAnimationProp) {
+            this._parseLegacyAnimation(name, expression, sourceSpan, absoluteOffset, keySpan, valueSpan, targetMatchableAttrs, targetProps);
+        }
+        else if (name.startsWith(`${ANIMATE_PREFIX$1}${PROPERTY_PARTS_SEPARATOR}`)) {
+            this._parseAnimation(name, this.parseBinding(expression, isHost, valueSpan || sourceSpan, absoluteOffset), sourceSpan, keySpan, valueSpan, targetMatchableAttrs, targetProps);
         }
-        else if (node instanceof Component$1) ;
         else {
-            throw new Error(`Unsupported template node: ${node.constructor.name}`);
+            this._parsePropertyAst(name, this.parseBinding(expression, isHost, valueSpan || sourceSpan, absoluteOffset), isPartOfAssignmentBinding, sourceSpan, keySpan, valueSpan, targetMatchableAttrs, targetProps);
         }
     }
-}
-/**
- * Ingest an element AST from the template into the given `ViewCompilation`.
- */
-function ingestElement(unit, element) {
-    if (element.i18n !== undefined &&
-        !(element.i18n instanceof Message || element.i18n instanceof TagPlaceholder)) {
-        throw Error(`Unhandled i18n metadata type for element: ${element.i18n.constructor.name}`);
-    }
-    const id = unit.job.allocateXrefId();
-    const [namespaceKey, elementName] = splitNsName(element.name);
-    const startOp = createElementStartOp(elementName, id, namespaceForKey(namespaceKey), element.i18n instanceof TagPlaceholder ? element.i18n : undefined, element.startSourceSpan, element.sourceSpan);
-    unit.create.push(startOp);
-    ingestElementBindings(unit, startOp, element);
-    ingestReferences(startOp, element);
-    // Start i18n, if needed, goes after the element create and bindings, but before the nodes
-    let i18nBlockId = null;
-    if (element.i18n instanceof Message) {
-        i18nBlockId = unit.job.allocateXrefId();
-        unit.create.push(createI18nStartOp(i18nBlockId, element.i18n, undefined, element.startSourceSpan));
+    parsePropertyInterpolation(name, value, sourceSpan, valueSpan, targetMatchableAttrs, targetProps, keySpan, interpolatedTokens) {
+        const expr = this.parseInterpolation(value, valueSpan || sourceSpan, interpolatedTokens);
+        if (expr) {
+            this._parsePropertyAst(name, expr, false, sourceSpan, keySpan, valueSpan, targetMatchableAttrs, targetProps);
+            return true;
+        }
+        return false;
     }
-    ingestNodes(unit, element.children);
-    // The source span for the end op is typically the element closing tag. However, if no closing tag
-    // exists, such as in `<input>`, we use the start source span instead. Usually the start and end
-    // instructions will be collapsed into one `element` instruction, negating the purpose of this
-    // fallback, but in cases when it is not collapsed (such as an input with a binding), we still
-    // want to map the end instruction to the main element.
-    const endOp = createElementEndOp(id, element.endSourceSpan ?? element.startSourceSpan);
-    unit.create.push(endOp);
-    // If there is an i18n message associated with this element, insert i18n start and end ops.
-    if (i18nBlockId !== null) {
-        OpList.insertBefore(createI18nEndOp(i18nBlockId, element.endSourceSpan ?? element.startSourceSpan), endOp);
+    _parsePropertyAst(name, ast, isPartOfAssignmentBinding, sourceSpan, keySpan, valueSpan, targetMatchableAttrs, targetProps) {
+        targetMatchableAttrs.push([name, ast.source]);
+        targetProps.push(new ParsedProperty(name, ast, isPartOfAssignmentBinding ? ParsedPropertyType.TWO_WAY : ParsedPropertyType.DEFAULT, sourceSpan, keySpan, valueSpan));
     }
-}
-/**
- * Ingest an `ng-template` node from the AST into the given `ViewCompilation`.
- */
-function ingestTemplate(unit, tmpl) {
-    if (tmpl.i18n !== undefined &&
-        !(tmpl.i18n instanceof Message || tmpl.i18n instanceof TagPlaceholder)) {
-        throw Error(`Unhandled i18n metadata type for template: ${tmpl.i18n.constructor.name}`);
+    _parseAnimation(name, ast, sourceSpan, keySpan, valueSpan, targetMatchableAttrs, targetProps) {
+        targetMatchableAttrs.push([name, ast.source]);
+        targetProps.push(new ParsedProperty(name, ast, ParsedPropertyType.ANIMATION, sourceSpan, keySpan, valueSpan));
     }
-    const childView = unit.job.allocateView(unit.xref);
-    let tagNameWithoutNamespace = tmpl.tagName;
-    let namespacePrefix = '';
-    if (tmpl.tagName) {
-        [namespacePrefix, tagNameWithoutNamespace] = splitNsName(tmpl.tagName);
+    _parseLegacyAnimation(name, expression, sourceSpan, absoluteOffset, keySpan, valueSpan, targetMatchableAttrs, targetProps) {
+        if (name.length === 0) {
+            this._reportError('Animation trigger is missing', sourceSpan);
+        }
+        // This will occur when a @trigger is not paired with an expression.
+        // For animations it is valid to not have an expression since */void
+        // states will be applied by angular when the element is attached/detached
+        const ast = this.parseBinding(expression || 'undefined', false, valueSpan || sourceSpan, absoluteOffset);
+        targetMatchableAttrs.push([name, ast.source]);
+        targetProps.push(new ParsedProperty(name, ast, ParsedPropertyType.LEGACY_ANIMATION, sourceSpan, keySpan, valueSpan));
     }
-    const i18nPlaceholder = tmpl.i18n instanceof TagPlaceholder ? tmpl.i18n : undefined;
-    const namespace = namespaceForKey(namespacePrefix);
-    const functionNameSuffix = tagNameWithoutNamespace === null ? '' : prefixWithNamespace(tagNameWithoutNamespace, namespace);
-    const templateKind = isPlainTemplate(tmpl)
-        ? TemplateKind.NgTemplate
-        : TemplateKind.Structural;
-    const templateOp = createTemplateOp(childView.xref, templateKind, tagNameWithoutNamespace, functionNameSuffix, namespace, i18nPlaceholder, tmpl.startSourceSpan, tmpl.sourceSpan);
-    unit.create.push(templateOp);
-    ingestTemplateBindings(unit, templateOp, tmpl, templateKind);
-    ingestReferences(templateOp, tmpl);
-    ingestNodes(childView, tmpl.children);
-    for (const { name, value } of tmpl.variables) {
-        childView.contextVariables.set(name, value !== '' ? value : '$implicit');
-    }
-    // If this is a plain template and there is an i18n message associated with it, insert i18n start
-    // and end ops. For structural directive templates, the i18n ops will be added when ingesting the
-    // element/template the directive is placed on.
-    if (templateKind === TemplateKind.NgTemplate && tmpl.i18n instanceof Message) {
-        const id = unit.job.allocateXrefId();
-        OpList.insertAfter(createI18nStartOp(id, tmpl.i18n, undefined, tmpl.startSourceSpan), childView.create.head);
-        OpList.insertBefore(createI18nEndOp(id, tmpl.endSourceSpan ?? tmpl.startSourceSpan), childView.create.tail);
-    }
-}
-/**
- * Ingest a content node from the AST into the given `ViewCompilation`.
- */
-function ingestContent(unit, content) {
-    if (content.i18n !== undefined && !(content.i18n instanceof TagPlaceholder)) {
-        throw Error(`Unhandled i18n metadata type for element: ${content.i18n.constructor.name}`);
-    }
-    let fallbackView = null;
-    // Don't capture default content that's only made up of empty text nodes and comments.
-    // Note that we process the default content before the projection in order to match the
-    // insertion order at runtime.
-    if (content.children.some((child) => !(child instanceof Comment$1) &&
-        (!(child instanceof Text$3) || child.value.trim().length > 0))) {
-        fallbackView = unit.job.allocateView(unit.xref);
-        ingestNodes(fallbackView, content.children);
+    parseBinding(value, isHostBinding, sourceSpan, absoluteOffset) {
+        try {
+            const ast = isHostBinding
+                ? this._exprParser.parseSimpleBinding(value, sourceSpan, absoluteOffset, this._interpolationConfig)
+                : this._exprParser.parseBinding(value, sourceSpan, absoluteOffset, this._interpolationConfig);
+            if (ast) {
+                this.errors.push(...ast.errors);
+            }
+            return ast;
+        }
+        catch (e) {
+            this._reportError(`${e}`, sourceSpan);
+            return this._exprParser.wrapLiteralPrimitive('ERROR', sourceSpan, absoluteOffset);
+        }
     }
-    const id = unit.job.allocateXrefId();
-    const op = createProjectionOp(id, content.selector, content.i18n, fallbackView?.xref ?? null, content.sourceSpan);
-    for (const attr of content.attributes) {
-        const securityContext = domSchema.securityContext(content.name, attr.name, true);
-        unit.update.push(createBindingOp(op.xref, BindingKind.Attribute, attr.name, literal(attr.value), null, securityContext, true, false, null, asMessage(attr.i18n), attr.sourceSpan));
+    createBoundElementProperty(elementSelector, boundProp, skipValidation = false, mapPropertyName = true) {
+        if (boundProp.isLegacyAnimation) {
+            return new BoundElementProperty(boundProp.name, BindingType.LegacyAnimation, SecurityContext.NONE, boundProp.expression, null, boundProp.sourceSpan, boundProp.keySpan, boundProp.valueSpan);
+        }
+        let unit = null;
+        let bindingType = undefined;
+        let boundPropertyName = null;
+        const parts = boundProp.name.split(PROPERTY_PARTS_SEPARATOR);
+        let securityContexts = undefined;
+        // Check for special cases (prefix style, attr, class)
+        if (parts.length > 1) {
+            if (parts[0] == ATTRIBUTE_PREFIX) {
+                boundPropertyName = parts.slice(1).join(PROPERTY_PARTS_SEPARATOR);
+                if (!skipValidation) {
+                    this._validatePropertyOrAttributeName(boundPropertyName, boundProp.sourceSpan, true);
+                }
+                securityContexts = calcPossibleSecurityContexts(this._schemaRegistry, elementSelector, boundPropertyName, true);
+                const nsSeparatorIdx = boundPropertyName.indexOf(':');
+                if (nsSeparatorIdx > -1) {
+                    const ns = boundPropertyName.substring(0, nsSeparatorIdx);
+                    const name = boundPropertyName.substring(nsSeparatorIdx + 1);
+                    boundPropertyName = mergeNsAndName(ns, name);
+                }
+                bindingType = BindingType.Attribute;
+            }
+            else if (parts[0] == CLASS_PREFIX) {
+                boundPropertyName = parts[1];
+                bindingType = BindingType.Class;
+                securityContexts = [SecurityContext.NONE];
+            }
+            else if (parts[0] == STYLE_PREFIX) {
+                unit = parts.length > 2 ? parts[2] : null;
+                boundPropertyName = parts[1];
+                bindingType = BindingType.Style;
+                securityContexts = [SecurityContext.STYLE];
+            }
+            else if (parts[0] == ANIMATE_PREFIX$1) {
+                boundPropertyName = boundProp.name;
+                bindingType = BindingType.Animation;
+                securityContexts = [SecurityContext.NONE];
+            }
+        }
+        // If not a special case, use the full property name
+        if (boundPropertyName === null) {
+            const mappedPropName = this._schemaRegistry.getMappedPropName(boundProp.name);
+            boundPropertyName = mapPropertyName ? mappedPropName : boundProp.name;
+            securityContexts = calcPossibleSecurityContexts(this._schemaRegistry, elementSelector, mappedPropName, false);
+            bindingType =
+                boundProp.type === ParsedPropertyType.TWO_WAY ? BindingType.TwoWay : BindingType.Property;
+            if (!skipValidation) {
+                this._validatePropertyOrAttributeName(mappedPropName, boundProp.sourceSpan, false);
+            }
+        }
+        return new BoundElementProperty(boundPropertyName, bindingType, securityContexts[0], boundProp.expression, unit, boundProp.sourceSpan, boundProp.keySpan, boundProp.valueSpan);
     }
-    unit.create.push(op);
-}
-/**
- * Ingest a literal text node from the AST into the given `ViewCompilation`.
- */
-function ingestText(unit, text, icuPlaceholder) {
-    unit.create.push(createTextOp(unit.job.allocateXrefId(), text.value, icuPlaceholder, text.sourceSpan));
-}
-/**
- * Ingest an interpolated text node from the AST into the given `ViewCompilation`.
- */
-function ingestBoundText(unit, text, icuPlaceholder) {
-    let value = text.value;
-    if (value instanceof ASTWithSource) {
-        value = value.ast;
+    parseEvent(name, expression, isAssignmentEvent, sourceSpan, handlerSpan, targetMatchableAttrs, targetEvents, keySpan) {
+        if (name.length === 0) {
+            this._reportError(`Event name is missing in binding`, sourceSpan);
+        }
+        if (isLegacyAnimationLabel(name)) {
+            name = name.slice(1);
+            if (keySpan !== undefined) {
+                keySpan = moveParseSourceSpan(keySpan, new AbsoluteSourceSpan(keySpan.start.offset + 1, keySpan.end.offset));
+            }
+            this._parseLegacyAnimationEvent(name, expression, sourceSpan, handlerSpan, targetEvents, keySpan);
+        }
+        else {
+            this._parseRegularEvent(name, expression, isAssignmentEvent, sourceSpan, handlerSpan, targetMatchableAttrs, targetEvents, keySpan);
+        }
     }
-    if (!(value instanceof Interpolation$1)) {
-        throw new Error(`AssertionError: expected Interpolation for BoundText node, got ${value.constructor.name}`);
+    calcPossibleSecurityContexts(selector, propName, isAttribute) {
+        const prop = this._schemaRegistry.getMappedPropName(propName);
+        return calcPossibleSecurityContexts(this._schemaRegistry, selector, prop, isAttribute);
     }
-    if (text.i18n !== undefined && !(text.i18n instanceof Container)) {
-        throw Error(`Unhandled i18n metadata type for text interpolation: ${text.i18n?.constructor.name}`);
+    parseEventListenerName(rawName) {
+        const [target, eventName] = splitAtColon(rawName, [null, rawName]);
+        return { eventName: eventName, target };
     }
-    const i18nPlaceholders = text.i18n instanceof Container
-        ? text.i18n.children
-            .filter((node) => node instanceof Placeholder)
-            .map((placeholder) => placeholder.name)
-        : [];
-    if (i18nPlaceholders.length > 0 && i18nPlaceholders.length !== value.expressions.length) {
-        throw Error(`Unexpected number of i18n placeholders (${value.expressions.length}) for BoundText with ${value.expressions.length} expressions`);
+    parseLegacyAnimationEventName(rawName) {
+        const matches = splitAtPeriod(rawName, [rawName, null]);
+        return { eventName: matches[0], phase: matches[1] === null ? null : matches[1].toLowerCase() };
     }
-    const textXref = unit.job.allocateXrefId();
-    unit.create.push(createTextOp(textXref, '', icuPlaceholder, text.sourceSpan));
-    // TemplateDefinitionBuilder does not generate source maps for sub-expressions inside an
-    // interpolation. We copy that behavior in compatibility mode.
-    // TODO: is it actually correct to generate these extra maps in modern mode?
-    const baseSourceSpan = unit.job.compatibility ? null : text.sourceSpan;
-    unit.update.push(createInterpolateTextOp(textXref, new Interpolation(value.strings, value.expressions.map((expr) => convertAst(expr, unit.job, baseSourceSpan)), i18nPlaceholders), text.sourceSpan));
-}
-/**
- * Ingest an `@if` block into the given `ViewCompilation`.
- */
-function ingestIfBlock(unit, ifBlock) {
-    let firstXref = null;
-    let conditions = [];
-    for (let i = 0; i < ifBlock.branches.length; i++) {
-        const ifCase = ifBlock.branches[i];
-        const cView = unit.job.allocateView(unit.xref);
-        const tagName = ingestControlFlowInsertionPoint(unit, cView.xref, ifCase);
-        if (ifCase.expressionAlias !== null) {
-            cView.contextVariables.set(ifCase.expressionAlias.name, CTX_REF);
+    _parseLegacyAnimationEvent(name, expression, sourceSpan, handlerSpan, targetEvents, keySpan) {
+        const { eventName, phase } = this.parseLegacyAnimationEventName(name);
+        const ast = this._parseAction(expression, handlerSpan);
+        targetEvents.push(new ParsedEvent(eventName, phase, ParsedEventType.LegacyAnimation, ast, sourceSpan, handlerSpan, keySpan));
+        if (eventName.length === 0) {
+            this._reportError(`Animation event name is missing in binding`, sourceSpan);
         }
-        let ifCaseI18nMeta = undefined;
-        if (ifCase.i18n !== undefined) {
-            if (!(ifCase.i18n instanceof BlockPlaceholder)) {
-                throw Error(`Unhandled i18n metadata type for if block: ${ifCase.i18n?.constructor.name}`);
+        if (phase) {
+            if (phase !== 'start' && phase !== 'done') {
+                this._reportError(`The provided animation output phase value "${phase}" for "@${eventName}" is not supported (use start or done)`, sourceSpan);
             }
-            ifCaseI18nMeta = ifCase.i18n;
         }
-        const createOp = i === 0 ? createConditionalCreateOp : createConditionalBranchCreateOp;
-        const conditionalCreateOp = createOp(cView.xref, TemplateKind.Block, tagName, 'Conditional', Namespace.HTML, ifCaseI18nMeta, ifCase.startSourceSpan, ifCase.sourceSpan);
-        unit.create.push(conditionalCreateOp);
-        if (firstXref === null) {
-            firstXref = cView.xref;
+        else {
+            this._reportError(`The animation trigger output event (@${eventName}) is missing its phase value name (start or done are currently supported)`, sourceSpan);
         }
-        const caseExpr = ifCase.expression ? convertAst(ifCase.expression, unit.job, null) : null;
-        const conditionalCaseExpr = new ConditionalCaseExpr(caseExpr, conditionalCreateOp.xref, conditionalCreateOp.handle, ifCase.expressionAlias);
-        conditions.push(conditionalCaseExpr);
-        ingestNodes(cView, ifCase.children);
     }
-    unit.update.push(createConditionalOp(firstXref, null, conditions, ifBlock.sourceSpan));
-}
-/**
- * Ingest an `@switch` block into the given `ViewCompilation`.
- */
-function ingestSwitchBlock(unit, switchBlock) {
-    // Don't ingest empty switches since they won't render anything.
-    if (switchBlock.cases.length === 0) {
-        return;
+    _parseRegularEvent(name, expression, isAssignmentEvent, sourceSpan, handlerSpan, targetMatchableAttrs, targetEvents, keySpan) {
+        // long format: 'target: eventName'
+        const { eventName, target } = this.parseEventListenerName(name);
+        const prevErrorCount = this.errors.length;
+        const ast = this._parseAction(expression, handlerSpan);
+        const isValid = this.errors.length === prevErrorCount;
+        targetMatchableAttrs.push([name, ast.source]);
+        // Don't try to validate assignment events if there were other
+        // parsing errors to avoid adding more noise to the error logs.
+        if (isAssignmentEvent && isValid && !this._isAllowedAssignmentEvent(ast)) {
+            this._reportError('Unsupported expression in a two-way binding', sourceSpan);
+        }
+        let eventType = ParsedEventType.Regular;
+        if (isAssignmentEvent) {
+            eventType = ParsedEventType.TwoWay;
+        }
+        if (name.startsWith(`${ANIMATE_PREFIX$1}${PROPERTY_PARTS_SEPARATOR}`)) {
+            eventType = ParsedEventType.Animation;
+        }
+        targetEvents.push(new ParsedEvent(eventName, target, eventType, ast, sourceSpan, handlerSpan, keySpan));
+        // Don't detect directives for event names for now,
+        // so don't add the event name to the matchableAttrs
     }
-    let firstXref = null;
-    let conditions = [];
-    for (let i = 0; i < switchBlock.cases.length; i++) {
-        const switchCase = switchBlock.cases[i];
-        const cView = unit.job.allocateView(unit.xref);
-        const tagName = ingestControlFlowInsertionPoint(unit, cView.xref, switchCase);
-        let switchCaseI18nMeta = undefined;
-        if (switchCase.i18n !== undefined) {
-            if (!(switchCase.i18n instanceof BlockPlaceholder)) {
-                throw Error(`Unhandled i18n metadata type for switch block: ${switchCase.i18n?.constructor.name}`);
+    _parseAction(value, sourceSpan) {
+        const absoluteOffset = sourceSpan && sourceSpan.start ? sourceSpan.start.offset : 0;
+        try {
+            const ast = this._exprParser.parseAction(value, sourceSpan, absoluteOffset, this._interpolationConfig);
+            if (ast) {
+                this.errors.push(...ast.errors);
             }
-            switchCaseI18nMeta = switchCase.i18n;
+            if (!ast || ast.ast instanceof EmptyExpr$1) {
+                this._reportError(`Empty expressions are not allowed`, sourceSpan);
+                return this._exprParser.wrapLiteralPrimitive('ERROR', sourceSpan, absoluteOffset);
+            }
+            return ast;
         }
-        const createOp = i === 0 ? createConditionalCreateOp : createConditionalBranchCreateOp;
-        const conditionalCreateOp = createOp(cView.xref, TemplateKind.Block, tagName, 'Case', Namespace.HTML, switchCaseI18nMeta, switchCase.startSourceSpan, switchCase.sourceSpan);
-        unit.create.push(conditionalCreateOp);
-        if (firstXref === null) {
-            firstXref = cView.xref;
+        catch (e) {
+            this._reportError(`${e}`, sourceSpan);
+            return this._exprParser.wrapLiteralPrimitive('ERROR', sourceSpan, absoluteOffset);
         }
-        const caseExpr = switchCase.expression
-            ? convertAst(switchCase.expression, unit.job, switchBlock.startSourceSpan)
-            : null;
-        const conditionalCaseExpr = new ConditionalCaseExpr(caseExpr, conditionalCreateOp.xref, conditionalCreateOp.handle);
-        conditions.push(conditionalCaseExpr);
-        ingestNodes(cView, switchCase.children);
-    }
-    unit.update.push(createConditionalOp(firstXref, convertAst(switchBlock.expression, unit.job, null), conditions, switchBlock.sourceSpan));
-}
-function ingestDeferView(unit, suffix, i18nMeta, children, sourceSpan) {
-    if (i18nMeta !== undefined && !(i18nMeta instanceof BlockPlaceholder)) {
-        throw Error('Unhandled i18n metadata type for defer block');
     }
-    if (children === undefined) {
-        return null;
+    _reportError(message, sourceSpan, level = ParseErrorLevel.ERROR) {
+        this.errors.push(new ParseError(sourceSpan, message, level));
     }
-    const secondaryView = unit.job.allocateView(unit.xref);
-    ingestNodes(secondaryView, children);
-    const templateOp = createTemplateOp(secondaryView.xref, TemplateKind.Block, null, `Defer${suffix}`, Namespace.HTML, i18nMeta, sourceSpan, sourceSpan);
-    unit.create.push(templateOp);
-    return templateOp;
-}
-function ingestDeferBlock(unit, deferBlock) {
-    let ownResolverFn = null;
-    if (unit.job.deferMeta.mode === 0 /* DeferBlockDepsEmitMode.PerBlock */) {
-        if (!unit.job.deferMeta.blocks.has(deferBlock)) {
-            throw new Error(`AssertionError: unable to find a dependency function for this deferred block`);
+    /**
+     * @param propName the name of the property / attribute
+     * @param sourceSpan
+     * @param isAttr true when binding to an attribute
+     */
+    _validatePropertyOrAttributeName(propName, sourceSpan, isAttr) {
+        const report = isAttr
+            ? this._schemaRegistry.validateAttribute(propName)
+            : this._schemaRegistry.validateProperty(propName);
+        if (report.error) {
+            this._reportError(report.msg, sourceSpan, ParseErrorLevel.ERROR);
         }
-        ownResolverFn = unit.job.deferMeta.blocks.get(deferBlock) ?? null;
-    }
-    // Generate the defer main view and all secondary views.
-    const main = ingestDeferView(unit, '', deferBlock.i18n, deferBlock.children, deferBlock.sourceSpan);
-    const loading = ingestDeferView(unit, 'Loading', deferBlock.loading?.i18n, deferBlock.loading?.children, deferBlock.loading?.sourceSpan);
-    const placeholder = ingestDeferView(unit, 'Placeholder', deferBlock.placeholder?.i18n, deferBlock.placeholder?.children, deferBlock.placeholder?.sourceSpan);
-    const error = ingestDeferView(unit, 'Error', deferBlock.error?.i18n, deferBlock.error?.children, deferBlock.error?.sourceSpan);
-    // Create the main defer op, and ops for all secondary views.
-    const deferXref = unit.job.allocateXrefId();
-    const deferOp = createDeferOp(deferXref, main.xref, main.handle, ownResolverFn, unit.job.allDeferrableDepsFn, deferBlock.sourceSpan);
-    deferOp.placeholderView = placeholder?.xref ?? null;
-    deferOp.placeholderSlot = placeholder?.handle ?? null;
-    deferOp.loadingSlot = loading?.handle ?? null;
-    deferOp.errorSlot = error?.handle ?? null;
-    deferOp.placeholderMinimumTime = deferBlock.placeholder?.minimumTime ?? null;
-    deferOp.loadingMinimumTime = deferBlock.loading?.minimumTime ?? null;
-    deferOp.loadingAfterTime = deferBlock.loading?.afterTime ?? null;
-    deferOp.flags = calcDeferBlockFlags(deferBlock);
-    unit.create.push(deferOp);
-    // Configure all defer `on` conditions.
-    // TODO: refactor prefetch triggers to use a separate op type, with a shared superclass. This will
-    // make it easier to refactor prefetch behavior in the future.
-    const deferOnOps = [];
-    const deferWhenOps = [];
-    // Ingest the hydrate triggers first since they set up all the other triggers during SSR.
-    ingestDeferTriggers("hydrate" /* ir.DeferOpModifierKind.HYDRATE */, deferBlock.hydrateTriggers, deferOnOps, deferWhenOps, unit, deferXref);
-    ingestDeferTriggers("none" /* ir.DeferOpModifierKind.NONE */, deferBlock.triggers, deferOnOps, deferWhenOps, unit, deferXref);
-    ingestDeferTriggers("prefetch" /* ir.DeferOpModifierKind.PREFETCH */, deferBlock.prefetchTriggers, deferOnOps, deferWhenOps, unit, deferXref);
-    // If no (non-prefetching or hydrating) defer triggers were provided, default to `idle`.
-    const hasConcreteTrigger = deferOnOps.some((op) => op.modifier === "none" /* ir.DeferOpModifierKind.NONE */) ||
-        deferWhenOps.some((op) => op.modifier === "none" /* ir.DeferOpModifierKind.NONE */);
-    if (!hasConcreteTrigger) {
-        deferOnOps.push(createDeferOnOp(deferXref, { kind: DeferTriggerKind.Idle }, "none" /* ir.DeferOpModifierKind.NONE */, null));
     }
-    unit.create.push(deferOnOps);
-    unit.update.push(deferWhenOps);
-}
-function calcDeferBlockFlags(deferBlockDetails) {
-    if (Object.keys(deferBlockDetails.hydrateTriggers).length > 0) {
-        return 1 /* ir.TDeferDetailsFlags.HasHydrateTriggers */;
+    /**
+     * Returns whether a parsed AST is allowed to be used within the event side of a two-way binding.
+     * @param ast Parsed AST to be checked.
+     */
+    _isAllowedAssignmentEvent(ast) {
+        if (ast instanceof ASTWithSource) {
+            return this._isAllowedAssignmentEvent(ast.ast);
+        }
+        if (ast instanceof NonNullAssert) {
+            return this._isAllowedAssignmentEvent(ast.expression);
+        }
+        if (ast instanceof Call &&
+            ast.args.length === 1 &&
+            ast.receiver instanceof PropertyRead &&
+            ast.receiver.name === '$any' &&
+            ast.receiver.receiver instanceof ImplicitReceiver &&
+            !(ast.receiver.receiver instanceof ThisReceiver)) {
+            return this._isAllowedAssignmentEvent(ast.args[0]);
+        }
+        if (ast instanceof PropertyRead || ast instanceof KeyedRead) {
+            if (!hasRecursiveSafeReceiver(ast)) {
+                return true;
+            }
+        }
+        return false;
     }
-    return null;
 }
-function ingestDeferTriggers(modifier, triggers, onOps, whenOps, unit, deferXref) {
-    if (triggers.idle !== undefined) {
-        const deferOnOp = createDeferOnOp(deferXref, { kind: DeferTriggerKind.Idle }, modifier, triggers.idle.sourceSpan);
-        onOps.push(deferOnOp);
+function hasRecursiveSafeReceiver(ast) {
+    if (ast instanceof SafePropertyRead || ast instanceof SafeKeyedRead) {
+        return true;
     }
-    if (triggers.immediate !== undefined) {
-        const deferOnOp = createDeferOnOp(deferXref, { kind: DeferTriggerKind.Immediate }, modifier, triggers.immediate.sourceSpan);
-        onOps.push(deferOnOp);
+    if (ast instanceof ParenthesizedExpression) {
+        return hasRecursiveSafeReceiver(ast.expression);
     }
-    if (triggers.timer !== undefined) {
-        const deferOnOp = createDeferOnOp(deferXref, { kind: DeferTriggerKind.Timer, delay: triggers.timer.delay }, modifier, triggers.timer.sourceSpan);
-        onOps.push(deferOnOp);
+    if (ast instanceof PropertyRead || ast instanceof KeyedRead || ast instanceof Call) {
+        return hasRecursiveSafeReceiver(ast.receiver);
     }
-    if (triggers.hover !== undefined) {
-        const deferOnOp = createDeferOnOp(deferXref, {
-            kind: DeferTriggerKind.Hover,
-            targetName: triggers.hover.reference,
-            targetXref: null,
-            targetSlot: null,
-            targetView: null,
-            targetSlotViewSteps: null,
-        }, modifier, triggers.hover.sourceSpan);
-        onOps.push(deferOnOp);
+    return false;
+}
+function isLegacyAnimationLabel(name) {
+    return name[0] == '@';
+}
+function calcPossibleSecurityContexts(registry, selector, propName, isAttribute) {
+    let ctxs;
+    const [namespaceKey, baseSelector] = selector ? splitNsName(selector, false) : [null, selector];
+    const nameToContext = (elName) => {
+        const [nsStr, name] = splitNsName(elName, false);
+        const ns = nsStr ?? namespaceKey;
+        const fullName = ns ? `:${ns}:${name}` : name;
+        return registry.securityContext(fullName, propName, isAttribute);
+    };
+    const allKnownElements = registry.allKnownElementNames();
+    if (baseSelector === null) {
+        ctxs = allKnownElements.map(nameToContext);
     }
-    if (triggers.interaction !== undefined) {
-        const deferOnOp = createDeferOnOp(deferXref, {
-            kind: DeferTriggerKind.Interaction,
-            targetName: triggers.interaction.reference,
-            targetXref: null,
-            targetSlot: null,
-            targetView: null,
-            targetSlotViewSteps: null,
-        }, modifier, triggers.interaction.sourceSpan);
-        onOps.push(deferOnOp);
+    else {
+        ctxs = [];
+        CssSelector.parse(baseSelector).forEach((selector) => {
+            let elementNames = selector.element ? [selector.element] : allKnownElements;
+            if (selector.element && !registry.hasElement(selector.element, [])) {
+                const svgElement = `:${SVG_NAMESPACE}:${selector.element}`;
+                const mathElement = `:${MATH_ML_NAMESPACE}:${selector.element}`;
+                if (registry.hasElement(svgElement, [])) {
+                    elementNames = [svgElement];
+                }
+                else if (registry.hasElement(mathElement, [])) {
+                    elementNames = [mathElement];
+                }
+            }
+            const notElementNames = new Set(selector.notSelectors
+                .filter((selector) => selector.isElementSelector())
+                .map((selector) => selector.element?.toLowerCase()));
+            const possibleElementNames = elementNames.filter((elName) => {
+                const elNameLowerCase = elName.toLowerCase();
+                return (!notElementNames.has(elNameLowerCase) &&
+                    !notElementNames.has(splitNsName(elNameLowerCase)[1]));
+            });
+            ctxs.push(...possibleElementNames.map(nameToContext));
+        });
     }
-    if (triggers.viewport !== undefined) {
-        const deferOnOp = createDeferOnOp(deferXref, {
-            kind: DeferTriggerKind.Viewport,
-            targetName: triggers.viewport.reference,
-            targetXref: null,
-            targetSlot: null,
-            targetView: null,
-            targetSlotViewSteps: null,
-        }, modifier, triggers.viewport.sourceSpan);
-        onOps.push(deferOnOp);
+    return ctxs.length === 0 ? [SecurityContext.NONE] : Array.from(new Set(ctxs)).sort();
+}
+/**
+ * Compute a new ParseSourceSpan based off an original `sourceSpan` by using
+ * absolute offsets from the specified `absoluteSpan`.
+ *
+ * @param sourceSpan original source span
+ * @param absoluteSpan absolute source span to move to
+ */
+function moveParseSourceSpan(sourceSpan, absoluteSpan) {
+    // The difference of two absolute offsets provide the relative offset
+    const startDiff = absoluteSpan.start - sourceSpan.start.offset;
+    const endDiff = absoluteSpan.end - sourceSpan.end.offset;
+    return new ParseSourceSpan(sourceSpan.start.moveBy(startDiff), sourceSpan.end.moveBy(endDiff), sourceSpan.fullStart.moveBy(startDiff), sourceSpan.details);
+}
+
+const compatibilityMode = CompatibilityMode.TemplateDefinitionBuilder;
+// Schema containing DOM elements and their properties.
+const domSchema = new DomElementSchemaRegistry();
+// Tag name of the `ng-template` element.
+const NG_TEMPLATE_TAG_NAME = 'ng-template';
+// prefix for any animation binding
+const ANIMATE_PREFIX = 'animate.';
+function isI18nRootNode(meta) {
+    return meta instanceof Message;
+}
+function isSingleI18nIcu(meta) {
+    return isI18nRootNode(meta) && meta.nodes.length === 1 && meta.nodes[0] instanceof Icu;
+}
+/**
+ * Process a template AST and convert it into a `ComponentCompilation` in the intermediate
+ * representation.
+ * TODO: Refactor more of the ingestion code into phases.
+ */
+function ingestComponent(componentName, template, constantPool, compilationMode, relativeContextFilePath, i18nUseExternalIds, deferMeta, allDeferrableDepsFn, relativeTemplatePath, enableDebugLocations) {
+    const job = new ComponentCompilationJob(componentName, constantPool, compatibilityMode, compilationMode, relativeContextFilePath, i18nUseExternalIds, deferMeta, allDeferrableDepsFn, relativeTemplatePath, enableDebugLocations);
+    ingestNodes(job.root, template);
+    return job;
+}
+/**
+ * Process a host binding AST and convert it into a `HostBindingCompilationJob` in the intermediate
+ * representation.
+ */
+function ingestHostBinding(input, bindingParser, constantPool) {
+    const job = new HostBindingCompilationJob(input.componentName, constantPool, compatibilityMode, TemplateCompilationMode.DomOnly);
+    for (const property of input.properties ?? []) {
+        let bindingKind = BindingKind.Property;
+        // TODO: this should really be handled in the parser.
+        if (property.name.startsWith('attr.')) {
+            property.name = property.name.substring('attr.'.length);
+            bindingKind = BindingKind.Attribute;
+        }
+        if (property.isLegacyAnimation) {
+            bindingKind = BindingKind.LegacyAnimation;
+        }
+        if (property.isAnimation) {
+            bindingKind = BindingKind.Animation;
+        }
+        const securityContexts = calcHostBindingSecurityContexts(bindingParser, input.componentSelector, property.name, bindingKind === BindingKind.Attribute);
+        ingestDomProperty(job, property, bindingKind, securityContexts);
     }
-    if (triggers.never !== undefined) {
-        const deferOnOp = createDeferOnOp(deferXref, { kind: DeferTriggerKind.Never }, modifier, triggers.never.sourceSpan);
-        onOps.push(deferOnOp);
+    for (const [name, expr] of Object.entries(input.attributes) ?? []) {
+        const securityContexts = calcHostBindingSecurityContexts(bindingParser, input.componentSelector, name, true);
+        ingestHostAttribute(job, name, expr, securityContexts);
     }
-    if (triggers.when !== undefined) {
-        if (triggers.when.value instanceof Interpolation$1) {
-            // TemplateDefinitionBuilder supports this case, but it's very strange to me. What would it
-            // even mean?
-            throw new Error(`Unexpected interpolation in defer block when trigger`);
-        }
-        const deferOnOp = createDeferWhenOp(deferXref, convertAst(triggers.when.value, unit.job, triggers.when.sourceSpan), modifier, triggers.when.sourceSpan);
-        whenOps.push(deferOnOp);
+    for (const event of input.events ?? []) {
+        ingestHostEvent(job, event);
     }
+    return job;
 }
-function ingestIcu(unit, icu) {
-    if (icu.i18n instanceof Message && isSingleI18nIcu(icu.i18n)) {
-        const xref = unit.job.allocateXrefId();
-        unit.create.push(createIcuStartOp(xref, icu.i18n, icuFromI18nMessage(icu.i18n).name, null));
-        for (const [placeholder, text] of Object.entries({ ...icu.vars, ...icu.placeholders })) {
-            if (text instanceof BoundText) {
-                ingestBoundText(unit, text, placeholder);
-            }
-            else {
-                ingestText(unit, text, placeholder);
-            }
-        }
-        unit.create.push(createIcuEndOp(xref));
+function calcHostBindingSecurityContexts(bindingParser, selector, name, isAttribute) {
+    const declaringSelectorContexts = bindingParser.calcPossibleSecurityContexts(selector, name, isAttribute);
+    const concreteHostContexts = calcPossibleSecurityContexts(domSchema, null, domSchema.getMappedPropName(name), isAttribute);
+    const concreteHostNonNoneContexts = concreteHostContexts.filter((context) => context !== SecurityContext.NONE);
+    const concreteHostNonNoneCount = concreteHostNonNoneContexts.length;
+    const hasConcreteHostNoneContext = concreteHostNonNoneCount !== concreteHostContexts.length;
+    // Host bindings can run against a concrete host whose element name differs from the declaring
+    // selector, including dynamic root components whose TNode name is `#host`.
+    if (hasConcreteHostNoneContext && concreteHostNonNoneCount > 0) {
+        return concreteHostContexts;
     }
-    else {
-        throw Error(`Unhandled i18n metadata type for ICU: ${icu.i18n?.constructor.name}`);
+    if (concreteHostNonNoneContexts.some((context) => !declaringSelectorContexts.includes(context))) {
+        return concreteHostContexts;
     }
+    return declaringSelectorContexts.filter((context) => context !== SecurityContext.NONE);
 }
-/**
- * Ingest an `@for` block into the given `ViewCompilation`.
+// 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 ingestDomProperty(job, property, bindingKind, securityContexts) {
+    let expression;
+    const ast = property.expression.ast;
+    if (ast instanceof Interpolation$1) {
+        expression = new Interpolation(ast.strings, ast.expressions.map((expr) => convertAst(expr, job, property.sourceSpan)), []);
+    }
+    else {
+        expression = convertAst(ast, job, property.sourceSpan);
+    }
+    job.root.update.push(createBindingOp(job.root.xref, bindingKind, property.name, expression, null, securityContexts, false, false, null, 
+    /* TODO: How do Host bindings handle i18n attrs? */ null, property.sourceSpan));
+}
+function ingestHostAttribute(job, name, value, securityContexts) {
+    const attrBinding = createBindingOp(job.root.xref, BindingKind.Attribute, name, value, null, securityContexts, 
+    /* Host attributes should always be extracted to const hostAttrs, even if they are not
+     *strictly* text literals */
+    true, false, null, 
+    /* TODO */ null, 
+    /** TODO: May be null? */ value.sourceSpan);
+    job.root.update.push(attrBinding);
+}
+function ingestHostEvent(job, event) {
+    let eventBinding;
+    if (event.type === ParsedEventType.Animation) {
+        eventBinding = createAnimationListenerOp(job.root.xref, new SlotHandle(), event.name, null, makeListenerHandlerOps(job.root, event.handler, event.handlerSpan), event.name.endsWith('enter') ? "enter" /* ir.AnimationKind.ENTER */ : "leave" /* ir.AnimationKind.LEAVE */, event.targetOrPhase, true, event.sourceSpan);
+    }
+    else {
+        const [phase, target] = event.type !== ParsedEventType.LegacyAnimation
+            ? [null, event.targetOrPhase]
+            : [event.targetOrPhase, null];
+        eventBinding = createListenerOp(job.root.xref, new SlotHandle(), event.name, null, makeListenerHandlerOps(job.root, event.handler, event.handlerSpan), phase, target, true, event.sourceSpan);
+    }
+    job.root.create.push(eventBinding);
+}
+/**
+ * Ingest the nodes of a template AST into the given `ViewCompilation`.
  */
-function ingestForBlock(unit, forBlock) {
-    const repeaterView = unit.job.allocateView(unit.xref);
-    // We copy TemplateDefinitionBuilder's scheme of creating names for `$count` and `$index`
-    // that are suffixed with special information, to disambiguate which level of nested loop
-    // the below aliases refer to.
-    // TODO: We should refactor Template Pipeline's variable phases to gracefully handle
-    // shadowing, and arbitrarily many levels of variables depending on each other.
-    const indexName = `ɵ$index_${repeaterView.xref}`;
-    const countName = `ɵ$count_${repeaterView.xref}`;
-    const indexVarNames = new Set();
-    // Set all the context variables and aliases available in the repeater.
-    repeaterView.contextVariables.set(forBlock.item.name, forBlock.item.value);
-    for (const variable of forBlock.contextVariables) {
-        if (variable.value === '$index') {
-            indexVarNames.add(variable.name);
+function ingestNodes(unit, template) {
+    for (const node of template) {
+        if (node instanceof Element$1) {
+            ingestElement(unit, node);
         }
-        if (variable.name === '$index') {
-            repeaterView.contextVariables.set('$index', variable.value).set(indexName, variable.value);
+        else if (node instanceof Template) {
+            ingestTemplate(unit, node);
         }
-        else if (variable.name === '$count') {
-            repeaterView.contextVariables.set('$count', variable.value).set(countName, variable.value);
+        else if (node instanceof Content) {
+            ingestContent(unit, node);
+        }
+        else if (node instanceof Text$3) {
+            ingestText(unit, node, null);
+        }
+        else if (node instanceof BoundText) {
+            ingestBoundText(unit, node, null);
+        }
+        else if (node instanceof IfBlock) {
+            ingestIfBlock(unit, node);
+        }
+        else if (node instanceof SwitchBlock) {
+            ingestSwitchBlock(unit, node);
+        }
+        else if (node instanceof DeferredBlock) {
+            ingestDeferBlock(unit, node);
         }
+        else if (node instanceof Icu$1) {
+            ingestIcu(unit, node);
+        }
+        else if (node instanceof ForLoopBlock) {
+            ingestForBlock(unit, node);
+        }
+        else if (node instanceof LetDeclaration$1) {
+            ingestLetDeclaration(unit, node);
+        }
+        else if (node instanceof Component$1) ;
         else {
-            repeaterView.aliases.add({
-                kind: SemanticVariableKind.Alias,
-                name: null,
-                identifier: variable.name,
-                expression: getComputedForLoopVariableExpression(variable, indexName, countName),
-            });
+            throw new Error(`Unsupported template node: ${node.constructor.name}`);
         }
     }
-    const sourceSpan = convertSourceSpan(forBlock.trackBy.span, forBlock.sourceSpan);
-    const track = convertAst(forBlock.trackBy, unit.job, sourceSpan);
-    ingestNodes(repeaterView, forBlock.children);
-    let emptyView = null;
-    let emptyTagName = null;
-    if (forBlock.empty !== null) {
-        emptyView = unit.job.allocateView(unit.xref);
-        ingestNodes(emptyView, forBlock.empty.children);
-        emptyTagName = ingestControlFlowInsertionPoint(unit, emptyView.xref, forBlock.empty);
+}
+/**
+ * Ingest an element AST from the template into the given `ViewCompilation`.
+ */
+function ingestElement(unit, element) {
+    if (element.i18n !== undefined &&
+        !(element.i18n instanceof Message || element.i18n instanceof TagPlaceholder)) {
+        throw Error(`Unhandled i18n metadata type for element: ${element.i18n.constructor.name}`);
     }
-    const varNames = {
-        $index: indexVarNames,
-        $implicit: forBlock.item.name,
-    };
-    if (forBlock.i18n !== undefined && !(forBlock.i18n instanceof BlockPlaceholder)) {
-        throw Error('AssertionError: Unhandled i18n metadata type or @for');
+    const id = unit.job.allocateXrefId();
+    const [namespaceKey, elementName] = splitNsName(element.name);
+    const startOp = createElementStartOp(elementName, id, namespaceForKey(namespaceKey), element.i18n instanceof TagPlaceholder ? element.i18n : undefined, element.startSourceSpan, element.sourceSpan);
+    unit.create.push(startOp);
+    ingestElementBindings(unit, startOp, element);
+    ingestReferences(startOp, element);
+    // Start i18n, if needed, goes after the element create and bindings, but before the nodes
+    let i18nBlockId = null;
+    if (element.i18n instanceof Message) {
+        i18nBlockId = unit.job.allocateXrefId();
+        unit.create.push(createI18nStartOp(i18nBlockId, element.i18n, undefined, element.startSourceSpan));
     }
-    if (forBlock.empty?.i18n !== undefined &&
-        !(forBlock.empty.i18n instanceof BlockPlaceholder)) {
-        throw Error('AssertionError: Unhandled i18n metadata type or @empty');
+    ingestNodes(unit, element.children);
+    // The source span for the end op is typically the element closing tag. However, if no closing tag
+    // exists, such as in `<input>`, we use the start source span instead. Usually the start and end
+    // instructions will be collapsed into one `element` instruction, negating the purpose of this
+    // fallback, but in cases when it is not collapsed (such as an input with a binding), we still
+    // want to map the end instruction to the main element.
+    const endOp = createElementEndOp(id, element.endSourceSpan ?? element.startSourceSpan);
+    unit.create.push(endOp);
+    // If there is an i18n message associated with this element, insert i18n start and end ops.
+    if (i18nBlockId !== null) {
+        OpList.insertBefore(createI18nEndOp(i18nBlockId, element.endSourceSpan ?? element.startSourceSpan), endOp);
     }
-    const i18nPlaceholder = forBlock.i18n;
-    const emptyI18nPlaceholder = forBlock.empty?.i18n;
-    const tagName = ingestControlFlowInsertionPoint(unit, repeaterView.xref, forBlock);
-    const repeaterCreate = createRepeaterCreateOp(repeaterView.xref, emptyView?.xref ?? null, tagName, track, varNames, emptyTagName, i18nPlaceholder, emptyI18nPlaceholder, forBlock.startSourceSpan, forBlock.sourceSpan);
-    unit.create.push(repeaterCreate);
-    const expression = convertAst(forBlock.expression, unit.job, convertSourceSpan(forBlock.expression.span, forBlock.sourceSpan));
-    const repeater = createRepeaterOp(repeaterCreate.xref, repeaterCreate.handle, expression, forBlock.sourceSpan);
-    unit.update.push(repeater);
 }
 /**
- * Gets an expression that represents a variable in an `@for` loop.
- * @param variable AST representing the variable.
- * @param indexName Loop-specific name for `$index`.
- * @param countName Loop-specific name for `$count`.
+ * Ingest an `ng-template` node from the AST into the given `ViewCompilation`.
  */
-function getComputedForLoopVariableExpression(variable, indexName, countName) {
-    switch (variable.value) {
-        case '$index':
-            return new LexicalReadExpr(indexName);
-        case '$count':
-            return new LexicalReadExpr(countName);
-        case '$first':
-            return new LexicalReadExpr(indexName).identical(literal(0));
-        case '$last':
-            return new LexicalReadExpr(indexName).identical(new LexicalReadExpr(countName).minus(literal(1)));
-        case '$even':
-            return new LexicalReadExpr(indexName).modulo(literal(2)).identical(literal(0));
-        case '$odd':
-            return new LexicalReadExpr(indexName).modulo(literal(2)).notIdentical(literal(0));
-        default:
-            throw new Error(`AssertionError: unknown @for loop variable ${variable.value}`);
+function ingestTemplate(unit, tmpl) {
+    if (tmpl.i18n !== undefined &&
+        !(tmpl.i18n instanceof Message || tmpl.i18n instanceof TagPlaceholder)) {
+        throw Error(`Unhandled i18n metadata type for template: ${tmpl.i18n.constructor.name}`);
+    }
+    const childView = unit.job.allocateView(unit.xref);
+    let tagNameWithoutNamespace = tmpl.tagName;
+    let namespacePrefix = '';
+    if (tmpl.tagName) {
+        [namespacePrefix, tagNameWithoutNamespace] = splitNsName(tmpl.tagName);
+    }
+    const i18nPlaceholder = tmpl.i18n instanceof TagPlaceholder ? tmpl.i18n : undefined;
+    const namespace = namespaceForKey(namespacePrefix);
+    const functionNameSuffix = tagNameWithoutNamespace === null ? '' : prefixWithNamespace(tagNameWithoutNamespace, namespace);
+    const templateKind = isPlainTemplate(tmpl)
+        ? TemplateKind.NgTemplate
+        : TemplateKind.Structural;
+    const templateOp = createTemplateOp(childView.xref, templateKind, tagNameWithoutNamespace, functionNameSuffix, namespace, i18nPlaceholder, tmpl.startSourceSpan, tmpl.sourceSpan);
+    unit.create.push(templateOp);
+    ingestTemplateBindings(unit, templateOp, tmpl, templateKind);
+    ingestReferences(templateOp, tmpl);
+    ingestNodes(childView, tmpl.children);
+    for (const { name, value } of tmpl.variables) {
+        childView.contextVariables.set(name, value !== '' ? value : '$implicit');
+    }
+    // If this is a plain template and there is an i18n message associated with it, insert i18n start
+    // and end ops. For structural directive templates, the i18n ops will be added when ingesting the
+    // element/template the directive is placed on.
+    if (templateKind === TemplateKind.NgTemplate && tmpl.i18n instanceof Message) {
+        const id = unit.job.allocateXrefId();
+        OpList.insertAfter(createI18nStartOp(id, tmpl.i18n, undefined, tmpl.startSourceSpan), childView.create.head);
+        OpList.insertBefore(createI18nEndOp(id, tmpl.endSourceSpan ?? tmpl.startSourceSpan), childView.create.tail);
     }
-}
-function ingestLetDeclaration(unit, node) {
-    const target = unit.job.allocateXrefId();
-    unit.create.push(createDeclareLetOp(target, node.name, node.sourceSpan));
-    unit.update.push(createStoreLetOp(target, node.name, convertAst(node.value, unit.job, node.valueSpan), node.sourceSpan));
 }
 /**
- * Convert a template AST expression into an output AST expression.
+ * Ingest a content node from the AST into the given `ViewCompilation`.
  */
-function convertAst(ast, job, baseSourceSpan) {
-    if (ast instanceof ASTWithSource) {
-        return convertAst(ast.ast, job, baseSourceSpan);
-    }
-    else if (ast instanceof PropertyRead) {
-        // Whether this is an implicit receiver, *excluding* explicit reads of `this`.
-        const isImplicitReceiver = ast.receiver instanceof ImplicitReceiver && !(ast.receiver instanceof ThisReceiver);
-        if (isImplicitReceiver) {
-            return new LexicalReadExpr(ast.name);
-        }
-        else {
-            return new ReadPropExpr(convertAst(ast.receiver, job, baseSourceSpan), ast.name, null, convertSourceSpan(ast.span, baseSourceSpan));
-        }
+function ingestContent(unit, content) {
+    if (content.i18n !== undefined && !(content.i18n instanceof TagPlaceholder)) {
+        throw Error(`Unhandled i18n metadata type for element: ${content.i18n.constructor.name}`);
     }
-    else if (ast instanceof Call) {
-        if (ast.receiver instanceof ImplicitReceiver) {
-            throw new Error(`Unexpected ImplicitReceiver`);
-        }
-        else {
-            return new InvokeFunctionExpr(convertAst(ast.receiver, job, baseSourceSpan), ast.args.map((arg) => convertAst(arg, job, baseSourceSpan)), undefined, convertSourceSpan(ast.span, baseSourceSpan));
-        }
+    let fallbackView = null;
+    // Don't capture default content that's only made up of empty text nodes and comments.
+    // Note that we process the default content before the projection in order to match the
+    // insertion order at runtime.
+    if (content.children.some((child) => !(child instanceof Comment$1) &&
+        (!(child instanceof Text$3) || child.value.trim().length > 0))) {
+        fallbackView = unit.job.allocateView(unit.xref);
+        ingestNodes(fallbackView, content.children);
     }
-    else if (ast instanceof LiteralPrimitive) {
-        return literal(ast.value, undefined, convertSourceSpan(ast.span, baseSourceSpan));
+    const id = unit.job.allocateXrefId();
+    const op = createProjectionOp(id, content.selector, content.i18n, fallbackView?.xref ?? null, content.sourceSpan);
+    for (const attr of content.attributes) {
+        const securityContext = domSchema.securityContext(content.name, attr.name, true);
+        unit.update.push(createBindingOp(op.xref, BindingKind.Attribute, attr.name, literal(attr.value), null, securityContext, true, false, null, asMessage(attr.i18n), attr.sourceSpan));
     }
-    else if (ast instanceof Unary) {
-        switch (ast.operator) {
-            case '+':
-                return new UnaryOperatorExpr(UnaryOperator.Plus, convertAst(ast.expr, job, baseSourceSpan), undefined, convertSourceSpan(ast.span, baseSourceSpan));
-            case '-':
-                return new UnaryOperatorExpr(UnaryOperator.Minus, convertAst(ast.expr, job, baseSourceSpan), undefined, convertSourceSpan(ast.span, baseSourceSpan));
-            default:
-                throw new Error(`AssertionError: unknown unary operator ${ast.operator}`);
-        }
-    }
-    else if (ast instanceof Binary) {
-        const operator = BINARY_OPERATORS.get(ast.operation);
-        if (operator === undefined) {
-            throw new Error(`AssertionError: unknown binary operator ${ast.operation}`);
-        }
-        return new BinaryOperatorExpr(operator, convertAst(ast.left, job, baseSourceSpan), convertAst(ast.right, job, baseSourceSpan), undefined, convertSourceSpan(ast.span, baseSourceSpan));
-    }
-    else if (ast instanceof ThisReceiver) {
-        // TODO: should context expressions have source maps?
-        return new ContextExpr(job.root.xref);
-    }
-    else if (ast instanceof KeyedRead) {
-        return new ReadKeyExpr(convertAst(ast.receiver, job, baseSourceSpan), convertAst(ast.key, job, baseSourceSpan), undefined, convertSourceSpan(ast.span, baseSourceSpan));
-    }
-    else if (ast instanceof Chain) {
-        throw new Error(`AssertionError: Chain in unknown context`);
-    }
-    else if (ast instanceof LiteralMap) {
-        const entries = ast.keys.map((key, idx) => {
-            const value = ast.values[idx];
-            // TODO: should literals have source maps, or do we just map the whole surrounding
-            // expression?
-            return new LiteralMapEntry(key.key, convertAst(value, job, baseSourceSpan), key.quoted);
-        });
-        return new LiteralMapExpr(entries, undefined, convertSourceSpan(ast.span, baseSourceSpan));
-    }
-    else if (ast instanceof LiteralArray) {
-        // TODO: should literals have source maps, or do we just map the whole surrounding expression?
-        return new LiteralArrayExpr(ast.expressions.map((expr) => convertAst(expr, job, baseSourceSpan)));
-    }
-    else if (ast instanceof Conditional) {
-        return new ConditionalExpr(convertAst(ast.condition, job, baseSourceSpan), convertAst(ast.trueExp, job, baseSourceSpan), convertAst(ast.falseExp, job, baseSourceSpan), undefined, convertSourceSpan(ast.span, baseSourceSpan));
-    }
-    else if (ast instanceof NonNullAssert) {
-        // A non-null assertion shouldn't impact generated instructions, so we can just drop it.
-        return convertAst(ast.expression, job, baseSourceSpan);
-    }
-    else if (ast instanceof BindingPipe) {
-        // TODO: pipes should probably have source maps; figure out details.
-        return new PipeBindingExpr(job.allocateXrefId(), new SlotHandle(), ast.name, [
-            convertAst(ast.exp, job, baseSourceSpan),
-            ...ast.args.map((arg) => convertAst(arg, job, baseSourceSpan)),
-        ]);
-    }
-    else if (ast instanceof SafeKeyedRead) {
-        return new SafeKeyedReadExpr(convertAst(ast.receiver, job, baseSourceSpan), convertAst(ast.key, job, baseSourceSpan), convertSourceSpan(ast.span, baseSourceSpan));
-    }
-    else if (ast instanceof SafePropertyRead) {
-        // TODO: source span
-        return new SafePropertyReadExpr(convertAst(ast.receiver, job, baseSourceSpan), ast.name);
-    }
-    else if (ast instanceof SafeCall) {
-        // TODO: source span
-        return new SafeInvokeFunctionExpr(convertAst(ast.receiver, job, baseSourceSpan), ast.args.map((a) => convertAst(a, job, baseSourceSpan)));
-    }
-    else if (ast instanceof EmptyExpr$1) {
-        return new EmptyExpr(convertSourceSpan(ast.span, baseSourceSpan));
-    }
-    else if (ast instanceof PrefixNot) {
-        return not(convertAst(ast.expression, job, baseSourceSpan), convertSourceSpan(ast.span, baseSourceSpan));
-    }
-    else if (ast instanceof TypeofExpression) {
-        return typeofExpr(convertAst(ast.expression, job, baseSourceSpan));
-    }
-    else if (ast instanceof VoidExpression) {
-        return new VoidExpr(convertAst(ast.expression, job, baseSourceSpan), undefined, convertSourceSpan(ast.span, baseSourceSpan));
-    }
-    else if (ast instanceof TemplateLiteral) {
-        return convertTemplateLiteral(ast, job, baseSourceSpan);
-    }
-    else if (ast instanceof TaggedTemplateLiteral) {
-        return new TaggedTemplateLiteralExpr(convertAst(ast.tag, job, baseSourceSpan), convertTemplateLiteral(ast.template, job, baseSourceSpan), undefined, convertSourceSpan(ast.span, baseSourceSpan));
-    }
-    else if (ast instanceof ParenthesizedExpression) {
-        return new ParenthesizedExpr(convertAst(ast.expression, job, baseSourceSpan), undefined, convertSourceSpan(ast.span, baseSourceSpan));
-    }
-    else {
-        throw new Error(`Unhandled expression type "${ast.constructor.name}" in file "${baseSourceSpan?.start.file.url}"`);
-    }
-}
-function convertTemplateLiteral(ast, job, baseSourceSpan) {
-    return new TemplateLiteralExpr(ast.elements.map((el) => {
-        return new TemplateLiteralElementExpr(el.text, convertSourceSpan(el.span, baseSourceSpan));
-    }), ast.expressions.map((expr) => convertAst(expr, job, baseSourceSpan)), convertSourceSpan(ast.span, baseSourceSpan));
-}
-function convertAstWithInterpolation(job, value, i18nMeta, sourceSpan) {
-    let expression;
-    if (value instanceof Interpolation$1) {
-        expression = new Interpolation(value.strings, value.expressions.map((e) => convertAst(e, job, null)), Object.keys(asMessage(i18nMeta)?.placeholders ?? {}));
-    }
-    else if (value instanceof AST) {
-        expression = convertAst(value, job, null);
-    }
-    else {
-        expression = literal(value);
-    }
-    return expression;
+    unit.create.push(op);
 }
-// TODO: Can we populate Template binding kinds in ingest?
-const BINDING_KINDS = new Map([
-    [BindingType.Property, BindingKind.Property],
-    [BindingType.TwoWay, BindingKind.TwoWayProperty],
-    [BindingType.Attribute, BindingKind.Attribute],
-    [BindingType.Class, BindingKind.ClassName],
-    [BindingType.Style, BindingKind.StyleProperty],
-    [BindingType.LegacyAnimation, BindingKind.LegacyAnimation],
-    [BindingType.Animation, BindingKind.Animation],
-]);
 /**
- * Checks whether the given template is a plain ng-template (as opposed to another kind of template
- * such as a structural directive template or control flow template). This is checked based on the
- * tagName. We can expect that only plain ng-templates will come through with a tagName of
- * 'ng-template'.
- *
- * Here are some of the cases we expect:
- *
- * | Angular HTML                       | Template tagName   |
- * | ---------------------------------- | ------------------ |
- * | `<ng-template>`                    | 'ng-template'      |
- * | `<div *ngIf="true">`               | 'div'              |
- * | `<svg><ng-template>`               | 'svg:ng-template'  |
- * | `@if (true) {`                     | 'Conditional'      |
- * | `<ng-template *ngIf>` (plain)      | 'ng-template'      |
- * | `<ng-template *ngIf>` (structural) | null               |
+ * Ingest a literal text node from the AST into the given `ViewCompilation`.
  */
-function isPlainTemplate(tmpl) {
-    return splitNsName(tmpl.tagName ?? '')[1] === NG_TEMPLATE_TAG_NAME;
+function ingestText(unit, text, icuPlaceholder) {
+    unit.create.push(createTextOp(unit.job.allocateXrefId(), text.value, icuPlaceholder, text.sourceSpan));
 }
 /**
- * Ensures that the i18nMeta, if provided, is an i18n.Message.
+ * Ingest an interpolated text node from the AST into the given `ViewCompilation`.
  */
-function asMessage(i18nMeta) {
-    if (i18nMeta == null) {
-        return null;
+function ingestBoundText(unit, text, icuPlaceholder) {
+    let value = text.value;
+    if (value instanceof ASTWithSource) {
+        value = value.ast;
     }
-    if (!(i18nMeta instanceof Message)) {
-        throw Error(`Expected i18n meta to be a Message, but got: ${i18nMeta.constructor.name}`);
+    if (!(value instanceof Interpolation$1)) {
+        throw new Error(`AssertionError: expected Interpolation for BoundText node, got ${value.constructor.name}`);
     }
-    return i18nMeta;
+    if (text.i18n !== undefined && !(text.i18n instanceof Container)) {
+        throw Error(`Unhandled i18n metadata type for text interpolation: ${text.i18n?.constructor.name}`);
+    }
+    const i18nPlaceholders = text.i18n instanceof Container
+        ? text.i18n.children
+            .filter((node) => node instanceof Placeholder)
+            .map((placeholder) => placeholder.name)
+        : [];
+    if (i18nPlaceholders.length > 0 && i18nPlaceholders.length !== value.expressions.length) {
+        throw Error(`Unexpected number of i18n placeholders (${value.expressions.length}) for BoundText with ${value.expressions.length} expressions`);
+    }
+    const textXref = unit.job.allocateXrefId();
+    unit.create.push(createTextOp(textXref, '', icuPlaceholder, text.sourceSpan));
+    // TemplateDefinitionBuilder does not generate source maps for sub-expressions inside an
+    // interpolation. We copy that behavior in compatibility mode.
+    // TODO: is it actually correct to generate these extra maps in modern mode?
+    const baseSourceSpan = unit.job.compatibility ? null : text.sourceSpan;
+    unit.update.push(createInterpolateTextOp(textXref, new Interpolation(value.strings, value.expressions.map((expr) => convertAst(expr, unit.job, baseSourceSpan)), i18nPlaceholders), text.sourceSpan));
 }
 /**
- * Process all of the bindings on an element in the template AST and convert them to their IR
- * representation.
+ * Ingest an `@if` block into the given `ViewCompilation`.
  */
-function ingestElementBindings(unit, op, element) {
-    let bindings = new Array();
-    let i18nAttributeBindingNames = new Set();
-    for (const attr of element.attributes) {
-        // Attribute literal bindings, such as `attr.foo="bar"`.
-        const securityContext = domSchema.securityContext(element.name, attr.name, true);
-        bindings.push(createBindingOp(op.xref, BindingKind.Attribute, attr.name, convertAstWithInterpolation(unit.job, attr.value, attr.i18n), null, securityContext, true, false, null, asMessage(attr.i18n), attr.sourceSpan));
-        if (attr.i18n) {
-            i18nAttributeBindingNames.add(attr.name);
-        }
-    }
-    for (const input of element.inputs) {
-        if (i18nAttributeBindingNames.has(input.name)) {
-            console.error(`On component ${unit.job.componentName}, the binding ${input.name} is both an i18n attribute and a property. You may want to remove the property binding. This will become a compilation error in future versions of Angular.`);
-        }
-        // All dynamic bindings (both attribute and property bindings).
-        bindings.push(createBindingOp(op.xref, BINDING_KINDS.get(input.type), input.name, convertAstWithInterpolation(unit.job, astOf(input.value), input.i18n), input.unit, input.securityContext, false, false, null, asMessage(input.i18n) ?? null, input.sourceSpan));
-    }
-    unit.create.push(bindings.filter((b) => b?.kind === OpKind.ExtractedAttribute));
-    unit.update.push(bindings.filter((b) => b?.kind === OpKind.Binding));
-    for (const output of element.outputs) {
-        if (output.type === ParsedEventType.LegacyAnimation && output.phase === null) {
-            throw Error('Animation listener should have a phase');
-        }
-        if (output.type === ParsedEventType.TwoWay) {
-            unit.create.push(createTwoWayListenerOp(op.xref, op.handle, output.name, op.tag, makeTwoWayListenerHandlerOps(unit, output.handler, output.handlerSpan), output.sourceSpan));
+function ingestIfBlock(unit, ifBlock) {
+    let firstXref = null;
+    let conditions = [];
+    for (let i = 0; i < ifBlock.branches.length; i++) {
+        const ifCase = ifBlock.branches[i];
+        const cView = unit.job.allocateView(unit.xref);
+        const tagName = ingestControlFlowInsertionPoint(unit, cView.xref, ifCase);
+        if (ifCase.expressionAlias !== null) {
+            cView.contextVariables.set(ifCase.expressionAlias.name, CTX_REF);
         }
-        else if (output.type === ParsedEventType.Animation) {
-            unit.create.push(createAnimationListenerOp(op.xref, op.handle, output.name, op.tag, makeListenerHandlerOps(unit, output.handler, output.handlerSpan), output.name.endsWith('enter') ? "enter" /* ir.AnimationKind.ENTER */ : "leave" /* ir.AnimationKind.LEAVE */, output.target, false, output.sourceSpan));
+        let ifCaseI18nMeta = undefined;
+        if (ifCase.i18n !== undefined) {
+            if (!(ifCase.i18n instanceof BlockPlaceholder)) {
+                throw Error(`Unhandled i18n metadata type for if block: ${ifCase.i18n?.constructor.name}`);
+            }
+            ifCaseI18nMeta = ifCase.i18n;
         }
-        else {
-            unit.create.push(createListenerOp(op.xref, op.handle, output.name, op.tag, makeListenerHandlerOps(unit, output.handler, output.handlerSpan), output.phase, output.target, false, output.sourceSpan));
+        const createOp = i === 0 ? createConditionalCreateOp : createConditionalBranchCreateOp;
+        const conditionalCreateOp = createOp(cView.xref, TemplateKind.Block, tagName, 'Conditional', Namespace.HTML, ifCaseI18nMeta, ifCase.startSourceSpan, ifCase.sourceSpan);
+        unit.create.push(conditionalCreateOp);
+        if (firstXref === null) {
+            firstXref = cView.xref;
         }
+        const caseExpr = ifCase.expression ? convertAst(ifCase.expression, unit.job, null) : null;
+        const conditionalCaseExpr = new ConditionalCaseExpr(caseExpr, conditionalCreateOp.xref, conditionalCreateOp.handle, ifCase.expressionAlias);
+        conditions.push(conditionalCaseExpr);
+        ingestNodes(cView, ifCase.children);
     }
-    // If any of the bindings on this element have an i18n message, then an i18n attrs configuration
-    // op is also required.
-    if (bindings.some((b) => b?.i18nMessage) !== null) {
-        unit.create.push(createI18nAttributesOp(unit.job.allocateXrefId(), new SlotHandle(), op.xref));
-    }
+    unit.update.push(createConditionalOp(firstXref, null, conditions, ifBlock.sourceSpan));
 }
 /**
- * Process all of the bindings on a template in the template AST and convert them to their IR
- * representation.
+ * Ingest an `@switch` block into the given `ViewCompilation`.
  */
-function ingestTemplateBindings(unit, op, template, templateKind) {
-    let bindings = new Array();
-    for (const attr of template.templateAttrs) {
-        if (attr instanceof TextAttribute) {
-            const securityContext = domSchema.securityContext(NG_TEMPLATE_TAG_NAME, attr.name, true);
-            bindings.push(createTemplateBinding(unit, op.xref, BindingType.Attribute, attr.name, attr.value, null, securityContext, true, templateKind, asMessage(attr.i18n), attr.sourceSpan));
-        }
-        else {
-            bindings.push(createTemplateBinding(unit, op.xref, attr.type, attr.name, astOf(attr.value), attr.unit, attr.securityContext, true, templateKind, asMessage(attr.i18n), attr.sourceSpan));
-        }
-    }
-    for (const attr of template.attributes) {
-        // Attribute literal bindings, such as `attr.foo="bar"`.
-        const securityContext = domSchema.securityContext(NG_TEMPLATE_TAG_NAME, attr.name, true);
-        bindings.push(createTemplateBinding(unit, op.xref, BindingType.Attribute, attr.name, attr.value, null, securityContext, false, templateKind, asMessage(attr.i18n), attr.sourceSpan));
-    }
-    for (const input of template.inputs) {
-        // Dynamic bindings (both attribute and property bindings).
-        bindings.push(createTemplateBinding(unit, op.xref, input.type, input.name, astOf(input.value), input.unit, input.securityContext, false, templateKind, asMessage(input.i18n), input.sourceSpan));
+function ingestSwitchBlock(unit, switchBlock) {
+    // Don't ingest empty switches since they won't render anything.
+    if (switchBlock.cases.length === 0) {
+        return;
     }
-    unit.create.push(bindings.filter((b) => b?.kind === OpKind.ExtractedAttribute));
-    unit.update.push(bindings.filter((b) => b?.kind === OpKind.Binding));
-    for (const output of template.outputs) {
-        if (output.type === ParsedEventType.LegacyAnimation && output.phase === null) {
-            throw Error('Animation listener should have a phase');
-        }
-        if (templateKind === TemplateKind.NgTemplate) {
-            if (output.type === ParsedEventType.TwoWay) {
-                unit.create.push(createTwoWayListenerOp(op.xref, op.handle, output.name, op.tag, makeTwoWayListenerHandlerOps(unit, output.handler, output.handlerSpan), output.sourceSpan));
-            }
-            else {
-                unit.create.push(createListenerOp(op.xref, op.handle, output.name, op.tag, makeListenerHandlerOps(unit, output.handler, output.handlerSpan), output.phase, output.target, false, output.sourceSpan));
+    let firstXref = null;
+    let conditions = [];
+    for (let i = 0; i < switchBlock.cases.length; i++) {
+        const switchCase = switchBlock.cases[i];
+        const cView = unit.job.allocateView(unit.xref);
+        const tagName = ingestControlFlowInsertionPoint(unit, cView.xref, switchCase);
+        let switchCaseI18nMeta = undefined;
+        if (switchCase.i18n !== undefined) {
+            if (!(switchCase.i18n instanceof BlockPlaceholder)) {
+                throw Error(`Unhandled i18n metadata type for switch block: ${switchCase.i18n?.constructor.name}`);
             }
+            switchCaseI18nMeta = switchCase.i18n;
         }
-        if (templateKind === TemplateKind.Structural &&
-            output.type !== ParsedEventType.LegacyAnimation) {
-            // Animation bindings are excluded from the structural template's const array.
-            const securityContext = domSchema.securityContext(NG_TEMPLATE_TAG_NAME, output.name, false);
-            unit.create.push(createExtractedAttributeOp(op.xref, BindingKind.Property, null, output.name, null, null, null, securityContext));
+        const createOp = i === 0 ? createConditionalCreateOp : createConditionalBranchCreateOp;
+        const conditionalCreateOp = createOp(cView.xref, TemplateKind.Block, tagName, 'Case', Namespace.HTML, switchCaseI18nMeta, switchCase.startSourceSpan, switchCase.sourceSpan);
+        unit.create.push(conditionalCreateOp);
+        if (firstXref === null) {
+            firstXref = cView.xref;
         }
+        const caseExpr = switchCase.expression
+            ? convertAst(switchCase.expression, unit.job, switchBlock.startSourceSpan)
+            : null;
+        const conditionalCaseExpr = new ConditionalCaseExpr(caseExpr, conditionalCreateOp.xref, conditionalCreateOp.handle);
+        conditions.push(conditionalCaseExpr);
+        ingestNodes(cView, switchCase.children);
     }
-    // TODO: Perhaps we could do this in a phase? (It likely wouldn't change the slot indices.)
-    if (bindings.some((b) => b?.i18nMessage) !== null) {
-        unit.create.push(createI18nAttributesOp(unit.job.allocateXrefId(), new SlotHandle(), op.xref));
-    }
+    unit.update.push(createConditionalOp(firstXref, convertAst(switchBlock.expression, unit.job, null), conditions, switchBlock.sourceSpan));
 }
-/**
- * Helper to ingest an individual binding on a template, either an explicit `ng-template`, or an
- * implicit template created via structural directive.
- *
- * Bindings on templates are *extremely* tricky. I have tried to isolate all of the confusing edge
- * cases into this function, and to comment it well to document the behavior.
- *
- * Some of this behavior is intuitively incorrect, and we should consider changing it in the future.
- *
- * @param view The compilation unit for the view containing the template.
- * @param xref The xref of the template op.
- * @param type The binding type, according to the parser. This is fairly reasonable, e.g. both
- *     dynamic and static attributes have e.BindingType.Attribute.
- * @param name The binding's name.
- * @param value The bindings's value, which will either be an input AST expression, or a string
- *     literal. Note that the input AST expression may or may not be const -- it will only be a
- *     string literal if the parser considered it a text binding.
- * @param unit If the binding has a unit (e.g. `px` for style bindings), then this is the unit.
- * @param securityContext The security context of the binding.
- * @param isStructuralTemplateAttribute Whether this binding actually applies to the structural
- *     ng-template. For example, an `ngFor` would actually apply to the structural template. (Most
- *     bindings on structural elements target the inner element, not the template.)
- * @param templateKind Whether this is an explicit `ng-template` or an implicit template created by
- *     a structural directive. This should never be a block template.
- * @param i18nMessage The i18n metadata for the binding, if any.
- * @param sourceSpan The source span of the binding.
- * @returns An IR binding op, or null if the binding should be skipped.
- */
-function createTemplateBinding(view, xref, type, name, value, unit, securityContext, isStructuralTemplateAttribute, templateKind, i18nMessage, sourceSpan) {
-    const isTextBinding = typeof value === 'string';
-    // If this is a structural template, then several kinds of bindings should not result in an
-    // update instruction.
-    if (templateKind === TemplateKind.Structural) {
-        if (!isStructuralTemplateAttribute) {
-            switch (type) {
-                case BindingType.Property:
-                case BindingType.Class:
-                case BindingType.Style:
-                    // Because this binding doesn't really target the ng-template, it must be a binding on an
-                    // inner node of a structural template. We can't skip it entirely, because we still need
-                    // it on the ng-template's consts (e.g. for the purposes of directive matching). However,
-                    // we should not generate an update instruction for it.
-                    return createExtractedAttributeOp(xref, BindingKind.Property, null, name, null, null, i18nMessage, securityContext);
-                case BindingType.TwoWay:
-                    return createExtractedAttributeOp(xref, BindingKind.TwoWayProperty, null, name, null, null, i18nMessage, securityContext);
-            }
-        }
-        if (!isTextBinding &&
-            (type === BindingType.Attribute ||
-                type === BindingType.LegacyAnimation ||
-                type === BindingType.Animation)) {
-            // Again, this binding doesn't really target the ng-template; it actually targets the element
-            // inside the structural template. In the case of non-text attribute or animation bindings,
-            // the binding doesn't even show up on the ng-template const array, so we just skip it
-            // entirely.
-            return null;
-        }
-    }
-    let bindingType = BINDING_KINDS.get(type);
-    if (templateKind === TemplateKind.NgTemplate) {
-        // We know we are dealing with bindings directly on an explicit ng-template.
-        // Static attribute bindings should be collected into the const array as k/v pairs. Property
-        // bindings should result in a `property` instruction, and `AttributeMarker.Bindings` const
-        // entries.
-        //
-        // The difficulty is with dynamic attribute, style, and class bindings. These don't really make
-        // sense on an `ng-template` and should probably be parser errors. However,
-        // TemplateDefinitionBuilder generates `property` instructions for them, and so we do that as
-        // well.
-        //
-        // Note that we do have a slight behavior difference with TemplateDefinitionBuilder: although
-        // TDB emits `property` instructions for dynamic attributes, styles, and classes, only styles
-        // and classes also get const collected into the `AttributeMarker.Bindings` field. Dynamic
-        // attribute bindings are missing from the consts entirely. We choose to emit them into the
-        // consts field anyway, to avoid creating special cases for something so arcane and nonsensical.
-        if (type === BindingType.Class ||
-            type === BindingType.Style ||
-            (type === BindingType.Attribute && !isTextBinding)) {
-            // TODO: These cases should be parse errors.
-            bindingType = BindingKind.Property;
-        }
+function ingestDeferView(unit, suffix, i18nMeta, children, sourceSpan) {
+    if (i18nMeta !== undefined && !(i18nMeta instanceof BlockPlaceholder)) {
+        throw Error('Unhandled i18n metadata type for defer block');
     }
-    return createBindingOp(xref, bindingType, name, convertAstWithInterpolation(view.job, value, i18nMessage), unit, securityContext, isTextBinding, isStructuralTemplateAttribute, templateKind, i18nMessage, sourceSpan);
-}
-function makeListenerHandlerOps(unit, handler, handlerSpan) {
-    handler = astOf(handler);
-    const handlerOps = new Array();
-    let handlerExprs = handler instanceof Chain ? handler.expressions : [handler];
-    if (handlerExprs.length === 0) {
-        throw new Error('Expected listener to have non-empty expression list.');
+    if (children === undefined) {
+        return null;
     }
-    const expressions = handlerExprs.map((expr) => convertAst(expr, unit.job, handlerSpan));
-    const returnExpr = expressions.pop();
-    handlerOps.push(...expressions.map((e) => createStatementOp(new ExpressionStatement(e, e.sourceSpan))));
-    handlerOps.push(createStatementOp(new ReturnStatement(returnExpr, returnExpr.sourceSpan)));
-    return handlerOps;
+    const secondaryView = unit.job.allocateView(unit.xref);
+    ingestNodes(secondaryView, children);
+    const templateOp = createTemplateOp(secondaryView.xref, TemplateKind.Block, null, `Defer${suffix}`, Namespace.HTML, i18nMeta, sourceSpan, sourceSpan);
+    unit.create.push(templateOp);
+    return templateOp;
 }
-function makeTwoWayListenerHandlerOps(unit, handler, handlerSpan) {
-    handler = astOf(handler);
-    const handlerOps = new Array();
-    if (handler instanceof Chain) {
-        if (handler.expressions.length === 1) {
-            handler = handler.expressions[0];
-        }
-        else {
-            // This is validated during parsing already, but we do it here just in case.
-            throw new Error('Expected two-way listener to have a single expression.');
+function ingestDeferBlock(unit, deferBlock) {
+    let ownResolverFn = null;
+    if (unit.job.deferMeta.mode === 0 /* DeferBlockDepsEmitMode.PerBlock */) {
+        if (!unit.job.deferMeta.blocks.has(deferBlock)) {
+            throw new Error(`AssertionError: unable to find a dependency function for this deferred block`);
         }
+        ownResolverFn = unit.job.deferMeta.blocks.get(deferBlock) ?? null;
     }
-    const handlerExpr = convertAst(handler, unit.job, handlerSpan);
-    const eventReference = new LexicalReadExpr('$event');
-    const twoWaySetExpr = new TwoWayBindingSetExpr(handlerExpr, eventReference);
-    handlerOps.push(createStatementOp(new ExpressionStatement(twoWaySetExpr)));
-    handlerOps.push(createStatementOp(new ReturnStatement(eventReference)));
-    return handlerOps;
-}
-function astOf(ast) {
-    return ast instanceof ASTWithSource ? ast.ast : ast;
-}
-/**
- * Process all of the local references on an element-like structure in the template AST and
- * convert them to their IR representation.
- */
-function ingestReferences(op, element) {
-    assertIsArray(op.localRefs);
-    for (const { name, value } of element.references) {
-        op.localRefs.push({
-            name,
-            target: value,
-        });
+    // Generate the defer main view and all secondary views.
+    const main = ingestDeferView(unit, '', deferBlock.i18n, deferBlock.children, deferBlock.sourceSpan);
+    const loading = ingestDeferView(unit, 'Loading', deferBlock.loading?.i18n, deferBlock.loading?.children, deferBlock.loading?.sourceSpan);
+    const placeholder = ingestDeferView(unit, 'Placeholder', deferBlock.placeholder?.i18n, deferBlock.placeholder?.children, deferBlock.placeholder?.sourceSpan);
+    const error = ingestDeferView(unit, 'Error', deferBlock.error?.i18n, deferBlock.error?.children, deferBlock.error?.sourceSpan);
+    // Create the main defer op, and ops for all secondary views.
+    const deferXref = unit.job.allocateXrefId();
+    const deferOp = createDeferOp(deferXref, main.xref, main.handle, ownResolverFn, unit.job.allDeferrableDepsFn, deferBlock.sourceSpan);
+    deferOp.placeholderView = placeholder?.xref ?? null;
+    deferOp.placeholderSlot = placeholder?.handle ?? null;
+    deferOp.loadingSlot = loading?.handle ?? null;
+    deferOp.errorSlot = error?.handle ?? null;
+    deferOp.placeholderMinimumTime = deferBlock.placeholder?.minimumTime ?? null;
+    deferOp.loadingMinimumTime = deferBlock.loading?.minimumTime ?? null;
+    deferOp.loadingAfterTime = deferBlock.loading?.afterTime ?? null;
+    deferOp.flags = calcDeferBlockFlags(deferBlock);
+    unit.create.push(deferOp);
+    // Configure all defer `on` conditions.
+    // TODO: refactor prefetch triggers to use a separate op type, with a shared superclass. This will
+    // make it easier to refactor prefetch behavior in the future.
+    const deferOnOps = [];
+    const deferWhenOps = [];
+    // Ingest the hydrate triggers first since they set up all the other triggers during SSR.
+    ingestDeferTriggers("hydrate" /* ir.DeferOpModifierKind.HYDRATE */, deferBlock.hydrateTriggers, deferOnOps, deferWhenOps, unit, deferXref);
+    ingestDeferTriggers("none" /* ir.DeferOpModifierKind.NONE */, deferBlock.triggers, deferOnOps, deferWhenOps, unit, deferXref);
+    ingestDeferTriggers("prefetch" /* ir.DeferOpModifierKind.PREFETCH */, deferBlock.prefetchTriggers, deferOnOps, deferWhenOps, unit, deferXref);
+    // If no (non-prefetching or hydrating) defer triggers were provided, default to `idle`.
+    const hasConcreteTrigger = deferOnOps.some((op) => op.modifier === "none" /* ir.DeferOpModifierKind.NONE */) ||
+        deferWhenOps.some((op) => op.modifier === "none" /* ir.DeferOpModifierKind.NONE */);
+    if (!hasConcreteTrigger) {
+        deferOnOps.push(createDeferOnOp(deferXref, { kind: DeferTriggerKind.Idle }, "none" /* ir.DeferOpModifierKind.NONE */, null));
     }
+    unit.create.push(deferOnOps);
+    unit.update.push(deferWhenOps);
 }
-/**
- * Assert that the given value is an array.
- */
-function assertIsArray(value) {
-    if (!Array.isArray(value)) {
-        throw new Error(`AssertionError: expected an array`);
+function calcDeferBlockFlags(deferBlockDetails) {
+    if (Object.keys(deferBlockDetails.hydrateTriggers).length > 0) {
+        return 1 /* ir.TDeferDetailsFlags.HasHydrateTriggers */;
     }
+    return null;
 }
-/**
- * Creates an absolute `ParseSourceSpan` from the relative `ParseSpan`.
- *
- * `ParseSpan` objects are relative to the start of the expression.
- * This method converts these to full `ParseSourceSpan` objects that
- * show where the span is within the overall source file.
- *
- * @param span the relative span to convert.
- * @param baseSourceSpan a span corresponding to the base of the expression tree.
- * @returns a `ParseSourceSpan` for the given span or null if no `baseSourceSpan` was provided.
- */
-function convertSourceSpan(span, baseSourceSpan) {
-    if (baseSourceSpan === null) {
-        return null;
+function ingestDeferTriggers(modifier, triggers, onOps, whenOps, unit, deferXref) {
+    if (triggers.idle !== undefined) {
+        const deferOnOp = createDeferOnOp(deferXref, { kind: DeferTriggerKind.Idle }, modifier, triggers.idle.sourceSpan);
+        onOps.push(deferOnOp);
     }
-    const start = baseSourceSpan.start.moveBy(span.start);
-    const end = baseSourceSpan.start.moveBy(span.end);
-    const fullStart = baseSourceSpan.fullStart.moveBy(span.start);
-    return new ParseSourceSpan(start, end, fullStart);
-}
-/**
- * With the directive-based control flow users were able to conditionally project content using
- * the `*` syntax. E.g. `<div *ngIf="expr" projectMe></div>` will be projected into
- * `<ng-content select="[projectMe]"/>`, because the attributes and tag name from the `div` are
- * copied to the template via the template creation instruction. With `@if` and `@for` that is
- * not the case, because the conditional is placed *around* elements, rather than *on* them.
- * The result is that content projection won't work in the same way if a user converts from
- * `*ngIf` to `@if`.
- *
- * This function aims to cover the most common case by doing the same copying when a control flow
- * node has *one and only one* root element or template node.
- *
- * This approach comes with some caveats:
- * 1. As soon as any other node is added to the root, the copying behavior won't work anymore.
- *    A diagnostic will be added to flag cases like this and to explain how to work around it.
- * 2. If `preserveWhitespaces` is enabled, it's very likely that indentation will break this
- *    workaround, because it'll include an additional text node as the first child. We can work
- *    around it here, but in a discussion it was decided not to, because the user explicitly opted
- *    into preserving the whitespace and we would have to drop it from the generated code.
- *    The diagnostic mentioned point in #1 will flag such cases to users.
- *
- * @returns Tag name to be used for the control flow template.
- */
-function ingestControlFlowInsertionPoint(unit, xref, node) {
-    let root = null;
-    for (const child of node.children) {
-        // Skip over comment nodes and @let declarations since
-        // it doesn't matter where they end up in the DOM.
-        if (child instanceof Comment$1 || child instanceof LetDeclaration$1) {
-            continue;
-        }
-        // We can only infer the tag name/attributes if there's a single root node.
-        if (root !== null) {
-            return null;
-        }
-        // Root nodes can only elements or templates with a tag name (e.g. `<div *foo></div>`).
-        if (child instanceof Element$1 || (child instanceof Template && child.tagName !== null)) {
-            root = child;
-        }
-        else {
-            return null;
-        }
+    if (triggers.immediate !== undefined) {
+        const deferOnOp = createDeferOnOp(deferXref, { kind: DeferTriggerKind.Immediate }, modifier, triggers.immediate.sourceSpan);
+        onOps.push(deferOnOp);
     }
-    // If we've found a single root node, its tag name and attributes can be
-    // copied to the surrounding template to be used for content projection.
-    if (root !== null) {
-        // Collect the static attributes for content projection purposes.
-        for (const attr of root.attributes) {
-            if (!attr.name.startsWith(ANIMATE_PREFIX$1)) {
-                const securityContext = domSchema.securityContext(NG_TEMPLATE_TAG_NAME, attr.name, true);
-                unit.update.push(createBindingOp(xref, BindingKind.Attribute, attr.name, literal(attr.value), null, securityContext, true, false, null, asMessage(attr.i18n), attr.sourceSpan));
-            }
-        }
-        // Also collect the inputs since they participate in content projection as well.
-        // Note that TDB used to collect the outputs as well, but it wasn't passing them into
-        // the template instruction. Here we just don't collect them.
-        for (const attr of root.inputs) {
-            if (attr.type !== BindingType.LegacyAnimation &&
-                attr.type !== BindingType.Animation &&
-                attr.type !== BindingType.Attribute) {
-                const securityContext = domSchema.securityContext(NG_TEMPLATE_TAG_NAME, attr.name, true);
-                unit.create.push(createExtractedAttributeOp(xref, BindingKind.Property, null, attr.name, null, null, null, securityContext));
-            }
-        }
-        const tagName = root instanceof Element$1 ? root.name : root.tagName;
-        // Don't pass along `ng-template` tag name since it enables directive matching.
-        return tagName === NG_TEMPLATE_TAG_NAME ? null : tagName;
+    if (triggers.timer !== undefined) {
+        const deferOnOp = createDeferOnOp(deferXref, { kind: DeferTriggerKind.Timer, delay: triggers.timer.delay }, modifier, triggers.timer.sourceSpan);
+        onOps.push(deferOnOp);
     }
-    return null;
-}
-
-/*!
- * @license
- * Copyright Google LLC All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.dev/license
- */
-/**
- * Whether to produce instructions that will attach the source location to each DOM node.
- *
- * !!!Important!!! at the time of writing this flag isn't exposed externally, but internal debug
- * tools enable it via a local change. Any modifications to this flag need to update the
- * internal tooling as well.
- */
-let ENABLE_TEMPLATE_SOURCE_LOCATIONS = false;
-/** Gets whether template source locations are enabled. */
-function getTemplateSourceLocationsEnabled() {
-    return ENABLE_TEMPLATE_SOURCE_LOCATIONS;
-}
-
-//  if (rf & flags) { .. }
-function renderFlagCheckIfStmt(flags, statements) {
-    return ifStmt(variable(RENDER_FLAGS).bitwiseAnd(literal(flags), null), statements);
-}
-/**
- * Translates query flags into `TQueryFlags` type in
- * packages/core/src/render3/interfaces/query.ts
- * @param query
- */
-function toQueryFlags(query) {
-    return ((query.descendants ? 1 /* QueryFlags.descendants */ : 0 /* QueryFlags.none */) |
-        (query.static ? 2 /* QueryFlags.isStatic */ : 0 /* QueryFlags.none */) |
-        (query.emitDistinctChangesOnly ? 4 /* QueryFlags.emitDistinctChangesOnly */ : 0 /* QueryFlags.none */));
-}
-function getQueryPredicate(query, constantPool) {
-    if (Array.isArray(query.predicate)) {
-        let predicate = [];
-        query.predicate.forEach((selector) => {
-            // Each item in predicates array may contain strings with comma-separated refs
-            // (for ex. 'ref, ref1, ..., refN'), thus we extract individual refs and store them
-            // as separate array entities
-            const selectors = selector.split(',').map((token) => literal(token.trim()));
-            predicate.push(...selectors);
-        });
-        return constantPool.getConstLiteral(literalArr(predicate), true);
+    if (triggers.hover !== undefined) {
+        const deferOnOp = createDeferOnOp(deferXref, {
+            kind: DeferTriggerKind.Hover,
+            targetName: triggers.hover.reference,
+            targetXref: null,
+            targetSlot: null,
+            targetView: null,
+            targetSlotViewSteps: null,
+        }, modifier, triggers.hover.sourceSpan);
+        onOps.push(deferOnOp);
     }
-    else {
-        // The original predicate may have been wrapped in a `forwardRef()` call.
-        switch (query.predicate.forwardRef) {
-            case 0 /* ForwardRefHandling.None */:
-            case 2 /* ForwardRefHandling.Unwrapped */:
-                return query.predicate.expression;
-            case 1 /* ForwardRefHandling.Wrapped */:
-                return importExpr(Identifiers.resolveForwardRef).callFn([query.predicate.expression]);
+    if (triggers.interaction !== undefined) {
+        const deferOnOp = createDeferOnOp(deferXref, {
+            kind: DeferTriggerKind.Interaction,
+            targetName: triggers.interaction.reference,
+            targetXref: null,
+            targetSlot: null,
+            targetView: null,
+            targetSlotViewSteps: null,
+        }, modifier, triggers.interaction.sourceSpan);
+        onOps.push(deferOnOp);
+    }
+    if (triggers.viewport !== undefined) {
+        const deferOnOp = createDeferOnOp(deferXref, {
+            kind: DeferTriggerKind.Viewport,
+            targetName: triggers.viewport.reference,
+            targetXref: null,
+            targetSlot: null,
+            targetView: null,
+            targetSlotViewSteps: null,
+        }, modifier, triggers.viewport.sourceSpan);
+        onOps.push(deferOnOp);
+    }
+    if (triggers.never !== undefined) {
+        const deferOnOp = createDeferOnOp(deferXref, { kind: DeferTriggerKind.Never }, modifier, triggers.never.sourceSpan);
+        onOps.push(deferOnOp);
+    }
+    if (triggers.when !== undefined) {
+        if (triggers.when.value instanceof Interpolation$1) {
+            // TemplateDefinitionBuilder supports this case, but it's very strange to me. What would it
+            // even mean?
+            throw new Error(`Unexpected interpolation in defer block when trigger`);
         }
+        const deferOnOp = createDeferWhenOp(deferXref, convertAst(triggers.when.value, unit.job, triggers.when.sourceSpan), modifier, triggers.when.sourceSpan);
+        whenOps.push(deferOnOp);
     }
 }
-function createQueryCreateCall(query, constantPool, queryTypeFns, prependParams) {
-    const parameters = [];
-    if (prependParams !== undefined) {
-        parameters.push(...prependParams);
-    }
-    if (query.isSignal) {
-        parameters.push(new ReadPropExpr(variable(CONTEXT_NAME), query.propertyName));
+function ingestIcu(unit, icu) {
+    if (icu.i18n instanceof Message && isSingleI18nIcu(icu.i18n)) {
+        const xref = unit.job.allocateXrefId();
+        unit.create.push(createIcuStartOp(xref, icu.i18n, icuFromI18nMessage(icu.i18n).name, null));
+        for (const [placeholder, text] of Object.entries({ ...icu.vars, ...icu.placeholders })) {
+            if (text instanceof BoundText) {
+                ingestBoundText(unit, text, placeholder);
+            }
+            else {
+                ingestText(unit, text, placeholder);
+            }
+        }
+        unit.create.push(createIcuEndOp(xref));
     }
-    parameters.push(getQueryPredicate(query, constantPool), literal(toQueryFlags(query)));
-    if (query.read) {
-        parameters.push(query.read);
+    else {
+        throw Error(`Unhandled i18n metadata type for ICU: ${icu.i18n?.constructor.name}`);
     }
-    const queryCreateFn = query.isSignal ? queryTypeFns.signalBased : queryTypeFns.nonSignal;
-    return importExpr(queryCreateFn).callFn(parameters);
 }
-const queryAdvancePlaceholder = Symbol('queryAdvancePlaceholder');
 /**
- * Collapses query advance placeholders in a list of statements.
- *
- * This allows for less generated code because multiple sibling query advance
- * statements can be collapsed into a single call with the count as argument.
- *
- * e.g.
- *
- * ```ts
- *   bla();
- *   queryAdvance();
- *   queryAdvance();
- *   bla();
- * ```
- *
- *   --> will turn into
- *
- * ```ts
- *   bla();
- *   queryAdvance(2);
- *   bla();
- * ```
+ * Ingest an `@for` block into the given `ViewCompilation`.
  */
-function collapseAdvanceStatements(statements) {
-    const result = [];
-    let advanceCollapseCount = 0;
-    const flushAdvanceCount = () => {
-        if (advanceCollapseCount > 0) {
-            result.unshift(importExpr(Identifiers.queryAdvance)
-                .callFn(advanceCollapseCount === 1 ? [] : [literal(advanceCollapseCount)])
-                .toStmt());
-            advanceCollapseCount = 0;
+function ingestForBlock(unit, forBlock) {
+    const repeaterView = unit.job.allocateView(unit.xref);
+    // We copy TemplateDefinitionBuilder's scheme of creating names for `$count` and `$index`
+    // that are suffixed with special information, to disambiguate which level of nested loop
+    // the below aliases refer to.
+    // TODO: We should refactor Template Pipeline's variable phases to gracefully handle
+    // shadowing, and arbitrarily many levels of variables depending on each other.
+    const indexName = `ɵ$index_${repeaterView.xref}`;
+    const countName = `ɵ$count_${repeaterView.xref}`;
+    const indexVarNames = new Set();
+    // Set all the context variables and aliases available in the repeater.
+    repeaterView.contextVariables.set(forBlock.item.name, forBlock.item.value);
+    for (const variable of forBlock.contextVariables) {
+        if (variable.value === '$index') {
+            indexVarNames.add(variable.name);
         }
-    };
-    // Iterate through statements in reverse and collapse advance placeholders.
-    for (let i = statements.length - 1; i >= 0; i--) {
-        const st = statements[i];
-        if (st === queryAdvancePlaceholder) {
-            advanceCollapseCount++;
+        if (variable.name === '$index') {
+            repeaterView.contextVariables.set('$index', variable.value).set(indexName, variable.value);
+        }
+        else if (variable.name === '$count') {
+            repeaterView.contextVariables.set('$count', variable.value).set(countName, variable.value);
         }
         else {
-            flushAdvanceCount();
-            result.unshift(st);
+            repeaterView.aliases.add({
+                kind: SemanticVariableKind.Alias,
+                name: null,
+                identifier: variable.name,
+                expression: getComputedForLoopVariableExpression(variable, indexName, countName),
+            });
         }
     }
-    flushAdvanceCount();
-    return result;
-}
-// Define and update any view queries
-function createViewQueriesFunction(viewQueries, constantPool, name) {
-    const createStatements = [];
-    const updateStatements = [];
-    const tempAllocator = temporaryAllocator((st) => updateStatements.push(st), TEMPORARY_NAME);
-    viewQueries.forEach((query) => {
-        // creation call, e.g. r3.viewQuery(somePredicate, true) or
-        //                r3.viewQuerySignal(ctx.prop, somePredicate, true);
-        const queryDefinitionCall = createQueryCreateCall(query, constantPool, {
-            signalBased: Identifiers.viewQuerySignal,
-            nonSignal: Identifiers.viewQuery,
-        });
-        createStatements.push(queryDefinitionCall.toStmt());
-        // Signal queries update lazily and we just advance the index.
-        if (query.isSignal) {
-            updateStatements.push(queryAdvancePlaceholder);
-            return;
-        }
-        // update, e.g. (r3.queryRefresh(tmp = r3.loadQuery()) && (ctx.someDir = tmp));
-        const temporary = tempAllocator();
-        const getQueryList = importExpr(Identifiers.loadQuery).callFn([]);
-        const refresh = importExpr(Identifiers.queryRefresh).callFn([temporary.set(getQueryList)]);
-        const updateDirective = variable(CONTEXT_NAME)
-            .prop(query.propertyName)
-            .set(query.first ? temporary.prop('first') : temporary);
-        updateStatements.push(refresh.and(updateDirective).toStmt());
-    });
-    const viewQueryFnName = name ? `${name}_Query` : null;
-    return fn([new FnParam(RENDER_FLAGS, NUMBER_TYPE), new FnParam(CONTEXT_NAME, null)], [
-        renderFlagCheckIfStmt(1 /* core.RenderFlags.Create */, createStatements),
-        renderFlagCheckIfStmt(2 /* core.RenderFlags.Update */, collapseAdvanceStatements(updateStatements)),
-    ], INFERRED_TYPE, null, viewQueryFnName);
-}
-// Define and update any content queries
-function createContentQueriesFunction(queries, constantPool, name) {
-    const createStatements = [];
-    const updateStatements = [];
-    const tempAllocator = temporaryAllocator((st) => updateStatements.push(st), TEMPORARY_NAME);
-    for (const query of queries) {
-        // creation, e.g. r3.contentQuery(dirIndex, somePredicate, true, null) or
-        //                r3.contentQuerySignal(dirIndex, propName, somePredicate, <flags>, <read>).
-        createStatements.push(createQueryCreateCall(query, constantPool, { nonSignal: Identifiers.contentQuery, signalBased: Identifiers.contentQuerySignal }, 
-        /* prependParams */ [variable('dirIndex')]).toStmt());
-        // Signal queries update lazily and we just advance the index.
-        if (query.isSignal) {
-            updateStatements.push(queryAdvancePlaceholder);
-            continue;
-        }
-        // update, e.g. (r3.queryRefresh(tmp = r3.loadQuery()) && (ctx.someDir = tmp));
-        const temporary = tempAllocator();
-        const getQueryList = importExpr(Identifiers.loadQuery).callFn([]);
-        const refresh = importExpr(Identifiers.queryRefresh).callFn([temporary.set(getQueryList)]);
-        const updateDirective = variable(CONTEXT_NAME)
-            .prop(query.propertyName)
-            .set(query.first ? temporary.prop('first') : temporary);
-        updateStatements.push(refresh.and(updateDirective).toStmt());
+    const sourceSpan = convertSourceSpan(forBlock.trackBy.span, forBlock.sourceSpan);
+    const track = convertAst(forBlock.trackBy, unit.job, sourceSpan);
+    ingestNodes(repeaterView, forBlock.children);
+    let emptyView = null;
+    let emptyTagName = null;
+    if (forBlock.empty !== null) {
+        emptyView = unit.job.allocateView(unit.xref);
+        ingestNodes(emptyView, forBlock.empty.children);
+        emptyTagName = ingestControlFlowInsertionPoint(unit, emptyView.xref, forBlock.empty);
     }
-    const contentQueriesFnName = name ? `${name}_ContentQueries` : null;
-    return fn([
-        new FnParam(RENDER_FLAGS, NUMBER_TYPE),
-        new FnParam(CONTEXT_NAME, null),
-        new FnParam('dirIndex', null),
-    ], [
-        renderFlagCheckIfStmt(1 /* core.RenderFlags.Create */, createStatements),
-        renderFlagCheckIfStmt(2 /* core.RenderFlags.Update */, collapseAdvanceStatements(updateStatements)),
-    ], INFERRED_TYPE, null, contentQueriesFnName);
-}
-
-class HtmlParser extends Parser$1 {
-    constructor() {
-        super(getHtmlTagDefinition);
+    const varNames = {
+        $index: indexVarNames,
+        $implicit: forBlock.item.name,
+    };
+    if (forBlock.i18n !== undefined && !(forBlock.i18n instanceof BlockPlaceholder)) {
+        throw Error('AssertionError: Unhandled i18n metadata type or @for');
     }
-    parse(source, url, options) {
-        return super.parse(source, url, options);
+    if (forBlock.empty?.i18n !== undefined &&
+        !(forBlock.empty.i18n instanceof BlockPlaceholder)) {
+        throw Error('AssertionError: Unhandled i18n metadata type or @empty');
     }
+    const i18nPlaceholder = forBlock.i18n;
+    const emptyI18nPlaceholder = forBlock.empty?.i18n;
+    const tagName = ingestControlFlowInsertionPoint(unit, repeaterView.xref, forBlock);
+    const repeaterCreate = createRepeaterCreateOp(repeaterView.xref, emptyView?.xref ?? null, tagName, track, varNames, emptyTagName, i18nPlaceholder, emptyI18nPlaceholder, forBlock.startSourceSpan, forBlock.sourceSpan);
+    unit.create.push(repeaterCreate);
+    const expression = convertAst(forBlock.expression, unit.job, convertSourceSpan(forBlock.expression.span, forBlock.sourceSpan));
+    const repeater = createRepeaterOp(repeaterCreate.xref, repeaterCreate.handle, expression, forBlock.sourceSpan);
+    unit.update.push(repeater);
 }
-
-const PROPERTY_PARTS_SEPARATOR = '.';
-const ATTRIBUTE_PREFIX = 'attr';
-const ANIMATE_PREFIX = 'animate';
-const CLASS_PREFIX = 'class';
-const STYLE_PREFIX = 'style';
-const TEMPLATE_ATTR_PREFIX$1 = '*';
-const LEGACY_ANIMATE_PROP_PREFIX = 'animate-';
 /**
- * Parses bindings in templates and in the directive host area.
+ * Gets an expression that represents a variable in an `@for` loop.
+ * @param variable AST representing the variable.
+ * @param indexName Loop-specific name for `$index`.
+ * @param countName Loop-specific name for `$count`.
  */
-class BindingParser {
-    _exprParser;
-    _interpolationConfig;
-    _schemaRegistry;
-    errors;
-    constructor(_exprParser, _interpolationConfig, _schemaRegistry, errors) {
-        this._exprParser = _exprParser;
-        this._interpolationConfig = _interpolationConfig;
-        this._schemaRegistry = _schemaRegistry;
-        this.errors = errors;
+function getComputedForLoopVariableExpression(variable, indexName, countName) {
+    switch (variable.value) {
+        case '$index':
+            return new LexicalReadExpr(indexName);
+        case '$count':
+            return new LexicalReadExpr(countName);
+        case '$first':
+            return new LexicalReadExpr(indexName).identical(literal(0));
+        case '$last':
+            return new LexicalReadExpr(indexName).identical(new LexicalReadExpr(countName).minus(literal(1)));
+        case '$even':
+            return new LexicalReadExpr(indexName).modulo(literal(2)).identical(literal(0));
+        case '$odd':
+            return new LexicalReadExpr(indexName).modulo(literal(2)).notIdentical(literal(0));
+        default:
+            throw new Error(`AssertionError: unknown @for loop variable ${variable.value}`);
     }
-    get interpolationConfig() {
-        return this._interpolationConfig;
+}
+function ingestLetDeclaration(unit, node) {
+    const target = unit.job.allocateXrefId();
+    unit.create.push(createDeclareLetOp(target, node.name, node.sourceSpan));
+    unit.update.push(createStoreLetOp(target, node.name, convertAst(node.value, unit.job, node.valueSpan), node.sourceSpan));
+}
+/**
+ * Convert a template AST expression into an output AST expression.
+ */
+function convertAst(ast, job, baseSourceSpan) {
+    if (ast instanceof ASTWithSource) {
+        return convertAst(ast.ast, job, baseSourceSpan);
     }
-    createBoundHostProperties(properties, sourceSpan) {
-        const boundProps = [];
-        for (const propName of Object.keys(properties)) {
-            const expression = properties[propName];
-            if (typeof expression === 'string') {
-                this.parsePropertyBinding(propName, expression, true, false, sourceSpan, sourceSpan.start.offset, undefined, [], 
-                // Use the `sourceSpan` for  `keySpan`. This isn't really accurate, but neither is the
-                // sourceSpan, as it represents the sourceSpan of the host itself rather than the
-                // source of the host binding (which doesn't exist in the template). Regardless,
-                // neither of these values are used in Ivy but are only here to satisfy the function
-                // signature. This should likely be refactored in the future so that `sourceSpan`
-                // isn't being used inaccurately.
-                boundProps, sourceSpan);
-            }
-            else {
-                this._reportError(`Value of the host property binding "${propName}" needs to be a string representing an expression but got "${expression}" (${typeof expression})`, sourceSpan);
-            }
+    else if (ast instanceof PropertyRead) {
+        // Whether this is an implicit receiver, *excluding* explicit reads of `this`.
+        const isImplicitReceiver = ast.receiver instanceof ImplicitReceiver && !(ast.receiver instanceof ThisReceiver);
+        if (isImplicitReceiver) {
+            return new LexicalReadExpr(ast.name);
         }
-        return boundProps;
-    }
-    createDirectiveHostEventAsts(hostListeners, sourceSpan) {
-        const targetEvents = [];
-        for (const propName of Object.keys(hostListeners)) {
-            const expression = hostListeners[propName];
-            if (typeof expression === 'string') {
-                // Use the `sourceSpan` for  `keySpan` and `handlerSpan`. This isn't really accurate, but
-                // neither is the `sourceSpan`, as it represents the `sourceSpan` of the host itself
-                // rather than the source of the host binding (which doesn't exist in the template).
-                // Regardless, neither of these values are used in Ivy but are only here to satisfy the
-                // function signature. This should likely be refactored in the future so that `sourceSpan`
-                // isn't being used inaccurately.
-                this.parseEvent(propName, expression, 
-                /* isAssignmentEvent */ false, sourceSpan, sourceSpan, [], targetEvents, sourceSpan);
-            }
-            else {
-                this._reportError(`Value of the host listener "${propName}" needs to be a string representing an expression but got "${expression}" (${typeof expression})`, sourceSpan);
-            }
+        else {
+            return new ReadPropExpr(convertAst(ast.receiver, job, baseSourceSpan), ast.name, null, convertSourceSpan(ast.span, baseSourceSpan));
         }
-        return targetEvents;
     }
-    parseInterpolation(value, sourceSpan, interpolatedTokens) {
-        const absoluteOffset = sourceSpan.fullStart.offset;
-        try {
-            const ast = this._exprParser.parseInterpolation(value, sourceSpan, absoluteOffset, interpolatedTokens, this._interpolationConfig);
-            if (ast) {
-                this.errors.push(...ast.errors);
-            }
-            return ast;
+    else if (ast instanceof Call) {
+        if (ast.receiver instanceof ImplicitReceiver) {
+            throw new Error(`Unexpected ImplicitReceiver`);
         }
-        catch (e) {
-            this._reportError(`${e}`, sourceSpan);
-            return this._exprParser.wrapLiteralPrimitive('ERROR', sourceSpan, absoluteOffset);
+        else {
+            return new InvokeFunctionExpr(convertAst(ast.receiver, job, baseSourceSpan), ast.args.map((arg) => convertAst(arg, job, baseSourceSpan)), undefined, convertSourceSpan(ast.span, baseSourceSpan));
         }
     }
-    /**
-     * Similar to `parseInterpolation`, but treats the provided string as a single expression
-     * element that would normally appear within the interpolation prefix and suffix (`{{` and `}}`).
-     * This is used for parsing the switch expression in ICUs.
-     */
-    parseInterpolationExpression(expression, sourceSpan) {
-        const absoluteOffset = sourceSpan.start.offset;
-        try {
-            const ast = this._exprParser.parseInterpolationExpression(expression, sourceSpan, absoluteOffset);
-            if (ast) {
-                this.errors.push(...ast.errors);
-            }
-            return ast;
-        }
-        catch (e) {
-            this._reportError(`${e}`, sourceSpan);
-            return this._exprParser.wrapLiteralPrimitive('ERROR', sourceSpan, absoluteOffset);
-        }
+    else if (ast instanceof LiteralPrimitive) {
+        return literal(ast.value, undefined, convertSourceSpan(ast.span, baseSourceSpan));
     }
-    /**
-     * Parses the bindings in a microsyntax expression, and converts them to
-     * `ParsedProperty` or `ParsedVariable`.
-     *
-     * @param tplKey template binding name
-     * @param tplValue template binding value
-     * @param sourceSpan span of template binding relative to entire the template
-     * @param absoluteValueOffset start of the tplValue relative to the entire template
-     * @param targetMatchableAttrs potential attributes to match in the template
-     * @param targetProps target property bindings in the template
-     * @param targetVars target variables in the template
-     */
-    parseInlineTemplateBinding(tplKey, tplValue, sourceSpan, absoluteValueOffset, targetMatchableAttrs, targetProps, targetVars, isIvyAst) {
-        const absoluteKeyOffset = sourceSpan.start.offset + TEMPLATE_ATTR_PREFIX$1.length;
-        const bindings = this._parseTemplateBindings(tplKey, tplValue, sourceSpan, absoluteKeyOffset, absoluteValueOffset);
-        for (const binding of bindings) {
-            // sourceSpan is for the entire HTML attribute. bindingSpan is for a particular
-            // binding within the microsyntax expression so it's more narrow than sourceSpan.
-            const bindingSpan = moveParseSourceSpan(sourceSpan, binding.sourceSpan);
-            const key = binding.key.source;
-            const keySpan = moveParseSourceSpan(sourceSpan, binding.key.span);
-            if (binding instanceof VariableBinding) {
-                const value = binding.value ? binding.value.source : '$implicit';
-                const valueSpan = binding.value
-                    ? moveParseSourceSpan(sourceSpan, binding.value.span)
-                    : undefined;
-                targetVars.push(new ParsedVariable(key, value, bindingSpan, keySpan, valueSpan));
-            }
-            else if (binding.value) {
-                const srcSpan = isIvyAst ? bindingSpan : sourceSpan;
-                const valueSpan = moveParseSourceSpan(sourceSpan, binding.value.ast.sourceSpan);
-                this._parsePropertyAst(key, binding.value, false, srcSpan, keySpan, valueSpan, targetMatchableAttrs, targetProps);
-            }
-            else {
-                targetMatchableAttrs.push([key, '' /* value */]);
-                // Since this is a literal attribute with no RHS, source span should be
-                // just the key span.
-                this.parseLiteralAttr(key, null /* value */, keySpan, absoluteValueOffset, undefined /* valueSpan */, targetMatchableAttrs, targetProps, keySpan);
-            }
+    else if (ast instanceof Unary) {
+        switch (ast.operator) {
+            case '+':
+                return new UnaryOperatorExpr(UnaryOperator.Plus, convertAst(ast.expr, job, baseSourceSpan), undefined, convertSourceSpan(ast.span, baseSourceSpan));
+            case '-':
+                return new UnaryOperatorExpr(UnaryOperator.Minus, convertAst(ast.expr, job, baseSourceSpan), undefined, convertSourceSpan(ast.span, baseSourceSpan));
+            default:
+                throw new Error(`AssertionError: unknown unary operator ${ast.operator}`);
         }
     }
-    /**
-     * Parses the bindings in a microsyntax expression, e.g.
-     * ```html
-     *    <tag *tplKey="let value1 = prop; let value2 = localVar">
-     * ```
-     *
-     * @param tplKey template binding name
-     * @param tplValue template binding value
-     * @param sourceSpan span of template binding relative to entire the template
-     * @param absoluteKeyOffset start of the `tplKey`
-     * @param absoluteValueOffset start of the `tplValue`
-     */
-    _parseTemplateBindings(tplKey, tplValue, sourceSpan, absoluteKeyOffset, absoluteValueOffset) {
-        try {
-            const bindingsResult = this._exprParser.parseTemplateBindings(tplKey, tplValue, sourceSpan, absoluteKeyOffset, absoluteValueOffset);
-            bindingsResult.errors.forEach((e) => this.errors.push(e));
-            bindingsResult.warnings.forEach((warning) => {
-                this._reportError(warning, sourceSpan, ParseErrorLevel.WARNING);
-            });
-            return bindingsResult.templateBindings;
-        }
-        catch (e) {
-            this._reportError(`${e}`, sourceSpan);
-            return [];
+    else if (ast instanceof Binary) {
+        const operator = BINARY_OPERATORS.get(ast.operation);
+        if (operator === undefined) {
+            throw new Error(`AssertionError: unknown binary operator ${ast.operation}`);
         }
+        return new BinaryOperatorExpr(operator, convertAst(ast.left, job, baseSourceSpan), convertAst(ast.right, job, baseSourceSpan), undefined, convertSourceSpan(ast.span, baseSourceSpan));
+    }
+    else if (ast instanceof ThisReceiver) {
+        // TODO: should context expressions have source maps?
+        return new ContextExpr(job.root.xref);
+    }
+    else if (ast instanceof KeyedRead) {
+        return new ReadKeyExpr(convertAst(ast.receiver, job, baseSourceSpan), convertAst(ast.key, job, baseSourceSpan), undefined, convertSourceSpan(ast.span, baseSourceSpan));
+    }
+    else if (ast instanceof Chain) {
+        throw new Error(`AssertionError: Chain in unknown context`);
+    }
+    else if (ast instanceof LiteralMap) {
+        const entries = ast.keys.map((key, idx) => {
+            const value = ast.values[idx];
+            // TODO: should literals have source maps, or do we just map the whole surrounding
+            // expression?
+            return new LiteralMapEntry(key.key, convertAst(value, job, baseSourceSpan), key.quoted);
+        });
+        return new LiteralMapExpr(entries, undefined, convertSourceSpan(ast.span, baseSourceSpan));
+    }
+    else if (ast instanceof LiteralArray) {
+        // TODO: should literals have source maps, or do we just map the whole surrounding expression?
+        return new LiteralArrayExpr(ast.expressions.map((expr) => convertAst(expr, job, baseSourceSpan)));
+    }
+    else if (ast instanceof Conditional) {
+        return new ConditionalExpr(convertAst(ast.condition, job, baseSourceSpan), convertAst(ast.trueExp, job, baseSourceSpan), convertAst(ast.falseExp, job, baseSourceSpan), undefined, convertSourceSpan(ast.span, baseSourceSpan));
+    }
+    else if (ast instanceof NonNullAssert) {
+        // A non-null assertion shouldn't impact generated instructions, so we can just drop it.
+        return convertAst(ast.expression, job, baseSourceSpan);
+    }
+    else if (ast instanceof BindingPipe) {
+        // TODO: pipes should probably have source maps; figure out details.
+        return new PipeBindingExpr(job.allocateXrefId(), new SlotHandle(), ast.name, [
+            convertAst(ast.exp, job, baseSourceSpan),
+            ...ast.args.map((arg) => convertAst(arg, job, baseSourceSpan)),
+        ]);
+    }
+    else if (ast instanceof SafeKeyedRead) {
+        return new SafeKeyedReadExpr(convertAst(ast.receiver, job, baseSourceSpan), convertAst(ast.key, job, baseSourceSpan), convertSourceSpan(ast.span, baseSourceSpan));
+    }
+    else if (ast instanceof SafePropertyRead) {
+        // TODO: source span
+        return new SafePropertyReadExpr(convertAst(ast.receiver, job, baseSourceSpan), ast.name);
+    }
+    else if (ast instanceof SafeCall) {
+        // TODO: source span
+        return new SafeInvokeFunctionExpr(convertAst(ast.receiver, job, baseSourceSpan), ast.args.map((a) => convertAst(a, job, baseSourceSpan)));
+    }
+    else if (ast instanceof EmptyExpr$1) {
+        return new EmptyExpr(convertSourceSpan(ast.span, baseSourceSpan));
+    }
+    else if (ast instanceof PrefixNot) {
+        return not(convertAst(ast.expression, job, baseSourceSpan), convertSourceSpan(ast.span, baseSourceSpan));
+    }
+    else if (ast instanceof TypeofExpression) {
+        return typeofExpr(convertAst(ast.expression, job, baseSourceSpan));
+    }
+    else if (ast instanceof VoidExpression) {
+        return new VoidExpr(convertAst(ast.expression, job, baseSourceSpan), undefined, convertSourceSpan(ast.span, baseSourceSpan));
+    }
+    else if (ast instanceof TemplateLiteral) {
+        return convertTemplateLiteral(ast, job, baseSourceSpan);
+    }
+    else if (ast instanceof TaggedTemplateLiteral) {
+        return new TaggedTemplateLiteralExpr(convertAst(ast.tag, job, baseSourceSpan), convertTemplateLiteral(ast.template, job, baseSourceSpan), undefined, convertSourceSpan(ast.span, baseSourceSpan));
+    }
+    else if (ast instanceof ParenthesizedExpression) {
+        return new ParenthesizedExpr(convertAst(ast.expression, job, baseSourceSpan), undefined, convertSourceSpan(ast.span, baseSourceSpan));
+    }
+    else {
+        throw new Error(`Unhandled expression type "${ast.constructor.name}" in file "${baseSourceSpan?.start.file.url}"`);
+    }
+}
+function convertTemplateLiteral(ast, job, baseSourceSpan) {
+    return new TemplateLiteralExpr(ast.elements.map((el) => {
+        return new TemplateLiteralElementExpr(el.text, convertSourceSpan(el.span, baseSourceSpan));
+    }), ast.expressions.map((expr) => convertAst(expr, job, baseSourceSpan)), convertSourceSpan(ast.span, baseSourceSpan));
+}
+function convertAstWithInterpolation(job, value, i18nMeta, sourceSpan) {
+    let expression;
+    if (value instanceof Interpolation$1) {
+        expression = new Interpolation(value.strings, value.expressions.map((e) => convertAst(e, job, null)), Object.keys(asMessage(i18nMeta)?.placeholders ?? {}));
+    }
+    else if (value instanceof AST) {
+        expression = convertAst(value, job, null);
+    }
+    else {
+        expression = literal(value);
+    }
+    return expression;
+}
+// TODO: Can we populate Template binding kinds in ingest?
+const BINDING_KINDS = new Map([
+    [BindingType.Property, BindingKind.Property],
+    [BindingType.TwoWay, BindingKind.TwoWayProperty],
+    [BindingType.Attribute, BindingKind.Attribute],
+    [BindingType.Class, BindingKind.ClassName],
+    [BindingType.Style, BindingKind.StyleProperty],
+    [BindingType.LegacyAnimation, BindingKind.LegacyAnimation],
+    [BindingType.Animation, BindingKind.Animation],
+]);
+/**
+ * Checks whether the given template is a plain ng-template (as opposed to another kind of template
+ * such as a structural directive template or control flow template). This is checked based on the
+ * tagName. We can expect that only plain ng-templates will come through with a tagName of
+ * 'ng-template'.
+ *
+ * Here are some of the cases we expect:
+ *
+ * | Angular HTML                       | Template tagName   |
+ * | ---------------------------------- | ------------------ |
+ * | `<ng-template>`                    | 'ng-template'      |
+ * | `<div *ngIf="true">`               | 'div'              |
+ * | `<svg><ng-template>`               | 'svg:ng-template'  |
+ * | `@if (true) {`                     | 'Conditional'      |
+ * | `<ng-template *ngIf>` (plain)      | 'ng-template'      |
+ * | `<ng-template *ngIf>` (structural) | null               |
+ */
+function isPlainTemplate(tmpl) {
+    return splitNsName(tmpl.tagName ?? '')[1] === NG_TEMPLATE_TAG_NAME;
+}
+/**
+ * Ensures that the i18nMeta, if provided, is an i18n.Message.
+ */
+function asMessage(i18nMeta) {
+    if (i18nMeta == null) {
+        return null;
     }
-    parseLiteralAttr(name, value, sourceSpan, absoluteOffset, valueSpan, targetMatchableAttrs, targetProps, keySpan) {
-        if (isLegacyAnimationLabel(name)) {
-            name = name.substring(1);
-            if (keySpan !== undefined) {
-                keySpan = moveParseSourceSpan(keySpan, new AbsoluteSourceSpan(keySpan.start.offset + 1, keySpan.end.offset));
-            }
-            if (value) {
-                this._reportError(`Assigning animation triggers via @prop="exp" attributes with an expression is invalid.` +
-                    ` Use property bindings (e.g. [@prop]="exp") or use an attribute without a value (e.g. @prop) instead.`, sourceSpan, ParseErrorLevel.ERROR);
+    if (!(i18nMeta instanceof Message)) {
+        throw Error(`Expected i18n meta to be a Message, but got: ${i18nMeta.constructor.name}`);
+    }
+    return i18nMeta;
+}
+/**
+ * Process all of the bindings on an element in the template AST and convert them to their IR
+ * representation.
+ */
+function ingestElementBindings(unit, op, element) {
+    let bindings = new Array();
+    let i18nAttributeBindingNames = new Set();
+    for (const attr of element.attributes) {
+        // Attribute literal bindings, such as `attr.foo="bar"`.
+        const [ns, elementName] = splitNsName(element.name);
+        let namespace = ns;
+        if (!ns) {
+            switch (op.namespace) {
+                case Namespace.SVG:
+                    namespace = SVG_NAMESPACE;
+                    break;
+                case Namespace.Math:
+                    namespace = MATH_ML_NAMESPACE;
+                    break;
             }
-            this._parseLegacyAnimation(name, value, sourceSpan, absoluteOffset, keySpan, valueSpan, targetMatchableAttrs, targetProps);
         }
-        else {
-            targetProps.push(new ParsedProperty(name, this._exprParser.wrapLiteralPrimitive(value, '', absoluteOffset), ParsedPropertyType.LITERAL_ATTR, sourceSpan, keySpan, valueSpan));
+        const securityContext = domSchema.securityContext(namespace ? `:${namespace}:${elementName}` : elementName, attr.name, true);
+        bindings.push(createBindingOp(op.xref, BindingKind.Attribute, attr.name, convertAstWithInterpolation(unit.job, attr.value, attr.i18n), null, securityContext, true, false, null, asMessage(attr.i18n), attr.sourceSpan));
+        if (attr.i18n) {
+            i18nAttributeBindingNames.add(attr.name);
         }
     }
-    parsePropertyBinding(name, expression, isHost, isPartOfAssignmentBinding, sourceSpan, absoluteOffset, valueSpan, targetMatchableAttrs, targetProps, keySpan) {
-        if (name.length === 0) {
-            this._reportError(`Property name is missing in binding`, sourceSpan);
-        }
-        let isLegacyAnimationProp = false;
-        if (name.startsWith(LEGACY_ANIMATE_PROP_PREFIX)) {
-            isLegacyAnimationProp = true;
-            name = name.substring(LEGACY_ANIMATE_PROP_PREFIX.length);
-            if (keySpan !== undefined) {
-                keySpan = moveParseSourceSpan(keySpan, new AbsoluteSourceSpan(keySpan.start.offset + LEGACY_ANIMATE_PROP_PREFIX.length, keySpan.end.offset));
-            }
+    for (const input of element.inputs) {
+        if (i18nAttributeBindingNames.has(input.name)) {
+            console.error(`On component ${unit.job.componentName}, the binding ${input.name} is both an i18n attribute and a property. You may want to remove the property binding. This will become a compilation error in future versions of Angular.`);
         }
-        else if (isLegacyAnimationLabel(name)) {
-            isLegacyAnimationProp = true;
-            name = name.substring(1);
-            if (keySpan !== undefined) {
-                keySpan = moveParseSourceSpan(keySpan, new AbsoluteSourceSpan(keySpan.start.offset + 1, keySpan.end.offset));
-            }
+        // All dynamic bindings (both attribute and property bindings).
+        bindings.push(createBindingOp(op.xref, BINDING_KINDS.get(input.type), input.name, convertAstWithInterpolation(unit.job, astOf(input.value), input.i18n), input.unit, input.securityContext, false, false, null, asMessage(input.i18n) ?? null, input.sourceSpan));
+    }
+    unit.create.push(bindings.filter((b) => b?.kind === OpKind.ExtractedAttribute));
+    unit.update.push(bindings.filter((b) => b?.kind === OpKind.Binding));
+    for (const output of element.outputs) {
+        if (output.type === ParsedEventType.LegacyAnimation && output.phase === null) {
+            throw Error('Animation listener should have a phase');
         }
-        if (isLegacyAnimationProp) {
-            this._parseLegacyAnimation(name, expression, sourceSpan, absoluteOffset, keySpan, valueSpan, targetMatchableAttrs, targetProps);
+        if (output.type === ParsedEventType.TwoWay) {
+            unit.create.push(createTwoWayListenerOp(op.xref, op.handle, output.name, op.tag, makeTwoWayListenerHandlerOps(unit, output.handler, output.handlerSpan), output.sourceSpan));
         }
-        else if (name.startsWith(`${ANIMATE_PREFIX}${PROPERTY_PARTS_SEPARATOR}`)) {
-            this._parseAnimation(name, this.parseBinding(expression, isHost, valueSpan || sourceSpan, absoluteOffset), sourceSpan, keySpan, valueSpan, targetMatchableAttrs, targetProps);
+        else if (output.type === ParsedEventType.Animation) {
+            unit.create.push(createAnimationListenerOp(op.xref, op.handle, output.name, op.tag, makeListenerHandlerOps(unit, output.handler, output.handlerSpan), output.name.endsWith('enter') ? "enter" /* ir.AnimationKind.ENTER */ : "leave" /* ir.AnimationKind.LEAVE */, output.target, false, output.sourceSpan));
         }
         else {
-            this._parsePropertyAst(name, this.parseBinding(expression, isHost, valueSpan || sourceSpan, absoluteOffset), isPartOfAssignmentBinding, sourceSpan, keySpan, valueSpan, targetMatchableAttrs, targetProps);
-        }
-    }
-    parsePropertyInterpolation(name, value, sourceSpan, valueSpan, targetMatchableAttrs, targetProps, keySpan, interpolatedTokens) {
-        const expr = this.parseInterpolation(value, valueSpan || sourceSpan, interpolatedTokens);
-        if (expr) {
-            this._parsePropertyAst(name, expr, false, sourceSpan, keySpan, valueSpan, targetMatchableAttrs, targetProps);
-            return true;
+            unit.create.push(createListenerOp(op.xref, op.handle, output.name, op.tag, makeListenerHandlerOps(unit, output.handler, output.handlerSpan), output.phase, output.target, false, output.sourceSpan));
         }
-        return false;
-    }
-    _parsePropertyAst(name, ast, isPartOfAssignmentBinding, sourceSpan, keySpan, valueSpan, targetMatchableAttrs, targetProps) {
-        targetMatchableAttrs.push([name, ast.source]);
-        targetProps.push(new ParsedProperty(name, ast, isPartOfAssignmentBinding ? ParsedPropertyType.TWO_WAY : ParsedPropertyType.DEFAULT, sourceSpan, keySpan, valueSpan));
-    }
-    _parseAnimation(name, ast, sourceSpan, keySpan, valueSpan, targetMatchableAttrs, targetProps) {
-        targetMatchableAttrs.push([name, ast.source]);
-        targetProps.push(new ParsedProperty(name, ast, ParsedPropertyType.ANIMATION, sourceSpan, keySpan, valueSpan));
     }
-    _parseLegacyAnimation(name, expression, sourceSpan, absoluteOffset, keySpan, valueSpan, targetMatchableAttrs, targetProps) {
-        if (name.length === 0) {
-            this._reportError('Animation trigger is missing', sourceSpan);
-        }
-        // This will occur when a @trigger is not paired with an expression.
-        // For animations it is valid to not have an expression since */void
-        // states will be applied by angular when the element is attached/detached
-        const ast = this.parseBinding(expression || 'undefined', false, valueSpan || sourceSpan, absoluteOffset);
-        targetMatchableAttrs.push([name, ast.source]);
-        targetProps.push(new ParsedProperty(name, ast, ParsedPropertyType.LEGACY_ANIMATION, sourceSpan, keySpan, valueSpan));
+    // If any of the bindings on this element have an i18n message, then an i18n attrs configuration
+    // op is also required.
+    if (bindings.some((b) => b?.i18nMessage) !== null) {
+        unit.create.push(createI18nAttributesOp(unit.job.allocateXrefId(), new SlotHandle(), op.xref));
     }
-    parseBinding(value, isHostBinding, sourceSpan, absoluteOffset) {
-        try {
-            const ast = isHostBinding
-                ? this._exprParser.parseSimpleBinding(value, sourceSpan, absoluteOffset, this._interpolationConfig)
-                : this._exprParser.parseBinding(value, sourceSpan, absoluteOffset, this._interpolationConfig);
-            if (ast) {
-                this.errors.push(...ast.errors);
-            }
-            return ast;
+}
+/**
+ * Process all of the bindings on a template in the template AST and convert them to their IR
+ * representation.
+ */
+function ingestTemplateBindings(unit, op, template, templateKind) {
+    let bindings = new Array();
+    for (const attr of template.templateAttrs) {
+        if (attr instanceof TextAttribute) {
+            const securityContext = domSchema.securityContext(NG_TEMPLATE_TAG_NAME, attr.name, true);
+            bindings.push(createTemplateBinding(unit, op.xref, BindingType.Attribute, attr.name, attr.value, null, securityContext, true, templateKind, asMessage(attr.i18n), attr.sourceSpan));
         }
-        catch (e) {
-            this._reportError(`${e}`, sourceSpan);
-            return this._exprParser.wrapLiteralPrimitive('ERROR', sourceSpan, absoluteOffset);
+        else {
+            bindings.push(createTemplateBinding(unit, op.xref, attr.type, attr.name, astOf(attr.value), attr.unit, attr.securityContext, true, templateKind, asMessage(attr.i18n), attr.sourceSpan));
         }
     }
-    createBoundElementProperty(elementSelector, boundProp, skipValidation = false, mapPropertyName = true) {
-        if (boundProp.isLegacyAnimation) {
-            return new BoundElementProperty(boundProp.name, BindingType.LegacyAnimation, SecurityContext.NONE, boundProp.expression, null, boundProp.sourceSpan, boundProp.keySpan, boundProp.valueSpan);
+    for (const attr of template.attributes) {
+        // Attribute literal bindings, such as `attr.foo="bar"`.
+        const securityContext = domSchema.securityContext(NG_TEMPLATE_TAG_NAME, attr.name, true);
+        bindings.push(createTemplateBinding(unit, op.xref, BindingType.Attribute, attr.name, attr.value, null, securityContext, false, templateKind, asMessage(attr.i18n), attr.sourceSpan));
+    }
+    for (const input of template.inputs) {
+        // Dynamic bindings (both attribute and property bindings).
+        bindings.push(createTemplateBinding(unit, op.xref, input.type, input.name, astOf(input.value), input.unit, input.securityContext, false, templateKind, asMessage(input.i18n), input.sourceSpan));
+    }
+    unit.create.push(bindings.filter((b) => b?.kind === OpKind.ExtractedAttribute));
+    unit.update.push(bindings.filter((b) => b?.kind === OpKind.Binding));
+    for (const output of template.outputs) {
+        if (output.type === ParsedEventType.LegacyAnimation && output.phase === null) {
+            throw Error('Animation listener should have a phase');
         }
-        let unit = null;
-        let bindingType = undefined;
-        let boundPropertyName = null;
-        const parts = boundProp.name.split(PROPERTY_PARTS_SEPARATOR);
-        let securityContexts = undefined;
-        // Check for special cases (prefix style, attr, class)
-        if (parts.length > 1) {
-            if (parts[0] == ATTRIBUTE_PREFIX) {
-                boundPropertyName = parts.slice(1).join(PROPERTY_PARTS_SEPARATOR);
-                if (!skipValidation) {
-                    this._validatePropertyOrAttributeName(boundPropertyName, boundProp.sourceSpan, true);
-                }
-                securityContexts = calcPossibleSecurityContexts(this._schemaRegistry, elementSelector, boundPropertyName, true);
-                const nsSeparatorIdx = boundPropertyName.indexOf(':');
-                if (nsSeparatorIdx > -1) {
-                    const ns = boundPropertyName.substring(0, nsSeparatorIdx);
-                    const name = boundPropertyName.substring(nsSeparatorIdx + 1);
-                    boundPropertyName = mergeNsAndName(ns, name);
-                }
-                bindingType = BindingType.Attribute;
-            }
-            else if (parts[0] == CLASS_PREFIX) {
-                boundPropertyName = parts[1];
-                bindingType = BindingType.Class;
-                securityContexts = [SecurityContext.NONE];
-            }
-            else if (parts[0] == STYLE_PREFIX) {
-                unit = parts.length > 2 ? parts[2] : null;
-                boundPropertyName = parts[1];
-                bindingType = BindingType.Style;
-                securityContexts = [SecurityContext.STYLE];
+        if (templateKind === TemplateKind.NgTemplate) {
+            if (output.type === ParsedEventType.TwoWay) {
+                unit.create.push(createTwoWayListenerOp(op.xref, op.handle, output.name, op.tag, makeTwoWayListenerHandlerOps(unit, output.handler, output.handlerSpan), output.sourceSpan));
             }
-            else if (parts[0] == ANIMATE_PREFIX) {
-                boundPropertyName = boundProp.name;
-                bindingType = BindingType.Animation;
-                securityContexts = [SecurityContext.NONE];
+            else {
+                unit.create.push(createListenerOp(op.xref, op.handle, output.name, op.tag, makeListenerHandlerOps(unit, output.handler, output.handlerSpan), output.phase, output.target, false, output.sourceSpan));
             }
         }
-        // If not a special case, use the full property name
-        if (boundPropertyName === null) {
-            const mappedPropName = this._schemaRegistry.getMappedPropName(boundProp.name);
-            boundPropertyName = mapPropertyName ? mappedPropName : boundProp.name;
-            securityContexts = calcPossibleSecurityContexts(this._schemaRegistry, elementSelector, mappedPropName, false);
-            bindingType =
-                boundProp.type === ParsedPropertyType.TWO_WAY ? BindingType.TwoWay : BindingType.Property;
-            if (!skipValidation) {
-                this._validatePropertyOrAttributeName(mappedPropName, boundProp.sourceSpan, false);
-            }
+        if (templateKind === TemplateKind.Structural &&
+            output.type !== ParsedEventType.LegacyAnimation) {
+            // Animation bindings are excluded from the structural template's const array.
+            const securityContext = domSchema.securityContext(NG_TEMPLATE_TAG_NAME, output.name, false);
+            unit.create.push(createExtractedAttributeOp(op.xref, BindingKind.Property, null, output.name, null, null, null, securityContext));
         }
-        return new BoundElementProperty(boundPropertyName, bindingType, securityContexts[0], boundProp.expression, unit, boundProp.sourceSpan, boundProp.keySpan, boundProp.valueSpan);
     }
-    parseEvent(name, expression, isAssignmentEvent, sourceSpan, handlerSpan, targetMatchableAttrs, targetEvents, keySpan) {
-        if (name.length === 0) {
-            this._reportError(`Event name is missing in binding`, sourceSpan);
-        }
-        if (isLegacyAnimationLabel(name)) {
-            name = name.slice(1);
-            if (keySpan !== undefined) {
-                keySpan = moveParseSourceSpan(keySpan, new AbsoluteSourceSpan(keySpan.start.offset + 1, keySpan.end.offset));
+    // TODO: Perhaps we could do this in a phase? (It likely wouldn't change the slot indices.)
+    if (bindings.some((b) => b?.i18nMessage) !== null) {
+        unit.create.push(createI18nAttributesOp(unit.job.allocateXrefId(), new SlotHandle(), op.xref));
+    }
+}
+/**
+ * Helper to ingest an individual binding on a template, either an explicit `ng-template`, or an
+ * implicit template created via structural directive.
+ *
+ * Bindings on templates are *extremely* tricky. I have tried to isolate all of the confusing edge
+ * cases into this function, and to comment it well to document the behavior.
+ *
+ * Some of this behavior is intuitively incorrect, and we should consider changing it in the future.
+ *
+ * @param view The compilation unit for the view containing the template.
+ * @param xref The xref of the template op.
+ * @param type The binding type, according to the parser. This is fairly reasonable, e.g. both
+ *     dynamic and static attributes have e.BindingType.Attribute.
+ * @param name The binding's name.
+ * @param value The bindings's value, which will either be an input AST expression, or a string
+ *     literal. Note that the input AST expression may or may not be const -- it will only be a
+ *     string literal if the parser considered it a text binding.
+ * @param unit If the binding has a unit (e.g. `px` for style bindings), then this is the unit.
+ * @param securityContext The security context of the binding.
+ * @param isStructuralTemplateAttribute Whether this binding actually applies to the structural
+ *     ng-template. For example, an `ngFor` would actually apply to the structural template. (Most
+ *     bindings on structural elements target the inner element, not the template.)
+ * @param templateKind Whether this is an explicit `ng-template` or an implicit template created by
+ *     a structural directive. This should never be a block template.
+ * @param i18nMessage The i18n metadata for the binding, if any.
+ * @param sourceSpan The source span of the binding.
+ * @returns An IR binding op, or null if the binding should be skipped.
+ */
+function createTemplateBinding(view, xref, type, name, value, unit, securityContext, isStructuralTemplateAttribute, templateKind, i18nMessage, sourceSpan) {
+    const isTextBinding = typeof value === 'string';
+    // If this is a structural template, then several kinds of bindings should not result in an
+    // update instruction.
+    if (templateKind === TemplateKind.Structural) {
+        if (!isStructuralTemplateAttribute) {
+            switch (type) {
+                case BindingType.Property:
+                case BindingType.Class:
+                case BindingType.Style:
+                    // Because this binding doesn't really target the ng-template, it must be a binding on an
+                    // inner node of a structural template. We can't skip it entirely, because we still need
+                    // it on the ng-template's consts (e.g. for the purposes of directive matching). However,
+                    // we should not generate an update instruction for it.
+                    return createExtractedAttributeOp(xref, BindingKind.Property, null, name, null, null, i18nMessage, securityContext);
+                case BindingType.TwoWay:
+                    return createExtractedAttributeOp(xref, BindingKind.TwoWayProperty, null, name, null, null, i18nMessage, securityContext);
             }
-            this._parseLegacyAnimationEvent(name, expression, sourceSpan, handlerSpan, targetEvents, keySpan);
         }
-        else {
-            this._parseRegularEvent(name, expression, isAssignmentEvent, sourceSpan, handlerSpan, targetMatchableAttrs, targetEvents, keySpan);
+        if (!isTextBinding &&
+            (type === BindingType.Attribute ||
+                type === BindingType.LegacyAnimation ||
+                type === BindingType.Animation)) {
+            // Again, this binding doesn't really target the ng-template; it actually targets the element
+            // inside the structural template. In the case of non-text attribute or animation bindings,
+            // the binding doesn't even show up on the ng-template const array, so we just skip it
+            // entirely.
+            return null;
         }
     }
-    calcPossibleSecurityContexts(selector, propName, isAttribute) {
-        const prop = this._schemaRegistry.getMappedPropName(propName);
-        return calcPossibleSecurityContexts(this._schemaRegistry, selector, prop, isAttribute);
-    }
-    parseEventListenerName(rawName) {
-        const [target, eventName] = splitAtColon(rawName, [null, rawName]);
-        return { eventName: eventName, target };
+    let bindingType = BINDING_KINDS.get(type);
+    if (templateKind === TemplateKind.NgTemplate) {
+        // We know we are dealing with bindings directly on an explicit ng-template.
+        // Static attribute bindings should be collected into the const array as k/v pairs. Property
+        // bindings should result in a `property` instruction, and `AttributeMarker.Bindings` const
+        // entries.
+        //
+        // The difficulty is with dynamic attribute, style, and class bindings. These don't really make
+        // sense on an `ng-template` and should probably be parser errors. However,
+        // TemplateDefinitionBuilder generates `property` instructions for them, and so we do that as
+        // well.
+        //
+        // Note that we do have a slight behavior difference with TemplateDefinitionBuilder: although
+        // TDB emits `property` instructions for dynamic attributes, styles, and classes, only styles
+        // and classes also get const collected into the `AttributeMarker.Bindings` field. Dynamic
+        // attribute bindings are missing from the consts entirely. We choose to emit them into the
+        // consts field anyway, to avoid creating special cases for something so arcane and nonsensical.
+        if (type === BindingType.Class ||
+            type === BindingType.Style ||
+            (type === BindingType.Attribute && !isTextBinding)) {
+            // TODO: These cases should be parse errors.
+            bindingType = BindingKind.Property;
+        }
     }
-    parseLegacyAnimationEventName(rawName) {
-        const matches = splitAtPeriod(rawName, [rawName, null]);
-        return { eventName: matches[0], phase: matches[1] === null ? null : matches[1].toLowerCase() };
+    return createBindingOp(xref, bindingType, name, convertAstWithInterpolation(view.job, value, i18nMessage), unit, securityContext, isTextBinding, isStructuralTemplateAttribute, templateKind, i18nMessage, sourceSpan);
+}
+function makeListenerHandlerOps(unit, handler, handlerSpan) {
+    handler = astOf(handler);
+    const handlerOps = new Array();
+    let handlerExprs = handler instanceof Chain ? handler.expressions : [handler];
+    if (handlerExprs.length === 0) {
+        throw new Error('Expected listener to have non-empty expression list.');
     }
-    _parseLegacyAnimationEvent(name, expression, sourceSpan, handlerSpan, targetEvents, keySpan) {
-        const { eventName, phase } = this.parseLegacyAnimationEventName(name);
-        const ast = this._parseAction(expression, handlerSpan);
-        targetEvents.push(new ParsedEvent(eventName, phase, ParsedEventType.LegacyAnimation, ast, sourceSpan, handlerSpan, keySpan));
-        if (eventName.length === 0) {
-            this._reportError(`Animation event name is missing in binding`, sourceSpan);
-        }
-        if (phase) {
-            if (phase !== 'start' && phase !== 'done') {
-                this._reportError(`The provided animation output phase value "${phase}" for "@${eventName}" is not supported (use start or done)`, sourceSpan);
-            }
+    const expressions = handlerExprs.map((expr) => convertAst(expr, unit.job, handlerSpan));
+    const returnExpr = expressions.pop();
+    handlerOps.push(...expressions.map((e) => createStatementOp(new ExpressionStatement(e, e.sourceSpan))));
+    handlerOps.push(createStatementOp(new ReturnStatement(returnExpr, returnExpr.sourceSpan)));
+    return handlerOps;
+}
+function makeTwoWayListenerHandlerOps(unit, handler, handlerSpan) {
+    handler = astOf(handler);
+    const handlerOps = new Array();
+    if (handler instanceof Chain) {
+        if (handler.expressions.length === 1) {
+            handler = handler.expressions[0];
         }
         else {
-            this._reportError(`The animation trigger output event (@${eventName}) is missing its phase value name (start or done are currently supported)`, sourceSpan);
+            // This is validated during parsing already, but we do it here just in case.
+            throw new Error('Expected two-way listener to have a single expression.');
         }
     }
-    _parseRegularEvent(name, expression, isAssignmentEvent, sourceSpan, handlerSpan, targetMatchableAttrs, targetEvents, keySpan) {
-        // long format: 'target: eventName'
-        const { eventName, target } = this.parseEventListenerName(name);
-        const prevErrorCount = this.errors.length;
-        const ast = this._parseAction(expression, handlerSpan);
-        const isValid = this.errors.length === prevErrorCount;
-        targetMatchableAttrs.push([name, ast.source]);
-        // Don't try to validate assignment events if there were other
-        // parsing errors to avoid adding more noise to the error logs.
-        if (isAssignmentEvent && isValid && !this._isAllowedAssignmentEvent(ast)) {
-            this._reportError('Unsupported expression in a two-way binding', sourceSpan);
-        }
-        let eventType = ParsedEventType.Regular;
-        if (isAssignmentEvent) {
-            eventType = ParsedEventType.TwoWay;
-        }
-        if (name.startsWith(`${ANIMATE_PREFIX}${PROPERTY_PARTS_SEPARATOR}`)) {
-            eventType = ParsedEventType.Animation;
-        }
-        targetEvents.push(new ParsedEvent(eventName, target, eventType, ast, sourceSpan, handlerSpan, keySpan));
-        // Don't detect directives for event names for now,
-        // so don't add the event name to the matchableAttrs
+    const handlerExpr = convertAst(handler, unit.job, handlerSpan);
+    const eventReference = new LexicalReadExpr('$event');
+    const twoWaySetExpr = new TwoWayBindingSetExpr(handlerExpr, eventReference);
+    handlerOps.push(createStatementOp(new ExpressionStatement(twoWaySetExpr)));
+    handlerOps.push(createStatementOp(new ReturnStatement(eventReference)));
+    return handlerOps;
+}
+function astOf(ast) {
+    return ast instanceof ASTWithSource ? ast.ast : ast;
+}
+/**
+ * Process all of the local references on an element-like structure in the template AST and
+ * convert them to their IR representation.
+ */
+function ingestReferences(op, element) {
+    assertIsArray(op.localRefs);
+    for (const { name, value } of element.references) {
+        op.localRefs.push({
+            name,
+            target: value,
+        });
     }
-    _parseAction(value, sourceSpan) {
-        const absoluteOffset = sourceSpan && sourceSpan.start ? sourceSpan.start.offset : 0;
-        try {
-            const ast = this._exprParser.parseAction(value, sourceSpan, absoluteOffset, this._interpolationConfig);
-            if (ast) {
-                this.errors.push(...ast.errors);
-            }
-            if (!ast || ast.ast instanceof EmptyExpr$1) {
-                this._reportError(`Empty expressions are not allowed`, sourceSpan);
-                return this._exprParser.wrapLiteralPrimitive('ERROR', sourceSpan, absoluteOffset);
-            }
-            return ast;
-        }
-        catch (e) {
-            this._reportError(`${e}`, sourceSpan);
-            return this._exprParser.wrapLiteralPrimitive('ERROR', sourceSpan, absoluteOffset);
-        }
+}
+/**
+ * Assert that the given value is an array.
+ */
+function assertIsArray(value) {
+    if (!Array.isArray(value)) {
+        throw new Error(`AssertionError: expected an array`);
     }
-    _reportError(message, sourceSpan, level = ParseErrorLevel.ERROR) {
-        this.errors.push(new ParseError(sourceSpan, message, level));
+}
+/**
+ * Creates an absolute `ParseSourceSpan` from the relative `ParseSpan`.
+ *
+ * `ParseSpan` objects are relative to the start of the expression.
+ * This method converts these to full `ParseSourceSpan` objects that
+ * show where the span is within the overall source file.
+ *
+ * @param span the relative span to convert.
+ * @param baseSourceSpan a span corresponding to the base of the expression tree.
+ * @returns a `ParseSourceSpan` for the given span or null if no `baseSourceSpan` was provided.
+ */
+function convertSourceSpan(span, baseSourceSpan) {
+    if (baseSourceSpan === null) {
+        return null;
     }
-    /**
-     * @param propName the name of the property / attribute
-     * @param sourceSpan
-     * @param isAttr true when binding to an attribute
-     */
-    _validatePropertyOrAttributeName(propName, sourceSpan, isAttr) {
-        const report = isAttr
-            ? this._schemaRegistry.validateAttribute(propName)
-            : this._schemaRegistry.validateProperty(propName);
-        if (report.error) {
-            this._reportError(report.msg, sourceSpan, ParseErrorLevel.ERROR);
+    const start = baseSourceSpan.start.moveBy(span.start);
+    const end = baseSourceSpan.start.moveBy(span.end);
+    const fullStart = baseSourceSpan.fullStart.moveBy(span.start);
+    return new ParseSourceSpan(start, end, fullStart);
+}
+/**
+ * With the directive-based control flow users were able to conditionally project content using
+ * the `*` syntax. E.g. `<div *ngIf="expr" projectMe></div>` will be projected into
+ * `<ng-content select="[projectMe]"/>`, because the attributes and tag name from the `div` are
+ * copied to the template via the template creation instruction. With `@if` and `@for` that is
+ * not the case, because the conditional is placed *around* elements, rather than *on* them.
+ * The result is that content projection won't work in the same way if a user converts from
+ * `*ngIf` to `@if`.
+ *
+ * This function aims to cover the most common case by doing the same copying when a control flow
+ * node has *one and only one* root element or template node.
+ *
+ * This approach comes with some caveats:
+ * 1. As soon as any other node is added to the root, the copying behavior won't work anymore.
+ *    A diagnostic will be added to flag cases like this and to explain how to work around it.
+ * 2. If `preserveWhitespaces` is enabled, it's very likely that indentation will break this
+ *    workaround, because it'll include an additional text node as the first child. We can work
+ *    around it here, but in a discussion it was decided not to, because the user explicitly opted
+ *    into preserving the whitespace and we would have to drop it from the generated code.
+ *    The diagnostic mentioned point in #1 will flag such cases to users.
+ *
+ * @returns Tag name to be used for the control flow template.
+ */
+function ingestControlFlowInsertionPoint(unit, xref, node) {
+    let root = null;
+    for (const child of node.children) {
+        // Skip over comment nodes and @let declarations since
+        // it doesn't matter where they end up in the DOM.
+        if (child instanceof Comment$1 || child instanceof LetDeclaration$1) {
+            continue;
         }
-    }
-    /**
-     * Returns whether a parsed AST is allowed to be used within the event side of a two-way binding.
-     * @param ast Parsed AST to be checked.
-     */
-    _isAllowedAssignmentEvent(ast) {
-        if (ast instanceof ASTWithSource) {
-            return this._isAllowedAssignmentEvent(ast.ast);
+        // We can only infer the tag name/attributes if there's a single root node.
+        if (root !== null) {
+            return null;
         }
-        if (ast instanceof NonNullAssert) {
-            return this._isAllowedAssignmentEvent(ast.expression);
+        // Root nodes can only elements or templates with a tag name (e.g. `<div *foo></div>`).
+        if (child instanceof Element$1 || (child instanceof Template && child.tagName !== null)) {
+            root = child;
         }
-        if (ast instanceof Call &&
-            ast.args.length === 1 &&
-            ast.receiver instanceof PropertyRead &&
-            ast.receiver.name === '$any' &&
-            ast.receiver.receiver instanceof ImplicitReceiver &&
-            !(ast.receiver.receiver instanceof ThisReceiver)) {
-            return this._isAllowedAssignmentEvent(ast.args[0]);
+        else {
+            return null;
+        }
+    }
+    // If we've found a single root node, its tag name and attributes can be
+    // copied to the surrounding template to be used for content projection.
+    if (root !== null) {
+        // Collect the static attributes for content projection purposes.
+        for (const attr of root.attributes) {
+            if (!attr.name.startsWith(ANIMATE_PREFIX)) {
+                const securityContext = domSchema.securityContext(NG_TEMPLATE_TAG_NAME, attr.name, true);
+                unit.update.push(createBindingOp(xref, BindingKind.Attribute, attr.name, literal(attr.value), null, securityContext, true, false, null, asMessage(attr.i18n), attr.sourceSpan));
+            }
         }
-        if (ast instanceof PropertyRead || ast instanceof KeyedRead) {
-            if (!hasRecursiveSafeReceiver(ast)) {
-                return true;
+        // Also collect the inputs since they participate in content projection as well.
+        // Note that TDB used to collect the outputs as well, but it wasn't passing them into
+        // the template instruction. Here we just don't collect them.
+        for (const attr of root.inputs) {
+            if (attr.type !== BindingType.LegacyAnimation &&
+                attr.type !== BindingType.Animation &&
+                attr.type !== BindingType.Attribute) {
+                const securityContext = domSchema.securityContext(NG_TEMPLATE_TAG_NAME, attr.name, true);
+                unit.create.push(createExtractedAttributeOp(xref, BindingKind.Property, null, attr.name, null, null, null, securityContext));
             }
         }
-        return false;
+        const tagName = root instanceof Element$1 ? root.name : root.tagName;
+        // Don't pass along `ng-template` tag name since it enables directive matching.
+        return tagName === NG_TEMPLATE_TAG_NAME ? null : tagName;
     }
+    return null;
 }
-function hasRecursiveSafeReceiver(ast) {
-    if (ast instanceof SafePropertyRead || ast instanceof SafeKeyedRead) {
-        return true;
-    }
-    if (ast instanceof ParenthesizedExpression) {
-        return hasRecursiveSafeReceiver(ast.expression);
-    }
-    if (ast instanceof PropertyRead || ast instanceof KeyedRead || ast instanceof Call) {
-        return hasRecursiveSafeReceiver(ast.receiver);
-    }
-    return false;
+
+/*!
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+/**
+ * Whether to produce instructions that will attach the source location to each DOM node.
+ *
+ * !!!Important!!! at the time of writing this flag isn't exposed externally, but internal debug
+ * tools enable it via a local change. Any modifications to this flag need to update the
+ * internal tooling as well.
+ */
+let ENABLE_TEMPLATE_SOURCE_LOCATIONS = false;
+/** Gets whether template source locations are enabled. */
+function getTemplateSourceLocationsEnabled() {
+    return ENABLE_TEMPLATE_SOURCE_LOCATIONS;
 }
-function isLegacyAnimationLabel(name) {
-    return name[0] == '@';
+
+//  if (rf & flags) { .. }
+function renderFlagCheckIfStmt(flags, statements) {
+    return ifStmt(variable(RENDER_FLAGS).bitwiseAnd(literal(flags), null), statements);
 }
-function calcPossibleSecurityContexts(registry, selector, propName, isAttribute) {
-    let ctxs;
-    const nameToContext = (elName) => registry.securityContext(elName, propName, isAttribute);
-    if (selector === null) {
-        ctxs = registry.allKnownElementNames().map(nameToContext);
+/**
+ * Translates query flags into `TQueryFlags` type in
+ * packages/core/src/render3/interfaces/query.ts
+ * @param query
+ */
+function toQueryFlags(query) {
+    return ((query.descendants ? 1 /* QueryFlags.descendants */ : 0 /* QueryFlags.none */) |
+        (query.static ? 2 /* QueryFlags.isStatic */ : 0 /* QueryFlags.none */) |
+        (query.emitDistinctChangesOnly ? 4 /* QueryFlags.emitDistinctChangesOnly */ : 0 /* QueryFlags.none */));
+}
+function getQueryPredicate(query, constantPool) {
+    if (Array.isArray(query.predicate)) {
+        let predicate = [];
+        query.predicate.forEach((selector) => {
+            // Each item in predicates array may contain strings with comma-separated refs
+            // (for ex. 'ref, ref1, ..., refN'), thus we extract individual refs and store them
+            // as separate array entities
+            const selectors = selector.split(',').map((token) => literal(token.trim()));
+            predicate.push(...selectors);
+        });
+        return constantPool.getConstLiteral(literalArr(predicate), true);
     }
     else {
-        ctxs = [];
-        CssSelector.parse(selector).forEach((selector) => {
-            const elementNames = selector.element ? [selector.element] : registry.allKnownElementNames();
-            const notElementNames = new Set(selector.notSelectors
-                .filter((selector) => selector.isElementSelector())
-                .map((selector) => selector.element));
-            const possibleElementNames = elementNames.filter((elName) => !notElementNames.has(elName));
-            ctxs.push(...possibleElementNames.map(nameToContext));
-        });
+        // The original predicate may have been wrapped in a `forwardRef()` call.
+        switch (query.predicate.forwardRef) {
+            case 0 /* ForwardRefHandling.None */:
+            case 2 /* ForwardRefHandling.Unwrapped */:
+                return query.predicate.expression;
+            case 1 /* ForwardRefHandling.Wrapped */:
+                return importExpr(Identifiers.resolveForwardRef).callFn([query.predicate.expression]);
+        }
     }
-    return ctxs.length === 0 ? [SecurityContext.NONE] : Array.from(new Set(ctxs)).sort();
 }
+function createQueryCreateCall(query, constantPool, queryTypeFns, prependParams) {
+    const parameters = [];
+    if (prependParams !== undefined) {
+        parameters.push(...prependParams);
+    }
+    if (query.isSignal) {
+        parameters.push(new ReadPropExpr(variable(CONTEXT_NAME), query.propertyName));
+    }
+    parameters.push(getQueryPredicate(query, constantPool), literal(toQueryFlags(query)));
+    if (query.read) {
+        parameters.push(query.read);
+    }
+    const queryCreateFn = query.isSignal ? queryTypeFns.signalBased : queryTypeFns.nonSignal;
+    return importExpr(queryCreateFn).callFn(parameters);
+}
+const queryAdvancePlaceholder = Symbol('queryAdvancePlaceholder');
 /**
- * Compute a new ParseSourceSpan based off an original `sourceSpan` by using
- * absolute offsets from the specified `absoluteSpan`.
+ * Collapses query advance placeholders in a list of statements.
  *
- * @param sourceSpan original source span
- * @param absoluteSpan absolute source span to move to
+ * This allows for less generated code because multiple sibling query advance
+ * statements can be collapsed into a single call with the count as argument.
+ *
+ * e.g.
+ *
+ * ```ts
+ *   bla();
+ *   queryAdvance();
+ *   queryAdvance();
+ *   bla();
+ * ```
+ *
+ *   --> will turn into
+ *
+ * ```ts
+ *   bla();
+ *   queryAdvance(2);
+ *   bla();
+ * ```
  */
-function moveParseSourceSpan(sourceSpan, absoluteSpan) {
-    // The difference of two absolute offsets provide the relative offset
-    const startDiff = absoluteSpan.start - sourceSpan.start.offset;
-    const endDiff = absoluteSpan.end - sourceSpan.end.offset;
-    return new ParseSourceSpan(sourceSpan.start.moveBy(startDiff), sourceSpan.end.moveBy(endDiff), sourceSpan.fullStart.moveBy(startDiff), sourceSpan.details);
+function collapseAdvanceStatements(statements) {
+    const result = [];
+    let advanceCollapseCount = 0;
+    const flushAdvanceCount = () => {
+        if (advanceCollapseCount > 0) {
+            result.unshift(importExpr(Identifiers.queryAdvance)
+                .callFn(advanceCollapseCount === 1 ? [] : [literal(advanceCollapseCount)])
+                .toStmt());
+            advanceCollapseCount = 0;
+        }
+    };
+    // Iterate through statements in reverse and collapse advance placeholders.
+    for (let i = statements.length - 1; i >= 0; i--) {
+        const st = statements[i];
+        if (st === queryAdvancePlaceholder) {
+            advanceCollapseCount++;
+        }
+        else {
+            flushAdvanceCount();
+            result.unshift(st);
+        }
+    }
+    flushAdvanceCount();
+    return result;
+}
+// Define and update any view queries
+function createViewQueriesFunction(viewQueries, constantPool, name) {
+    const createStatements = [];
+    const updateStatements = [];
+    const tempAllocator = temporaryAllocator((st) => updateStatements.push(st), TEMPORARY_NAME);
+    viewQueries.forEach((query) => {
+        // creation call, e.g. r3.viewQuery(somePredicate, true) or
+        //                r3.viewQuerySignal(ctx.prop, somePredicate, true);
+        const queryDefinitionCall = createQueryCreateCall(query, constantPool, {
+            signalBased: Identifiers.viewQuerySignal,
+            nonSignal: Identifiers.viewQuery,
+        });
+        createStatements.push(queryDefinitionCall.toStmt());
+        // Signal queries update lazily and we just advance the index.
+        if (query.isSignal) {
+            updateStatements.push(queryAdvancePlaceholder);
+            return;
+        }
+        // update, e.g. (r3.queryRefresh(tmp = r3.loadQuery()) && (ctx.someDir = tmp));
+        const temporary = tempAllocator();
+        const getQueryList = importExpr(Identifiers.loadQuery).callFn([]);
+        const refresh = importExpr(Identifiers.queryRefresh).callFn([temporary.set(getQueryList)]);
+        const updateDirective = variable(CONTEXT_NAME)
+            .prop(query.propertyName)
+            .set(query.first ? temporary.prop('first') : temporary);
+        updateStatements.push(refresh.and(updateDirective).toStmt());
+    });
+    const viewQueryFnName = name ? `${name}_Query` : null;
+    return fn([new FnParam(RENDER_FLAGS, NUMBER_TYPE), new FnParam(CONTEXT_NAME, null)], [
+        renderFlagCheckIfStmt(1 /* core.RenderFlags.Create */, createStatements),
+        renderFlagCheckIfStmt(2 /* core.RenderFlags.Update */, collapseAdvanceStatements(updateStatements)),
+    ], INFERRED_TYPE, null, viewQueryFnName);
+}
+// Define and update any content queries
+function createContentQueriesFunction(queries, constantPool, name) {
+    const createStatements = [];
+    const updateStatements = [];
+    const tempAllocator = temporaryAllocator((st) => updateStatements.push(st), TEMPORARY_NAME);
+    for (const query of queries) {
+        // creation, e.g. r3.contentQuery(dirIndex, somePredicate, true, null) or
+        //                r3.contentQuerySignal(dirIndex, propName, somePredicate, <flags>, <read>).
+        createStatements.push(createQueryCreateCall(query, constantPool, { nonSignal: Identifiers.contentQuery, signalBased: Identifiers.contentQuerySignal }, 
+        /* prependParams */ [variable('dirIndex')]).toStmt());
+        // Signal queries update lazily and we just advance the index.
+        if (query.isSignal) {
+            updateStatements.push(queryAdvancePlaceholder);
+            continue;
+        }
+        // update, e.g. (r3.queryRefresh(tmp = r3.loadQuery()) && (ctx.someDir = tmp));
+        const temporary = tempAllocator();
+        const getQueryList = importExpr(Identifiers.loadQuery).callFn([]);
+        const refresh = importExpr(Identifiers.queryRefresh).callFn([temporary.set(getQueryList)]);
+        const updateDirective = variable(CONTEXT_NAME)
+            .prop(query.propertyName)
+            .set(query.first ? temporary.prop('first') : temporary);
+        updateStatements.push(refresh.and(updateDirective).toStmt());
+    }
+    const contentQueriesFnName = name ? `${name}_ContentQueries` : null;
+    return fn([
+        new FnParam(RENDER_FLAGS, NUMBER_TYPE),
+        new FnParam(CONTEXT_NAME, null),
+        new FnParam('dirIndex', null),
+    ], [
+        renderFlagCheckIfStmt(1 /* core.RenderFlags.Create */, createStatements),
+        renderFlagCheckIfStmt(2 /* core.RenderFlags.Update */, collapseAdvanceStatements(updateStatements)),
+    ], INFERRED_TYPE, null, contentQueriesFnName);
+}
+
+class HtmlParser extends Parser$1 {
+    constructor() {
+        super(getHtmlTagDefinition);
+    }
+    parse(source, url, options) {
+        return super.parse(source, url, options);
+    }
 }
 
 // Some of the code comes from WebComponents.JS
@@ -27494,7 +27616,7 @@ const LINK_STYLE_REL_ATTR = 'rel';
 const LINK_STYLE_HREF_ATTR = 'href';
 const LINK_STYLE_REL_VALUE = 'stylesheet';
 const STYLE_ELEMENT = 'style';
-const SCRIPT_ELEMENT = 'script';
+const SCRIPT_ELEMENTS = new Set([':svg:script', 'script']);
 const NG_NON_BINDABLE_ATTR = 'ngNonBindable';
 const NG_PROJECT_AS = 'ngProjectAs';
 function preparseElement(ast) {
@@ -27503,7 +27625,7 @@ function preparseElement(ast) {
     let relAttr = null;
     let nonBindable = false;
     let projectAs = '';
-    ast.attrs.forEach((attr) => {
+    for (const attr of ast.attrs) {
         const lcAttrName = attr.name.toLowerCase();
         if (lcAttrName == NG_CONTENT_SELECT_ATTR) {
             selectAttr = attr.value;
@@ -27522,17 +27644,18 @@ function preparseElement(ast) {
                 projectAs = attr.value;
             }
         }
-    });
-    selectAttr = normalizeNgContentSelect(selectAttr);
+    }
+    // Normalize selector to '*' if empty
+    selectAttr ||= '*';
     const nodeName = ast.name.toLowerCase();
     let type = PreparsedElementType.OTHER;
     if (isNgContent(nodeName)) {
         type = PreparsedElementType.NG_CONTENT;
     }
-    else if (nodeName == STYLE_ELEMENT) {
+    else if (STYLE_ELEMENT === nodeName) {
         type = PreparsedElementType.STYLE;
     }
-    else if (nodeName == SCRIPT_ELEMENT) {
+    else if (SCRIPT_ELEMENTS.has(nodeName)) {
         type = PreparsedElementType.SCRIPT;
     }
     else if (nodeName == LINK_ELEMENT && relAttr == LINK_STYLE_REL_VALUE) {
@@ -27562,12 +27685,6 @@ class PreparsedElement {
         this.projectAs = projectAs;
     }
 }
-function normalizeNgContentSelect(selectAttr) {
-    if (selectAttr === null || selectAttr.length === 0) {
-        return '*';
-    }
-    return selectAttr;
-}
 
 /** Pattern for the expression in a for loop block. */
 const FOR_LOOP_EXPRESSION_PATTERN = /^\s*([0-9A-Za-z_$]*)\s+of\s+([\S\s]*)/;
@@ -28855,8 +28972,9 @@ class HtmlAstToIvyAst {
                 // Note that validation is skipped and property mapping is disabled
                 // due to the fact that we need to make sure a given prop is not an
                 // input of a directive and directive matching happens at runtime.
+                const isAttrOn = prop.name.toLowerCase().startsWith('attr.on');
                 const bep = this.bindingParser.createBoundElementProperty(elementName, prop, 
-                /* skipValidation */ true, 
+                /* skipValidation */ !isAttrOn, 
                 /* mapPropertyName */ false);
                 bound.push(BoundAttribute.fromBoundElementProperty(bep, i18n));
             }
@@ -29752,8 +29870,30 @@ function verifyHostBindings(bindings, sourceSpan) {
     const bindingParser = makeBindingParser();
     bindingParser.createDirectiveHostEventAsts(bindings.listeners, sourceSpan);
     bindingParser.createBoundHostProperties(bindings.properties, sourceSpan);
+    validateNoEventBindings(bindings, bindingParser, sourceSpan);
     return bindingParser.errors;
 }
+/**
+ * Validates that there are no event attribute bindings in the host bindings.
+ * @param bindings - Map of host bindings for the component.
+ * @param bindingParser - Binding parser used to create the binding expression.
+ * @param sourceSpan - Source span where the host bindings were defined.
+ */
+function validateNoEventBindings(bindings, bindingParser, sourceSpan) {
+    for (const prop in bindings.properties) {
+        const isAttr = prop.startsWith('attr.');
+        const boundName = isAttr ? prop.slice(5) : prop;
+        if (boundName.toLowerCase().startsWith('on')) {
+            const errorType = isAttr ? 'attribute' : 'property';
+            const suggestion = `(${boundName.slice(2)})=...`;
+            let msg = `Binding to event ${errorType} '${boundName}' is disallowed for security reasons, please use ${suggestion}`;
+            if (!isAttr) {
+                msg += `\nIf '${prop}' is a directive input, make sure the directive is imported by the current module.`;
+            }
+            bindingParser.errors.push(new ParseError(sourceSpan, msg));
+        }
+    }
+}
 function compileStyles(styles, selector, hostSelector) {
     const shadowCss = new ShadowCss();
     return styles.map((style) => {
@@ -31357,11 +31497,6 @@ function createR3ComponentDeferMetadata(boundTarget, deferBlockDependencies) {
 function extractHostBindings(propMetadata, sourceSpan, host) {
     // First parse the declarations from the metadata.
     const bindings = parseHostBindings(host || {});
-    // After that check host bindings for errors
-    const errors = verifyHostBindings(bindings, sourceSpan);
-    if (errors.length) {
-        throw new Error(errors.map((error) => error.msg).join('\n'));
-    }
     // Next, loop over the properties of the object, looking for @HostBinding and @HostListener.
     for (const field in propMetadata) {
         if (propMetadata.hasOwnProperty(field)) {
@@ -31378,6 +31513,11 @@ function extractHostBindings(propMetadata, sourceSpan, host) {
             });
         }
     }
+    // After that check host bindings for errors
+    const errors = verifyHostBindings(bindings, sourceSpan);
+    if (errors.length) {
+        throw new Error(errors.map((error) => error.msg).join('\n'));
+    }
     return bindings;
 }
 function isHostBinding(value) {
@@ -31512,7 +31652,7 @@ var _VisitorMode;
  * @description
  * Entry point for all public APIs of the compiler package.
  */
-new Version('20.3.19');
+new Version('20.3.28');
 
 //////////////////////////////////////
 // THIS FILE HAS GLOBAL SIDE EFFECT //