@angular/core 14.1.0-next.3 → 14.1.0-next.4

package/fesm2020/core.mjs

@@ -1,5 +1,5 @@
 /**
- * @license Angular v14.1.0-next.3
+ * @license Angular v14.1.0-next.4
  * (c) 2010-2022 Google LLC. https://angular.io/
  * License: MIT
  */
@@ -499,6 +499,7 @@ const NG_INJECTOR_DEF = getClosureSafeProperty({ ngInjectorDef: getClosureSafePr
  * Injection flags for DI.
  *
  * @publicApi
+ * @deprecated use an options object for `inject` instead.
  */
 var InjectFlags;
 (function (InjectFlags) {
@@ -1593,96 +1594,6 @@ function getNamespaceUri(namespace) {
         (name === MATH_ML_NAMESPACE ? MATH_ML_NAMESPACE_URI : 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.io/license
- */
-/**
- * Most of the use of `document` in Angular is from within the DI system so it is possible to simply
- * inject the `DOCUMENT` token and are done.
- *
- * Ivy is special because it does not rely upon the DI and must get hold of the document some other
- * way.
- *
- * The solution is to define `getDocument()` and `setDocument()` top-level functions for ivy.
- * Wherever ivy needs the global document, it calls `getDocument()` instead.
- *
- * When running ivy outside of a browser environment, it is necessary to call `setDocument()` to
- * tell ivy what the global `document` is.
- *
- * Angular does this for us in each of the standard platforms (`Browser`, `Server`, and `WebWorker`)
- * by calling `setDocument()` when providing the `DOCUMENT` token.
- */
-let DOCUMENT = undefined;
-/**
- * Tell ivy what the `document` is for this platform.
- *
- * It is only necessary to call this if the current platform is not a browser.
- *
- * @param document The object representing the global `document` in this environment.
- */
-function setDocument(document) {
-    DOCUMENT = document;
-}
-/**
- * Access the object that represents the `document` for this platform.
- *
- * Ivy calls this whenever it needs to access the `document` object.
- * For example to create the renderer or to do sanitization.
- */
-function getDocument() {
-    if (DOCUMENT !== undefined) {
-        return DOCUMENT;
-    }
-    else if (typeof document !== 'undefined') {
-        return document;
-    }
-    // No "document" can be found. This should only happen if we are running ivy outside Angular and
-    // the current platform is not a browser. Since this is not a supported scenario at the moment
-    // this should not happen in Angular apps.
-    // Once we support running ivy outside of Angular we will need to publish `setDocument()` as a
-    // public API. Meanwhile we just return `undefined` and let the application fail.
-    return undefined;
-}
-
-/**
- * @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.io/license
- */
-// TODO: cleanup once the code is merged in angular/angular
-var RendererStyleFlags3;
-(function (RendererStyleFlags3) {
-    RendererStyleFlags3[RendererStyleFlags3["Important"] = 1] = "Important";
-    RendererStyleFlags3[RendererStyleFlags3["DashCase"] = 2] = "DashCase";
-})(RendererStyleFlags3 || (RendererStyleFlags3 = {}));
-/** Returns whether the `renderer` is a `ProceduralRenderer3` */
-function isProceduralRenderer(renderer) {
-    return !!(renderer.listen);
-}
-let renderer3Enabled = false;
-function enableRenderer3() {
-    renderer3Enabled = true;
-}
-const domRendererFactory3 = {
-    createRenderer: (hostElement, rendererType) => {
-        if (!renderer3Enabled) {
-            throw new Error(ngDevMode ?
-                `Renderer3 is not supported. This problem is likely caused by some component in the hierarchy was constructed without a correct parent injector.` :
-                'Renderer3 disabled');
-        }
-        return getDocument();
-    }
-};
-// Note: This hack is necessary so we don't erroneously get a circular dependency
-// failure based on types.
-const unusedValueExportToPlacateAjd$6 = 1;
-
 /**
  * @license
  * Copyright Google LLC All Rights Reserved.
@@ -1765,7 +1676,6 @@ function getNativeByTNode(tNode, lView) {
     ngDevMode && assertTNodeForLView(tNode, lView);
     ngDevMode && assertIndexInRange(lView, tNode.index);
     const node = unwrapRNode(lView[tNode.index]);
-    ngDevMode && !isProceduralRenderer(lView[RENDERER]) && assertDomNode(node);
     return node;
 }
 /**
@@ -1781,7 +1691,6 @@ function getNativeByTNodeOrNull(tNode, lView) {
     if (index !== -1) {
         ngDevMode && assertTNodeForLView(tNode, lView);
         const node = unwrapRNode(lView[index]);
-        ngDevMode && node !== null && !isProceduralRenderer(lView[RENDERER]) && assertDomNode(node);
         return node;
     }
     return null;
@@ -2730,7 +2639,7 @@ function isFactory(obj) {
 }
 // Note: This hack is necessary so we don't erroneously get a circular dependency
 // failure based on types.
-const unusedValueExportToPlacateAjd$5 = 1;
+const unusedValueExportToPlacateAjd$6 = 1;
 
 /**
  * Converts `TNodeType` into human readable text.
@@ -2749,7 +2658,7 @@ function toTNodeTypeAsString(tNodeType) {
 }
 // Note: This hack is necessary so we don't erroneously get a circular dependency
 // failure based on types.
-const unusedValueExportToPlacateAjd$4 = 1;
+const unusedValueExportToPlacateAjd$5 = 1;
 /**
  * Returns `true` if the `TNode` has a directive which has `@Input()` for `class` binding.
  *
@@ -2853,7 +2762,6 @@ function assertPureTNodeType(type) {
  * @returns the index value that was last accessed in the attributes array
  */
 function setUpAttributes(renderer, native, attrs) {
-    const isProc = isProceduralRenderer(renderer);
     let i = 0;
     while (i < attrs.length) {
         const value = attrs[i];
@@ -2870,9 +2778,7 @@ function setUpAttributes(renderer, native, attrs) {
             const attrName = attrs[i++];
             const attrVal = attrs[i++];
             ngDevMode && ngDevMode.rendererSetAttribute++;
-            isProc ?
-                renderer.setAttribute(native, attrName, attrVal, namespaceURI) :
-                native.setAttributeNS(namespaceURI, attrName, attrVal);
+            renderer.setAttribute(native, attrName, attrVal, namespaceURI);
         }
         else {
             // attrName is string;
@@ -2881,14 +2787,10 @@ function setUpAttributes(renderer, native, attrs) {
             // Standard attributes
             ngDevMode && ngDevMode.rendererSetAttribute++;
             if (isAnimationProp(attrName)) {
-                if (isProc) {
-                    renderer.setProperty(native, attrName, attrVal);
-                }
+                renderer.setProperty(native, attrName, attrVal);
             }
             else {
-                isProc ?
-                    renderer.setAttribute(native, attrName, attrVal) :
-                    native.setAttribute(attrName, attrVal);
+                renderer.setAttribute(native, attrName, attrVal);
             }
             i++;
         }
@@ -4961,6 +4863,16 @@ Please check that 1) the type for the parameter at index ${index} is correct and
  * @publicApi
  */
 function inject(token, flags = InjectFlags.Default) {
+    if (typeof flags !== 'number') {
+        // While TypeScript doesn't accept it without a cast, bitwise OR with false-y values in
+        // JavaScript is a no-op. We can use that for a very codesize-efficient conversion from
+        // `InjectOptions` to `InjectFlags`.
+        flags = (0 /* InternalInjectFlags.Default */ | // comment to force a line break in the formatter
+            (flags.optional && 8 /* InternalInjectFlags.Optional */) |
+            (flags.host && 1 /* InternalInjectFlags.Host */) |
+            (flags.self && 2 /* InternalInjectFlags.Self */) |
+            (flags.skipSelf && 4 /* InternalInjectFlags.SkipSelf */));
+    }
     return ɵɵinject(token, flags);
 }
 function injectArgs(types) {
@@ -5344,6 +5256,61 @@ function setAllowDuplicateNgModuleIdsForTest(allowDuplicates) {
     checkForDuplicateNgModules = !allowDuplicates;
 }
 
+/**
+ * @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.io/license
+ */
+/**
+ * Most of the use of `document` in Angular is from within the DI system so it is possible to simply
+ * inject the `DOCUMENT` token and are done.
+ *
+ * Ivy is special because it does not rely upon the DI and must get hold of the document some other
+ * way.
+ *
+ * The solution is to define `getDocument()` and `setDocument()` top-level functions for ivy.
+ * Wherever ivy needs the global document, it calls `getDocument()` instead.
+ *
+ * When running ivy outside of a browser environment, it is necessary to call `setDocument()` to
+ * tell ivy what the global `document` is.
+ *
+ * Angular does this for us in each of the standard platforms (`Browser`, `Server`, and `WebWorker`)
+ * by calling `setDocument()` when providing the `DOCUMENT` token.
+ */
+let DOCUMENT = undefined;
+/**
+ * Tell ivy what the `document` is for this platform.
+ *
+ * It is only necessary to call this if the current platform is not a browser.
+ *
+ * @param document The object representing the global `document` in this environment.
+ */
+function setDocument(document) {
+    DOCUMENT = document;
+}
+/**
+ * Access the object that represents the `document` for this platform.
+ *
+ * Ivy calls this whenever it needs to access the `document` object.
+ * For example to create the renderer or to do sanitization.
+ */
+function getDocument() {
+    if (DOCUMENT !== undefined) {
+        return DOCUMENT;
+    }
+    else if (typeof document !== 'undefined') {
+        return document;
+    }
+    // No "document" can be found. This should only happen if we are running ivy outside Angular and
+    // the current platform is not a browser. Since this is not a supported scenario at the moment
+    // this should not happen in Angular apps.
+    // Once we support running ivy outside of Angular we will need to publish `setDocument()` as a
+    // public API. Meanwhile we just return `undefined` and let the application fail.
+    return undefined;
+}
+
 /**
  * @license
  * Copyright Google LLC All Rights Reserved.
@@ -7073,6 +7040,17 @@ function ensureIcuContainerVisitorLoaded(loader) {
     }
 }
 
+/**
+ * @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.io/license
+ */
+// Note: This hack is necessary so we don't erroneously get a circular dependency
+// failure based on types.
+const unusedValueExportToPlacateAjd$4 = 1;
+
 /**
  * @license
  * Copyright Google LLC All Rights Reserved.
@@ -7155,7 +7133,7 @@ function getNearestLContainer(viewOrContainer) {
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-const unusedValueToPlacateAjd$2 = unusedValueExportToPlacateAjd$7 + unusedValueExportToPlacateAjd$4 + unusedValueExportToPlacateAjd$3 + unusedValueExportToPlacateAjd$6 + unusedValueExportToPlacateAjd$8;
+const unusedValueToPlacateAjd$2 = unusedValueExportToPlacateAjd$7 + unusedValueExportToPlacateAjd$5 + unusedValueExportToPlacateAjd$4 + unusedValueExportToPlacateAjd$3 + unusedValueExportToPlacateAjd$8;
 /**
  * NOTE: for performance reasons, the possible actions are inlined within the function instead of
  * being passed as an argument.
@@ -7180,7 +7158,6 @@ function applyToElementOrContainer(action, renderer, parent, lNodeToHandle, befo
             lNodeToHandle = lNodeToHandle[HOST];
         }
         const rNode = unwrapRNode(lNodeToHandle);
-        ngDevMode && !isProceduralRenderer(renderer) && assertDomNode(rNode);
         if (action === 0 /* WalkTNodeTreeAction.Create */ && parent !== null) {
             if (beforeNode == null) {
                 nativeAppendChild(renderer, parent, rNode);
@@ -7207,17 +7184,14 @@ function applyToElementOrContainer(action, renderer, parent, lNodeToHandle, befo
 function createTextNode(renderer, value) {
     ngDevMode && ngDevMode.rendererCreateTextNode++;
     ngDevMode && ngDevMode.rendererSetText++;
-    return isProceduralRenderer(renderer) ? renderer.createText(value) :
-        renderer.createTextNode(value);
+    return renderer.createText(value);
 }
 function updateTextNode(renderer, rNode, value) {
     ngDevMode && ngDevMode.rendererSetText++;
-    isProceduralRenderer(renderer) ? renderer.setValue(rNode, value) : rNode.textContent = value;
+    renderer.setValue(rNode, value);
 }
 function createCommentNode(renderer, value) {
     ngDevMode && ngDevMode.rendererCreateComment++;
-    // isProceduralRenderer check is not needed because both `Renderer2` and `Renderer3` have the same
-    // method name.
     return renderer.createComment(escapeCommentText(value));
 }
 /**
@@ -7229,14 +7203,7 @@ function createCommentNode(renderer, value) {
  */
 function createElementNode(renderer, name, namespace) {
     ngDevMode && ngDevMode.rendererCreateElement++;
-    if (isProceduralRenderer(renderer)) {
-        return renderer.createElement(name, namespace);
-    }
-    else {
-        const namespaceUri = namespace !== null ? getNamespaceUri(namespace) : null;
-        return namespaceUri === null ? renderer.createElement(name) :
-            renderer.createElementNS(namespaceUri, name);
-    }
+    return renderer.createElement(name, namespace);
 }
 /**
  * Removes all DOM elements associated with a view.
@@ -7468,7 +7435,7 @@ function detachView(lContainer, removeIndex) {
 function destroyLView(tView, lView) {
     if (!(lView[FLAGS] & 128 /* LViewFlags.Destroyed */)) {
         const renderer = lView[RENDERER];
-        if (isProceduralRenderer(renderer) && renderer.destroyNode) {
+        if (renderer.destroyNode) {
             applyView(tView, lView, renderer, 3 /* WalkTNodeTreeAction.Destroy */, null, null);
         }
         destroyViewTree(lView);
@@ -7496,7 +7463,7 @@ function cleanUpView(tView, lView) {
         executeOnDestroys(tView, lView);
         processCleanups(tView, lView);
         // For component views only, the local renderer is destroyed at clean up time.
-        if (lView[TVIEW].type === 1 /* TViewType.Component */ && isProceduralRenderer(lView[RENDERER])) {
+        if (lView[TVIEW].type === 1 /* TViewType.Component */) {
             ngDevMode && ngDevMode.rendererDestroy++;
             lView[RENDERER].destroy();
         }
@@ -7672,30 +7639,17 @@ function getClosestRElement(tView, tNode, lView) {
     }
 }
 /**
- * Inserts a native node before another native node for a given parent using {@link Renderer3}.
- * This is a utility function that can be used when native nodes were determined - it abstracts an
- * actual renderer being used.
+ * Inserts a native node before another native node for a given parent.
+ * This is a utility function that can be used when native nodes were determined.
  */
 function nativeInsertBefore(renderer, parent, child, beforeNode, isMove) {
     ngDevMode && ngDevMode.rendererInsertBefore++;
-    if (isProceduralRenderer(renderer)) {
-        renderer.insertBefore(parent, child, beforeNode, isMove);
-    }
-    else {
-        const targetParent = isTemplateNode(parent) ? parent.content : parent;
-        targetParent.insertBefore(child, beforeNode, isMove);
-    }
+    renderer.insertBefore(parent, child, beforeNode, isMove);
 }
 function nativeAppendChild(renderer, parent, child) {
     ngDevMode && ngDevMode.rendererAppendChild++;
     ngDevMode && assertDefined(parent, 'parent node must be defined');
-    if (isProceduralRenderer(renderer)) {
-        renderer.appendChild(parent, child);
-    }
-    else {
-        const targetParent = isTemplateNode(parent) ? parent.content : parent;
-        targetParent.appendChild(child);
-    }
+    renderer.appendChild(parent, child);
 }
 function nativeAppendOrInsertBefore(renderer, parent, child, beforeNode, isMove) {
     if (beforeNode !== null) {
@@ -7707,12 +7661,7 @@ function nativeAppendOrInsertBefore(renderer, parent, child, beforeNode, isMove)
 }
 /** Removes a node from the DOM given its native parent. */
 function nativeRemoveChild(renderer, parent, child, isHostElement) {
-    if (isProceduralRenderer(renderer)) {
-        renderer.removeChild(parent, child, isHostElement);
-    }
-    else {
-        parent.removeChild(child);
-    }
+    renderer.removeChild(parent, child, isHostElement);
 }
 /** Checks if an element is a `<template>` node. */
 function isTemplateNode(node) {
@@ -7722,13 +7671,13 @@ function isTemplateNode(node) {
  * Returns a native parent of a given native node.
  */
 function nativeParentNode(renderer, node) {
-    return (isProceduralRenderer(renderer) ? renderer.parentNode(node) : node.parentNode);
+    return renderer.parentNode(node);
 }
 /**
  * Returns a native sibling of a given native node.
  */
 function nativeNextSibling(renderer, node) {
-    return isProceduralRenderer(renderer) ? renderer.nextSibling(node) : node.nextSibling;
+    return renderer.nextSibling(node);
 }
 /**
  * Find a node in front of which `currentTNode` should be inserted.
@@ -8037,39 +7986,22 @@ function applyContainer(renderer, action, lContainer, parentRElement, beforeNode
  *        otherwise).
  */
 function applyStyling(renderer, isClassBased, rNode, prop, value) {
-    const isProcedural = isProceduralRenderer(renderer);
     if (isClassBased) {
         // We actually want JS true/false here because any truthy value should add the class
         if (!value) {
             ngDevMode && ngDevMode.rendererRemoveClass++;
-            if (isProcedural) {
-                renderer.removeClass(rNode, prop);
-            }
-            else {
-                rNode.classList.remove(prop);
-            }
+            renderer.removeClass(rNode, prop);
         }
         else {
             ngDevMode && ngDevMode.rendererAddClass++;
-            if (isProcedural) {
-                renderer.addClass(rNode, prop);
-            }
-            else {
-                ngDevMode && assertDefined(rNode.classList, 'HTMLElement expected');
-                rNode.classList.add(prop);
-            }
+            renderer.addClass(rNode, prop);
         }
     }
     else {
         let flags = prop.indexOf('-') === -1 ? undefined : RendererStyleFlags2.DashCase;
         if (value == null /** || value === undefined */) {
             ngDevMode && ngDevMode.rendererRemoveStyle++;
-            if (isProcedural) {
-                renderer.removeStyle(rNode, prop, flags);
-            }
-            else {
-                rNode.style.removeProperty(prop);
-            }
+            renderer.removeStyle(rNode, prop, flags);
         }
         else {
             // A value is important if it ends with `!important`. The style
@@ -8081,13 +8013,7 @@ function applyStyling(renderer, isClassBased, rNode, prop, value) {
                 flags |= RendererStyleFlags2.Important;
             }
             ngDevMode && ngDevMode.rendererSetStyle++;
-            if (isProcedural) {
-                renderer.setStyle(rNode, prop, value, flags);
-            }
-            else {
-                ngDevMode && assertDefined(rNode.style, 'HTMLElement expected');
-                rNode.style.setProperty(prop, value, isImportant ? 'important' : '');
-            }
+            renderer.setStyle(rNode, prop, value, flags);
         }
     }
 }
@@ -8103,12 +8029,7 @@ function applyStyling(renderer, isClassBased, rNode, prop, value) {
  */
 function writeDirectStyle(renderer, element, newValue) {
     ngDevMode && assertString(newValue, '\'newValue\' should be a string');
-    if (isProceduralRenderer(renderer)) {
-        renderer.setAttribute(element, 'style', newValue);
-    }
-    else {
-        element.style.cssText = newValue;
-    }
+    renderer.setAttribute(element, 'style', newValue);
     ngDevMode && ngDevMode.rendererSetStyle++;
 }
 /**
@@ -8123,17 +8044,12 @@ function writeDirectStyle(renderer, element, newValue) {
  */
 function writeDirectClass(renderer, element, newValue) {
     ngDevMode && assertString(newValue, '\'newValue\' should be a string');
-    if (isProceduralRenderer(renderer)) {
-        if (newValue === '') {
-            // There are tests in `google3` which expect `element.getAttribute('class')` to be `null`.
-            renderer.removeAttribute(element, 'class');
-        }
-        else {
-            renderer.setAttribute(element, 'class', newValue);
-        }
+    if (newValue === '') {
+        // There are tests in `google3` which expect `element.getAttribute('class')` to be `null`.
+        renderer.removeAttribute(element, 'class');
     }
     else {
-        element.className = newValue;
+        renderer.setAttribute(element, 'class', newValue);
     }
     ngDevMode && ngDevMode.rendererSetClassName++;
 }
@@ -8183,7 +8099,7 @@ function classIndexOf(className, classToSearch, startingIndex) {
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-const unusedValueToPlacateAjd$1 = unusedValueExportToPlacateAjd$4 + unusedValueExportToPlacateAjd$3;
+const unusedValueToPlacateAjd$1 = unusedValueExportToPlacateAjd$5 + unusedValueExportToPlacateAjd$4;
 const NG_TEMPLATE_SELECTOR = 'ng-template';
 /**
  * Search the `TAttributes` to see if it contains `cssClassToMatch` (case insensitive)
@@ -9212,6 +9128,18 @@ class R3Injector extends EnvironmentInjector {
     onDestroy(callback) {
         this._onDestroyHooks.push(callback);
     }
+    runInContext(fn) {
+        this.assertNotDestroyed();
+        const previousInjector = setCurrentInjector(this);
+        const previousInjectImplementation = setInjectImplementation(undefined);
+        try {
+            return fn();
+        }
+        finally {
+            setCurrentInjector(previousInjector);
+            setInjectImplementation(previousInjectImplementation);
+        }
+    }
     get(token, notFoundValue = THROW_IF_NOT_FOUND, flags = InjectFlags.Default) {
         this.assertNotDestroyed();
         // Set the injection context.
@@ -10626,6 +10554,9 @@ function handleUnknownPropertyError(propName, tagName, nodeType, lView) {
                 `the ${schemas} of this component.`;
         }
     }
+    reportUnknownPropertyError(message);
+}
+function reportUnknownPropertyError(message) {
     if (shouldThrowErrorOnUnknownProperty) {
         throw new RuntimeError(303 /* RuntimeErrorCode.UNKNOWN_BINDING */, message);
     }
@@ -11512,6 +11443,13 @@ class LContainerDebug {
     }
 }
 
+/**
+ * @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.io/license
+ */
 /**
  * A permanent marker promise which signifies that the current CD tree is
  * clean.
@@ -11579,7 +11517,7 @@ function refreshChildComponents(hostLView, components) {
 /** Renders child components in the current view (creation mode). */
 function renderChildComponents(hostLView, components) {
     for (let i = 0; i < components.length; i++) {
-        renderComponent$1(hostLView, components[i]);
+        renderComponent(hostLView, components[i]);
     }
 }
 function createLView(parentLView, tView, context, flags, host, tHostNode, rendererFactory, renderer, sanitizer, injector, embeddedViewInjector) {
@@ -12097,16 +12035,6 @@ function createViewBlueprint(bindingStartIndex, initialViewLength) {
 function createError(text, token) {
     return new Error(`Renderer: ${text} [${stringifyForError(token)}]`);
 }
-function assertHostNodeExists(rElement, elementOrSelector) {
-    if (!rElement) {
-        if (typeof elementOrSelector === 'string') {
-            throw createError('Host node with selector not found:', elementOrSelector);
-        }
-        else {
-            throw createError('Host node is required:', elementOrSelector);
-        }
-    }
-}
 /**
  * Locates the host native element, used for bootstrapping existing nodes into rendering pipeline.
  *
@@ -12115,21 +12043,9 @@ function assertHostNodeExists(rElement, elementOrSelector) {
  * @param encapsulation View Encapsulation defined for component that requests host element.
  */
 function locateHostElement(renderer, elementOrSelector, encapsulation) {
-    if (isProceduralRenderer(renderer)) {
-        // When using native Shadow DOM, do not clear host element to allow native slot projection
-        const preserveContent = encapsulation === ViewEncapsulation$1.ShadowDom;
-        return renderer.selectRootElement(elementOrSelector, preserveContent);
-    }
-    let rElement = typeof elementOrSelector === 'string' ?
-        renderer.querySelector(elementOrSelector) :
-        elementOrSelector;
-    ngDevMode && assertHostNodeExists(rElement, elementOrSelector);
-    // Always clear host element's content when Renderer3 is in use. For procedural renderer case we
-    // make it depend on whether ShadowDom encapsulation is used (in which case the content should be
-    // preserved to allow native slot projection). ShadowDom encapsulation requires procedural
-    // renderer, and procedural renderer case is handled above.
-    rElement.textContent = '';
-    return rElement;
+    // When using native Shadow DOM, do not clear host element to allow native slot projection
+    const preserveContent = encapsulation === ViewEncapsulation$1.ShadowDom;
+    return renderer.selectRootElement(elementOrSelector, preserveContent);
 }
 /**
  * Saves context for this cleanup function in LView.cleanupInstances.
@@ -12344,13 +12260,7 @@ function elementPropertyInternal(tView, tNode, lView, propName, value, renderer,
         // It is assumed that the sanitizer is only added when the compiler determines that the
         // property is risky, so sanitization can be done without further checks.
         value = sanitizer != null ? sanitizer(value, tNode.value || '', propName) : value;
-        if (isProceduralRenderer(renderer)) {
-            renderer.setProperty(element, propName, value);
-        }
-        else if (!isAnimationProp(propName)) {
-            element.setProperty ? element.setProperty(propName, value) :
-                element[propName] = value;
-        }
+        renderer.setProperty(element, propName, value);
     }
     else if (tNode.type & 12 /* TNodeType.AnyContainer */) {
         // If the node is a container and the property didn't
@@ -12374,23 +12284,15 @@ function setNgReflectProperty(lView, element, type, attrName, value) {
     const debugValue = normalizeDebugBindingValue(value);
     if (type & 3 /* TNodeType.AnyRNode */) {
         if (value == null) {
-            isProceduralRenderer(renderer) ? renderer.removeAttribute(element, attrName) :
-                element.removeAttribute(attrName);
+            renderer.removeAttribute(element, attrName);
         }
         else {
-            isProceduralRenderer(renderer) ?
-                renderer.setAttribute(element, attrName, debugValue) :
-                element.setAttribute(attrName, debugValue);
+            renderer.setAttribute(element, attrName, debugValue);
         }
     }
     else {
         const textContent = escapeCommentText(`bindings=${JSON.stringify({ [attrName]: debugValue }, null, 2)}`);
-        if (isProceduralRenderer(renderer)) {
-            renderer.setValue(element, textContent);
-        }
-        else {
-            element.textContent = textContent;
-        }
+        renderer.setValue(element, textContent);
     }
 }
 function setNgReflectProperties(lView, element, type, dataValue, value) {
@@ -12420,6 +12322,7 @@ function instantiateRootComponent(tView, lView, def) {
         ngDevMode &&
             assertEqual(directiveIndex, rootTNode.directiveStart, 'Because this is a root component the allocated expando should match the TNode component.');
         configureViewWithDirective(tView, rootTNode, lView, directiveIndex, def);
+        initializeInputAndOutputAliases(tView, rootTNode);
     }
     const directive = getNodeInjectable(lView, tView, rootTNode.directiveStart, rootTNode);
     attachPatchData(directive, lView);
@@ -12744,19 +12647,12 @@ function elementAttributeInternal(tNode, lView, name, value, sanitizer, namespac
 function setElementAttribute(renderer, element, namespace, tagName, name, value, sanitizer) {
     if (value == null) {
         ngDevMode && ngDevMode.rendererRemoveAttribute++;
-        isProceduralRenderer(renderer) ? renderer.removeAttribute(element, name, namespace) :
-            element.removeAttribute(name);
+        renderer.removeAttribute(element, name, namespace);
     }
     else {
         ngDevMode && ngDevMode.rendererSetAttribute++;
         const strValue = sanitizer == null ? renderStringify(value) : sanitizer(value, tagName || '', name);
-        if (isProceduralRenderer(renderer)) {
-            renderer.setAttribute(element, name, strValue, namespace);
-        }
-        else {
-            namespace ? element.setAttributeNS(namespace, name, strValue) :
-                element.setAttribute(name, strValue);
-        }
+        renderer.setAttribute(element, name, strValue, namespace);
     }
 }
 /**
@@ -12848,7 +12744,6 @@ const LContainerArray = class LContainer extends Array {
  */
 function createLContainer(hostNative, currentView, native, tNode) {
     ngDevMode && assertLView(currentView);
-    ngDevMode && !isProceduralRenderer(currentView[RENDERER]) && assertDomNode(native);
     // https://jsperf.com/array-literal-vs-new-array-really
     const lContainer = new (ngDevMode ? LContainerArray : Array)(hostNative, // host native
     true, // Boolean `true` in this position signifies that this is an `LContainer`
@@ -12964,7 +12859,7 @@ function refreshContainsDirtyView(lView) {
         }
     }
 }
-function renderComponent$1(hostLView, componentHostIdx) {
+function renderComponent(hostLView, componentHostIdx) {
     ngDevMode && assertEqual(isCreationMode(hostLView), true, 'Should be run in creation mode');
     const componentView = getComponentLViewByIndex(componentHostIdx, hostLView);
     const componentTView = componentView[TVIEW];
@@ -13316,48 +13211,135 @@ function computeStaticStyling(tNode, attrs, writeToHost) {
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
+// TODO: A hack to not pull in the NullInjector from @angular/core.
+const NULL_INJECTOR = {
+    get: (token, notFoundValue) => {
+        throwProviderNotFoundError(token, 'NullInjector');
+    }
+};
 /**
- * Synchronously perform change detection on a component (and possibly its sub-components).
+ * Creates the root component view and the root component node.
  *
- * This function triggers change detection in a synchronous way on a component.
+ * @param rNode Render host element.
+ * @param def ComponentDef
+ * @param rootView The parent view where the host node is stored
+ * @param rendererFactory Factory to be used for creating child renderers.
+ * @param hostRenderer The current renderer
+ * @param sanitizer The sanitizer, if provided
  *
- * @param component The component which the change detection should be performed on.
+ * @returns Component view created
  */
-function detectChanges(component) {
-    const view = getComponentViewByInstance(component);
-    detectChangesInternal(view[TVIEW], view, component);
+function createRootComponentView(rNode, def, rootView, rendererFactory, hostRenderer, sanitizer) {
+    const tView = rootView[TVIEW];
+    const index = HEADER_OFFSET;
+    ngDevMode && assertIndexInRange(rootView, index);
+    rootView[index] = rNode;
+    // '#host' is added here as we don't know the real host DOM name (we don't want to read it) and at
+    // the same time we want to communicate the debug `TNode` that this is a special `TNode`
+    // representing a host element.
+    const tNode = getOrCreateTNode(tView, index, 2 /* TNodeType.Element */, '#host', null);
+    const mergedAttrs = tNode.mergedAttrs = def.hostAttrs;
+    if (mergedAttrs !== null) {
+        computeStaticStyling(tNode, mergedAttrs, true);
+        if (rNode !== null) {
+            setUpAttributes(hostRenderer, rNode, mergedAttrs);
+            if (tNode.classes !== null) {
+                writeDirectClass(hostRenderer, rNode, tNode.classes);
+            }
+            if (tNode.styles !== null) {
+                writeDirectStyle(hostRenderer, rNode, tNode.styles);
+            }
+        }
+    }
+    const viewRenderer = rendererFactory.createRenderer(rNode, def);
+    const componentView = createLView(rootView, getOrCreateTComponentView(def), null, def.onPush ? 32 /* LViewFlags.Dirty */ : 16 /* LViewFlags.CheckAlways */, rootView[index], tNode, rendererFactory, viewRenderer, sanitizer || null, null, null);
+    if (tView.firstCreatePass) {
+        diPublicInInjector(getOrCreateNodeInjectorForNode(tNode, rootView), tView, def.type);
+        markAsComponentHost(tView, tNode);
+        initTNodeFlags(tNode, rootView.length, 1);
+    }
+    addToViewTree(rootView, componentView);
+    // Store component view at node index, with node as the HOST
+    return rootView[index] = componentView;
 }
 /**
- * Marks the component as dirty (needing change detection). Marking a component dirty will
- * schedule a change detection on it at some point in the future.
- *
- * Marking an already dirty component as dirty won't do anything. Only one outstanding change
- * detection can be scheduled per component tree.
+ * Creates a root component and sets it up with features and host bindings. Shared by
+ * renderComponent() and ViewContainerRef.createComponent().
+ */
+function createRootComponent(componentView, componentDef, rootLView, rootContext, hostFeatures) {
+    const tView = rootLView[TVIEW];
+    // Create directive instance with factory() and store at next index in viewData
+    const component = instantiateRootComponent(tView, rootLView, componentDef);
+    rootContext.components.push(component);
+    componentView[CONTEXT] = component;
+    if (hostFeatures !== null) {
+        for (const feature of hostFeatures) {
+            feature(component, componentDef);
+        }
+    }
+    // We want to generate an empty QueryList for root content queries for backwards
+    // compatibility with ViewEngine.
+    if (componentDef.contentQueries) {
+        const tNode = getCurrentTNode();
+        ngDevMode && assertDefined(tNode, 'TNode expected');
+        componentDef.contentQueries(1 /* RenderFlags.Create */, component, tNode.directiveStart);
+    }
+    const rootTNode = getCurrentTNode();
+    ngDevMode && assertDefined(rootTNode, 'tNode should have been already created');
+    if (tView.firstCreatePass &&
+        (componentDef.hostBindings !== null || componentDef.hostAttrs !== null)) {
+        setSelectedIndex(rootTNode.index);
+        const rootTView = rootLView[TVIEW];
+        registerHostBindingOpCodes(rootTView, rootTNode, rootLView, rootTNode.directiveStart, rootTNode.directiveEnd, componentDef);
+        invokeHostBindingsInCreationMode(componentDef, component);
+    }
+    return component;
+}
+function createRootContext(scheduler, playerHandler) {
+    return {
+        components: [],
+        scheduler: scheduler || defaultScheduler,
+        clean: CLEAN_PROMISE,
+        playerHandler: playerHandler || null,
+        flags: 0 /* RootContextFlags.Empty */
+    };
+}
+/**
+ * Used to enable lifecycle hooks on the root component.
  *
- * @param component Component to mark as dirty.
+ * Include this feature when calling `renderComponent` if the root component
+ * you are rendering has lifecycle hooks defined. Otherwise, the hooks won't
+ * be called properly.
+ *
+ * Example:
+ *
+ * ```
+ * renderComponent(AppComponent, {hostFeatures: [LifecycleHooksFeature]});
+ * ```
  */
-function markDirty(component) {
-    ngDevMode && assertDefined(component, 'component');
-    const rootView = markViewDirty(getComponentViewByInstance(component));
-    ngDevMode && assertDefined(rootView[CONTEXT], 'rootContext should be defined');
-    scheduleTick(rootView[CONTEXT], 1 /* RootContextFlags.DetectChanges */);
+function LifecycleHooksFeature() {
+    const tNode = getCurrentTNode();
+    ngDevMode && assertDefined(tNode, 'TNode is required');
+    registerPostOrderHooks(getLView()[TVIEW], tNode);
 }
 /**
- * Used to perform change detection on the whole application.
+ * Wait on component until it is rendered.
  *
- * This is equivalent to `detectChanges`, but invoked on root component. Additionally, `tick`
- * executes lifecycle hooks and conditionally checks components based on their
- * `ChangeDetectionStrategy` and dirtiness.
+ * This function returns a `Promise` which is resolved when the component's
+ * change detection is executed. This is determined by finding the scheduler
+ * associated with the `component`'s render tree and waiting until the scheduler
+ * flushes. If nothing is scheduled, the function returns a resolved promise.
  *
- * The preferred way to trigger change detection is to call `markDirty`. `markDirty` internally
- * schedules `tick` using a scheduler in order to coalesce multiple `markDirty` calls into a
- * single change detection run. By default, the scheduler is `requestAnimationFrame`, but can
- * be changed when calling `renderComponent` and providing the `scheduler` option.
+ * Example:
+ * ```
+ * await whenRendered(myComponent);
+ * ```
+ *
+ * @param component Component to wait upon
+ * @returns Promise which resolves when the component is rendered.
  */
-function tick(component) {
-    const rootView = getRootView(component);
-    const rootContext = rootView[CONTEXT];
-    tickRootContext(rootContext);
+function whenRendered(component) {
+    return getRootContext(component).clean;
 }
 
 /**
@@ -13367,407 +13349,312 @@ function tick(component) {
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
+function getSuperType(type) {
+    return Object.getPrototypeOf(type.prototype).constructor;
+}
 /**
- * Retrieves the component instance associated with a given DOM element.
- *
- * @usageNotes
- * Given the following DOM structure:
- *
- * ```html
- * <app-root>
- *   <div>
- *     <child-comp></child-comp>
- *   </div>
- * </app-root>
- * ```
- *
- * Calling `getComponent` on `<child-comp>` will return the instance of `ChildComponent`
- * associated with this DOM element.
- *
- * Calling the function on `<app-root>` will return the `MyApp` instance.
- *
- *
- * @param element DOM element from which the component should be retrieved.
- * @returns Component instance associated with the element or `null` if there
- *    is no component associated with it.
+ * Merges the definition from a super class to a sub class.
+ * @param definition The definition that is a SubClass of another directive of component
  *
- * @publicApi
- * @globalApi ng
+ * @codeGenApi
  */
-function getComponent$1(element) {
-    ngDevMode && assertDomElement(element);
-    const context = getLContext(element);
-    if (context === null)
-        return null;
-    if (context.component === undefined) {
-        const lView = context.lView;
-        if (lView === null) {
-            return null;
+function ɵɵInheritDefinitionFeature(definition) {
+    let superType = getSuperType(definition.type);
+    let shouldInheritFields = true;
+    const inheritanceChain = [definition];
+    while (superType) {
+        let superDef = undefined;
+        if (isComponentDef(definition)) {
+            // Don't use getComponentDef/getDirectiveDef. This logic relies on inheritance.
+            superDef = superType.ɵcmp || superType.ɵdir;
         }
-        context.component = getComponentAtNodeIndex(context.nodeIndex, lView);
+        else {
+            if (superType.ɵcmp) {
+                throw new RuntimeError(903 /* RuntimeErrorCode.INVALID_INHERITANCE */, ngDevMode &&
+                    `Directives cannot inherit Components. Directive ${stringifyForError(definition.type)} is attempting to extend component ${stringifyForError(superType)}`);
+            }
+            // Don't use getComponentDef/getDirectiveDef. This logic relies on inheritance.
+            superDef = superType.ɵdir;
+        }
+        if (superDef) {
+            if (shouldInheritFields) {
+                inheritanceChain.push(superDef);
+                // Some fields in the definition may be empty, if there were no values to put in them that
+                // would've justified object creation. Unwrap them if necessary.
+                const writeableDef = definition;
+                writeableDef.inputs = maybeUnwrapEmpty(definition.inputs);
+                writeableDef.declaredInputs = maybeUnwrapEmpty(definition.declaredInputs);
+                writeableDef.outputs = maybeUnwrapEmpty(definition.outputs);
+                // Merge hostBindings
+                const superHostBindings = superDef.hostBindings;
+                superHostBindings && inheritHostBindings(definition, superHostBindings);
+                // Merge queries
+                const superViewQuery = superDef.viewQuery;
+                const superContentQueries = superDef.contentQueries;
+                superViewQuery && inheritViewQuery(definition, superViewQuery);
+                superContentQueries && inheritContentQueries(definition, superContentQueries);
+                // Merge inputs and outputs
+                fillProperties(definition.inputs, superDef.inputs);
+                fillProperties(definition.declaredInputs, superDef.declaredInputs);
+                fillProperties(definition.outputs, superDef.outputs);
+                // Merge animations metadata.
+                // If `superDef` is a Component, the `data` field is present (defaults to an empty object).
+                if (isComponentDef(superDef) && superDef.data.animation) {
+                    // If super def is a Component, the `definition` is also a Component, since Directives can
+                    // not inherit Components (we throw an error above and cannot reach this code).
+                    const defData = definition.data;
+                    defData.animation = (defData.animation || []).concat(superDef.data.animation);
+                }
+            }
+            // Run parent features
+            const features = superDef.features;
+            if (features) {
+                for (let i = 0; i < features.length; i++) {
+                    const feature = features[i];
+                    if (feature && feature.ngInherit) {
+                        feature(definition);
+                    }
+                    // If `InheritDefinitionFeature` is a part of the current `superDef`, it means that this
+                    // def already has all the necessary information inherited from its super class(es), so we
+                    // can stop merging fields from super classes. However we need to iterate through the
+                    // prototype chain to look for classes that might contain other "features" (like
+                    // NgOnChanges), which we should invoke for the original `definition`. We set the
+                    // `shouldInheritFields` flag to indicate that, essentially skipping fields inheritance
+                    // logic and only invoking functions from the "features" list.
+                    if (feature === ɵɵInheritDefinitionFeature) {
+                        shouldInheritFields = false;
+                    }
+                }
+            }
+        }
+        superType = Object.getPrototypeOf(superType);
     }
-    return context.component;
-}
-/**
- * If inside an embedded view (e.g. `*ngIf` or `*ngFor`), retrieves the context of the embedded
- * view that the element is part of. Otherwise retrieves the instance of the component whose view
- * owns the element (in this case, the result is the same as calling `getOwningComponent`).
- *
- * @param element Element for which to get the surrounding component instance.
- * @returns Instance of the component that is around the element or null if the element isn't
- *    inside any component.
- *
- * @publicApi
- * @globalApi ng
- */
-function getContext(element) {
-    assertDomElement(element);
-    const context = getLContext(element);
-    const lView = context ? context.lView : null;
-    return lView === null ? null : lView[CONTEXT];
+    mergeHostAttrsAcrossInheritance(inheritanceChain);
 }
 /**
- * Retrieves the component instance whose view contains the DOM element.
- *
- * For example, if `<child-comp>` is used in the template of `<app-comp>`
- * (i.e. a `ViewChild` of `<app-comp>`), calling `getOwningComponent` on `<child-comp>`
- * would return `<app-comp>`.
- *
- * @param elementOrDir DOM element, component or directive instance
- *    for which to retrieve the root components.
- * @returns Component instance whose view owns the DOM element or null if the element is not
- *    part of a component view.
+ * Merge the `hostAttrs` and `hostVars` from the inherited parent to the base class.
  *
- * @publicApi
- * @globalApi ng
+ * @param inheritanceChain A list of `WritableDefs` starting at the top most type and listing
+ * sub-types in order. For each type take the `hostAttrs` and `hostVars` and merge it with the child
+ * type.
  */
-function getOwningComponent(elementOrDir) {
-    const context = getLContext(elementOrDir);
-    let lView = context ? context.lView : null;
-    if (lView === null)
-        return null;
-    let parent;
-    while (lView[TVIEW].type === 2 /* TViewType.Embedded */ && (parent = getLViewParent(lView))) {
-        lView = parent;
+function mergeHostAttrsAcrossInheritance(inheritanceChain) {
+    let hostVars = 0;
+    let hostAttrs = null;
+    // We process the inheritance order from the base to the leaves here.
+    for (let i = inheritanceChain.length - 1; i >= 0; i--) {
+        const def = inheritanceChain[i];
+        // For each `hostVars`, we need to add the superclass amount.
+        def.hostVars = (hostVars += def.hostVars);
+        // for each `hostAttrs` we need to merge it with superclass.
+        def.hostAttrs =
+            mergeHostAttrs(def.hostAttrs, hostAttrs = mergeHostAttrs(hostAttrs, def.hostAttrs));
     }
-    return lView[FLAGS] & 256 /* LViewFlags.IsRoot */ ? null : lView[CONTEXT];
 }
-/**
- * Retrieves all root components associated with a DOM element, directive or component instance.
- * Root components are those which have been bootstrapped by Angular.
- *
- * @param elementOrDir DOM element, component or directive instance
- *    for which to retrieve the root components.
- * @returns Root components associated with the target object.
- *
- * @publicApi
- * @globalApi ng
- */
-function getRootComponents(elementOrDir) {
-    const lView = readPatchedLView(elementOrDir);
-    return lView !== null ? [...getRootContext(lView).components] : [];
-}
-/**
- * Retrieves an `Injector` associated with an element, component or directive instance.
- *
- * @param elementOrDir DOM element, component or directive instance for which to
- *    retrieve the injector.
- * @returns Injector associated with the element, component or directive instance.
- *
- * @publicApi
- * @globalApi ng
- */
-function getInjector(elementOrDir) {
-    const context = getLContext(elementOrDir);
-    const lView = context ? context.lView : null;
-    if (lView === null)
-        return Injector.NULL;
-    const tNode = lView[TVIEW].data[context.nodeIndex];
-    return new NodeInjector(tNode, lView);
-}
-/**
- * Retrieve a set of injection tokens at a given DOM node.
- *
- * @param element Element for which the injection tokens should be retrieved.
- */
-function getInjectionTokens(element) {
-    const context = getLContext(element);
-    const lView = context ? context.lView : null;
-    if (lView === null)
-        return [];
-    const tView = lView[TVIEW];
-    const tNode = tView.data[context.nodeIndex];
-    const providerTokens = [];
-    const startIndex = tNode.providerIndexes & 1048575 /* TNodeProviderIndexes.ProvidersStartIndexMask */;
-    const endIndex = tNode.directiveEnd;
-    for (let i = startIndex; i < endIndex; i++) {
-        let value = tView.data[i];
-        if (isDirectiveDefHack(value)) {
-            // The fact that we sometimes store Type and sometimes DirectiveDef in this location is a
-            // design flaw.  We should always store same type so that we can be monomorphic. The issue
-            // is that for Components/Directives we store the def instead the type. The correct behavior
-            // is that we should always be storing injectable type in this location.
-            value = value.type;
-        }
-        providerTokens.push(value);
+function maybeUnwrapEmpty(value) {
+    if (value === EMPTY_OBJ) {
+        return {};
     }
-    return providerTokens;
-}
-/**
- * Retrieves directive instances associated with a given DOM node. Does not include
- * component instances.
- *
- * @usageNotes
- * Given the following DOM structure:
- *
- * ```html
- * <app-root>
- *   <button my-button></button>
- *   <my-comp></my-comp>
- * </app-root>
- * ```
- *
- * Calling `getDirectives` on `<button>` will return an array with an instance of the `MyButton`
- * directive that is associated with the DOM node.
- *
- * Calling `getDirectives` on `<my-comp>` will return an empty array.
- *
- * @param node DOM node for which to get the directives.
- * @returns Array of directives associated with the node.
- *
- * @publicApi
- * @globalApi ng
- */
-function getDirectives(node) {
-    // Skip text nodes because we can't have directives associated with them.
-    if (node instanceof Text) {
+    else if (value === EMPTY_ARRAY) {
         return [];
     }
-    const context = getLContext(node);
-    const lView = context ? context.lView : null;
-    if (lView === null) {
-        return [];
+    else {
+        return value;
     }
-    const tView = lView[TVIEW];
-    const nodeIndex = context.nodeIndex;
-    if (!tView?.data[nodeIndex]) {
-        return [];
+}
+function inheritViewQuery(definition, superViewQuery) {
+    const prevViewQuery = definition.viewQuery;
+    if (prevViewQuery) {
+        definition.viewQuery = (rf, ctx) => {
+            superViewQuery(rf, ctx);
+            prevViewQuery(rf, ctx);
+        };
     }
-    if (context.directives === undefined) {
-        context.directives = getDirectivesAtNodeIndex(nodeIndex, lView, false);
+    else {
+        definition.viewQuery = superViewQuery;
     }
-    // The `directives` in this case are a named array called `LComponentView`. Clone the
-    // result so we don't expose an internal data structure in the user's console.
-    return context.directives === null ? [] : [...context.directives];
 }
-/**
- * Returns the debug (partial) metadata for a particular directive or component instance.
- * The function accepts an instance of a directive or component and returns the corresponding
- * metadata.
- *
- * @param directiveOrComponentInstance Instance of a directive or component
- * @returns metadata of the passed directive or component
- *
- * @publicApi
- * @globalApi ng
- */
-function getDirectiveMetadata$1(directiveOrComponentInstance) {
-    const { constructor } = directiveOrComponentInstance;
-    if (!constructor) {
-        throw new Error('Unable to find the instance constructor');
+function inheritContentQueries(definition, superContentQueries) {
+    const prevContentQueries = definition.contentQueries;
+    if (prevContentQueries) {
+        definition.contentQueries = (rf, ctx, directiveIndex) => {
+            superContentQueries(rf, ctx, directiveIndex);
+            prevContentQueries(rf, ctx, directiveIndex);
+        };
     }
-    // In case a component inherits from a directive, we may have component and directive metadata
-    // To ensure we don't get the metadata of the directive, we want to call `getComponentDef` first.
-    const componentDef = getComponentDef(constructor);
-    if (componentDef) {
-        return {
-            inputs: componentDef.inputs,
-            outputs: componentDef.outputs,
-            encapsulation: componentDef.encapsulation,
-            changeDetection: componentDef.onPush ? ChangeDetectionStrategy.OnPush :
-                ChangeDetectionStrategy.Default
+    else {
+        definition.contentQueries = superContentQueries;
+    }
+}
+function inheritHostBindings(definition, superHostBindings) {
+    const prevHostBindings = definition.hostBindings;
+    if (prevHostBindings) {
+        definition.hostBindings = (rf, ctx) => {
+            superHostBindings(rf, ctx);
+            prevHostBindings(rf, ctx);
         };
     }
-    const directiveDef = getDirectiveDef(constructor);
-    if (directiveDef) {
-        return { inputs: directiveDef.inputs, outputs: directiveDef.outputs };
+    else {
+        definition.hostBindings = superHostBindings;
     }
-    return null;
 }
+
 /**
- * Retrieve map of local references.
- *
- * The references are retrieved as a map of local reference name to element or directive instance.
+ * @license
+ * Copyright Google LLC All Rights Reserved.
  *
- * @param target DOM element, component or directive instance for which to retrieve
- *    the local references.
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
  */
-function getLocalRefs(target) {
-    const context = getLContext(target);
-    if (context === null)
-        return {};
-    if (context.localRefs === undefined) {
-        const lView = context.lView;
-        if (lView === null) {
-            return {};
-        }
-        context.localRefs = discoverLocalRefs(lView, context.nodeIndex);
-    }
-    return context.localRefs || {};
-}
 /**
- * Retrieves the host element of a component or directive instance.
- * The host element is the DOM element that matched the selector of the directive.
- *
- * @param componentOrDirective Component or directive instance for which the host
- *     element should be retrieved.
- * @returns Host element of the target.
- *
- * @publicApi
- * @globalApi ng
+ * Fields which exist on either directive or component definitions, and need to be copied from
+ * parent to child classes by the `ɵɵCopyDefinitionFeature`.
  */
-function getHostElement(componentOrDirective) {
-    return getLContext(componentOrDirective).native;
-}
+const COPY_DIRECTIVE_FIELDS = [
+    // The child class should use the providers of its parent.
+    'providersResolver',
+    // Not listed here are any fields which are handled by the `ɵɵInheritDefinitionFeature`, such
+    // as inputs, outputs, and host binding functions.
+];
 /**
- * Retrieves the rendered text for a given component.
- *
- * This function retrieves the host element of a component and
- * and then returns the `textContent` for that element. This implies
- * that the text returned will include re-projected content of
- * the component as well.
+ * Fields which exist only on component definitions, and need to be copied from parent to child
+ * classes by the `ɵɵCopyDefinitionFeature`.
  *
- * @param component The component to return the content text for.
+ * The type here allows any field of `ComponentDef` which is not also a property of `DirectiveDef`,
+ * since those should go in `COPY_DIRECTIVE_FIELDS` above.
  */
-function getRenderedText(component) {
-    const hostElement = getHostElement(component);
-    return hostElement.textContent || '';
-}
+const COPY_COMPONENT_FIELDS = [
+    // The child class should use the template function of its parent, including all template
+    // semantics.
+    'template',
+    'decls',
+    'consts',
+    'vars',
+    'onPush',
+    'ngContentSelectors',
+    // The child class should use the CSS styles of its parent, including all styling semantics.
+    'styles',
+    'encapsulation',
+    // The child class should be checked by the runtime in the same way as its parent.
+    'schemas',
+];
 /**
- * Retrieves a list of event listeners associated with a DOM element. The list does include host
- * listeners, but it does not include event listeners defined outside of the Angular context
- * (e.g. through `addEventListener`).
+ * Copies the fields not handled by the `ɵɵInheritDefinitionFeature` from the supertype of a
+ * definition.
  *
- * @usageNotes
- * Given the following DOM structure:
+ * This exists primarily to support ngcc migration of an existing View Engine pattern, where an
+ * entire decorator is inherited from a parent to a child class. When ngcc detects this case, it
+ * generates a skeleton definition on the child class, and applies this feature.
  *
- * ```html
- * <app-root>
- *   <div (click)="doSomething()"></div>
- * </app-root>
- * ```
+ * The `ɵɵCopyDefinitionFeature` then copies any needed fields from the parent class' definition,
+ * including things like the component template function.
  *
- * Calling `getListeners` on `<div>` will return an object that looks as follows:
+ * @param definition The definition of a child class which inherits from a parent class with its
+ * own definition.
  *
- * ```ts
- * {
- *   name: 'click',
- *   element: <div>,
- *   callback: () => doSomething(),
- *   useCapture: false
- * }
- * ```
- *
- * @param element Element for which the DOM listeners should be retrieved.
- * @returns Array of event listeners on the DOM element.
- *
- * @publicApi
- * @globalApi ng
+ * @codeGenApi
  */
-function getListeners(element) {
-    ngDevMode && assertDomElement(element);
-    const lContext = getLContext(element);
-    const lView = lContext === null ? null : lContext.lView;
-    if (lView === null)
-        return [];
-    const tView = lView[TVIEW];
-    const lCleanup = lView[CLEANUP];
-    const tCleanup = tView.cleanup;
-    const listeners = [];
-    if (tCleanup && lCleanup) {
-        for (let i = 0; i < tCleanup.length;) {
-            const firstParam = tCleanup[i++];
-            const secondParam = tCleanup[i++];
-            if (typeof firstParam === 'string') {
-                const name = firstParam;
-                const listenerElement = unwrapRNode(lView[secondParam]);
-                const callback = lCleanup[tCleanup[i++]];
-                const useCaptureOrIndx = tCleanup[i++];
-                // if useCaptureOrIndx is boolean then report it as is.
-                // if useCaptureOrIndx is positive number then it in unsubscribe method
-                // if useCaptureOrIndx is negative number then it is a Subscription
-                const type = (typeof useCaptureOrIndx === 'boolean' || useCaptureOrIndx >= 0) ? 'dom' : 'output';
-                const useCapture = typeof useCaptureOrIndx === 'boolean' ? useCaptureOrIndx : false;
-                if (element == listenerElement) {
-                    listeners.push({ element, name, callback, useCapture, type });
-                }
-            }
+function ɵɵCopyDefinitionFeature(definition) {
+    let superType = getSuperType(definition.type);
+    let superDef = undefined;
+    if (isComponentDef(definition)) {
+        // Don't use getComponentDef/getDirectiveDef. This logic relies on inheritance.
+        superDef = superType.ɵcmp;
+    }
+    else {
+        // Don't use getComponentDef/getDirectiveDef. This logic relies on inheritance.
+        superDef = superType.ɵdir;
+    }
+    // Needed because `definition` fields are readonly.
+    const defAny = definition;
+    // Copy over any fields that apply to either directives or components.
+    for (const field of COPY_DIRECTIVE_FIELDS) {
+        defAny[field] = superDef[field];
+    }
+    if (isComponentDef(superDef)) {
+        // Copy over any component-specific fields.
+        for (const field of COPY_COMPONENT_FIELDS) {
+            defAny[field] = superDef[field];
         }
     }
-    listeners.sort(sortListeners);
-    return listeners;
-}
-function sortListeners(a, b) {
-    if (a.name == b.name)
-        return 0;
-    return a.name < b.name ? -1 : 1;
 }
+
 /**
- * This function should not exist because it is megamorphic and only mostly correct.
+ * @license
+ * Copyright Google LLC All Rights Reserved.
  *
- * See call site for more info.
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
  */
-function isDirectiveDefHack(obj) {
-    return obj.type !== undefined && obj.template !== undefined && obj.declaredInputs !== undefined;
+let _symbolIterator = null;
+function getSymbolIterator() {
+    if (!_symbolIterator) {
+        const Symbol = _global['Symbol'];
+        if (Symbol && Symbol.iterator) {
+            _symbolIterator = Symbol.iterator;
+        }
+        else {
+            // es6-shim specific logic
+            const keys = Object.getOwnPropertyNames(Map.prototype);
+            for (let i = 0; i < keys.length; ++i) {
+                const key = keys[i];
+                if (key !== 'entries' && key !== 'size' &&
+                    Map.prototype[key] === Map.prototype['entries']) {
+                    _symbolIterator = key;
+                }
+            }
+        }
+    }
+    return _symbolIterator;
 }
+
 /**
- * Returns the attached `DebugNode` instance for an element in the DOM.
+ * @license
+ * Copyright Google LLC All Rights Reserved.
  *
- * @param element DOM element which is owned by an existing component's view.
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
  */
-function getDebugNode$1(element) {
-    if (ngDevMode && !(element instanceof Node)) {
-        throw new Error('Expecting instance of DOM Element');
+function isIterable(obj) {
+    return obj !== null && typeof obj === 'object' && obj[getSymbolIterator()] !== undefined;
+}
+function isListLikeIterable(obj) {
+    if (!isJsObject(obj))
+        return false;
+    return Array.isArray(obj) ||
+        (!(obj instanceof Map) && // JS Map are iterables but return entries as [k, v]
+            getSymbolIterator() in obj); // JS Iterable have a Symbol.iterator prop
+}
+function areIterablesEqual(a, b, comparator) {
+    const iterator1 = a[getSymbolIterator()]();
+    const iterator2 = b[getSymbolIterator()]();
+    while (true) {
+        const item1 = iterator1.next();
+        const item2 = iterator2.next();
+        if (item1.done && item2.done)
+            return true;
+        if (item1.done || item2.done)
+            return false;
+        if (!comparator(item1.value, item2.value))
+            return false;
     }
-    const lContext = getLContext(element);
-    const lView = lContext ? lContext.lView : null;
-    if (lView === null) {
-        return null;
+}
+function iterateListLike(obj, fn) {
+    if (Array.isArray(obj)) {
+        for (let i = 0; i < obj.length; i++) {
+            fn(obj[i]);
+        }
     }
-    const nodeIndex = lContext.nodeIndex;
-    if (nodeIndex !== -1) {
-        const valueInLView = lView[nodeIndex];
-        // this means that value in the lView is a component with its own
-        // data. In this situation the TNode is not accessed at the same spot.
-        const tNode = isLView(valueInLView) ? valueInLView[T_HOST] : getTNode(lView[TVIEW], nodeIndex);
-        ngDevMode &&
-            assertEqual(tNode.index, nodeIndex, 'Expecting that TNode at index is same as index');
-        return buildDebugNode(tNode, lView);
+    else {
+        const iterator = obj[getSymbolIterator()]();
+        let item;
+        while (!((item = iterator.next()).done)) {
+            fn(item.value);
+        }
     }
-    return null;
-}
-/**
- * Retrieve the component `LView` from component/element.
- *
- * NOTE: `LView` is a private and should not be leaked outside.
- *       Don't export this method to `ng.*` on window.
- *
- * @param target DOM element or component instance for which to retrieve the LView.
- */
-function getComponentLView(target) {
-    const lContext = getLContext(target);
-    const nodeIndx = lContext.nodeIndex;
-    const lView = lContext.lView;
-    ngDevMode && assertLView(lView);
-    const componentLView = lView[nodeIndx];
-    ngDevMode && assertLView(componentLView);
-    return componentLView;
 }
-/** Asserts that a value is a DOM Element. */
-function assertDomElement(value) {
-    if (typeof Element !== 'undefined' && !(value instanceof Element)) {
-        throw new Error('Expecting instance of DOM Element');
-    }
+function isJsObject(o) {
+    return o !== null && (typeof o === 'function' || typeof o === 'object');
 }
 
 /**
@@ -13777,18 +13664,22 @@ function assertDomElement(value) {
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-/**
- * Marks a component for check (in case of OnPush components) and synchronously
- * performs change detection on the application this component belongs to.
- *
- * @param component Component to {@link ChangeDetectorRef#markForCheck mark for check}.
- *
- * @publicApi
- * @globalApi ng
- */
-function applyChanges(component) {
-    markDirty(component);
-    getRootComponents(component).forEach(rootComponent => detectChanges(rootComponent));
+function devModeEqual(a, b) {
+    const isListLikeIterableA = isListLikeIterable(a);
+    const isListLikeIterableB = isListLikeIterable(b);
+    if (isListLikeIterableA && isListLikeIterableB) {
+        return areIterablesEqual(a, b, devModeEqual);
+    }
+    else {
+        const isAObject = a && (typeof a === 'object' || typeof a === 'function');
+        const isBObject = b && (typeof b === 'object' || typeof b === 'function');
+        if (!isListLikeIterableA && isAObject && !isListLikeIterableB && isBObject) {
+            return true;
+        }
+        else {
+            return Object.is(a, b);
+        }
+    }
 }
 
 /**
@@ -13798,70 +13689,73 @@ function applyChanges(component) {
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
+// TODO(misko): consider inlining
+/** Updates binding and returns the value. */
+function updateBinding(lView, bindingIndex, value) {
+    return lView[bindingIndex] = value;
+}
+/** Gets the current binding value. */
+function getBinding(lView, bindingIndex) {
+    ngDevMode && assertIndexInRange(lView, bindingIndex);
+    ngDevMode &&
+        assertNotSame(lView[bindingIndex], NO_CHANGE, 'Stored value should never be NO_CHANGE.');
+    return lView[bindingIndex];
+}
 /**
- * This file introduces series of globally accessible debug tools
- * to allow for the Angular debugging story to function.
- *
- * To see this in action run the following command:
- *
- *   bazel run //packages/core/test/bundling/todo:devserver
+ * Updates binding if changed, then returns whether it was updated.
  *
- *  Then load `localhost:5432` and start using the console tools.
- */
-/**
- * This value reflects the property on the window where the dev
- * tools are patched (window.ng).
- * */
-const GLOBAL_PUBLISH_EXPANDO_KEY = 'ng';
-let _published = false;
-/**
- * Publishes a collection of default debug tools onto`window.ng`.
+ * This function also checks the `CheckNoChangesMode` and throws if changes are made.
+ * Some changes (Objects/iterables) during `CheckNoChangesMode` are exempt to comply with VE
+ * behavior.
  *
- * These functions are available globally when Angular is in development
- * mode and are automatically stripped away from prod mode is on.
+ * @param lView current `LView`
+ * @param bindingIndex The binding in the `LView` to check
+ * @param value New value to check against `lView[bindingIndex]`
+ * @returns `true` if the bindings has changed. (Throws if binding has changed during
+ *          `CheckNoChangesMode`)
  */
-function publishDefaultGlobalUtils$1() {
-    if (!_published) {
-        _published = true;
-        /**
-         * Warning: this function is *INTERNAL* and should not be relied upon in application's code.
-         * The contract of the function might be changed in any release and/or the function can be
-         * removed completely.
-         */
-        publishGlobalUtil('ɵsetProfiler', setProfiler);
-        publishGlobalUtil('getDirectiveMetadata', getDirectiveMetadata$1);
-        publishGlobalUtil('getComponent', getComponent$1);
-        publishGlobalUtil('getContext', getContext);
-        publishGlobalUtil('getListeners', getListeners);
-        publishGlobalUtil('getOwningComponent', getOwningComponent);
-        publishGlobalUtil('getHostElement', getHostElement);
-        publishGlobalUtil('getInjector', getInjector);
-        publishGlobalUtil('getRootComponents', getRootComponents);
-        publishGlobalUtil('getDirectives', getDirectives);
-        publishGlobalUtil('applyChanges', applyChanges);
+function bindingUpdated(lView, bindingIndex, value) {
+    ngDevMode && assertNotSame(value, NO_CHANGE, 'Incoming value should never be NO_CHANGE.');
+    ngDevMode &&
+        assertLessThan(bindingIndex, lView.length, `Slot should have been initialized to NO_CHANGE`);
+    const oldValue = lView[bindingIndex];
+    if (Object.is(oldValue, value)) {
+        return false;
     }
-}
-/**
- * Publishes the given function to `window.ng` so that it can be
- * used from the browser console when an application is not in production.
- */
-function publishGlobalUtil(name, fn) {
-    if (typeof COMPILED === 'undefined' || !COMPILED) {
-        // Note: we can't export `ng` when using closure enhanced optimization as:
-        // - closure declares globals itself for minified names, which sometimes clobber our `ng` global
-        // - we can't declare a closure extern as the namespace `ng` is already used within Google
-        //   for typings for AngularJS (via `goog.provide('ng....')`).
-        const w = _global;
-        ngDevMode && assertDefined(fn, 'function not defined');
-        if (w) {
-            let container = w[GLOBAL_PUBLISH_EXPANDO_KEY];
-            if (!container) {
-                container = w[GLOBAL_PUBLISH_EXPANDO_KEY] = {};
+    else {
+        if (ngDevMode && isInCheckNoChangesMode()) {
+            // View engine didn't report undefined values as changed on the first checkNoChanges pass
+            // (before the change detection was run).
+            const oldValueToCompare = oldValue !== NO_CHANGE ? oldValue : undefined;
+            if (!devModeEqual(oldValueToCompare, value)) {
+                const details = getExpressionChangedErrorDetails(lView, bindingIndex, oldValueToCompare, value);
+                throwErrorIfNoChangesMode(oldValue === NO_CHANGE, details.oldValue, details.newValue, details.propName);
             }
-            container[name] = fn;
+            // There was a change, but the `devModeEqual` decided that the change is exempt from an error.
+            // For this reason we exit as if no change. The early exit is needed to prevent the changed
+            // value to be written into `LView` (If we would write the new value that we would not see it
+            // as change on next CD.)
+            return false;
         }
+        lView[bindingIndex] = value;
+        return true;
     }
 }
+/** Updates 2 bindings if changed, then returns whether either was updated. */
+function bindingUpdated2(lView, bindingIndex, exp1, exp2) {
+    const different = bindingUpdated(lView, bindingIndex, exp1);
+    return bindingUpdated(lView, bindingIndex + 1, exp2) || different;
+}
+/** Updates 3 bindings if changed, then returns whether any was updated. */
+function bindingUpdated3(lView, bindingIndex, exp1, exp2, exp3) {
+    const different = bindingUpdated2(lView, bindingIndex, exp1, exp2);
+    return bindingUpdated(lView, bindingIndex + 2, exp3) || different;
+}
+/** Updates 4 bindings if changed, then returns whether any was updated. */
+function bindingUpdated4(lView, bindingIndex, exp1, exp2, exp3, exp4) {
+    const different = bindingUpdated2(lView, bindingIndex, exp1, exp2);
+    return bindingUpdated2(lView, bindingIndex + 2, exp3, exp4) || different;
+}
 
 /**
  * @license
@@ -13870,981 +13764,377 @@ function publishGlobalUtil(name, fn) {
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-// TODO: A hack to not pull in the NullInjector from @angular/core.
-const NULL_INJECTOR = {
-    get: (token, notFoundValue) => {
-        throwProviderNotFoundError(token, 'NullInjector');
-    }
-};
 /**
- * Bootstraps a Component into an existing host element and returns an instance
- * of the component.
+ * Updates the value of or removes a bound attribute on an Element.
+ *
+ * Used in the case of `[attr.title]="value"`
  *
- * Use this function to bootstrap a component into the DOM tree. Each invocation
- * of this function will create a separate tree of components, injectors and
- * change detection cycles and lifetimes. To dynamically insert a new component
- * into an existing tree such that it shares the same injection, change detection
- * and object lifetime, use {@link ViewContainer#createComponent}.
+ * @param name name The name of the attribute.
+ * @param value value The attribute is removed when value is `null` or `undefined`.
+ *                  Otherwise the attribute value is set to the stringified value.
+ * @param sanitizer An optional function used to sanitize the value.
+ * @param namespace Optional namespace to use when setting the attribute.
  *
- * @param componentType Component to bootstrap
- * @param options Optional parameters which control bootstrapping
+ * @codeGenApi
  */
-function renderComponent(componentType /* Type as workaround for: Microsoft/TypeScript/issues/4881 */, opts = {}) {
-    ngDevMode && publishDefaultGlobalUtils$1();
-    ngDevMode && assertComponentType(componentType);
-    enableRenderer3();
-    const rendererFactory = opts.rendererFactory || domRendererFactory3;
-    const sanitizer = opts.sanitizer || null;
-    const componentDef = getComponentDef(componentType);
-    if (componentDef.type != componentType)
-        componentDef.type = componentType;
-    // The first index of the first selector is the tag name.
-    const componentTag = componentDef.selectors[0][0];
-    const hostRenderer = rendererFactory.createRenderer(null, null);
-    const hostRNode = locateHostElement(hostRenderer, opts.host || componentTag, componentDef.encapsulation);
-    const rootFlags = componentDef.onPush ? 32 /* LViewFlags.Dirty */ | 256 /* LViewFlags.IsRoot */ :
-        16 /* LViewFlags.CheckAlways */ | 256 /* LViewFlags.IsRoot */;
-    const rootContext = createRootContext(opts.scheduler, opts.playerHandler);
-    const renderer = rendererFactory.createRenderer(hostRNode, componentDef);
-    const rootTView = createTView(0 /* TViewType.Root */, null, null, 1, 0, null, null, null, null, null);
-    const rootView = createLView(null, rootTView, rootContext, rootFlags, null, null, rendererFactory, renderer, null, opts.injector || null, null);
-    enterView(rootView);
-    let component;
-    try {
-        if (rendererFactory.begin)
-            rendererFactory.begin();
-        const componentView = createRootComponentView(hostRNode, componentDef, rootView, rendererFactory, renderer, sanitizer);
-        component = createRootComponent(componentView, componentDef, rootView, rootContext, opts.hostFeatures || null);
-        // create mode pass
-        renderView(rootTView, rootView, null);
-        // update mode pass
-        refreshView(rootTView, rootView, null, null);
-    }
-    finally {
-        leaveView();
-        if (rendererFactory.end)
-            rendererFactory.end();
+function ɵɵattribute(name, value, sanitizer, namespace) {
+    const lView = getLView();
+    const bindingIndex = nextBindingIndex();
+    if (bindingUpdated(lView, bindingIndex, value)) {
+        const tView = getTView();
+        const tNode = getSelectedTNode();
+        elementAttributeInternal(tNode, lView, name, value, sanitizer, namespace);
+        ngDevMode && storePropertyBindingMetadata(tView.data, tNode, 'attr.' + name, bindingIndex);
     }
-    return component;
+    return ɵɵattribute;
 }
+
 /**
- * Creates the root component view and the root component node.
- *
- * @param rNode Render host element.
- * @param def ComponentDef
- * @param rootView The parent view where the host node is stored
- * @param rendererFactory Factory to be used for creating child renderers.
- * @param hostRenderer The current renderer
- * @param sanitizer The sanitizer, if provided
+ * @license
+ * Copyright Google LLC All Rights Reserved.
  *
- * @returns Component view created
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
  */
-function createRootComponentView(rNode, def, rootView, rendererFactory, hostRenderer, sanitizer) {
-    const tView = rootView[TVIEW];
-    const index = HEADER_OFFSET;
-    ngDevMode && assertIndexInRange(rootView, index);
-    rootView[index] = rNode;
-    // '#host' is added here as we don't know the real host DOM name (we don't want to read it) and at
-    // the same time we want to communicate the debug `TNode` that this is a special `TNode`
-    // representing a host element.
-    const tNode = getOrCreateTNode(tView, index, 2 /* TNodeType.Element */, '#host', null);
-    const mergedAttrs = tNode.mergedAttrs = def.hostAttrs;
-    if (mergedAttrs !== null) {
-        computeStaticStyling(tNode, mergedAttrs, true);
-        if (rNode !== null) {
-            setUpAttributes(hostRenderer, rNode, mergedAttrs);
-            if (tNode.classes !== null) {
-                writeDirectClass(hostRenderer, rNode, tNode.classes);
-            }
-            if (tNode.styles !== null) {
-                writeDirectStyle(hostRenderer, rNode, tNode.styles);
-            }
-        }
-    }
-    const viewRenderer = rendererFactory.createRenderer(rNode, def);
-    const componentView = createLView(rootView, getOrCreateTComponentView(def), null, def.onPush ? 32 /* LViewFlags.Dirty */ : 16 /* LViewFlags.CheckAlways */, rootView[index], tNode, rendererFactory, viewRenderer, sanitizer || null, null, null);
-    if (tView.firstCreatePass) {
-        diPublicInInjector(getOrCreateNodeInjectorForNode(tNode, rootView), tView, def.type);
-        markAsComponentHost(tView, tNode);
-        initTNodeFlags(tNode, rootView.length, 1);
-    }
-    addToViewTree(rootView, componentView);
-    // Store component view at node index, with node as the HOST
-    return rootView[index] = componentView;
-}
 /**
- * Creates a root component and sets it up with features and host bindings. Shared by
- * renderComponent() and ViewContainerRef.createComponent().
+ * Create interpolation bindings with a variable number of expressions.
+ *
+ * If there are 1 to 8 expressions `interpolation1()` to `interpolation8()` should be used instead.
+ * Those are faster because there is no need to create an array of expressions and iterate over it.
+ *
+ * `values`:
+ * - has static text at even indexes,
+ * - has evaluated expressions at odd indexes.
+ *
+ * Returns the concatenated string when any of the arguments changes, `NO_CHANGE` otherwise.
  */
-function createRootComponent(componentView, componentDef, rootLView, rootContext, hostFeatures) {
-    const tView = rootLView[TVIEW];
-    // Create directive instance with factory() and store at next index in viewData
-    const component = instantiateRootComponent(tView, rootLView, componentDef);
-    rootContext.components.push(component);
-    componentView[CONTEXT] = component;
-    if (hostFeatures !== null) {
-        for (const feature of hostFeatures) {
-            feature(component, componentDef);
-        }
+function interpolationV(lView, values) {
+    ngDevMode && assertLessThan(2, values.length, 'should have at least 3 values');
+    ngDevMode && assertEqual(values.length % 2, 1, 'should have an odd number of values');
+    let isBindingUpdated = false;
+    let bindingIndex = getBindingIndex();
+    for (let i = 1; i < values.length; i += 2) {
+        // Check if bindings (odd indexes) have changed
+        isBindingUpdated = bindingUpdated(lView, bindingIndex++, values[i]) || isBindingUpdated;
     }
-    // We want to generate an empty QueryList for root content queries for backwards
-    // compatibility with ViewEngine.
-    if (componentDef.contentQueries) {
-        const tNode = getCurrentTNode();
-        ngDevMode && assertDefined(tNode, 'TNode expected');
-        componentDef.contentQueries(1 /* RenderFlags.Create */, component, tNode.directiveStart);
+    setBindingIndex(bindingIndex);
+    if (!isBindingUpdated) {
+        return NO_CHANGE;
     }
-    const rootTNode = getCurrentTNode();
-    ngDevMode && assertDefined(rootTNode, 'tNode should have been already created');
-    if (tView.firstCreatePass &&
-        (componentDef.hostBindings !== null || componentDef.hostAttrs !== null)) {
-        setSelectedIndex(rootTNode.index);
-        const rootTView = rootLView[TVIEW];
-        registerHostBindingOpCodes(rootTView, rootTNode, rootLView, rootTNode.directiveStart, rootTNode.directiveEnd, componentDef);
-        invokeHostBindingsInCreationMode(componentDef, component);
+    // Build the updated content
+    let content = values[0];
+    for (let i = 1; i < values.length; i += 2) {
+        content += renderStringify(values[i]) + values[i + 1];
     }
-    return component;
-}
-function createRootContext(scheduler, playerHandler) {
-    return {
-        components: [],
-        scheduler: scheduler || defaultScheduler,
-        clean: CLEAN_PROMISE,
-        playerHandler: playerHandler || null,
-        flags: 0 /* RootContextFlags.Empty */
-    };
+    return content;
 }
 /**
- * Used to enable lifecycle hooks on the root component.
- *
- * Include this feature when calling `renderComponent` if the root component
- * you are rendering has lifecycle hooks defined. Otherwise, the hooks won't
- * be called properly.
- *
- * Example:
+ * Creates an interpolation binding with 1 expression.
  *
- * ```
- * renderComponent(AppComponent, {hostFeatures: [LifecycleHooksFeature]});
- * ```
+ * @param prefix static value used for concatenation only.
+ * @param v0 value checked for change.
+ * @param suffix static value used for concatenation only.
  */
-function LifecycleHooksFeature() {
-    const tNode = getCurrentTNode();
-    ngDevMode && assertDefined(tNode, 'TNode is required');
-    registerPostOrderHooks(getLView()[TVIEW], tNode);
+function interpolation1(lView, prefix, v0, suffix) {
+    const different = bindingUpdated(lView, nextBindingIndex(), v0);
+    return different ? prefix + renderStringify(v0) + suffix : NO_CHANGE;
 }
 /**
- * Wait on component until it is rendered.
- *
- * This function returns a `Promise` which is resolved when the component's
- * change detection is executed. This is determined by finding the scheduler
- * associated with the `component`'s render tree and waiting until the scheduler
- * flushes. If nothing is scheduled, the function returns a resolved promise.
- *
- * Example:
- * ```
- * await whenRendered(myComponent);
- * ```
- *
- * @param component Component to wait upon
- * @returns Promise which resolves when the component is rendered.
+ * Creates an interpolation binding with 2 expressions.
  */
-function whenRendered(component) {
-    return getRootContext(component).clean;
+function interpolation2(lView, prefix, v0, i0, v1, suffix) {
+    const bindingIndex = getBindingIndex();
+    const different = bindingUpdated2(lView, bindingIndex, v0, v1);
+    incrementBindingIndex(2);
+    return different ? prefix + renderStringify(v0) + i0 + renderStringify(v1) + suffix : NO_CHANGE;
 }
-
 /**
- * @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.io/license
+ * Creates an interpolation binding with 3 expressions.
  */
-function getSuperType(type) {
-    return Object.getPrototypeOf(type.prototype).constructor;
+function interpolation3(lView, prefix, v0, i0, v1, i1, v2, suffix) {
+    const bindingIndex = getBindingIndex();
+    const different = bindingUpdated3(lView, bindingIndex, v0, v1, v2);
+    incrementBindingIndex(3);
+    return different ?
+        prefix + renderStringify(v0) + i0 + renderStringify(v1) + i1 + renderStringify(v2) + suffix :
+        NO_CHANGE;
 }
 /**
- * Merges the definition from a super class to a sub class.
- * @param definition The definition that is a SubClass of another directive of component
- *
- * @codeGenApi
+ * Create an interpolation binding with 4 expressions.
  */
-function ɵɵInheritDefinitionFeature(definition) {
-    let superType = getSuperType(definition.type);
-    let shouldInheritFields = true;
-    const inheritanceChain = [definition];
-    while (superType) {
-        let superDef = undefined;
-        if (isComponentDef(definition)) {
-            // Don't use getComponentDef/getDirectiveDef. This logic relies on inheritance.
-            superDef = superType.ɵcmp || superType.ɵdir;
-        }
-        else {
-            if (superType.ɵcmp) {
-                throw new RuntimeError(903 /* RuntimeErrorCode.INVALID_INHERITANCE */, ngDevMode &&
-                    `Directives cannot inherit Components. Directive ${stringifyForError(definition.type)} is attempting to extend component ${stringifyForError(superType)}`);
-            }
-            // Don't use getComponentDef/getDirectiveDef. This logic relies on inheritance.
-            superDef = superType.ɵdir;
-        }
-        if (superDef) {
-            if (shouldInheritFields) {
-                inheritanceChain.push(superDef);
-                // Some fields in the definition may be empty, if there were no values to put in them that
-                // would've justified object creation. Unwrap them if necessary.
-                const writeableDef = definition;
-                writeableDef.inputs = maybeUnwrapEmpty(definition.inputs);
-                writeableDef.declaredInputs = maybeUnwrapEmpty(definition.declaredInputs);
-                writeableDef.outputs = maybeUnwrapEmpty(definition.outputs);
-                // Merge hostBindings
-                const superHostBindings = superDef.hostBindings;
-                superHostBindings && inheritHostBindings(definition, superHostBindings);
-                // Merge queries
-                const superViewQuery = superDef.viewQuery;
-                const superContentQueries = superDef.contentQueries;
-                superViewQuery && inheritViewQuery(definition, superViewQuery);
-                superContentQueries && inheritContentQueries(definition, superContentQueries);
-                // Merge inputs and outputs
-                fillProperties(definition.inputs, superDef.inputs);
-                fillProperties(definition.declaredInputs, superDef.declaredInputs);
-                fillProperties(definition.outputs, superDef.outputs);
-                // Merge animations metadata.
-                // If `superDef` is a Component, the `data` field is present (defaults to an empty object).
-                if (isComponentDef(superDef) && superDef.data.animation) {
-                    // If super def is a Component, the `definition` is also a Component, since Directives can
-                    // not inherit Components (we throw an error above and cannot reach this code).
-                    const defData = definition.data;
-                    defData.animation = (defData.animation || []).concat(superDef.data.animation);
-                }
-            }
-            // Run parent features
-            const features = superDef.features;
-            if (features) {
-                for (let i = 0; i < features.length; i++) {
-                    const feature = features[i];
-                    if (feature && feature.ngInherit) {
-                        feature(definition);
-                    }
-                    // If `InheritDefinitionFeature` is a part of the current `superDef`, it means that this
-                    // def already has all the necessary information inherited from its super class(es), so we
-                    // can stop merging fields from super classes. However we need to iterate through the
-                    // prototype chain to look for classes that might contain other "features" (like
-                    // NgOnChanges), which we should invoke for the original `definition`. We set the
-                    // `shouldInheritFields` flag to indicate that, essentially skipping fields inheritance
-                    // logic and only invoking functions from the "features" list.
-                    if (feature === ɵɵInheritDefinitionFeature) {
-                        shouldInheritFields = false;
-                    }
-                }
-            }
-        }
-        superType = Object.getPrototypeOf(superType);
-    }
-    mergeHostAttrsAcrossInheritance(inheritanceChain);
+function interpolation4(lView, prefix, v0, i0, v1, i1, v2, i2, v3, suffix) {
+    const bindingIndex = getBindingIndex();
+    const different = bindingUpdated4(lView, bindingIndex, v0, v1, v2, v3);
+    incrementBindingIndex(4);
+    return different ? prefix + renderStringify(v0) + i0 + renderStringify(v1) + i1 +
+        renderStringify(v2) + i2 + renderStringify(v3) + suffix :
+        NO_CHANGE;
 }
 /**
- * Merge the `hostAttrs` and `hostVars` from the inherited parent to the base class.
- *
- * @param inheritanceChain A list of `WritableDefs` starting at the top most type and listing
- * sub-types in order. For each type take the `hostAttrs` and `hostVars` and merge it with the child
- * type.
+ * Creates an interpolation binding with 5 expressions.
  */
-function mergeHostAttrsAcrossInheritance(inheritanceChain) {
-    let hostVars = 0;
-    let hostAttrs = null;
-    // We process the inheritance order from the base to the leaves here.
-    for (let i = inheritanceChain.length - 1; i >= 0; i--) {
-        const def = inheritanceChain[i];
-        // For each `hostVars`, we need to add the superclass amount.
-        def.hostVars = (hostVars += def.hostVars);
-        // for each `hostAttrs` we need to merge it with superclass.
-        def.hostAttrs =
-            mergeHostAttrs(def.hostAttrs, hostAttrs = mergeHostAttrs(hostAttrs, def.hostAttrs));
-    }
-}
-function maybeUnwrapEmpty(value) {
-    if (value === EMPTY_OBJ) {
-        return {};
-    }
-    else if (value === EMPTY_ARRAY) {
-        return [];
-    }
-    else {
-        return value;
-    }
-}
-function inheritViewQuery(definition, superViewQuery) {
-    const prevViewQuery = definition.viewQuery;
-    if (prevViewQuery) {
-        definition.viewQuery = (rf, ctx) => {
-            superViewQuery(rf, ctx);
-            prevViewQuery(rf, ctx);
-        };
-    }
-    else {
-        definition.viewQuery = superViewQuery;
-    }
-}
-function inheritContentQueries(definition, superContentQueries) {
-    const prevContentQueries = definition.contentQueries;
-    if (prevContentQueries) {
-        definition.contentQueries = (rf, ctx, directiveIndex) => {
-            superContentQueries(rf, ctx, directiveIndex);
-            prevContentQueries(rf, ctx, directiveIndex);
-        };
-    }
-    else {
-        definition.contentQueries = superContentQueries;
-    }
-}
-function inheritHostBindings(definition, superHostBindings) {
-    const prevHostBindings = definition.hostBindings;
-    if (prevHostBindings) {
-        definition.hostBindings = (rf, ctx) => {
-            superHostBindings(rf, ctx);
-            prevHostBindings(rf, ctx);
-        };
-    }
-    else {
-        definition.hostBindings = superHostBindings;
-    }
+function interpolation5(lView, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, suffix) {
+    const bindingIndex = getBindingIndex();
+    let different = bindingUpdated4(lView, bindingIndex, v0, v1, v2, v3);
+    different = bindingUpdated(lView, bindingIndex + 4, v4) || different;
+    incrementBindingIndex(5);
+    return different ? prefix + renderStringify(v0) + i0 + renderStringify(v1) + i1 +
+        renderStringify(v2) + i2 + renderStringify(v3) + i3 + renderStringify(v4) + suffix :
+        NO_CHANGE;
 }
-
 /**
- * @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.io/license
+ * Creates an interpolation binding with 6 expressions.
  */
+function interpolation6(lView, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, suffix) {
+    const bindingIndex = getBindingIndex();
+    let different = bindingUpdated4(lView, bindingIndex, v0, v1, v2, v3);
+    different = bindingUpdated2(lView, bindingIndex + 4, v4, v5) || different;
+    incrementBindingIndex(6);
+    return different ?
+        prefix + renderStringify(v0) + i0 + renderStringify(v1) + i1 + renderStringify(v2) + i2 +
+            renderStringify(v3) + i3 + renderStringify(v4) + i4 + renderStringify(v5) + suffix :
+        NO_CHANGE;
+}
 /**
- * Fields which exist on either directive or component definitions, and need to be copied from
- * parent to child classes by the `ɵɵCopyDefinitionFeature`.
+ * Creates an interpolation binding with 7 expressions.
  */
-const COPY_DIRECTIVE_FIELDS = [
-    // The child class should use the providers of its parent.
-    'providersResolver',
-    // Not listed here are any fields which are handled by the `ɵɵInheritDefinitionFeature`, such
-    // as inputs, outputs, and host binding functions.
-];
+function interpolation7(lView, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, i5, v6, suffix) {
+    const bindingIndex = getBindingIndex();
+    let different = bindingUpdated4(lView, bindingIndex, v0, v1, v2, v3);
+    different = bindingUpdated3(lView, bindingIndex + 4, v4, v5, v6) || different;
+    incrementBindingIndex(7);
+    return different ? prefix + renderStringify(v0) + i0 + renderStringify(v1) + i1 +
+        renderStringify(v2) + i2 + renderStringify(v3) + i3 + renderStringify(v4) + i4 +
+        renderStringify(v5) + i5 + renderStringify(v6) + suffix :
+        NO_CHANGE;
+}
 /**
- * Fields which exist only on component definitions, and need to be copied from parent to child
- * classes by the `ɵɵCopyDefinitionFeature`.
- *
- * The type here allows any field of `ComponentDef` which is not also a property of `DirectiveDef`,
- * since those should go in `COPY_DIRECTIVE_FIELDS` above.
+ * Creates an interpolation binding with 8 expressions.
  */
-const COPY_COMPONENT_FIELDS = [
-    // The child class should use the template function of its parent, including all template
-    // semantics.
-    'template',
-    'decls',
-    'consts',
-    'vars',
-    'onPush',
-    'ngContentSelectors',
-    // The child class should use the CSS styles of its parent, including all styling semantics.
-    'styles',
-    'encapsulation',
-    // The child class should be checked by the runtime in the same way as its parent.
-    'schemas',
-];
+function interpolation8(lView, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, i5, v6, i6, v7, suffix) {
+    const bindingIndex = getBindingIndex();
+    let different = bindingUpdated4(lView, bindingIndex, v0, v1, v2, v3);
+    different = bindingUpdated4(lView, bindingIndex + 4, v4, v5, v6, v7) || different;
+    incrementBindingIndex(8);
+    return different ? prefix + renderStringify(v0) + i0 + renderStringify(v1) + i1 +
+        renderStringify(v2) + i2 + renderStringify(v3) + i3 + renderStringify(v4) + i4 +
+        renderStringify(v5) + i5 + renderStringify(v6) + i6 + renderStringify(v7) + suffix :
+        NO_CHANGE;
+}
+
 /**
- * Copies the fields not handled by the `ɵɵInheritDefinitionFeature` from the supertype of a
- * definition.
  *
- * This exists primarily to support ngcc migration of an existing View Engine pattern, where an
- * entire decorator is inherited from a parent to a child class. When ngcc detects this case, it
- * generates a skeleton definition on the child class, and applies this feature.
+ * Update an interpolated attribute on an element with single bound value surrounded by text.
  *
- * The `ɵɵCopyDefinitionFeature` then copies any needed fields from the parent class' definition,
- * including things like the component template function.
+ * Used when the value passed to a property has 1 interpolated value in it:
  *
- * @param definition The definition of a child class which inherits from a parent class with its
- * own definition.
+ * ```html
+ * <div attr.title="prefix{{v0}}suffix"></div>
+ * ```
  *
- * @codeGenApi
- */
-function ɵɵCopyDefinitionFeature(definition) {
-    let superType = getSuperType(definition.type);
-    let superDef = undefined;
-    if (isComponentDef(definition)) {
-        // Don't use getComponentDef/getDirectiveDef. This logic relies on inheritance.
-        superDef = superType.ɵcmp;
-    }
-    else {
-        // Don't use getComponentDef/getDirectiveDef. This logic relies on inheritance.
-        superDef = superType.ɵdir;
-    }
-    // Needed because `definition` fields are readonly.
-    const defAny = definition;
-    // Copy over any fields that apply to either directives or components.
-    for (const field of COPY_DIRECTIVE_FIELDS) {
-        defAny[field] = superDef[field];
-    }
-    if (isComponentDef(superDef)) {
-        // Copy over any component-specific fields.
-        for (const field of COPY_COMPONENT_FIELDS) {
-            defAny[field] = superDef[field];
-        }
-    }
-}
-
-/**
- * @license
- * Copyright Google LLC All Rights Reserved.
+ * Its compiled representation is::
  *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
+ * ```ts
+ * ɵɵattributeInterpolate1('title', 'prefix', v0, 'suffix');
+ * ```
+ *
+ * @param attrName The name of the attribute to update
+ * @param prefix Static value used for concatenation only.
+ * @param v0 Value checked for change.
+ * @param suffix Static value used for concatenation only.
+ * @param sanitizer An optional sanitizer function
+ * @returns itself, so that it may be chained.
+ * @codeGenApi
  */
-let _symbolIterator = null;
-function getSymbolIterator() {
-    if (!_symbolIterator) {
-        const Symbol = _global['Symbol'];
-        if (Symbol && Symbol.iterator) {
-            _symbolIterator = Symbol.iterator;
-        }
-        else {
-            // es6-shim specific logic
-            const keys = Object.getOwnPropertyNames(Map.prototype);
-            for (let i = 0; i < keys.length; ++i) {
-                const key = keys[i];
-                if (key !== 'entries' && key !== 'size' &&
-                    Map.prototype[key] === Map.prototype['entries']) {
-                    _symbolIterator = key;
-                }
-            }
-        }
+function ɵɵattributeInterpolate1(attrName, prefix, v0, suffix, sanitizer, namespace) {
+    const lView = getLView();
+    const interpolatedValue = interpolation1(lView, prefix, v0, suffix);
+    if (interpolatedValue !== NO_CHANGE) {
+        const tNode = getSelectedTNode();
+        elementAttributeInternal(tNode, lView, attrName, interpolatedValue, sanitizer, namespace);
+        ngDevMode &&
+            storePropertyBindingMetadata(getTView().data, tNode, 'attr.' + attrName, getBindingIndex() - 1, prefix, suffix);
     }
-    return _symbolIterator;
+    return ɵɵattributeInterpolate1;
 }
-
 /**
- * @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.io/license
+ * Update an interpolated attribute on an element with 2 bound values surrounded by text.
+ *
+ * Used when the value passed to a property has 2 interpolated values in it:
+ *
+ * ```html
+ * <div attr.title="prefix{{v0}}-{{v1}}suffix"></div>
+ * ```
+ *
+ * Its compiled representation is::
+ *
+ * ```ts
+ * ɵɵattributeInterpolate2('title', 'prefix', v0, '-', v1, 'suffix');
+ * ```
+ *
+ * @param attrName The name of the attribute to update
+ * @param prefix Static value used for concatenation only.
+ * @param v0 Value checked for change.
+ * @param i0 Static value used for concatenation only.
+ * @param v1 Value checked for change.
+ * @param suffix Static value used for concatenation only.
+ * @param sanitizer An optional sanitizer function
+ * @returns itself, so that it may be chained.
+ * @codeGenApi
  */
-function isIterable(obj) {
-    return obj !== null && typeof obj === 'object' && obj[getSymbolIterator()] !== undefined;
-}
-function isListLikeIterable(obj) {
-    if (!isJsObject(obj))
-        return false;
-    return Array.isArray(obj) ||
-        (!(obj instanceof Map) && // JS Map are iterables but return entries as [k, v]
-            getSymbolIterator() in obj); // JS Iterable have a Symbol.iterator prop
-}
-function areIterablesEqual(a, b, comparator) {
-    const iterator1 = a[getSymbolIterator()]();
-    const iterator2 = b[getSymbolIterator()]();
-    while (true) {
-        const item1 = iterator1.next();
-        const item2 = iterator2.next();
-        if (item1.done && item2.done)
-            return true;
-        if (item1.done || item2.done)
-            return false;
-        if (!comparator(item1.value, item2.value))
-            return false;
-    }
-}
-function iterateListLike(obj, fn) {
-    if (Array.isArray(obj)) {
-        for (let i = 0; i < obj.length; i++) {
-            fn(obj[i]);
-        }
-    }
-    else {
-        const iterator = obj[getSymbolIterator()]();
-        let item;
-        while (!((item = iterator.next()).done)) {
-            fn(item.value);
-        }
+function ɵɵattributeInterpolate2(attrName, prefix, v0, i0, v1, suffix, sanitizer, namespace) {
+    const lView = getLView();
+    const interpolatedValue = interpolation2(lView, prefix, v0, i0, v1, suffix);
+    if (interpolatedValue !== NO_CHANGE) {
+        const tNode = getSelectedTNode();
+        elementAttributeInternal(tNode, lView, attrName, interpolatedValue, sanitizer, namespace);
+        ngDevMode &&
+            storePropertyBindingMetadata(getTView().data, tNode, 'attr.' + attrName, getBindingIndex() - 2, prefix, i0, suffix);
     }
+    return ɵɵattributeInterpolate2;
 }
-function isJsObject(o) {
-    return o !== null && (typeof o === 'function' || typeof o === 'object');
-}
-
 /**
- * @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.io/license
+ * Update an interpolated attribute on an element with 3 bound values surrounded by text.
+ *
+ * Used when the value passed to a property has 3 interpolated values in it:
+ *
+ * ```html
+ * <div attr.title="prefix{{v0}}-{{v1}}-{{v2}}suffix"></div>
+ * ```
+ *
+ * Its compiled representation is::
+ *
+ * ```ts
+ * ɵɵattributeInterpolate3(
+ * 'title', 'prefix', v0, '-', v1, '-', v2, 'suffix');
+ * ```
+ *
+ * @param attrName The name of the attribute to update
+ * @param prefix Static value used for concatenation only.
+ * @param v0 Value checked for change.
+ * @param i0 Static value used for concatenation only.
+ * @param v1 Value checked for change.
+ * @param i1 Static value used for concatenation only.
+ * @param v2 Value checked for change.
+ * @param suffix Static value used for concatenation only.
+ * @param sanitizer An optional sanitizer function
+ * @returns itself, so that it may be chained.
+ * @codeGenApi
  */
-function devModeEqual(a, b) {
-    const isListLikeIterableA = isListLikeIterable(a);
-    const isListLikeIterableB = isListLikeIterable(b);
-    if (isListLikeIterableA && isListLikeIterableB) {
-        return areIterablesEqual(a, b, devModeEqual);
-    }
-    else {
-        const isAObject = a && (typeof a === 'object' || typeof a === 'function');
-        const isBObject = b && (typeof b === 'object' || typeof b === 'function');
-        if (!isListLikeIterableA && isAObject && !isListLikeIterableB && isBObject) {
-            return true;
-        }
-        else {
-            return Object.is(a, b);
-        }
+function ɵɵattributeInterpolate3(attrName, prefix, v0, i0, v1, i1, v2, suffix, sanitizer, namespace) {
+    const lView = getLView();
+    const interpolatedValue = interpolation3(lView, prefix, v0, i0, v1, i1, v2, suffix);
+    if (interpolatedValue !== NO_CHANGE) {
+        const tNode = getSelectedTNode();
+        elementAttributeInternal(tNode, lView, attrName, interpolatedValue, sanitizer, namespace);
+        ngDevMode &&
+            storePropertyBindingMetadata(getTView().data, tNode, 'attr.' + attrName, getBindingIndex() - 3, prefix, i0, i1, suffix);
     }
+    return ɵɵattributeInterpolate3;
 }
-
 /**
- * @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.io/license
+ * Update an interpolated attribute on an element with 4 bound values surrounded by text.
+ *
+ * Used when the value passed to a property has 4 interpolated values in it:
+ *
+ * ```html
+ * <div attr.title="prefix{{v0}}-{{v1}}-{{v2}}-{{v3}}suffix"></div>
+ * ```
+ *
+ * Its compiled representation is::
+ *
+ * ```ts
+ * ɵɵattributeInterpolate4(
+ * 'title', 'prefix', v0, '-', v1, '-', v2, '-', v3, 'suffix');
+ * ```
+ *
+ * @param attrName The name of the attribute to update
+ * @param prefix Static value used for concatenation only.
+ * @param v0 Value checked for change.
+ * @param i0 Static value used for concatenation only.
+ * @param v1 Value checked for change.
+ * @param i1 Static value used for concatenation only.
+ * @param v2 Value checked for change.
+ * @param i2 Static value used for concatenation only.
+ * @param v3 Value checked for change.
+ * @param suffix Static value used for concatenation only.
+ * @param sanitizer An optional sanitizer function
+ * @returns itself, so that it may be chained.
+ * @codeGenApi
  */
-// TODO(misko): consider inlining
-/** Updates binding and returns the value. */
-function updateBinding(lView, bindingIndex, value) {
-    return lView[bindingIndex] = value;
-}
-/** Gets the current binding value. */
-function getBinding(lView, bindingIndex) {
-    ngDevMode && assertIndexInRange(lView, bindingIndex);
-    ngDevMode &&
-        assertNotSame(lView[bindingIndex], NO_CHANGE, 'Stored value should never be NO_CHANGE.');
-    return lView[bindingIndex];
+function ɵɵattributeInterpolate4(attrName, prefix, v0, i0, v1, i1, v2, i2, v3, suffix, sanitizer, namespace) {
+    const lView = getLView();
+    const interpolatedValue = interpolation4(lView, prefix, v0, i0, v1, i1, v2, i2, v3, suffix);
+    if (interpolatedValue !== NO_CHANGE) {
+        const tNode = getSelectedTNode();
+        elementAttributeInternal(tNode, lView, attrName, interpolatedValue, sanitizer, namespace);
+        ngDevMode &&
+            storePropertyBindingMetadata(getTView().data, tNode, 'attr.' + attrName, getBindingIndex() - 4, prefix, i0, i1, i2, suffix);
+    }
+    return ɵɵattributeInterpolate4;
 }
 /**
- * Updates binding if changed, then returns whether it was updated.
  *
- * This function also checks the `CheckNoChangesMode` and throws if changes are made.
- * Some changes (Objects/iterables) during `CheckNoChangesMode` are exempt to comply with VE
- * behavior.
+ * Update an interpolated attribute on an element with 5 bound values surrounded by text.
  *
- * @param lView current `LView`
- * @param bindingIndex The binding in the `LView` to check
- * @param value New value to check against `lView[bindingIndex]`
- * @returns `true` if the bindings has changed. (Throws if binding has changed during
- *          `CheckNoChangesMode`)
- */
-function bindingUpdated(lView, bindingIndex, value) {
-    ngDevMode && assertNotSame(value, NO_CHANGE, 'Incoming value should never be NO_CHANGE.');
-    ngDevMode &&
-        assertLessThan(bindingIndex, lView.length, `Slot should have been initialized to NO_CHANGE`);
-    const oldValue = lView[bindingIndex];
-    if (Object.is(oldValue, value)) {
-        return false;
-    }
-    else {
-        if (ngDevMode && isInCheckNoChangesMode()) {
-            // View engine didn't report undefined values as changed on the first checkNoChanges pass
-            // (before the change detection was run).
-            const oldValueToCompare = oldValue !== NO_CHANGE ? oldValue : undefined;
-            if (!devModeEqual(oldValueToCompare, value)) {
-                const details = getExpressionChangedErrorDetails(lView, bindingIndex, oldValueToCompare, value);
-                throwErrorIfNoChangesMode(oldValue === NO_CHANGE, details.oldValue, details.newValue, details.propName);
-            }
-            // There was a change, but the `devModeEqual` decided that the change is exempt from an error.
-            // For this reason we exit as if no change. The early exit is needed to prevent the changed
-            // value to be written into `LView` (If we would write the new value that we would not see it
-            // as change on next CD.)
-            return false;
-        }
-        lView[bindingIndex] = value;
-        return true;
-    }
-}
-/** Updates 2 bindings if changed, then returns whether either was updated. */
-function bindingUpdated2(lView, bindingIndex, exp1, exp2) {
-    const different = bindingUpdated(lView, bindingIndex, exp1);
-    return bindingUpdated(lView, bindingIndex + 1, exp2) || different;
-}
-/** Updates 3 bindings if changed, then returns whether any was updated. */
-function bindingUpdated3(lView, bindingIndex, exp1, exp2, exp3) {
-    const different = bindingUpdated2(lView, bindingIndex, exp1, exp2);
-    return bindingUpdated(lView, bindingIndex + 2, exp3) || different;
-}
-/** Updates 4 bindings if changed, then returns whether any was updated. */
-function bindingUpdated4(lView, bindingIndex, exp1, exp2, exp3, exp4) {
-    const different = bindingUpdated2(lView, bindingIndex, exp1, exp2);
-    return bindingUpdated2(lView, bindingIndex + 2, exp3, exp4) || different;
-}
-
-/**
- * @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.io/license
- */
-/**
- * Updates the value of or removes a bound attribute on an Element.
- *
- * Used in the case of `[attr.title]="value"`
- *
- * @param name name The name of the attribute.
- * @param value value The attribute is removed when value is `null` or `undefined`.
- *                  Otherwise the attribute value is set to the stringified value.
- * @param sanitizer An optional function used to sanitize the value.
- * @param namespace Optional namespace to use when setting the attribute.
- *
- * @codeGenApi
- */
-function ɵɵattribute(name, value, sanitizer, namespace) {
-    const lView = getLView();
-    const bindingIndex = nextBindingIndex();
-    if (bindingUpdated(lView, bindingIndex, value)) {
-        const tView = getTView();
-        const tNode = getSelectedTNode();
-        elementAttributeInternal(tNode, lView, name, value, sanitizer, namespace);
-        ngDevMode && storePropertyBindingMetadata(tView.data, tNode, 'attr.' + name, bindingIndex);
-    }
-    return ɵɵattribute;
-}
-
-/**
- * @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.io/license
- */
-/**
- * Create interpolation bindings with a variable number of expressions.
- *
- * If there are 1 to 8 expressions `interpolation1()` to `interpolation8()` should be used instead.
- * Those are faster because there is no need to create an array of expressions and iterate over it.
- *
- * `values`:
- * - has static text at even indexes,
- * - has evaluated expressions at odd indexes.
- *
- * Returns the concatenated string when any of the arguments changes, `NO_CHANGE` otherwise.
- */
-function interpolationV(lView, values) {
-    ngDevMode && assertLessThan(2, values.length, 'should have at least 3 values');
-    ngDevMode && assertEqual(values.length % 2, 1, 'should have an odd number of values');
-    let isBindingUpdated = false;
-    let bindingIndex = getBindingIndex();
-    for (let i = 1; i < values.length; i += 2) {
-        // Check if bindings (odd indexes) have changed
-        isBindingUpdated = bindingUpdated(lView, bindingIndex++, values[i]) || isBindingUpdated;
-    }
-    setBindingIndex(bindingIndex);
-    if (!isBindingUpdated) {
-        return NO_CHANGE;
-    }
-    // Build the updated content
-    let content = values[0];
-    for (let i = 1; i < values.length; i += 2) {
-        content += renderStringify(values[i]) + values[i + 1];
-    }
-    return content;
-}
-/**
- * Creates an interpolation binding with 1 expression.
- *
- * @param prefix static value used for concatenation only.
- * @param v0 value checked for change.
- * @param suffix static value used for concatenation only.
- */
-function interpolation1(lView, prefix, v0, suffix) {
-    const different = bindingUpdated(lView, nextBindingIndex(), v0);
-    return different ? prefix + renderStringify(v0) + suffix : NO_CHANGE;
-}
-/**
- * Creates an interpolation binding with 2 expressions.
- */
-function interpolation2(lView, prefix, v0, i0, v1, suffix) {
-    const bindingIndex = getBindingIndex();
-    const different = bindingUpdated2(lView, bindingIndex, v0, v1);
-    incrementBindingIndex(2);
-    return different ? prefix + renderStringify(v0) + i0 + renderStringify(v1) + suffix : NO_CHANGE;
-}
-/**
- * Creates an interpolation binding with 3 expressions.
- */
-function interpolation3(lView, prefix, v0, i0, v1, i1, v2, suffix) {
-    const bindingIndex = getBindingIndex();
-    const different = bindingUpdated3(lView, bindingIndex, v0, v1, v2);
-    incrementBindingIndex(3);
-    return different ?
-        prefix + renderStringify(v0) + i0 + renderStringify(v1) + i1 + renderStringify(v2) + suffix :
-        NO_CHANGE;
-}
-/**
- * Create an interpolation binding with 4 expressions.
- */
-function interpolation4(lView, prefix, v0, i0, v1, i1, v2, i2, v3, suffix) {
-    const bindingIndex = getBindingIndex();
-    const different = bindingUpdated4(lView, bindingIndex, v0, v1, v2, v3);
-    incrementBindingIndex(4);
-    return different ? prefix + renderStringify(v0) + i0 + renderStringify(v1) + i1 +
-        renderStringify(v2) + i2 + renderStringify(v3) + suffix :
-        NO_CHANGE;
-}
-/**
- * Creates an interpolation binding with 5 expressions.
- */
-function interpolation5(lView, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, suffix) {
-    const bindingIndex = getBindingIndex();
-    let different = bindingUpdated4(lView, bindingIndex, v0, v1, v2, v3);
-    different = bindingUpdated(lView, bindingIndex + 4, v4) || different;
-    incrementBindingIndex(5);
-    return different ? prefix + renderStringify(v0) + i0 + renderStringify(v1) + i1 +
-        renderStringify(v2) + i2 + renderStringify(v3) + i3 + renderStringify(v4) + suffix :
-        NO_CHANGE;
-}
-/**
- * Creates an interpolation binding with 6 expressions.
- */
-function interpolation6(lView, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, suffix) {
-    const bindingIndex = getBindingIndex();
-    let different = bindingUpdated4(lView, bindingIndex, v0, v1, v2, v3);
-    different = bindingUpdated2(lView, bindingIndex + 4, v4, v5) || different;
-    incrementBindingIndex(6);
-    return different ?
-        prefix + renderStringify(v0) + i0 + renderStringify(v1) + i1 + renderStringify(v2) + i2 +
-            renderStringify(v3) + i3 + renderStringify(v4) + i4 + renderStringify(v5) + suffix :
-        NO_CHANGE;
-}
-/**
- * Creates an interpolation binding with 7 expressions.
- */
-function interpolation7(lView, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, i5, v6, suffix) {
-    const bindingIndex = getBindingIndex();
-    let different = bindingUpdated4(lView, bindingIndex, v0, v1, v2, v3);
-    different = bindingUpdated3(lView, bindingIndex + 4, v4, v5, v6) || different;
-    incrementBindingIndex(7);
-    return different ? prefix + renderStringify(v0) + i0 + renderStringify(v1) + i1 +
-        renderStringify(v2) + i2 + renderStringify(v3) + i3 + renderStringify(v4) + i4 +
-        renderStringify(v5) + i5 + renderStringify(v6) + suffix :
-        NO_CHANGE;
-}
-/**
- * Creates an interpolation binding with 8 expressions.
- */
-function interpolation8(lView, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, i5, v6, i6, v7, suffix) {
-    const bindingIndex = getBindingIndex();
-    let different = bindingUpdated4(lView, bindingIndex, v0, v1, v2, v3);
-    different = bindingUpdated4(lView, bindingIndex + 4, v4, v5, v6, v7) || different;
-    incrementBindingIndex(8);
-    return different ? prefix + renderStringify(v0) + i0 + renderStringify(v1) + i1 +
-        renderStringify(v2) + i2 + renderStringify(v3) + i3 + renderStringify(v4) + i4 +
-        renderStringify(v5) + i5 + renderStringify(v6) + i6 + renderStringify(v7) + suffix :
-        NO_CHANGE;
-}
-
-/**
- *
- * Update an interpolated attribute on an element with single bound value surrounded by text.
- *
- * Used when the value passed to a property has 1 interpolated value in it:
+ * Used when the value passed to a property has 5 interpolated values in it:
  *
  * ```html
- * <div attr.title="prefix{{v0}}suffix"></div>
+ * <div attr.title="prefix{{v0}}-{{v1}}-{{v2}}-{{v3}}-{{v4}}suffix"></div>
  * ```
  *
  * Its compiled representation is::
  *
  * ```ts
- * ɵɵattributeInterpolate1('title', 'prefix', v0, 'suffix');
+ * ɵɵattributeInterpolate5(
+ * 'title', 'prefix', v0, '-', v1, '-', v2, '-', v3, '-', v4, 'suffix');
  * ```
  *
  * @param attrName The name of the attribute to update
  * @param prefix Static value used for concatenation only.
  * @param v0 Value checked for change.
+ * @param i0 Static value used for concatenation only.
+ * @param v1 Value checked for change.
+ * @param i1 Static value used for concatenation only.
+ * @param v2 Value checked for change.
+ * @param i2 Static value used for concatenation only.
+ * @param v3 Value checked for change.
+ * @param i3 Static value used for concatenation only.
+ * @param v4 Value checked for change.
  * @param suffix Static value used for concatenation only.
  * @param sanitizer An optional sanitizer function
  * @returns itself, so that it may be chained.
  * @codeGenApi
  */
-function ɵɵattributeInterpolate1(attrName, prefix, v0, suffix, sanitizer, namespace) {
+function ɵɵattributeInterpolate5(attrName, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, suffix, sanitizer, namespace) {
     const lView = getLView();
-    const interpolatedValue = interpolation1(lView, prefix, v0, suffix);
+    const interpolatedValue = interpolation5(lView, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, suffix);
     if (interpolatedValue !== NO_CHANGE) {
         const tNode = getSelectedTNode();
         elementAttributeInternal(tNode, lView, attrName, interpolatedValue, sanitizer, namespace);
         ngDevMode &&
-            storePropertyBindingMetadata(getTView().data, tNode, 'attr.' + attrName, getBindingIndex() - 1, prefix, suffix);
+            storePropertyBindingMetadata(getTView().data, tNode, 'attr.' + attrName, getBindingIndex() - 5, prefix, i0, i1, i2, i3, suffix);
     }
-    return ɵɵattributeInterpolate1;
+    return ɵɵattributeInterpolate5;
 }
 /**
  *
- * Update an interpolated attribute on an element with 2 bound values surrounded by text.
+ * Update an interpolated attribute on an element with 6 bound values surrounded by text.
  *
- * Used when the value passed to a property has 2 interpolated values in it:
+ * Used when the value passed to a property has 6 interpolated values in it:
  *
  * ```html
- * <div attr.title="prefix{{v0}}-{{v1}}suffix"></div>
+ * <div attr.title="prefix{{v0}}-{{v1}}-{{v2}}-{{v3}}-{{v4}}-{{v5}}suffix"></div>
  * ```
  *
  * Its compiled representation is::
  *
  * ```ts
- * ɵɵattributeInterpolate2('title', 'prefix', v0, '-', v1, 'suffix');
- * ```
- *
- * @param attrName The name of the attribute to update
- * @param prefix Static value used for concatenation only.
- * @param v0 Value checked for change.
- * @param i0 Static value used for concatenation only.
- * @param v1 Value checked for change.
- * @param suffix Static value used for concatenation only.
- * @param sanitizer An optional sanitizer function
- * @returns itself, so that it may be chained.
- * @codeGenApi
- */
-function ɵɵattributeInterpolate2(attrName, prefix, v0, i0, v1, suffix, sanitizer, namespace) {
-    const lView = getLView();
-    const interpolatedValue = interpolation2(lView, prefix, v0, i0, v1, suffix);
-    if (interpolatedValue !== NO_CHANGE) {
-        const tNode = getSelectedTNode();
-        elementAttributeInternal(tNode, lView, attrName, interpolatedValue, sanitizer, namespace);
-        ngDevMode &&
-            storePropertyBindingMetadata(getTView().data, tNode, 'attr.' + attrName, getBindingIndex() - 2, prefix, i0, suffix);
-    }
-    return ɵɵattributeInterpolate2;
-}
-/**
- *
- * Update an interpolated attribute on an element with 3 bound values surrounded by text.
- *
- * Used when the value passed to a property has 3 interpolated values in it:
- *
- * ```html
- * <div attr.title="prefix{{v0}}-{{v1}}-{{v2}}suffix"></div>
- * ```
- *
- * Its compiled representation is::
- *
- * ```ts
- * ɵɵattributeInterpolate3(
- * 'title', 'prefix', v0, '-', v1, '-', v2, 'suffix');
- * ```
- *
- * @param attrName The name of the attribute to update
- * @param prefix Static value used for concatenation only.
- * @param v0 Value checked for change.
- * @param i0 Static value used for concatenation only.
- * @param v1 Value checked for change.
- * @param i1 Static value used for concatenation only.
- * @param v2 Value checked for change.
- * @param suffix Static value used for concatenation only.
- * @param sanitizer An optional sanitizer function
- * @returns itself, so that it may be chained.
- * @codeGenApi
- */
-function ɵɵattributeInterpolate3(attrName, prefix, v0, i0, v1, i1, v2, suffix, sanitizer, namespace) {
-    const lView = getLView();
-    const interpolatedValue = interpolation3(lView, prefix, v0, i0, v1, i1, v2, suffix);
-    if (interpolatedValue !== NO_CHANGE) {
-        const tNode = getSelectedTNode();
-        elementAttributeInternal(tNode, lView, attrName, interpolatedValue, sanitizer, namespace);
-        ngDevMode &&
-            storePropertyBindingMetadata(getTView().data, tNode, 'attr.' + attrName, getBindingIndex() - 3, prefix, i0, i1, suffix);
-    }
-    return ɵɵattributeInterpolate3;
-}
-/**
- *
- * Update an interpolated attribute on an element with 4 bound values surrounded by text.
- *
- * Used when the value passed to a property has 4 interpolated values in it:
- *
- * ```html
- * <div attr.title="prefix{{v0}}-{{v1}}-{{v2}}-{{v3}}suffix"></div>
- * ```
- *
- * Its compiled representation is::
- *
- * ```ts
- * ɵɵattributeInterpolate4(
- * 'title', 'prefix', v0, '-', v1, '-', v2, '-', v3, 'suffix');
- * ```
- *
- * @param attrName The name of the attribute to update
- * @param prefix Static value used for concatenation only.
- * @param v0 Value checked for change.
- * @param i0 Static value used for concatenation only.
- * @param v1 Value checked for change.
- * @param i1 Static value used for concatenation only.
- * @param v2 Value checked for change.
- * @param i2 Static value used for concatenation only.
- * @param v3 Value checked for change.
- * @param suffix Static value used for concatenation only.
- * @param sanitizer An optional sanitizer function
- * @returns itself, so that it may be chained.
- * @codeGenApi
- */
-function ɵɵattributeInterpolate4(attrName, prefix, v0, i0, v1, i1, v2, i2, v3, suffix, sanitizer, namespace) {
-    const lView = getLView();
-    const interpolatedValue = interpolation4(lView, prefix, v0, i0, v1, i1, v2, i2, v3, suffix);
-    if (interpolatedValue !== NO_CHANGE) {
-        const tNode = getSelectedTNode();
-        elementAttributeInternal(tNode, lView, attrName, interpolatedValue, sanitizer, namespace);
-        ngDevMode &&
-            storePropertyBindingMetadata(getTView().data, tNode, 'attr.' + attrName, getBindingIndex() - 4, prefix, i0, i1, i2, suffix);
-    }
-    return ɵɵattributeInterpolate4;
-}
-/**
- *
- * Update an interpolated attribute on an element with 5 bound values surrounded by text.
- *
- * Used when the value passed to a property has 5 interpolated values in it:
- *
- * ```html
- * <div attr.title="prefix{{v0}}-{{v1}}-{{v2}}-{{v3}}-{{v4}}suffix"></div>
- * ```
- *
- * Its compiled representation is::
- *
- * ```ts
- * ɵɵattributeInterpolate5(
- * 'title', 'prefix', v0, '-', v1, '-', v2, '-', v3, '-', v4, 'suffix');
- * ```
- *
- * @param attrName The name of the attribute to update
- * @param prefix Static value used for concatenation only.
- * @param v0 Value checked for change.
- * @param i0 Static value used for concatenation only.
- * @param v1 Value checked for change.
- * @param i1 Static value used for concatenation only.
- * @param v2 Value checked for change.
- * @param i2 Static value used for concatenation only.
- * @param v3 Value checked for change.
- * @param i3 Static value used for concatenation only.
- * @param v4 Value checked for change.
- * @param suffix Static value used for concatenation only.
- * @param sanitizer An optional sanitizer function
- * @returns itself, so that it may be chained.
- * @codeGenApi
- */
-function ɵɵattributeInterpolate5(attrName, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, suffix, sanitizer, namespace) {
-    const lView = getLView();
-    const interpolatedValue = interpolation5(lView, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, suffix);
-    if (interpolatedValue !== NO_CHANGE) {
-        const tNode = getSelectedTNode();
-        elementAttributeInternal(tNode, lView, attrName, interpolatedValue, sanitizer, namespace);
-        ngDevMode &&
-            storePropertyBindingMetadata(getTView().data, tNode, 'attr.' + attrName, getBindingIndex() - 5, prefix, i0, i1, i2, i3, suffix);
-    }
-    return ɵɵattributeInterpolate5;
-}
-/**
- *
- * Update an interpolated attribute on an element with 6 bound values surrounded by text.
- *
- * Used when the value passed to a property has 6 interpolated values in it:
- *
- * ```html
- * <div attr.title="prefix{{v0}}-{{v1}}-{{v2}}-{{v3}}-{{v4}}-{{v5}}suffix"></div>
- * ```
- *
- * Its compiled representation is::
- *
- * ```ts
- * ɵɵattributeInterpolate6(
- *    'title', 'prefix', v0, '-', v1, '-', v2, '-', v3, '-', v4, '-', v5, 'suffix');
+ * ɵɵattributeInterpolate6(
+ *    'title', 'prefix', v0, '-', v1, '-', v2, '-', v3, '-', v4, '-', v5, 'suffix');
  * ```
  *
  * @param attrName The name of the attribute to update
@@ -15017,6 +14307,57 @@ function ɵɵattributeInterpolateV(attrName, values, sanitizer, namespace) {
     return ɵɵattributeInterpolateV;
 }
 
+/**
+ * @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.io/license
+ */
+/**
+ * Synchronously perform change detection on a component (and possibly its sub-components).
+ *
+ * This function triggers change detection in a synchronous way on a component.
+ *
+ * @param component The component which the change detection should be performed on.
+ */
+function detectChanges(component) {
+    const view = getComponentViewByInstance(component);
+    detectChangesInternal(view[TVIEW], view, component);
+}
+/**
+ * Marks the component as dirty (needing change detection). Marking a component dirty will
+ * schedule a change detection on it at some point in the future.
+ *
+ * Marking an already dirty component as dirty won't do anything. Only one outstanding change
+ * detection can be scheduled per component tree.
+ *
+ * @param component Component to mark as dirty.
+ */
+function markDirty(component) {
+    ngDevMode && assertDefined(component, 'component');
+    const rootView = markViewDirty(getComponentViewByInstance(component));
+    ngDevMode && assertDefined(rootView[CONTEXT], 'rootContext should be defined');
+    scheduleTick(rootView[CONTEXT], 1 /* RootContextFlags.DetectChanges */);
+}
+/**
+ * Used to perform change detection on the whole application.
+ *
+ * This is equivalent to `detectChanges`, but invoked on root component. Additionally, `tick`
+ * executes lifecycle hooks and conditionally checks components based on their
+ * `ChangeDetectionStrategy` and dirtiness.
+ *
+ * The preferred way to trigger change detection is to call `markDirty`. `markDirty` internally
+ * schedules `tick` using a scheduler in order to coalesce multiple `markDirty` calls into a
+ * single change detection run. By default, the scheduler is `requestAnimationFrame`, but can
+ * be changed when calling `renderComponent` and providing the `scheduler` option.
+ */
+function tick(component) {
+    const rootView = getRootView(component);
+    const rootContext = rootView[CONTEXT];
+    tickRootContext(rootContext);
+}
+
 /**
  * @license
  * Copyright Google LLC All Rights Reserved.
@@ -15561,51 +14902,42 @@ function listenerInternal(tView, lView, renderer, tNode, eventName, listenerFn,
             tNode.index;
         // In order to match current behavior, native DOM event listeners must be added for all
         // events (including outputs).
-        if (isProceduralRenderer(renderer)) {
-            // There might be cases where multiple directives on the same element try to register an event
-            // handler function for the same event. In this situation we want to avoid registration of
-            // several native listeners as each registration would be intercepted by NgZone and
-            // trigger change detection. This would mean that a single user action would result in several
-            // change detections being invoked. To avoid this situation we want to have only one call to
-            // native handler registration (for the same element and same type of event).
-            //
-            // In order to have just one native event handler in presence of multiple handler functions,
-            // we just register a first handler function as a native event listener and then chain
-            // (coalesce) other handler functions on top of the first native handler function.
-            let existingListener = null;
-            // Please note that the coalescing described here doesn't happen for events specifying an
-            // alternative target (ex. (document:click)) - this is to keep backward compatibility with the
-            // view engine.
-            // Also, we don't have to search for existing listeners is there are no directives
-            // matching on a given node as we can't register multiple event handlers for the same event in
-            // a template (this would mean having duplicate attributes).
-            if (!eventTargetResolver && isTNodeDirectiveHost) {
-                existingListener = findExistingListener(tView, lView, eventName, tNode.index);
-            }
-            if (existingListener !== null) {
-                // Attach a new listener to coalesced listeners list, maintaining the order in which
-                // listeners are registered. For performance reasons, we keep a reference to the last
-                // listener in that list (in `__ngLastListenerFn__` field), so we can avoid going through
-                // the entire set each time we need to add a new listener.
-                const lastListenerFn = existingListener.__ngLastListenerFn__ || existingListener;
-                lastListenerFn.__ngNextListenerFn__ = listenerFn;
-                existingListener.__ngLastListenerFn__ = listenerFn;
-                processOutputs = false;
-            }
-            else {
-                listenerFn = wrapListener(tNode, lView, context, listenerFn, false /** preventDefault */);
-                const cleanupFn = renderer.listen(target, eventName, listenerFn);
-                ngDevMode && ngDevMode.rendererAddEventListener++;
-                lCleanup.push(listenerFn, cleanupFn);
-                tCleanup && tCleanup.push(eventName, idxOrTargetGetter, lCleanupIndex, lCleanupIndex + 1);
-            }
+        // There might be cases where multiple directives on the same element try to register an event
+        // handler function for the same event. In this situation we want to avoid registration of
+        // several native listeners as each registration would be intercepted by NgZone and
+        // trigger change detection. This would mean that a single user action would result in several
+        // change detections being invoked. To avoid this situation we want to have only one call to
+        // native handler registration (for the same element and same type of event).
+        //
+        // In order to have just one native event handler in presence of multiple handler functions,
+        // we just register a first handler function as a native event listener and then chain
+        // (coalesce) other handler functions on top of the first native handler function.
+        let existingListener = null;
+        // Please note that the coalescing described here doesn't happen for events specifying an
+        // alternative target (ex. (document:click)) - this is to keep backward compatibility with the
+        // view engine.
+        // Also, we don't have to search for existing listeners is there are no directives
+        // matching on a given node as we can't register multiple event handlers for the same event in
+        // a template (this would mean having duplicate attributes).
+        if (!eventTargetResolver && isTNodeDirectiveHost) {
+            existingListener = findExistingListener(tView, lView, eventName, tNode.index);
+        }
+        if (existingListener !== null) {
+            // Attach a new listener to coalesced listeners list, maintaining the order in which
+            // listeners are registered. For performance reasons, we keep a reference to the last
+            // listener in that list (in `__ngLastListenerFn__` field), so we can avoid going through
+            // the entire set each time we need to add a new listener.
+            const lastListenerFn = existingListener.__ngLastListenerFn__ || existingListener;
+            lastListenerFn.__ngNextListenerFn__ = listenerFn;
+            existingListener.__ngLastListenerFn__ = listenerFn;
+            processOutputs = false;
         }
         else {
-            listenerFn = wrapListener(tNode, lView, context, listenerFn, true /** preventDefault */);
-            target.addEventListener(eventName, listenerFn, useCapture);
+            listenerFn = wrapListener(tNode, lView, context, listenerFn, false /** preventDefault */);
+            const cleanupFn = renderer.listen(target, eventName, listenerFn);
             ngDevMode && ngDevMode.rendererAddEventListener++;
-            lCleanup.push(listenerFn);
-            tCleanup && tCleanup.push(eventName, idxOrTargetGetter, lCleanupIndex, useCapture);
+            lCleanup.push(listenerFn, cleanupFn);
+            tCleanup && tCleanup.push(eventName, idxOrTargetGetter, lCleanupIndex, lCleanupIndex + 1);
         }
     }
     else {
@@ -17679,7 +17011,7 @@ function findStylingValue(tData, tNode, lView, prop, index, isClassBased) {
             valueAtLViewIndex = isStylingMap ? EMPTY_ARRAY : undefined;
         }
         let currentValue = isStylingMap ? keyValueArrayGet(valueAtLViewIndex, prop) :
-            key === prop ? valueAtLViewIndex : undefined;
+            (key === prop ? valueAtLViewIndex : undefined);
         if (containsStatics && !isStylingValuePresent(currentValue)) {
             currentValue = keyValueArrayGet(rawKey, prop);
         }
@@ -21532,7 +20864,7 @@ function noComponentFactoryError(component) {
     return error;
 }
 const ERROR_COMPONENT = 'ngComponent';
-function getComponent(error) {
+function getComponent$1(error) {
     return error[ERROR_COMPONENT];
 }
 class _NullComponentFactoryResolver {
@@ -21716,14 +21048,6 @@ class Renderer2 {
  * @nocollapse
  */
 Renderer2.__NG_ELEMENT_ID__ = () => injectRenderer2();
-/** Returns a Renderer2 (or throws when application was bootstrapped with Renderer3) */
-function getOrCreateRenderer2(lView) {
-    const renderer = lView[RENDERER];
-    if (ngDevMode && !isProceduralRenderer(renderer)) {
-        throw new Error('Cannot inject Renderer2 when the application uses Renderer3!');
-    }
-    return renderer;
-}
 /** Injects a Renderer2 for the current component. */
 function injectRenderer2() {
     // We need the Renderer to be based on the component that it's being injected into, however since
@@ -21731,7 +21055,7 @@ function injectRenderer2() {
     const lView = getLView();
     const tNode = getCurrentTNode();
     const nodeAtIndex = getComponentLViewByIndex(tNode.index, lView);
-    return getOrCreateRenderer2(isLView(nodeAtIndex) ? nodeAtIndex : lView);
+    return (isLView(nodeAtIndex) ? nodeAtIndex : lView)[RENDERER];
 }
 
 /**
@@ -21778,7 +21102,7 @@ class Version {
 /**
  * @publicApi
  */
-const VERSION = new Version('14.1.0-next.3');
+const VERSION = new Version('14.1.0-next.4');
 
 /**
  * @license
@@ -22157,375 +21481,811 @@ class RootViewRef extends ViewRef$1 {
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-class ComponentFactoryResolver extends ComponentFactoryResolver$1 {
-    /**
-     * @param ngModule The NgModuleRef to which all resolved factories are bound.
-     */
-    constructor(ngModule) {
-        super();
-        this.ngModule = ngModule;
-    }
-    resolveComponentFactory(component) {
-        ngDevMode && assertComponentType(component);
-        const componentDef = getComponentDef(component);
-        return new ComponentFactory(componentDef, this.ngModule);
-    }
-}
-function toRefArray(map) {
-    const array = [];
-    for (let nonMinified in map) {
-        if (map.hasOwnProperty(nonMinified)) {
-            const minified = map[nonMinified];
-            array.push({ propName: minified, templateName: nonMinified });
+class ComponentFactoryResolver extends ComponentFactoryResolver$1 {
+    /**
+     * @param ngModule The NgModuleRef to which all resolved factories are bound.
+     */
+    constructor(ngModule) {
+        super();
+        this.ngModule = ngModule;
+    }
+    resolveComponentFactory(component) {
+        ngDevMode && assertComponentType(component);
+        const componentDef = getComponentDef(component);
+        return new ComponentFactory(componentDef, this.ngModule);
+    }
+}
+function toRefArray(map) {
+    const array = [];
+    for (let nonMinified in map) {
+        if (map.hasOwnProperty(nonMinified)) {
+            const minified = map[nonMinified];
+            array.push({ propName: minified, templateName: nonMinified });
+        }
+    }
+    return array;
+}
+function getNamespace(elementName) {
+    const name = elementName.toLowerCase();
+    return name === 'svg' ? SVG_NAMESPACE : (name === 'math' ? MATH_ML_NAMESPACE : null);
+}
+/**
+ * Injector that looks up a value using a specific injector, before falling back to the module
+ * injector. Used primarily when creating components or embedded views dynamically.
+ */
+class ChainedInjector {
+    constructor(injector, parentInjector) {
+        this.injector = injector;
+        this.parentInjector = parentInjector;
+    }
+    get(token, notFoundValue, flags) {
+        const value = this.injector.get(token, NOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR, flags);
+        if (value !== NOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR ||
+            notFoundValue === NOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR) {
+            // Return the value from the root element injector when
+            // - it provides it
+            //   (value !== NOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR)
+            // - the module injector should not be checked
+            //   (notFoundValue === NOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR)
+            return value;
+        }
+        return this.parentInjector.get(token, notFoundValue, flags);
+    }
+}
+/**
+ * Render3 implementation of {@link viewEngine_ComponentFactory}.
+ */
+class ComponentFactory extends ComponentFactory$1 {
+    /**
+     * @param componentDef The component definition.
+     * @param ngModule The NgModuleRef to which the factory is bound.
+     */
+    constructor(componentDef, ngModule) {
+        super();
+        this.componentDef = componentDef;
+        this.ngModule = ngModule;
+        this.componentType = componentDef.type;
+        this.selector = stringifyCSSSelectorList(componentDef.selectors);
+        this.ngContentSelectors =
+            componentDef.ngContentSelectors ? componentDef.ngContentSelectors : [];
+        this.isBoundToModule = !!ngModule;
+    }
+    get inputs() {
+        return toRefArray(this.componentDef.inputs);
+    }
+    get outputs() {
+        return toRefArray(this.componentDef.outputs);
+    }
+    create(injector, projectableNodes, rootSelectorOrNode, environmentInjector) {
+        environmentInjector = environmentInjector || this.ngModule;
+        let realEnvironmentInjector = environmentInjector instanceof EnvironmentInjector ?
+            environmentInjector :
+            environmentInjector?.injector;
+        if (realEnvironmentInjector && this.componentDef.getStandaloneInjector !== null) {
+            realEnvironmentInjector = this.componentDef.getStandaloneInjector(realEnvironmentInjector) ||
+                realEnvironmentInjector;
+        }
+        const rootViewInjector = realEnvironmentInjector ? new ChainedInjector(injector, realEnvironmentInjector) : injector;
+        const rendererFactory = rootViewInjector.get(RendererFactory2, null);
+        if (rendererFactory === null) {
+            throw new RuntimeError(407 /* RuntimeErrorCode.RENDERER_NOT_FOUND */, ngDevMode &&
+                'Angular was not able to inject a renderer (RendererFactory2). ' +
+                    'Likely this is due to a broken DI hierarchy. ' +
+                    'Make sure that any injector used to create this component has a correct parent.');
+        }
+        const sanitizer = rootViewInjector.get(Sanitizer, null);
+        const hostRenderer = rendererFactory.createRenderer(null, this.componentDef);
+        // Determine a tag name used for creating host elements when this component is created
+        // dynamically. Default to 'div' if this component did not specify any tag name in its selector.
+        const elementName = this.componentDef.selectors[0][0] || 'div';
+        const hostRNode = rootSelectorOrNode ?
+            locateHostElement(hostRenderer, rootSelectorOrNode, this.componentDef.encapsulation) :
+            createElementNode(rendererFactory.createRenderer(null, this.componentDef), elementName, getNamespace(elementName));
+        const rootFlags = this.componentDef.onPush ? 32 /* LViewFlags.Dirty */ | 256 /* LViewFlags.IsRoot */ :
+            16 /* LViewFlags.CheckAlways */ | 256 /* LViewFlags.IsRoot */;
+        const rootContext = createRootContext();
+        // Create the root view. Uses empty TView and ContentTemplate.
+        const rootTView = createTView(0 /* TViewType.Root */, null, null, 1, 0, null, null, null, null, null);
+        const rootLView = createLView(null, rootTView, rootContext, rootFlags, null, null, rendererFactory, hostRenderer, sanitizer, rootViewInjector, null);
+        // rootView is the parent when bootstrapping
+        // TODO(misko): it looks like we are entering view here but we don't really need to as
+        // `renderView` does that. However as the code is written it is needed because
+        // `createRootComponentView` and `createRootComponent` both read global state. Fixing those
+        // issues would allow us to drop this.
+        enterView(rootLView);
+        let component;
+        let tElementNode;
+        try {
+            const componentView = createRootComponentView(hostRNode, this.componentDef, rootLView, rendererFactory, hostRenderer);
+            if (hostRNode) {
+                if (rootSelectorOrNode) {
+                    setUpAttributes(hostRenderer, hostRNode, ['ng-version', VERSION.full]);
+                }
+                else {
+                    // If host element is created as a part of this function call (i.e. `rootSelectorOrNode`
+                    // is not defined), also apply attributes and classes extracted from component selector.
+                    // Extract attributes and classes from the first selector only to match VE behavior.
+                    const { attrs, classes } = extractAttrsAndClassesFromSelector(this.componentDef.selectors[0]);
+                    if (attrs) {
+                        setUpAttributes(hostRenderer, hostRNode, attrs);
+                    }
+                    if (classes && classes.length > 0) {
+                        writeDirectClass(hostRenderer, hostRNode, classes.join(' '));
+                    }
+                }
+            }
+            tElementNode = getTNode(rootTView, HEADER_OFFSET);
+            if (projectableNodes !== undefined) {
+                const projection = tElementNode.projection = [];
+                for (let i = 0; i < this.ngContentSelectors.length; i++) {
+                    const nodesforSlot = projectableNodes[i];
+                    // Projectable nodes can be passed as array of arrays or an array of iterables (ngUpgrade
+                    // case). Here we do normalize passed data structure to be an array of arrays to avoid
+                    // complex checks down the line.
+                    // We also normalize the length of the passed in projectable nodes (to match the number of
+                    // <ng-container> slots defined by a component).
+                    projection.push(nodesforSlot != null ? Array.from(nodesforSlot) : null);
+                }
+            }
+            // TODO: should LifecycleHooksFeature and other host features be generated by the compiler and
+            // executed here?
+            // Angular 5 reference: https://stackblitz.com/edit/lifecycle-hooks-vcref
+            component = createRootComponent(componentView, this.componentDef, rootLView, rootContext, [LifecycleHooksFeature]);
+            renderView(rootTView, rootLView, null);
+        }
+        finally {
+            leaveView();
+        }
+        return new ComponentRef(this.componentType, component, createElementRef(tElementNode, rootLView), rootLView, tElementNode);
+    }
+}
+const componentFactoryResolver = new ComponentFactoryResolver();
+/**
+ * Creates a ComponentFactoryResolver and stores it on the injector. Or, if the
+ * ComponentFactoryResolver
+ * already exists, retrieves the existing ComponentFactoryResolver.
+ *
+ * @returns The ComponentFactoryResolver instance to use
+ */
+function injectComponentFactoryResolver() {
+    return componentFactoryResolver;
+}
+/**
+ * Represents an instance of a Component created via a {@link ComponentFactory}.
+ *
+ * `ComponentRef` provides access to the Component Instance as well other objects related to this
+ * Component Instance and allows you to destroy the Component Instance via the {@link #destroy}
+ * method.
+ *
+ */
+class ComponentRef extends ComponentRef$1 {
+    constructor(componentType, instance, location, _rootLView, _tNode) {
+        super();
+        this.location = location;
+        this._rootLView = _rootLView;
+        this._tNode = _tNode;
+        this.instance = instance;
+        this.hostView = this.changeDetectorRef = new RootViewRef(_rootLView);
+        this.componentType = componentType;
+    }
+    setInput(name, value) {
+        const inputData = this._tNode.inputs;
+        let dataValue;
+        if (inputData !== null && (dataValue = inputData[name])) {
+            const lView = this._rootLView;
+            setInputsForProperty(lView[TVIEW], lView, dataValue, name, value);
+            markDirtyIfOnPush(lView, this._tNode.index);
+        }
+        else {
+            if (ngDevMode) {
+                const cmpNameForError = stringifyForError(this.componentType);
+                let message = `Can't set value of the '${name}' input on the '${cmpNameForError}' component. `;
+                message += `Make sure that the '${name}' property is annotated with @Input() or a mapped @Input('${name}') exists.`;
+                reportUnknownPropertyError(message);
+            }
+        }
+    }
+    get injector() {
+        return new NodeInjector(this._tNode, this._rootLView);
+    }
+    destroy() {
+        this.hostView.destroy();
+    }
+    onDestroy(callback) {
+        this.hostView.onDestroy(callback);
+    }
+}
+
+/**
+ * @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.io/license
+ */
+/**
+ * Returns a new NgModuleRef instance based on the NgModule class and parent injector provided.
+ * @param ngModule NgModule class.
+ * @param parentInjector Optional injector instance to use as a parent for the module injector. If
+ *     not provided, `NullInjector` will be used instead.
+ * @publicApi
+ */
+function createNgModuleRef(ngModule, parentInjector) {
+    return new NgModuleRef(ngModule, parentInjector ?? null);
+}
+class NgModuleRef extends NgModuleRef$1 {
+    constructor(ngModuleType, _parent) {
+        super();
+        this._parent = _parent;
+        // tslint:disable-next-line:require-internal-with-underscore
+        this._bootstrapComponents = [];
+        this.injector = this;
+        this.destroyCbs = [];
+        // When bootstrapping a module we have a dependency graph that looks like this:
+        // ApplicationRef -> ComponentFactoryResolver -> NgModuleRef. The problem is that if the
+        // module being resolved tries to inject the ComponentFactoryResolver, it'll create a
+        // circular dependency which will result in a runtime error, because the injector doesn't
+        // exist yet. We work around the issue by creating the ComponentFactoryResolver ourselves
+        // and providing it, rather than letting the injector resolve it.
+        this.componentFactoryResolver = new ComponentFactoryResolver(this);
+        const ngModuleDef = getNgModuleDef(ngModuleType);
+        ngDevMode &&
+            assertDefined(ngModuleDef, `NgModule '${stringify(ngModuleType)}' is not a subtype of 'NgModuleType'.`);
+        this._bootstrapComponents = maybeUnwrapFn(ngModuleDef.bootstrap);
+        this._r3Injector = createInjectorWithoutInjectorInstances(ngModuleType, _parent, [
+            { provide: NgModuleRef$1, useValue: this }, {
+                provide: ComponentFactoryResolver$1,
+                useValue: this.componentFactoryResolver
+            }
+        ], stringify(ngModuleType), new Set(['environment']));
+        // We need to resolve the injector types separately from the injector creation, because
+        // the module might be trying to use this ref in its constructor for DI which will cause a
+        // circular error that will eventually error out, because the injector isn't created yet.
+        this._r3Injector.resolveInjectorInitializers();
+        this.instance = this.get(ngModuleType);
+    }
+    get(token, notFoundValue = Injector.THROW_IF_NOT_FOUND, injectFlags = InjectFlags.Default) {
+        if (token === Injector || token === NgModuleRef$1 || token === INJECTOR) {
+            return this;
+        }
+        return this._r3Injector.get(token, notFoundValue, injectFlags);
+    }
+    runInContext(fn) {
+        return this.injector.runInContext(fn);
+    }
+    destroy() {
+        ngDevMode && assertDefined(this.destroyCbs, 'NgModule already destroyed');
+        const injector = this._r3Injector;
+        !injector.destroyed && injector.destroy();
+        this.destroyCbs.forEach(fn => fn());
+        this.destroyCbs = null;
+    }
+    onDestroy(callback) {
+        ngDevMode && assertDefined(this.destroyCbs, 'NgModule already destroyed');
+        this.destroyCbs.push(callback);
+    }
+}
+class NgModuleFactory extends NgModuleFactory$1 {
+    constructor(moduleType) {
+        super();
+        this.moduleType = moduleType;
+    }
+    create(parentInjector) {
+        return new NgModuleRef(this.moduleType, parentInjector);
+    }
+}
+class EnvironmentNgModuleRefAdapter extends NgModuleRef$1 {
+    constructor(providers, parent, source) {
+        super();
+        this.componentFactoryResolver = new ComponentFactoryResolver(this);
+        this.instance = null;
+        const injector = new R3Injector([
+            ...providers,
+            { provide: NgModuleRef$1, useValue: this },
+            { provide: ComponentFactoryResolver$1, useValue: this.componentFactoryResolver },
+        ], parent || getNullInjector(), source, new Set(['environment']));
+        this.injector = injector;
+        injector.resolveInjectorInitializers();
+    }
+    destroy() {
+        this.injector.destroy();
+    }
+    onDestroy(callback) {
+        this.injector.onDestroy(callback);
+    }
+}
+/**
+ * Create a new environment injector.
+ *
+ * Learn more about environment injectors in
+ * [this guide](guide/standalone-components#environment-injectors).
+ *
+ * @param providers An array of providers.
+ * @param parent A parent environment injector.
+ * @param debugName An optional name for this injector instance, which will be used in error
+ *     messages.
+ *
+ * @publicApi
+ * @developerPreview
+ */
+function createEnvironmentInjector(providers, parent, debugName = null) {
+    const adapter = new EnvironmentNgModuleRefAdapter(providers, parent, debugName);
+    return adapter.injector;
+}
+
+/**
+ * @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.io/license
+ */
+/**
+ * A service used by the framework to create instances of standalone injectors. Those injectors are
+ * created on demand in case of dynamic component instantiation and contain ambient providers
+ * collected from the imports graph rooted at a given standalone component.
+ */
+class StandaloneService {
+    constructor(_injector) {
+        this._injector = _injector;
+        this.cachedInjectors = new Map();
+    }
+    getOrCreateStandaloneInjector(componentDef) {
+        if (!componentDef.standalone) {
+            return null;
+        }
+        if (!this.cachedInjectors.has(componentDef.id)) {
+            const providers = internalImportProvidersFrom(false, componentDef.type);
+            const standaloneInjector = providers.length > 0 ?
+                createEnvironmentInjector([providers], this._injector, `Standalone[${componentDef.type.name}]`) :
+                null;
+            this.cachedInjectors.set(componentDef.id, standaloneInjector);
+        }
+        return this.cachedInjectors.get(componentDef.id);
+    }
+    ngOnDestroy() {
+        try {
+            for (const injector of this.cachedInjectors.values()) {
+                if (injector !== null) {
+                    injector.destroy();
+                }
+            }
+        }
+        finally {
+            this.cachedInjectors.clear();
+        }
+    }
+}
+/** @nocollapse */
+StandaloneService.ɵprov = ɵɵdefineInjectable({
+    token: StandaloneService,
+    providedIn: 'environment',
+    factory: () => new StandaloneService(ɵɵinject(EnvironmentInjector)),
+});
+/**
+ * A feature that acts as a setup code for the {@link StandaloneService}.
+ *
+ * The most important responsaibility of this feature is to expose the "getStandaloneInjector"
+ * function (an entry points to a standalone injector creation) on a component definition object. We
+ * go through the features infrastructure to make sure that the standalone injector creation logic
+ * is tree-shakable and not included in applications that don't use standalone components.
+ *
+ * @codeGenApi
+ */
+function ɵɵStandaloneFeature(definition) {
+    definition.getStandaloneInjector = (parentInjector) => {
+        return parentInjector.get(StandaloneService).getOrCreateStandaloneInjector(definition);
+    };
+}
+
+/**
+ * @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.io/license
+ */
+/**
+ * Retrieves the component instance associated with a given DOM element.
+ *
+ * @usageNotes
+ * Given the following DOM structure:
+ *
+ * ```html
+ * <app-root>
+ *   <div>
+ *     <child-comp></child-comp>
+ *   </div>
+ * </app-root>
+ * ```
+ *
+ * Calling `getComponent` on `<child-comp>` will return the instance of `ChildComponent`
+ * associated with this DOM element.
+ *
+ * Calling the function on `<app-root>` will return the `MyApp` instance.
+ *
+ *
+ * @param element DOM element from which the component should be retrieved.
+ * @returns Component instance associated with the element or `null` if there
+ *    is no component associated with it.
+ *
+ * @publicApi
+ * @globalApi ng
+ */
+function getComponent(element) {
+    ngDevMode && assertDomElement(element);
+    const context = getLContext(element);
+    if (context === null)
+        return null;
+    if (context.component === undefined) {
+        const lView = context.lView;
+        if (lView === null) {
+            return null;
         }
+        context.component = getComponentAtNodeIndex(context.nodeIndex, lView);
     }
-    return array;
+    return context.component;
 }
-function getNamespace(elementName) {
-    const name = elementName.toLowerCase();
-    return name === 'svg' ? SVG_NAMESPACE : (name === 'math' ? MATH_ML_NAMESPACE : null);
+/**
+ * If inside an embedded view (e.g. `*ngIf` or `*ngFor`), retrieves the context of the embedded
+ * view that the element is part of. Otherwise retrieves the instance of the component whose view
+ * owns the element (in this case, the result is the same as calling `getOwningComponent`).
+ *
+ * @param element Element for which to get the surrounding component instance.
+ * @returns Instance of the component that is around the element or null if the element isn't
+ *    inside any component.
+ *
+ * @publicApi
+ * @globalApi ng
+ */
+function getContext(element) {
+    assertDomElement(element);
+    const context = getLContext(element);
+    const lView = context ? context.lView : null;
+    return lView === null ? null : lView[CONTEXT];
 }
 /**
- * Injector that looks up a value using a specific injector, before falling back to the module
- * injector. Used primarily when creating components or embedded views dynamically.
+ * Retrieves the component instance whose view contains the DOM element.
+ *
+ * For example, if `<child-comp>` is used in the template of `<app-comp>`
+ * (i.e. a `ViewChild` of `<app-comp>`), calling `getOwningComponent` on `<child-comp>`
+ * would return `<app-comp>`.
+ *
+ * @param elementOrDir DOM element, component or directive instance
+ *    for which to retrieve the root components.
+ * @returns Component instance whose view owns the DOM element or null if the element is not
+ *    part of a component view.
+ *
+ * @publicApi
+ * @globalApi ng
  */
-class ChainedInjector {
-    constructor(injector, parentInjector) {
-        this.injector = injector;
-        this.parentInjector = parentInjector;
-    }
-    get(token, notFoundValue, flags) {
-        const value = this.injector.get(token, NOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR, flags);
-        if (value !== NOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR ||
-            notFoundValue === NOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR) {
-            // Return the value from the root element injector when
-            // - it provides it
-            //   (value !== NOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR)
-            // - the module injector should not be checked
-            //   (notFoundValue === NOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR)
-            return value;
-        }
-        return this.parentInjector.get(token, notFoundValue, flags);
+function getOwningComponent(elementOrDir) {
+    const context = getLContext(elementOrDir);
+    let lView = context ? context.lView : null;
+    if (lView === null)
+        return null;
+    let parent;
+    while (lView[TVIEW].type === 2 /* TViewType.Embedded */ && (parent = getLViewParent(lView))) {
+        lView = parent;
     }
+    return lView[FLAGS] & 256 /* LViewFlags.IsRoot */ ? null : lView[CONTEXT];
 }
 /**
- * Render3 implementation of {@link viewEngine_ComponentFactory}.
+ * Retrieves all root components associated with a DOM element, directive or component instance.
+ * Root components are those which have been bootstrapped by Angular.
+ *
+ * @param elementOrDir DOM element, component or directive instance
+ *    for which to retrieve the root components.
+ * @returns Root components associated with the target object.
+ *
+ * @publicApi
+ * @globalApi ng
  */
-class ComponentFactory extends ComponentFactory$1 {
-    /**
-     * @param componentDef The component definition.
-     * @param ngModule The NgModuleRef to which the factory is bound.
-     */
-    constructor(componentDef, ngModule) {
-        super();
-        this.componentDef = componentDef;
-        this.ngModule = ngModule;
-        this.componentType = componentDef.type;
-        this.selector = stringifyCSSSelectorList(componentDef.selectors);
-        this.ngContentSelectors =
-            componentDef.ngContentSelectors ? componentDef.ngContentSelectors : [];
-        this.isBoundToModule = !!ngModule;
-    }
-    get inputs() {
-        return toRefArray(this.componentDef.inputs);
-    }
-    get outputs() {
-        return toRefArray(this.componentDef.outputs);
-    }
-    create(injector, projectableNodes, rootSelectorOrNode, environmentInjector) {
-        environmentInjector = environmentInjector || this.ngModule;
-        let realEnvironmentInjector = environmentInjector instanceof EnvironmentInjector ?
-            environmentInjector :
-            environmentInjector?.injector;
-        if (realEnvironmentInjector && this.componentDef.getStandaloneInjector !== null) {
-            realEnvironmentInjector = this.componentDef.getStandaloneInjector(realEnvironmentInjector) ||
-                realEnvironmentInjector;
-        }
-        const rootViewInjector = realEnvironmentInjector ? new ChainedInjector(injector, realEnvironmentInjector) : injector;
-        const rendererFactory = rootViewInjector.get(RendererFactory2, domRendererFactory3);
-        const sanitizer = rootViewInjector.get(Sanitizer, null);
-        const hostRenderer = rendererFactory.createRenderer(null, this.componentDef);
-        // Determine a tag name used for creating host elements when this component is created
-        // dynamically. Default to 'div' if this component did not specify any tag name in its selector.
-        const elementName = this.componentDef.selectors[0][0] || 'div';
-        const hostRNode = rootSelectorOrNode ?
-            locateHostElement(hostRenderer, rootSelectorOrNode, this.componentDef.encapsulation) :
-            createElementNode(rendererFactory.createRenderer(null, this.componentDef), elementName, getNamespace(elementName));
-        const rootFlags = this.componentDef.onPush ? 32 /* LViewFlags.Dirty */ | 256 /* LViewFlags.IsRoot */ :
-            16 /* LViewFlags.CheckAlways */ | 256 /* LViewFlags.IsRoot */;
-        const rootContext = createRootContext();
-        // Create the root view. Uses empty TView and ContentTemplate.
-        const rootTView = createTView(0 /* TViewType.Root */, null, null, 1, 0, null, null, null, null, null);
-        const rootLView = createLView(null, rootTView, rootContext, rootFlags, null, null, rendererFactory, hostRenderer, sanitizer, rootViewInjector, null);
-        // rootView is the parent when bootstrapping
-        // TODO(misko): it looks like we are entering view here but we don't really need to as
-        // `renderView` does that. However as the code is written it is needed because
-        // `createRootComponentView` and `createRootComponent` both read global state. Fixing those
-        // issues would allow us to drop this.
-        enterView(rootLView);
-        let component;
-        let tElementNode;
-        try {
-            const componentView = createRootComponentView(hostRNode, this.componentDef, rootLView, rendererFactory, hostRenderer);
-            if (hostRNode) {
-                if (rootSelectorOrNode) {
-                    setUpAttributes(hostRenderer, hostRNode, ['ng-version', VERSION.full]);
-                }
-                else {
-                    // If host element is created as a part of this function call (i.e. `rootSelectorOrNode`
-                    // is not defined), also apply attributes and classes extracted from component selector.
-                    // Extract attributes and classes from the first selector only to match VE behavior.
-                    const { attrs, classes } = extractAttrsAndClassesFromSelector(this.componentDef.selectors[0]);
-                    if (attrs) {
-                        setUpAttributes(hostRenderer, hostRNode, attrs);
-                    }
-                    if (classes && classes.length > 0) {
-                        writeDirectClass(hostRenderer, hostRNode, classes.join(' '));
-                    }
-                }
-            }
-            tElementNode = getTNode(rootTView, HEADER_OFFSET);
-            if (projectableNodes !== undefined) {
-                const projection = tElementNode.projection = [];
-                for (let i = 0; i < this.ngContentSelectors.length; i++) {
-                    const nodesforSlot = projectableNodes[i];
-                    // Projectable nodes can be passed as array of arrays or an array of iterables (ngUpgrade
-                    // case). Here we do normalize passed data structure to be an array of arrays to avoid
-                    // complex checks down the line.
-                    // We also normalize the length of the passed in projectable nodes (to match the number of
-                    // <ng-container> slots defined by a component).
-                    projection.push(nodesforSlot != null ? Array.from(nodesforSlot) : null);
-                }
-            }
-            // TODO: should LifecycleHooksFeature and other host features be generated by the compiler and
-            // executed here?
-            // Angular 5 reference: https://stackblitz.com/edit/lifecycle-hooks-vcref
-            component = createRootComponent(componentView, this.componentDef, rootLView, rootContext, [LifecycleHooksFeature]);
-            renderView(rootTView, rootLView, null);
-        }
-        finally {
-            leaveView();
+function getRootComponents(elementOrDir) {
+    const lView = readPatchedLView(elementOrDir);
+    return lView !== null ? [...getRootContext(lView).components] : [];
+}
+/**
+ * Retrieves an `Injector` associated with an element, component or directive instance.
+ *
+ * @param elementOrDir DOM element, component or directive instance for which to
+ *    retrieve the injector.
+ * @returns Injector associated with the element, component or directive instance.
+ *
+ * @publicApi
+ * @globalApi ng
+ */
+function getInjector(elementOrDir) {
+    const context = getLContext(elementOrDir);
+    const lView = context ? context.lView : null;
+    if (lView === null)
+        return Injector.NULL;
+    const tNode = lView[TVIEW].data[context.nodeIndex];
+    return new NodeInjector(tNode, lView);
+}
+/**
+ * Retrieve a set of injection tokens at a given DOM node.
+ *
+ * @param element Element for which the injection tokens should be retrieved.
+ */
+function getInjectionTokens(element) {
+    const context = getLContext(element);
+    const lView = context ? context.lView : null;
+    if (lView === null)
+        return [];
+    const tView = lView[TVIEW];
+    const tNode = tView.data[context.nodeIndex];
+    const providerTokens = [];
+    const startIndex = tNode.providerIndexes & 1048575 /* TNodeProviderIndexes.ProvidersStartIndexMask */;
+    const endIndex = tNode.directiveEnd;
+    for (let i = startIndex; i < endIndex; i++) {
+        let value = tView.data[i];
+        if (isDirectiveDefHack(value)) {
+            // The fact that we sometimes store Type and sometimes DirectiveDef in this location is a
+            // design flaw.  We should always store same type so that we can be monomorphic. The issue
+            // is that for Components/Directives we store the def instead the type. The correct behavior
+            // is that we should always be storing injectable type in this location.
+            value = value.type;
         }
-        return new ComponentRef(this.componentType, component, createElementRef(tElementNode, rootLView), rootLView, tElementNode);
+        providerTokens.push(value);
     }
+    return providerTokens;
 }
-const componentFactoryResolver = new ComponentFactoryResolver();
 /**
- * Creates a ComponentFactoryResolver and stores it on the injector. Or, if the
- * ComponentFactoryResolver
- * already exists, retrieves the existing ComponentFactoryResolver.
+ * Retrieves directive instances associated with a given DOM node. Does not include
+ * component instances.
  *
- * @returns The ComponentFactoryResolver instance to use
+ * @usageNotes
+ * Given the following DOM structure:
+ *
+ * ```html
+ * <app-root>
+ *   <button my-button></button>
+ *   <my-comp></my-comp>
+ * </app-root>
+ * ```
+ *
+ * Calling `getDirectives` on `<button>` will return an array with an instance of the `MyButton`
+ * directive that is associated with the DOM node.
+ *
+ * Calling `getDirectives` on `<my-comp>` will return an empty array.
+ *
+ * @param node DOM node for which to get the directives.
+ * @returns Array of directives associated with the node.
+ *
+ * @publicApi
+ * @globalApi ng
  */
-function injectComponentFactoryResolver() {
-    return componentFactoryResolver;
+function getDirectives(node) {
+    // Skip text nodes because we can't have directives associated with them.
+    if (node instanceof Text) {
+        return [];
+    }
+    const context = getLContext(node);
+    const lView = context ? context.lView : null;
+    if (lView === null) {
+        return [];
+    }
+    const tView = lView[TVIEW];
+    const nodeIndex = context.nodeIndex;
+    if (!tView?.data[nodeIndex]) {
+        return [];
+    }
+    if (context.directives === undefined) {
+        context.directives = getDirectivesAtNodeIndex(nodeIndex, lView, false);
+    }
+    // The `directives` in this case are a named array called `LComponentView`. Clone the
+    // result so we don't expose an internal data structure in the user's console.
+    return context.directives === null ? [] : [...context.directives];
 }
 /**
- * Represents an instance of a Component created via a {@link ComponentFactory}.
+ * Returns the debug (partial) metadata for a particular directive or component instance.
+ * The function accepts an instance of a directive or component and returns the corresponding
+ * metadata.
  *
- * `ComponentRef` provides access to the Component Instance as well other objects related to this
- * Component Instance and allows you to destroy the Component Instance via the {@link #destroy}
- * method.
+ * @param directiveOrComponentInstance Instance of a directive or component
+ * @returns metadata of the passed directive or component
  *
+ * @publicApi
+ * @globalApi ng
  */
-class ComponentRef extends ComponentRef$1 {
-    constructor(componentType, instance, location, _rootLView, _tNode) {
-        super();
-        this.location = location;
-        this._rootLView = _rootLView;
-        this._tNode = _tNode;
-        this.instance = instance;
-        this.hostView = this.changeDetectorRef = new RootViewRef(_rootLView);
-        this.componentType = componentType;
-    }
-    get injector() {
-        return new NodeInjector(this._tNode, this._rootLView);
+function getDirectiveMetadata$1(directiveOrComponentInstance) {
+    const { constructor } = directiveOrComponentInstance;
+    if (!constructor) {
+        throw new Error('Unable to find the instance constructor');
     }
-    destroy() {
-        this.hostView.destroy();
+    // In case a component inherits from a directive, we may have component and directive metadata
+    // To ensure we don't get the metadata of the directive, we want to call `getComponentDef` first.
+    const componentDef = getComponentDef(constructor);
+    if (componentDef) {
+        return {
+            inputs: componentDef.inputs,
+            outputs: componentDef.outputs,
+            encapsulation: componentDef.encapsulation,
+            changeDetection: componentDef.onPush ? ChangeDetectionStrategy.OnPush :
+                ChangeDetectionStrategy.Default
+        };
     }
-    onDestroy(callback) {
-        this.hostView.onDestroy(callback);
+    const directiveDef = getDirectiveDef(constructor);
+    if (directiveDef) {
+        return { inputs: directiveDef.inputs, outputs: directiveDef.outputs };
     }
+    return null;
 }
-
 /**
- * @license
- * Copyright Google LLC All Rights Reserved.
+ * Retrieve map of local references.
  *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
+ * The references are retrieved as a map of local reference name to element or directive instance.
+ *
+ * @param target DOM element, component or directive instance for which to retrieve
+ *    the local references.
  */
+function getLocalRefs(target) {
+    const context = getLContext(target);
+    if (context === null)
+        return {};
+    if (context.localRefs === undefined) {
+        const lView = context.lView;
+        if (lView === null) {
+            return {};
+        }
+        context.localRefs = discoverLocalRefs(lView, context.nodeIndex);
+    }
+    return context.localRefs || {};
+}
 /**
- * Returns a new NgModuleRef instance based on the NgModule class and parent injector provided.
- * @param ngModule NgModule class.
- * @param parentInjector Optional injector instance to use as a parent for the module injector. If
- *     not provided, `NullInjector` will be used instead.
+ * Retrieves the host element of a component or directive instance.
+ * The host element is the DOM element that matched the selector of the directive.
+ *
+ * @param componentOrDirective Component or directive instance for which the host
+ *     element should be retrieved.
+ * @returns Host element of the target.
+ *
  * @publicApi
+ * @globalApi ng
  */
-function createNgModuleRef(ngModule, parentInjector) {
-    return new NgModuleRef(ngModule, parentInjector ?? null);
+function getHostElement(componentOrDirective) {
+    return getLContext(componentOrDirective).native;
 }
-class NgModuleRef extends NgModuleRef$1 {
-    constructor(ngModuleType, _parent) {
-        super();
-        this._parent = _parent;
-        // tslint:disable-next-line:require-internal-with-underscore
-        this._bootstrapComponents = [];
-        this.injector = this;
-        this.destroyCbs = [];
-        // When bootstrapping a module we have a dependency graph that looks like this:
-        // ApplicationRef -> ComponentFactoryResolver -> NgModuleRef. The problem is that if the
-        // module being resolved tries to inject the ComponentFactoryResolver, it'll create a
-        // circular dependency which will result in a runtime error, because the injector doesn't
-        // exist yet. We work around the issue by creating the ComponentFactoryResolver ourselves
-        // and providing it, rather than letting the injector resolve it.
-        this.componentFactoryResolver = new ComponentFactoryResolver(this);
-        const ngModuleDef = getNgModuleDef(ngModuleType);
-        ngDevMode &&
-            assertDefined(ngModuleDef, `NgModule '${stringify(ngModuleType)}' is not a subtype of 'NgModuleType'.`);
-        this._bootstrapComponents = maybeUnwrapFn(ngModuleDef.bootstrap);
-        this._r3Injector = createInjectorWithoutInjectorInstances(ngModuleType, _parent, [
-            { provide: NgModuleRef$1, useValue: this }, {
-                provide: ComponentFactoryResolver$1,
-                useValue: this.componentFactoryResolver
+/**
+ * Retrieves the rendered text for a given component.
+ *
+ * This function retrieves the host element of a component and
+ * and then returns the `textContent` for that element. This implies
+ * that the text returned will include re-projected content of
+ * the component as well.
+ *
+ * @param component The component to return the content text for.
+ */
+function getRenderedText(component) {
+    const hostElement = getHostElement(component);
+    return hostElement.textContent || '';
+}
+/**
+ * Retrieves a list of event listeners associated with a DOM element. The list does include host
+ * listeners, but it does not include event listeners defined outside of the Angular context
+ * (e.g. through `addEventListener`).
+ *
+ * @usageNotes
+ * Given the following DOM structure:
+ *
+ * ```html
+ * <app-root>
+ *   <div (click)="doSomething()"></div>
+ * </app-root>
+ * ```
+ *
+ * Calling `getListeners` on `<div>` will return an object that looks as follows:
+ *
+ * ```ts
+ * {
+ *   name: 'click',
+ *   element: <div>,
+ *   callback: () => doSomething(),
+ *   useCapture: false
+ * }
+ * ```
+ *
+ * @param element Element for which the DOM listeners should be retrieved.
+ * @returns Array of event listeners on the DOM element.
+ *
+ * @publicApi
+ * @globalApi ng
+ */
+function getListeners(element) {
+    ngDevMode && assertDomElement(element);
+    const lContext = getLContext(element);
+    const lView = lContext === null ? null : lContext.lView;
+    if (lView === null)
+        return [];
+    const tView = lView[TVIEW];
+    const lCleanup = lView[CLEANUP];
+    const tCleanup = tView.cleanup;
+    const listeners = [];
+    if (tCleanup && lCleanup) {
+        for (let i = 0; i < tCleanup.length;) {
+            const firstParam = tCleanup[i++];
+            const secondParam = tCleanup[i++];
+            if (typeof firstParam === 'string') {
+                const name = firstParam;
+                const listenerElement = unwrapRNode(lView[secondParam]);
+                const callback = lCleanup[tCleanup[i++]];
+                const useCaptureOrIndx = tCleanup[i++];
+                // if useCaptureOrIndx is boolean then report it as is.
+                // if useCaptureOrIndx is positive number then it in unsubscribe method
+                // if useCaptureOrIndx is negative number then it is a Subscription
+                const type = (typeof useCaptureOrIndx === 'boolean' || useCaptureOrIndx >= 0) ? 'dom' : 'output';
+                const useCapture = typeof useCaptureOrIndx === 'boolean' ? useCaptureOrIndx : false;
+                if (element == listenerElement) {
+                    listeners.push({ element, name, callback, useCapture, type });
+                }
             }
-        ], stringify(ngModuleType), new Set(['environment']));
-        // We need to resolve the injector types separately from the injector creation, because
-        // the module might be trying to use this ref in its constructor for DI which will cause a
-        // circular error that will eventually error out, because the injector isn't created yet.
-        this._r3Injector.resolveInjectorInitializers();
-        this.instance = this.get(ngModuleType);
-    }
-    get(token, notFoundValue = Injector.THROW_IF_NOT_FOUND, injectFlags = InjectFlags.Default) {
-        if (token === Injector || token === NgModuleRef$1 || token === INJECTOR) {
-            return this;
         }
-        return this._r3Injector.get(token, notFoundValue, injectFlags);
-    }
-    destroy() {
-        ngDevMode && assertDefined(this.destroyCbs, 'NgModule already destroyed');
-        const injector = this._r3Injector;
-        !injector.destroyed && injector.destroy();
-        this.destroyCbs.forEach(fn => fn());
-        this.destroyCbs = null;
-    }
-    onDestroy(callback) {
-        ngDevMode && assertDefined(this.destroyCbs, 'NgModule already destroyed');
-        this.destroyCbs.push(callback);
-    }
-}
-class NgModuleFactory extends NgModuleFactory$1 {
-    constructor(moduleType) {
-        super();
-        this.moduleType = moduleType;
-    }
-    create(parentInjector) {
-        return new NgModuleRef(this.moduleType, parentInjector);
     }
+    listeners.sort(sortListeners);
+    return listeners;
 }
-class EnvironmentNgModuleRefAdapter extends NgModuleRef$1 {
-    constructor(providers, parent, source) {
-        super();
-        this.componentFactoryResolver = new ComponentFactoryResolver(this);
-        this.instance = null;
-        const injector = new R3Injector([
-            ...providers,
-            { provide: NgModuleRef$1, useValue: this },
-            { provide: ComponentFactoryResolver$1, useValue: this.componentFactoryResolver },
-        ], parent || getNullInjector(), source, new Set(['environment']));
-        this.injector = injector;
-        injector.resolveInjectorInitializers();
-    }
-    destroy() {
-        this.injector.destroy();
-    }
-    onDestroy(callback) {
-        this.injector.onDestroy(callback);
-    }
+function sortListeners(a, b) {
+    if (a.name == b.name)
+        return 0;
+    return a.name < b.name ? -1 : 1;
 }
 /**
- * Create a new environment injector.
- *
- * Learn more about environment injectors in
- * [this guide](guide/standalone-components#environment-injectors).
- *
- * @param providers An array of providers.
- * @param parent A parent environment injector.
- * @param debugName An optional name for this injector instance, which will be used in error
- *     messages.
+ * This function should not exist because it is megamorphic and only mostly correct.
  *
- * @publicApi
- * @developerPreview
+ * See call site for more info.
  */
-function createEnvironmentInjector(providers, parent, debugName = null) {
-    const adapter = new EnvironmentNgModuleRefAdapter(providers, parent, debugName);
-    return adapter.injector;
+function isDirectiveDefHack(obj) {
+    return obj.type !== undefined && obj.template !== undefined && obj.declaredInputs !== undefined;
 }
-
 /**
- * @license
- * Copyright Google LLC All Rights Reserved.
+ * Returns the attached `DebugNode` instance for an element in the DOM.
  *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
-/**
- * A service used by the framework to create instances of standalone injectors. Those injectors are
- * created on demand in case of dynamic component instantiation and contain ambient providers
- * collected from the imports graph rooted at a given standalone component.
+ * @param element DOM element which is owned by an existing component's view.
  */
-class StandaloneService {
-    constructor(_injector) {
-        this._injector = _injector;
-        this.cachedInjectors = new Map();
+function getDebugNode$1(element) {
+    if (ngDevMode && !(element instanceof Node)) {
+        throw new Error('Expecting instance of DOM Element');
     }
-    getOrCreateStandaloneInjector(componentDef) {
-        if (!componentDef.standalone) {
-            return null;
-        }
-        if (!this.cachedInjectors.has(componentDef.id)) {
-            const providers = internalImportProvidersFrom(false, componentDef.type);
-            const standaloneInjector = providers.length > 0 ?
-                createEnvironmentInjector([providers], this._injector, `Standalone[${componentDef.type.name}]`) :
-                null;
-            this.cachedInjectors.set(componentDef.id, standaloneInjector);
-        }
-        return this.cachedInjectors.get(componentDef.id);
+    const lContext = getLContext(element);
+    const lView = lContext ? lContext.lView : null;
+    if (lView === null) {
+        return null;
     }
-    ngOnDestroy() {
-        try {
-            for (const injector of this.cachedInjectors.values()) {
-                if (injector !== null) {
-                    injector.destroy();
-                }
-            }
-        }
-        finally {
-            this.cachedInjectors.clear();
-        }
+    const nodeIndex = lContext.nodeIndex;
+    if (nodeIndex !== -1) {
+        const valueInLView = lView[nodeIndex];
+        // this means that value in the lView is a component with its own
+        // data. In this situation the TNode is not accessed at the same spot.
+        const tNode = isLView(valueInLView) ? valueInLView[T_HOST] : getTNode(lView[TVIEW], nodeIndex);
+        ngDevMode &&
+            assertEqual(tNode.index, nodeIndex, 'Expecting that TNode at index is same as index');
+        return buildDebugNode(tNode, lView);
     }
+    return null;
 }
-/** @nocollapse */
-StandaloneService.ɵprov = ɵɵdefineInjectable({
-    token: StandaloneService,
-    providedIn: 'environment',
-    factory: () => new StandaloneService(ɵɵinject(EnvironmentInjector)),
-});
 /**
- * A feature that acts as a setup code for the {@link StandaloneService}.
+ * Retrieve the component `LView` from component/element.
  *
- * The most important responsaibility of this feature is to expose the "getStandaloneInjector"
- * function (an entry points to a standalone injector creation) on a component definition object. We
- * go through the features infrastructure to make sure that the standalone injector creation logic
- * is tree-shakable and not included in applications that don't use standalone components.
+ * NOTE: `LView` is a private and should not be leaked outside.
+ *       Don't export this method to `ng.*` on window.
  *
- * @codeGenApi
+ * @param target DOM element or component instance for which to retrieve the LView.
  */
-function ɵɵStandaloneFeature(definition) {
-    definition.getStandaloneInjector = (parentInjector) => {
-        return parentInjector.get(StandaloneService).getOrCreateStandaloneInjector(definition);
-    };
+function getComponentLView(target) {
+    const lContext = getLContext(target);
+    const nodeIndx = lContext.nodeIndex;
+    const lView = lContext.lView;
+    ngDevMode && assertLView(lView);
+    const componentLView = lView[nodeIndx];
+    ngDevMode && assertLView(componentLView);
+    return componentLView;
+}
+/** Asserts that a value is a DOM Element. */
+function assertDomElement(value) {
+    if (typeof Element !== 'undefined' && !(value instanceof Element)) {
+        throw new Error('Expecting instance of DOM Element');
+    }
 }
 
 /**
@@ -23745,7 +23505,7 @@ const unusedValueExportToPlacateAjd = 1;
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-const unusedValueToPlacateAjd = unusedValueExportToPlacateAjd$1 + unusedValueExportToPlacateAjd$5 + unusedValueExportToPlacateAjd$4 + unusedValueExportToPlacateAjd;
+const unusedValueToPlacateAjd = unusedValueExportToPlacateAjd$1 + unusedValueExportToPlacateAjd$6 + unusedValueExportToPlacateAjd$5 + unusedValueExportToPlacateAjd;
 class LQuery_ {
     constructor(queryList) {
         this.queryList = queryList;
@@ -26179,6 +25939,99 @@ const COMPILER_OPTIONS = new InjectionToken('compilerOptions');
 class CompilerFactory {
 }
 
+/**
+ * @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.io/license
+ */
+/**
+ * Marks a component for check (in case of OnPush components) and synchronously
+ * performs change detection on the application this component belongs to.
+ *
+ * @param component Component to {@link ChangeDetectorRef#markForCheck mark for check}.
+ *
+ * @publicApi
+ * @globalApi ng
+ */
+function applyChanges(component) {
+    markDirty(component);
+    getRootComponents(component).forEach(rootComponent => detectChanges(rootComponent));
+}
+
+/**
+ * @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.io/license
+ */
+/**
+ * This file introduces series of globally accessible debug tools
+ * to allow for the Angular debugging story to function.
+ *
+ * To see this in action run the following command:
+ *
+ *   bazel run //packages/core/test/bundling/todo:devserver
+ *
+ *  Then load `localhost:5432` and start using the console tools.
+ */
+/**
+ * This value reflects the property on the window where the dev
+ * tools are patched (window.ng).
+ * */
+const GLOBAL_PUBLISH_EXPANDO_KEY = 'ng';
+let _published = false;
+/**
+ * Publishes a collection of default debug tools onto`window.ng`.
+ *
+ * These functions are available globally when Angular is in development
+ * mode and are automatically stripped away from prod mode is on.
+ */
+function publishDefaultGlobalUtils$1() {
+    if (!_published) {
+        _published = true;
+        /**
+         * Warning: this function is *INTERNAL* and should not be relied upon in application's code.
+         * The contract of the function might be changed in any release and/or the function can be
+         * removed completely.
+         */
+        publishGlobalUtil('ɵsetProfiler', setProfiler);
+        publishGlobalUtil('getDirectiveMetadata', getDirectiveMetadata$1);
+        publishGlobalUtil('getComponent', getComponent);
+        publishGlobalUtil('getContext', getContext);
+        publishGlobalUtil('getListeners', getListeners);
+        publishGlobalUtil('getOwningComponent', getOwningComponent);
+        publishGlobalUtil('getHostElement', getHostElement);
+        publishGlobalUtil('getInjector', getInjector);
+        publishGlobalUtil('getRootComponents', getRootComponents);
+        publishGlobalUtil('getDirectives', getDirectives);
+        publishGlobalUtil('applyChanges', applyChanges);
+    }
+}
+/**
+ * Publishes the given function to `window.ng` so that it can be
+ * used from the browser console when an application is not in production.
+ */
+function publishGlobalUtil(name, fn) {
+    if (typeof COMPILED === 'undefined' || !COMPILED) {
+        // Note: we can't export `ng` when using closure enhanced optimization as:
+        // - closure declares globals itself for minified names, which sometimes clobber our `ng` global
+        // - we can't declare a closure extern as the namespace `ng` is already used within Google
+        //   for typings for AngularJS (via `goog.provide('ng....')`).
+        const w = _global;
+        ngDevMode && assertDefined(fn, 'function not defined');
+        if (w) {
+            let container = w[GLOBAL_PUBLISH_EXPANDO_KEY];
+            if (!container) {
+                container = w[GLOBAL_PUBLISH_EXPANDO_KEY] = {};
+            }
+            container[name] = fn;
+        }
+    }
+}
+
 /**
  * @license
  * Copyright Google LLC All Rights Reserved.
@@ -28082,7 +27935,7 @@ class DebugNode {
     get componentInstance() {
         const nativeElement = this.nativeNode;
         return nativeElement &&
-            (getComponent$1(nativeElement) || getOwningComponent(nativeElement));
+            (getComponent(nativeElement) || getOwningComponent(nativeElement));
     }
     /**
      * An object that provides parent context for this element. Often an ancestor component instance
@@ -28093,7 +27946,7 @@ class DebugNode {
      * of heroes"`.
      */
     get context() {
-        return getComponent$1(this.nativeNode) || getContext(this.nativeNode);
+        return getComponent(this.nativeNode) || getContext(this.nativeNode);
     }
     /**
      * The callbacks attached to the component's @Output properties and/or the element's event
@@ -28433,8 +28286,7 @@ function _queryNodeChildren(tNode, lView, predicate, matches, elementsOnly, root
             // Renderer2, however that's not the case in Ivy. This approach is being used because:
             // 1. Matching the ViewEngine behavior would mean potentially introducing a depedency
             //    from `Renderer2` to Ivy which could bring Ivy code into ViewEngine.
-            // 2. We would have to make `Renderer3` "know" about debug nodes.
-            // 3. It allows us to capture nodes that were inserted directly via the DOM.
+            // 2. It allows us to capture nodes that were inserted directly via the DOM.
             nativeNode && _queryNativeNodeDescendants(nativeNode, predicate, matches, elementsOnly);
         }
         // In all cases, if a dynamic container exists for this node, each view inside it has to be
@@ -29910,5 +29762,5 @@ if (typeof ngDevMode !== 'undefined' && ngDevMode) {
  * Generated bundle index. Do not edit.
  */
 
-export { ANALYZE_FOR_ENTRY_COMPONENTS, ANIMATION_MODULE_TYPE, APP_BOOTSTRAP_LISTENER, APP_ID, APP_INITIALIZER, ApplicationInitStatus, ApplicationModule, ApplicationRef, Attribute, COMPILER_OPTIONS, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, ChangeDetectorRef, Compiler, CompilerFactory, Component, ComponentFactory$1 as ComponentFactory, ComponentFactoryResolver$1 as ComponentFactoryResolver, ComponentRef$1 as ComponentRef, ContentChild, ContentChildren, DEFAULT_CURRENCY_CODE, DebugElement, DebugEventListener, DebugNode, DefaultIterableDiffer, Directive, ENVIRONMENT_INITIALIZER, ElementRef, EmbeddedViewRef, EnvironmentInjector, ErrorHandler, EventEmitter, Host, HostBinding, HostListener, INJECTOR, Inject, InjectFlags, Injectable, InjectionToken, Injector, Input, IterableDiffers, KeyValueDiffers, LOCALE_ID, MissingTranslationStrategy, ModuleWithComponentFactories, NO_ERRORS_SCHEMA, NgModule, NgModuleFactory$1 as NgModuleFactory, NgModuleRef$1 as NgModuleRef, NgProbeToken, NgZone, Optional, Output, PACKAGE_ROOT_URL, PLATFORM_ID, PLATFORM_INITIALIZER, Pipe, PlatformRef, Query, QueryList, ReflectiveInjector, ReflectiveKey, Renderer2, RendererFactory2, RendererStyleFlags2, ResolvedReflectiveFactory, Sanitizer, SecurityContext, Self, SimpleChange, SkipSelf, TRANSLATIONS, TRANSLATIONS_FORMAT, TemplateRef, Testability, TestabilityRegistry, Type, VERSION, Version, ViewChild, ViewChildren, ViewContainerRef, ViewEncapsulation$1 as ViewEncapsulation, ViewRef, asNativeElements, assertPlatform, createEnvironmentInjector, createNgModuleRef, createPlatform, createPlatformFactory, defineInjectable, destroyPlatform, enableProdMode, forwardRef, getDebugNode, getModuleFactory, getNgModuleById, getPlatform, importProvidersFrom, inject, isDevMode, platformCore, resolveForwardRef, setTestabilityGetter, ALLOW_MULTIPLE_PLATFORMS as ɵALLOW_MULTIPLE_PLATFORMS, APP_ID_RANDOM_PROVIDER as ɵAPP_ID_RANDOM_PROVIDER, ChangeDetectorStatus as ɵChangeDetectorStatus, ComponentFactory$1 as ɵComponentFactory, Console as ɵConsole, DEFAULT_LOCALE_ID as ɵDEFAULT_LOCALE_ID, INJECTOR_SCOPE as ɵINJECTOR_SCOPE, LContext as ɵLContext, LifecycleHooksFeature as ɵLifecycleHooksFeature, LocaleDataIndex as ɵLocaleDataIndex, NG_COMP_DEF as ɵNG_COMP_DEF, NG_DIR_DEF as ɵNG_DIR_DEF, NG_ELEMENT_ID as ɵNG_ELEMENT_ID, NG_INJ_DEF as ɵNG_INJ_DEF, NG_MOD_DEF as ɵNG_MOD_DEF, NG_PIPE_DEF as ɵNG_PIPE_DEF, NG_PROV_DEF as ɵNG_PROV_DEF, NOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR as ɵNOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR, NO_CHANGE as ɵNO_CHANGE, NgModuleFactory as ɵNgModuleFactory, NoopNgZone as ɵNoopNgZone, ReflectionCapabilities as ɵReflectionCapabilities, ComponentFactory as ɵRender3ComponentFactory, ComponentRef as ɵRender3ComponentRef, NgModuleRef as ɵRender3NgModuleRef, RuntimeError as ɵRuntimeError, TESTABILITY as ɵTESTABILITY, TESTABILITY_GETTER as ɵTESTABILITY_GETTER, ViewRef$1 as ɵViewRef, _sanitizeHtml as ɵ_sanitizeHtml, _sanitizeUrl as ɵ_sanitizeUrl, allowSanitizationBypassAndThrow as ɵallowSanitizationBypassAndThrow, bypassSanitizationTrustHtml as ɵbypassSanitizationTrustHtml, bypassSanitizationTrustResourceUrl as ɵbypassSanitizationTrustResourceUrl, bypassSanitizationTrustScript as ɵbypassSanitizationTrustScript, bypassSanitizationTrustStyle as ɵbypassSanitizationTrustStyle, bypassSanitizationTrustUrl as ɵbypassSanitizationTrustUrl, clearResolutionOfComponentResourcesQueue as ɵclearResolutionOfComponentResourcesQueue, coerceToBoolean as ɵcoerceToBoolean, compileComponent as ɵcompileComponent, compileDirective as ɵcompileDirective, compileNgModule as ɵcompileNgModule, compileNgModuleDefs as ɵcompileNgModuleDefs, compileNgModuleFactory as ɵcompileNgModuleFactory, compilePipe as ɵcompilePipe, createInjector as ɵcreateInjector, defaultIterableDiffers as ɵdefaultIterableDiffers, defaultKeyValueDiffers as ɵdefaultKeyValueDiffers, detectChanges as ɵdetectChanges, devModeEqual as ɵdevModeEqual, findLocaleData as ɵfindLocaleData, flushModuleScopingQueueAsMuchAsPossible as ɵflushModuleScopingQueueAsMuchAsPossible, getDebugNode as ɵgetDebugNode, getDebugNodeR2 as ɵgetDebugNodeR2, getDirectives as ɵgetDirectives, getHostElement as ɵgetHostElement, getInjectableDef as ɵgetInjectableDef, getLContext as ɵgetLContext, getLocaleCurrencyCode as ɵgetLocaleCurrencyCode, getLocalePluralCase as ɵgetLocalePluralCase, getSanitizationBypassType as ɵgetSanitizationBypassType, ɵgetUnknownElementStrictMode, ɵgetUnknownPropertyStrictMode, _global as ɵglobal, injectChangeDetectorRef as ɵinjectChangeDetectorRef, internalBootstrapApplication as ɵinternalBootstrapApplication, isBoundToModule as ɵisBoundToModule, isDefaultChangeDetectionStrategy as ɵisDefaultChangeDetectionStrategy, isListLikeIterable as ɵisListLikeIterable, isObservable as ɵisObservable, isPromise as ɵisPromise, isStandalone as ɵisStandalone, isSubscribable as ɵisSubscribable, ɵivyEnabled, makeDecorator as ɵmakeDecorator, markDirty as ɵmarkDirty, noSideEffects as ɵnoSideEffects, patchComponentDefWithScope as ɵpatchComponentDefWithScope, publishDefaultGlobalUtils$1 as ɵpublishDefaultGlobalUtils, publishGlobalUtil as ɵpublishGlobalUtil, registerLocaleData as ɵregisterLocaleData, renderComponent as ɵrenderComponent, resetCompiledComponents as ɵresetCompiledComponents, resetJitOptions as ɵresetJitOptions, resolveComponentResources as ɵresolveComponentResources, setAllowDuplicateNgModuleIdsForTest as ɵsetAllowDuplicateNgModuleIdsForTest, setClassMetadata as ɵsetClassMetadata, setCurrentInjector as ɵsetCurrentInjector, setDocument as ɵsetDocument, setLocaleId as ɵsetLocaleId, ɵsetUnknownElementStrictMode, ɵsetUnknownPropertyStrictMode, store as ɵstore, stringify as ɵstringify, transitiveScopesFor as ɵtransitiveScopesFor, unregisterAllLocaleData as ɵunregisterLocaleData, unwrapSafeValue as ɵunwrapSafeValue, whenRendered as ɵwhenRendered, ɵɵCopyDefinitionFeature, FactoryTarget as ɵɵFactoryTarget, ɵɵInheritDefinitionFeature, ɵɵNgOnChangesFeature, ɵɵProvidersFeature, ɵɵStandaloneFeature, ɵɵadvance, ɵɵattribute, ɵɵattributeInterpolate1, ɵɵattributeInterpolate2, ɵɵattributeInterpolate3, ɵɵattributeInterpolate4, ɵɵattributeInterpolate5, ɵɵattributeInterpolate6, ɵɵattributeInterpolate7, ɵɵattributeInterpolate8, ɵɵattributeInterpolateV, ɵɵclassMap, ɵɵclassMapInterpolate1, ɵɵclassMapInterpolate2, ɵɵclassMapInterpolate3, ɵɵclassMapInterpolate4, ɵɵclassMapInterpolate5, ɵɵclassMapInterpolate6, ɵɵclassMapInterpolate7, ɵɵclassMapInterpolate8, ɵɵclassMapInterpolateV, ɵɵclassProp, ɵɵcontentQuery, ɵɵdefineComponent, ɵɵdefineDirective, ɵɵdefineInjectable, ɵɵdefineInjector, ɵɵdefineNgModule, ɵɵdefinePipe, ɵɵdirectiveInject, ɵɵdisableBindings, ɵɵelement, ɵɵelementContainer, ɵɵelementContainerEnd, ɵɵelementContainerStart, ɵɵelementEnd, ɵɵelementStart, ɵɵenableBindings, ɵɵgetCurrentView, ɵɵgetInheritedFactory, ɵɵhostProperty, ɵɵi18n, ɵɵi18nApply, ɵɵi18nAttributes, ɵɵi18nEnd, ɵɵi18nExp, ɵɵi18nPostprocess, ɵɵi18nStart, ɵɵinject, ɵɵinjectAttribute, ɵɵinvalidFactory, ɵɵinvalidFactoryDep, ɵɵlistener, ɵɵloadQuery, ɵɵnamespaceHTML, ɵɵnamespaceMathML, ɵɵnamespaceSVG, ɵɵnextContext, ɵɵngDeclareClassMetadata, ɵɵngDeclareComponent, ɵɵngDeclareDirective, ɵɵngDeclareFactory, ɵɵngDeclareInjectable, ɵɵngDeclareInjector, ɵɵngDeclareNgModule, ɵɵngDeclarePipe, ɵɵpipe, ɵɵpipeBind1, ɵɵpipeBind2, ɵɵpipeBind3, ɵɵpipeBind4, ɵɵpipeBindV, ɵɵprojection, ɵɵprojectionDef, ɵɵproperty, ɵɵpropertyInterpolate, ɵɵpropertyInterpolate1, ɵɵpropertyInterpolate2, ɵɵpropertyInterpolate3, ɵɵpropertyInterpolate4, ɵɵpropertyInterpolate5, ɵɵpropertyInterpolate6, ɵɵpropertyInterpolate7, ɵɵpropertyInterpolate8, ɵɵpropertyInterpolateV, ɵɵpureFunction0, ɵɵpureFunction1, ɵɵpureFunction2, ɵɵpureFunction3, ɵɵpureFunction4, ɵɵpureFunction5, ɵɵpureFunction6, ɵɵpureFunction7, ɵɵpureFunction8, ɵɵpureFunctionV, ɵɵqueryRefresh, ɵɵreference, registerNgModuleType as ɵɵregisterNgModuleType, ɵɵresetView, ɵɵresolveBody, ɵɵresolveDocument, ɵɵresolveWindow, ɵɵrestoreView, ɵɵsanitizeHtml, ɵɵsanitizeResourceUrl, ɵɵsanitizeScript, ɵɵsanitizeStyle, ɵɵsanitizeUrl, ɵɵsanitizeUrlOrResourceUrl, ɵɵsetComponentScope, ɵɵsetNgModuleScope, ɵɵstyleMap, ɵɵstyleMapInterpolate1, ɵɵstyleMapInterpolate2, ɵɵstyleMapInterpolate3, ɵɵstyleMapInterpolate4, ɵɵstyleMapInterpolate5, ɵɵstyleMapInterpolate6, ɵɵstyleMapInterpolate7, ɵɵstyleMapInterpolate8, ɵɵstyleMapInterpolateV, ɵɵstyleProp, ɵɵstylePropInterpolate1, ɵɵstylePropInterpolate2, ɵɵstylePropInterpolate3, ɵɵstylePropInterpolate4, ɵɵstylePropInterpolate5, ɵɵstylePropInterpolate6, ɵɵstylePropInterpolate7, ɵɵstylePropInterpolate8, ɵɵstylePropInterpolateV, ɵɵsyntheticHostListener, ɵɵsyntheticHostProperty, ɵɵtemplate, ɵɵtemplateRefExtractor, ɵɵtext, ɵɵtextInterpolate, ɵɵtextInterpolate1, ɵɵtextInterpolate2, ɵɵtextInterpolate3, ɵɵtextInterpolate4, ɵɵtextInterpolate5, ɵɵtextInterpolate6, ɵɵtextInterpolate7, ɵɵtextInterpolate8, ɵɵtextInterpolateV, ɵɵtrustConstantHtml, ɵɵtrustConstantResourceUrl, ɵɵviewQuery };
+export { ANALYZE_FOR_ENTRY_COMPONENTS, ANIMATION_MODULE_TYPE, APP_BOOTSTRAP_LISTENER, APP_ID, APP_INITIALIZER, ApplicationInitStatus, ApplicationModule, ApplicationRef, Attribute, COMPILER_OPTIONS, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, ChangeDetectorRef, Compiler, CompilerFactory, Component, ComponentFactory$1 as ComponentFactory, ComponentFactoryResolver$1 as ComponentFactoryResolver, ComponentRef$1 as ComponentRef, ContentChild, ContentChildren, DEFAULT_CURRENCY_CODE, DebugElement, DebugEventListener, DebugNode, DefaultIterableDiffer, Directive, ENVIRONMENT_INITIALIZER, ElementRef, EmbeddedViewRef, EnvironmentInjector, ErrorHandler, EventEmitter, Host, HostBinding, HostListener, INJECTOR, Inject, InjectFlags, Injectable, InjectionToken, Injector, Input, IterableDiffers, KeyValueDiffers, LOCALE_ID, MissingTranslationStrategy, ModuleWithComponentFactories, NO_ERRORS_SCHEMA, NgModule, NgModuleFactory$1 as NgModuleFactory, NgModuleRef$1 as NgModuleRef, NgProbeToken, NgZone, Optional, Output, PACKAGE_ROOT_URL, PLATFORM_ID, PLATFORM_INITIALIZER, Pipe, PlatformRef, Query, QueryList, ReflectiveInjector, ReflectiveKey, Renderer2, RendererFactory2, RendererStyleFlags2, ResolvedReflectiveFactory, Sanitizer, SecurityContext, Self, SimpleChange, SkipSelf, TRANSLATIONS, TRANSLATIONS_FORMAT, TemplateRef, Testability, TestabilityRegistry, Type, VERSION, Version, ViewChild, ViewChildren, ViewContainerRef, ViewEncapsulation$1 as ViewEncapsulation, ViewRef, asNativeElements, assertPlatform, createEnvironmentInjector, createNgModuleRef, createPlatform, createPlatformFactory, defineInjectable, destroyPlatform, enableProdMode, forwardRef, getDebugNode, getModuleFactory, getNgModuleById, getPlatform, importProvidersFrom, inject, isDevMode, platformCore, resolveForwardRef, setTestabilityGetter, ALLOW_MULTIPLE_PLATFORMS as ɵALLOW_MULTIPLE_PLATFORMS, APP_ID_RANDOM_PROVIDER as ɵAPP_ID_RANDOM_PROVIDER, ChangeDetectorStatus as ɵChangeDetectorStatus, ComponentFactory$1 as ɵComponentFactory, Console as ɵConsole, DEFAULT_LOCALE_ID as ɵDEFAULT_LOCALE_ID, INJECTOR_SCOPE as ɵINJECTOR_SCOPE, LContext as ɵLContext, LifecycleHooksFeature as ɵLifecycleHooksFeature, LocaleDataIndex as ɵLocaleDataIndex, NG_COMP_DEF as ɵNG_COMP_DEF, NG_DIR_DEF as ɵNG_DIR_DEF, NG_ELEMENT_ID as ɵNG_ELEMENT_ID, NG_INJ_DEF as ɵNG_INJ_DEF, NG_MOD_DEF as ɵNG_MOD_DEF, NG_PIPE_DEF as ɵNG_PIPE_DEF, NG_PROV_DEF as ɵNG_PROV_DEF, NOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR as ɵNOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR, NO_CHANGE as ɵNO_CHANGE, NgModuleFactory as ɵNgModuleFactory, NoopNgZone as ɵNoopNgZone, ReflectionCapabilities as ɵReflectionCapabilities, ComponentFactory as ɵRender3ComponentFactory, ComponentRef as ɵRender3ComponentRef, NgModuleRef as ɵRender3NgModuleRef, RuntimeError as ɵRuntimeError, TESTABILITY as ɵTESTABILITY, TESTABILITY_GETTER as ɵTESTABILITY_GETTER, ViewRef$1 as ɵViewRef, _sanitizeHtml as ɵ_sanitizeHtml, _sanitizeUrl as ɵ_sanitizeUrl, allowSanitizationBypassAndThrow as ɵallowSanitizationBypassAndThrow, bypassSanitizationTrustHtml as ɵbypassSanitizationTrustHtml, bypassSanitizationTrustResourceUrl as ɵbypassSanitizationTrustResourceUrl, bypassSanitizationTrustScript as ɵbypassSanitizationTrustScript, bypassSanitizationTrustStyle as ɵbypassSanitizationTrustStyle, bypassSanitizationTrustUrl as ɵbypassSanitizationTrustUrl, clearResolutionOfComponentResourcesQueue as ɵclearResolutionOfComponentResourcesQueue, coerceToBoolean as ɵcoerceToBoolean, compileComponent as ɵcompileComponent, compileDirective as ɵcompileDirective, compileNgModule as ɵcompileNgModule, compileNgModuleDefs as ɵcompileNgModuleDefs, compileNgModuleFactory as ɵcompileNgModuleFactory, compilePipe as ɵcompilePipe, createInjector as ɵcreateInjector, defaultIterableDiffers as ɵdefaultIterableDiffers, defaultKeyValueDiffers as ɵdefaultKeyValueDiffers, detectChanges as ɵdetectChanges, devModeEqual as ɵdevModeEqual, findLocaleData as ɵfindLocaleData, flushModuleScopingQueueAsMuchAsPossible as ɵflushModuleScopingQueueAsMuchAsPossible, getDebugNode as ɵgetDebugNode, getDebugNodeR2 as ɵgetDebugNodeR2, getDirectives as ɵgetDirectives, getHostElement as ɵgetHostElement, getInjectableDef as ɵgetInjectableDef, getLContext as ɵgetLContext, getLocaleCurrencyCode as ɵgetLocaleCurrencyCode, getLocalePluralCase as ɵgetLocalePluralCase, getSanitizationBypassType as ɵgetSanitizationBypassType, ɵgetUnknownElementStrictMode, ɵgetUnknownPropertyStrictMode, _global as ɵglobal, injectChangeDetectorRef as ɵinjectChangeDetectorRef, internalBootstrapApplication as ɵinternalBootstrapApplication, isBoundToModule as ɵisBoundToModule, isDefaultChangeDetectionStrategy as ɵisDefaultChangeDetectionStrategy, isListLikeIterable as ɵisListLikeIterable, isObservable as ɵisObservable, isPromise as ɵisPromise, isStandalone as ɵisStandalone, isSubscribable as ɵisSubscribable, ɵivyEnabled, makeDecorator as ɵmakeDecorator, markDirty as ɵmarkDirty, noSideEffects as ɵnoSideEffects, patchComponentDefWithScope as ɵpatchComponentDefWithScope, publishDefaultGlobalUtils$1 as ɵpublishDefaultGlobalUtils, publishGlobalUtil as ɵpublishGlobalUtil, registerLocaleData as ɵregisterLocaleData, resetCompiledComponents as ɵresetCompiledComponents, resetJitOptions as ɵresetJitOptions, resolveComponentResources as ɵresolveComponentResources, setAllowDuplicateNgModuleIdsForTest as ɵsetAllowDuplicateNgModuleIdsForTest, setClassMetadata as ɵsetClassMetadata, setCurrentInjector as ɵsetCurrentInjector, setDocument as ɵsetDocument, setLocaleId as ɵsetLocaleId, ɵsetUnknownElementStrictMode, ɵsetUnknownPropertyStrictMode, store as ɵstore, stringify as ɵstringify, transitiveScopesFor as ɵtransitiveScopesFor, unregisterAllLocaleData as ɵunregisterLocaleData, unwrapSafeValue as ɵunwrapSafeValue, whenRendered as ɵwhenRendered, ɵɵCopyDefinitionFeature, FactoryTarget as ɵɵFactoryTarget, ɵɵInheritDefinitionFeature, ɵɵNgOnChangesFeature, ɵɵProvidersFeature, ɵɵStandaloneFeature, ɵɵadvance, ɵɵattribute, ɵɵattributeInterpolate1, ɵɵattributeInterpolate2, ɵɵattributeInterpolate3, ɵɵattributeInterpolate4, ɵɵattributeInterpolate5, ɵɵattributeInterpolate6, ɵɵattributeInterpolate7, ɵɵattributeInterpolate8, ɵɵattributeInterpolateV, ɵɵclassMap, ɵɵclassMapInterpolate1, ɵɵclassMapInterpolate2, ɵɵclassMapInterpolate3, ɵɵclassMapInterpolate4, ɵɵclassMapInterpolate5, ɵɵclassMapInterpolate6, ɵɵclassMapInterpolate7, ɵɵclassMapInterpolate8, ɵɵclassMapInterpolateV, ɵɵclassProp, ɵɵcontentQuery, ɵɵdefineComponent, ɵɵdefineDirective, ɵɵdefineInjectable, ɵɵdefineInjector, ɵɵdefineNgModule, ɵɵdefinePipe, ɵɵdirectiveInject, ɵɵdisableBindings, ɵɵelement, ɵɵelementContainer, ɵɵelementContainerEnd, ɵɵelementContainerStart, ɵɵelementEnd, ɵɵelementStart, ɵɵenableBindings, ɵɵgetCurrentView, ɵɵgetInheritedFactory, ɵɵhostProperty, ɵɵi18n, ɵɵi18nApply, ɵɵi18nAttributes, ɵɵi18nEnd, ɵɵi18nExp, ɵɵi18nPostprocess, ɵɵi18nStart, ɵɵinject, ɵɵinjectAttribute, ɵɵinvalidFactory, ɵɵinvalidFactoryDep, ɵɵlistener, ɵɵloadQuery, ɵɵnamespaceHTML, ɵɵnamespaceMathML, ɵɵnamespaceSVG, ɵɵnextContext, ɵɵngDeclareClassMetadata, ɵɵngDeclareComponent, ɵɵngDeclareDirective, ɵɵngDeclareFactory, ɵɵngDeclareInjectable, ɵɵngDeclareInjector, ɵɵngDeclareNgModule, ɵɵngDeclarePipe, ɵɵpipe, ɵɵpipeBind1, ɵɵpipeBind2, ɵɵpipeBind3, ɵɵpipeBind4, ɵɵpipeBindV, ɵɵprojection, ɵɵprojectionDef, ɵɵproperty, ɵɵpropertyInterpolate, ɵɵpropertyInterpolate1, ɵɵpropertyInterpolate2, ɵɵpropertyInterpolate3, ɵɵpropertyInterpolate4, ɵɵpropertyInterpolate5, ɵɵpropertyInterpolate6, ɵɵpropertyInterpolate7, ɵɵpropertyInterpolate8, ɵɵpropertyInterpolateV, ɵɵpureFunction0, ɵɵpureFunction1, ɵɵpureFunction2, ɵɵpureFunction3, ɵɵpureFunction4, ɵɵpureFunction5, ɵɵpureFunction6, ɵɵpureFunction7, ɵɵpureFunction8, ɵɵpureFunctionV, ɵɵqueryRefresh, ɵɵreference, registerNgModuleType as ɵɵregisterNgModuleType, ɵɵresetView, ɵɵresolveBody, ɵɵresolveDocument, ɵɵresolveWindow, ɵɵrestoreView, ɵɵsanitizeHtml, ɵɵsanitizeResourceUrl, ɵɵsanitizeScript, ɵɵsanitizeStyle, ɵɵsanitizeUrl, ɵɵsanitizeUrlOrResourceUrl, ɵɵsetComponentScope, ɵɵsetNgModuleScope, ɵɵstyleMap, ɵɵstyleMapInterpolate1, ɵɵstyleMapInterpolate2, ɵɵstyleMapInterpolate3, ɵɵstyleMapInterpolate4, ɵɵstyleMapInterpolate5, ɵɵstyleMapInterpolate6, ɵɵstyleMapInterpolate7, ɵɵstyleMapInterpolate8, ɵɵstyleMapInterpolateV, ɵɵstyleProp, ɵɵstylePropInterpolate1, ɵɵstylePropInterpolate2, ɵɵstylePropInterpolate3, ɵɵstylePropInterpolate4, ɵɵstylePropInterpolate5, ɵɵstylePropInterpolate6, ɵɵstylePropInterpolate7, ɵɵstylePropInterpolate8, ɵɵstylePropInterpolateV, ɵɵsyntheticHostListener, ɵɵsyntheticHostProperty, ɵɵtemplate, ɵɵtemplateRefExtractor, ɵɵtext, ɵɵtextInterpolate, ɵɵtextInterpolate1, ɵɵtextInterpolate2, ɵɵtextInterpolate3, ɵɵtextInterpolate4, ɵɵtextInterpolate5, ɵɵtextInterpolate6, ɵɵtextInterpolate7, ɵɵtextInterpolate8, ɵɵtextInterpolateV, ɵɵtrustConstantHtml, ɵɵtrustConstantResourceUrl, ɵɵviewQuery };
 //# sourceMappingURL=core.mjs.map