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

package/fesm2020/testing.mjs

@@ -1,5 +1,5 @@
 /**
- * @license Angular v14.1.0-next.1
+ * @license Angular v14.1.0-next.4
  * (c) 2010-2022 Google LLC. https://angular.io/
  * License: MIT
  */
@@ -862,6 +862,68 @@ const NG_INJ_DEF = getClosureSafeProperty({ ɵinj: getClosureSafeProperty });
 const NG_INJECTABLE_DEF = getClosureSafeProperty({ ngInjectableDef: getClosureSafeProperty });
 const NG_INJECTOR_DEF = getClosureSafeProperty({ ngInjectorDef: getClosureSafeProperty });
 
+/**
+ * @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
+ */
+/**
+ * Base URL for the error details page.
+ *
+ * Keep the files below in full sync:
+ *  - packages/compiler-cli/src/ngtsc/diagnostics/src/error_details_base_url.ts
+ *  - packages/core/src/error_details_base_url.ts
+ */
+const ERROR_DETAILS_PAGE_BASE_URL = 'https://angular.io/errors';
+
+/**
+ * @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
+ */
+/**
+ * Class that represents a runtime error.
+ * Formats and outputs the error message in a consistent way.
+ *
+ * Example:
+ * ```
+ *  throw new RuntimeError(
+ *    RuntimeErrorCode.INJECTOR_ALREADY_DESTROYED,
+ *    ngDevMode && 'Injector has already been destroyed.');
+ * ```
+ *
+ * Note: the `message` argument contains a descriptive error message as a string in development
+ * mode (when the `ngDevMode` is defined). In production mode (after tree-shaking pass), the
+ * `message` argument becomes `false`, thus we account for it in the typings and the runtime logic.
+ */
+class RuntimeError extends Error {
+    constructor(code, message) {
+        super(formatRuntimeError(code, message));
+        this.code = code;
+    }
+}
+/**
+ * Called to format a runtime error.
+ * See additional info on the `message` argument type in the `RuntimeError` class description.
+ */
+function formatRuntimeError(code, message) {
+    // Error code might be a negative number, which is a special marker that instructs the logic to
+    // generate a link to the error details page on angular.io.
+    const fullCode = `NG0${Math.abs(code)}`;
+    let errorMessage = `${fullCode}${message ? ': ' + message.trim() : ''}`;
+    if (ngDevMode && code < 0) {
+        const addPeriodSeparator = !errorMessage.match(/[.,;!?]$/);
+        const separator = addPeriodSeparator ? '.' : '';
+        errorMessage =
+            `${errorMessage}${separator} Find more at ${ERROR_DETAILS_PAGE_BASE_URL}/${fullCode}`;
+    }
+    return errorMessage;
+}
+
 /**
  * @license
  * Copyright Google LLC All Rights Reserved.
@@ -1790,68 +1852,6 @@ function initNgDevMode() {
     return false;
 }
 
-/**
- * @license
- * Copyright Google LLC All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
-/**
- * Base URL for the error details page.
- *
- * Keep the files below in full sync:
- *  - packages/compiler-cli/src/ngtsc/diagnostics/src/error_details_base_url.ts
- *  - packages/core/src/error_details_base_url.ts
- */
-const ERROR_DETAILS_PAGE_BASE_URL = 'https://angular.io/errors';
-
-/**
- * @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
- */
-/**
- * Class that represents a runtime error.
- * Formats and outputs the error message in a consistent way.
- *
- * Example:
- * ```
- *  throw new RuntimeError(
- *    RuntimeErrorCode.INJECTOR_ALREADY_DESTROYED,
- *    ngDevMode && 'Injector has already been destroyed.');
- * ```
- *
- * Note: the `message` argument contains a descriptive error message as a string in development
- * mode (when the `ngDevMode` is defined). In production mode (after tree-shaking pass), the
- * `message` argument becomes `false`, thus we account for it in the typings and the runtime logic.
- */
-class RuntimeError extends Error {
-    constructor(code, message) {
-        super(formatRuntimeError(code, message));
-        this.code = code;
-    }
-}
-/**
- * Called to format a runtime error.
- * See additional info on the `message` argument type in the `RuntimeError` class description.
- */
-function formatRuntimeError(code, message) {
-    // Error code might be a negative number, which is a special marker that instructs the logic to
-    // generate a link to the error details page on angular.io.
-    const fullCode = `NG0${Math.abs(code)}`;
-    let errorMessage = `${fullCode}${message ? ': ' + message.trim() : ''}`;
-    if (ngDevMode && code < 0) {
-        const addPeriodSeparator = !errorMessage.match(/[.,;!?]$/);
-        const separator = addPeriodSeparator ? '.' : '';
-        errorMessage =
-            `${errorMessage}${separator} Find more at ${ERROR_DETAILS_PAGE_BASE_URL}/${fullCode}`;
-    }
-    return errorMessage;
-}
-
 /**
  * @license
  * Copyright Google LLC All Rights Reserved.
@@ -1932,6 +1932,7 @@ function throwProviderNotFoundError(token, injectorName) {
  * Injection flags for DI.
  *
  * @publicApi
+ * @deprecated use an options object for `inject` instead.
  */
 var InjectFlags;
 (function (InjectFlags) {
@@ -2045,10 +2046,8 @@ function setCurrentInjector(injector) {
 }
 function injectInjectorOnly(token, flags = InjectFlags.Default) {
     if (_currentInjector === undefined) {
-        const errorMessage = (typeof ngDevMode === 'undefined' || ngDevMode) ?
-            `inject() must be called from an injection context (a constructor, a factory function or a field initializer)` :
-            '';
-        throw new RuntimeError(-203 /* RuntimeErrorCode.MISSING_INJECTION_CONTEXT */, errorMessage);
+        throw new RuntimeError(-203 /* RuntimeErrorCode.MISSING_INJECTION_CONTEXT */, ngDevMode &&
+            `inject() must be called from an injection context (a constructor, a factory function or a field initializer)`);
     }
     else if (_currentInjector === null) {
         return injectRootLimpMode(token, undefined, flags);
@@ -2064,22 +2063,17 @@ function ɵɵinject(token, flags = InjectFlags.Default) {
  * Throws an error indicating that a factory function could not be generated by the compiler for a
  * particular class.
  *
- * This instruction allows the actual error message to be optimized away when ngDevMode is turned
- * off, saving bytes of generated code while still providing a good experience in dev mode.
- *
  * The name of the class is not mentioned here, but will be in the generated factory function name
  * and thus in the stack trace.
  *
  * @codeGenApi
  */
 function ɵɵinvalidFactoryDep(index) {
-    const msg = ngDevMode ?
+    throw new RuntimeError(202 /* RuntimeErrorCode.INVALID_FACTORY_DEPENDENCY */, ngDevMode &&
         `This constructor is not compatible with Angular Dependency Injection because its dependency at index ${index} of the parameter list is invalid.
 This can happen if the dependency type is a primitive like a string or if an ancestor of this class is missing an Angular decorator.
 
-Please check that 1) the type for the parameter at index ${index} is correct and 2) the correct Angular decorators are defined for this class and its ancestors.` :
-        'invalid';
-    throw new Error(msg);
+Please check that 1) the type for the parameter at index ${index} is correct and 2) the correct Angular decorators are defined for this class and its ancestors.`);
 }
 /**
  * Injects a token from the currently active injector.
@@ -2146,6 +2140,16 @@ Please check that 1) the type for the parameter at index ${index} is correct and
  * @publicApi
  */
 function inject$1(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) {
@@ -2154,10 +2158,7 @@ function injectArgs(types) {
         const arg = resolveForwardRef(types[i]);
         if (Array.isArray(arg)) {
             if (arg.length === 0) {
-                const errorMessage = (typeof ngDevMode === 'undefined' || ngDevMode) ?
-                    'Arguments array must have arguments.' :
-                    '';
-                throw new RuntimeError(900 /* RuntimeErrorCode.INVALID_DIFFER_INPUT */, errorMessage);
+                throw new RuntimeError(900 /* RuntimeErrorCode.INVALID_DIFFER_INPUT */, ngDevMode && 'Arguments array must have arguments.');
             }
             let type = undefined;
             let flags = InjectFlags.Default;
@@ -3199,87 +3200,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);
-}
-const domRendererFactory3 = {
-    createRenderer: (hostElement, rendererType) => {
-        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.
@@ -3362,7 +3282,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;
 }
 /**
@@ -3378,7 +3297,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;
@@ -4327,7 +4245,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.
@@ -4346,7 +4264,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.
  *
@@ -4450,7 +4368,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];
@@ -4467,9 +4384,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;
@@ -4478,14 +4393,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++;
         }
@@ -5487,7 +5398,7 @@ function reflectDependency(dep) {
             }
             else if (param instanceof Attribute) {
                 if (param.attributeName === undefined) {
-                    throw new Error(`Attribute name must be defined.`);
+                    throw new RuntimeError(204 /* RuntimeErrorCode.INVALID_INJECTION_TOKEN */, ngDevMode && `Attribute name must be defined.`);
                 }
                 meta.attribute = param.attributeName;
             }
@@ -5627,42 +5538,97 @@ function maybeUnwrapFn$1(value) {
  * found in the LICENSE file at https://angular.io/license
  */
 /**
- * The Trusted Types policy, or null if Trusted Types are not
- * enabled/supported, or undefined if the policy has not been created yet.
+ * 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 policy$1;
+let DOCUMENT = undefined;
 /**
- * Returns the Trusted Types policy, or null if Trusted Types are not
- * enabled/supported. The first call to this function will create the policy.
+ * 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 getPolicy$1() {
-    if (policy$1 === undefined) {
-        policy$1 = null;
-        if (_global$1.trustedTypes) {
-            try {
-                policy$1 = _global$1.trustedTypes.createPolicy('angular', {
-                    createHTML: (s) => s,
-                    createScript: (s) => s,
-                    createScriptURL: (s) => s,
-                });
-            }
-            catch {
-                // trustedTypes.createPolicy throws if called with a name that is
-                // already registered, even in report-only mode. Until the API changes,
-                // catch the error not to break the applications functionally. In such
-                // cases, the code will fall back to using strings.
-            }
-        }
-    }
-    return policy$1;
+function setDocument(document) {
+    DOCUMENT = document;
 }
 /**
- * Unsafely promote a string to a TrustedHTML, falling back to strings when
- * Trusted Types are not available.
- * @security This is a security-sensitive function; any use of this function
- * must go through security review. In particular, it must be assured that the
- * provided string will never cause an XSS vulnerability if used in a context
- * that will be interpreted as HTML by a browser, e.g. when assigning to
+ * 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
+ */
+/**
+ * The Trusted Types policy, or null if Trusted Types are not
+ * enabled/supported, or undefined if the policy has not been created yet.
+ */
+let policy$1;
+/**
+ * Returns the Trusted Types policy, or null if Trusted Types are not
+ * enabled/supported. The first call to this function will create the policy.
+ */
+function getPolicy$1() {
+    if (policy$1 === undefined) {
+        policy$1 = null;
+        if (_global$1.trustedTypes) {
+            try {
+                policy$1 = _global$1.trustedTypes.createPolicy('angular', {
+                    createHTML: (s) => s,
+                    createScript: (s) => s,
+                    createScriptURL: (s) => s,
+                });
+            }
+            catch {
+                // trustedTypes.createPolicy throws if called with a name that is
+                // already registered, even in report-only mode. Until the API changes,
+                // catch the error not to break the applications functionally. In such
+                // cases, the code will fall back to using strings.
+            }
+        }
+    }
+    return policy$1;
+}
+/**
+ * Unsafely promote a string to a TrustedHTML, falling back to strings when
+ * Trusted Types are not available.
+ * @security This is a security-sensitive function; any use of this function
+ * must go through security review. In particular, it must be assured that the
+ * provided string will never cause an XSS vulnerability if used in a context
+ * that will be interpreted as HTML by a browser, e.g. when assigning to
  * element.innerHTML.
  */
 function trustedHTMLFromString(html) {
@@ -6489,10 +6455,8 @@ function ɵɵsanitizeResourceUrl(unsafeResourceUrl) {
     if (allowSanitizationBypassAndThrow(unsafeResourceUrl, "ResourceURL" /* BypassType.ResourceUrl */)) {
         return trustedScriptURLFromStringBypass(unwrapSafeValue(unsafeResourceUrl));
     }
-    const errorMessage = (typeof ngDevMode === 'undefined' || ngDevMode) ?
-        'unsafe value used in a resource URL context (see https://g.co/ng/security#xss)' :
-        '';
-    throw new RuntimeError(904 /* RuntimeErrorCode.UNSAFE_VALUE_IN_RESOURCE_URL */, errorMessage);
+    throw new RuntimeError(904 /* RuntimeErrorCode.UNSAFE_VALUE_IN_RESOURCE_URL */, ngDevMode &&
+        'unsafe value used in a resource URL context (see https://g.co/ng/security#xss)');
 }
 /**
  * A `script` sanitizer which only lets trusted javascript through.
@@ -6514,10 +6478,7 @@ function ɵɵsanitizeScript(unsafeScript) {
     if (allowSanitizationBypassAndThrow(unsafeScript, "Script" /* BypassType.Script */)) {
         return trustedScriptFromStringBypass(unwrapSafeValue(unsafeScript));
     }
-    const errorMessage = (typeof ngDevMode === 'undefined' || ngDevMode) ?
-        'unsafe value used in a script context' :
-        '';
-    throw new RuntimeError(905 /* RuntimeErrorCode.UNSAFE_VALUE_IN_SCRIPT */, errorMessage);
+    throw new RuntimeError(905 /* RuntimeErrorCode.UNSAFE_VALUE_IN_SCRIPT */, ngDevMode && 'unsafe value used in a script context');
 }
 /**
  * A template tag function for promoting the associated constant literal to a
@@ -7293,6 +7254,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.
@@ -7375,7 +7347,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.
@@ -7400,7 +7372,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);
@@ -7427,17 +7398,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));
 }
 /**
@@ -7449,14 +7417,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.
@@ -7688,7 +7649,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);
@@ -7716,7 +7677,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();
         }
@@ -7892,30 +7853,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) {
@@ -7927,12 +7875,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) {
@@ -7942,13 +7885,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.
@@ -8257,39 +8200,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
@@ -8301,13 +8227,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);
         }
     }
 }
@@ -8323,12 +8243,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++;
 }
 /**
@@ -8343,17 +8258,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++;
 }
@@ -8403,7 +8313,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)
@@ -9518,6 +9428,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.
@@ -10128,7 +10050,7 @@ class ReflectiveKey {
         this.token = token;
         this.id = id;
         if (!token) {
-            throw new Error('Token must be defined!');
+            throw new RuntimeError(208 /* RuntimeErrorCode.MISSING_INJECTION_TOKEN */, ngDevMode && 'Token must be defined!');
         }
         this.displayName = stringify(this.token);
     }
@@ -10932,6 +10854,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);
     }
@@ -11818,6 +11743,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.
@@ -11885,7 +11817,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) {
@@ -12403,16 +12335,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.
  *
@@ -12421,21 +12343,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.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.ShadowDom;
+    return renderer.selectRootElement(elementOrSelector, preserveContent);
 }
 /**
  * Saves context for this cleanup function in LView.cleanupInstances.
@@ -12650,13 +12560,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
@@ -12680,23 +12584,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) {
@@ -12726,6 +12622,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);
@@ -13050,19 +12947,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);
     }
 }
 /**
@@ -13154,7 +13044,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`
@@ -13270,7 +13159,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];
@@ -13622,48 +13511,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.
- *
- * @param component Component to mark as dirty.
+ * Creates a root component and sets it up with features and host bindings. Shared by
+ * renderComponent() and ViewContainerRef.createComponent().
  */
-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 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 perform change detection on the whole application.
+ * Used to enable lifecycle hooks on the root component.
  *
- * 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.
+ * 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.
  *
- * 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:
+ *
+ * ```
+ * renderComponent(AppComponent, {hostFeatures: [LifecycleHooksFeature]});
+ * ```
  */
-function tick(component) {
-    const rootView = getRootView(component);
-    const rootContext = rootView[CONTEXT];
-    tickRootContext(rootContext);
+function LifecycleHooksFeature() {
+    const tNode = getCurrentTNode();
+    ngDevMode && assertDefined(tNode, 'TNode is required');
+    registerPostOrderHooks(getLView()[TVIEW], tNode);
+}
+/**
+ * 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.
+ */
+function whenRendered(component) {
+    return getRootContext(component).clean;
 }
 
 /**
@@ -13673,407 +13649,412 @@ 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;
+    mergeHostAttrsAcrossInheritance(inheritanceChain);
 }
 /**
- * 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.
+ * 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 getContext(element) {
-    assertDomElement(element);
-    const context = getLContext(element);
-    const lView = context ? context.lView : null;
-    return lView === null ? null : lView[CONTEXT];
+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));
+    }
 }
-/**
- * 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
- */
-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 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;
     }
-    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.
+ * @license
+ * Copyright Google LLC All Rights Reserved.
  *
- * @publicApi
- * @globalApi ng
+ * 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 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
+ * Fields which exist on either directive or component definitions, and need to be copied from
+ * parent to child classes by the `ɵɵCopyDefinitionFeature`.
  */
-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);
-}
+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.
+];
 /**
- * Retrieve a set of injection tokens at a given DOM node.
+ * Fields which exist only on component definitions, and need to be copied from parent to child
+ * classes by the `ɵɵCopyDefinitionFeature`.
  *
- * @param element Element for which the injection tokens should be retrieved.
+ * 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 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);
-    }
-    return providerTokens;
-}
+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 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>
- * ```
+ * Copies the fields not handled by the `ɵɵInheritDefinitionFeature` from the supertype of a
+ * definition.
  *
- * Calling `getDirectives` on `<button>` will return an array with an instance of the `MyButton`
- * directive that is associated with the DOM node.
+ * 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.
  *
- * Calling `getDirectives` on `<my-comp>` will return an empty array.
+ * The `ɵɵCopyDefinitionFeature` then copies any needed fields from the parent class' definition,
+ * including things like the component template function.
  *
- * @param node DOM node for which to get the directives.
- * @returns Array of directives associated with the node.
+ * @param definition The definition of a child class which inherits from a parent class with its
+ * own definition.
  *
- * @publicApi
- * @globalApi ng
+ * @codeGenApi
  */
-function getDirectives(node) {
-    // Skip text nodes because we can't have directives associated with them.
-    if (node instanceof Text) {
-        return [];
+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;
     }
-    const context = getLContext(node);
-    const lView = context ? context.lView : null;
-    if (lView === null) {
-        return [];
+    else {
+        // Don't use getComponentDef/getDirectiveDef. This logic relies on inheritance.
+        superDef = superType.ɵdir;
     }
-    const tView = lView[TVIEW];
-    const nodeIndex = context.nodeIndex;
-    if (!tView?.data[nodeIndex]) {
-        return [];
+    // 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 (context.directives === undefined) {
-        context.directives = getDirectivesAtNodeIndex(nodeIndex, lView, false);
+    if (isComponentDef(superDef)) {
+        // Copy over any component-specific fields.
+        for (const field of COPY_COMPONENT_FIELDS) {
+            defAny[field] = superDef[field];
+        }
     }
-    // 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
+ * @license
+ * Copyright Google LLC All Rights Reserved.
  *
- * @publicApi
- * @globalApi ng
+ * 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 getDirectiveMetadata(directiveOrComponentInstance) {
-    const { constructor } = directiveOrComponentInstance;
-    if (!constructor) {
-        throw new Error('Unable to find the instance constructor');
-    }
-    // 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$1(constructor);
-    if (componentDef) {
-        return {
-            inputs: componentDef.inputs,
-            outputs: componentDef.outputs,
-            encapsulation: componentDef.encapsulation,
-            changeDetection: componentDef.onPush ? ChangeDetectionStrategy.OnPush :
-                ChangeDetectionStrategy.Default
-        };
-    }
-    const directiveDef = getDirectiveDef(constructor);
-    if (directiveDef) {
-        return { inputs: directiveDef.inputs, outputs: directiveDef.outputs };
+let _symbolIterator = null;
+function getSymbolIterator() {
+    if (!_symbolIterator) {
+        const Symbol = _global$1['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 null;
+    return _symbolIterator;
 }
+
 /**
- * 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 {};
+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);
         }
-        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
- */
-function getHostElement(componentOrDirective) {
-    return getLContext(componentOrDirective).native;
+function isJsObject(o) {
+    return o !== null && (typeof o === 'function' || typeof o === 'object');
 }
+
 /**
- * Retrieves the rendered text for a given component.
+ * @license
+ * Copyright Google LLC All Rights Reserved.
  *
- * 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
+ * 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 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 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);
         }
     }
-    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;
+// 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];
 }
 /**
- * Returns the attached `DebugNode` instance for an element in the DOM.
+ * Updates binding if changed, then returns whether it was updated.
  *
- * @param element DOM element which is owned by an existing component's view.
+ * 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.
+ *
+ * @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 getDebugNode(element) {
-    if (ngDevMode && !(element instanceof Node)) {
-        throw new Error('Expecting instance of DOM Element');
-    }
-    const lContext = getLContext(element);
-    const lView = lContext ? lContext.lView : null;
-    if (lView === null) {
-        return null;
+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;
     }
-    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 {
+        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;
     }
-    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;
+/** 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;
 }
-/** 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');
-    }
+/** 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;
 }
 
 /**
@@ -14084,17 +14065,28 @@ function assertDomElement(value) {
  * 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.
+ * Updates the value of or removes a bound attribute on an Element.
  *
- * @param component Component to {@link ChangeDetectorRef#markForCheck mark for check}.
+ * Used in the case of `[attr.title]="value"`
  *
- * @publicApi
- * @globalApi ng
+ * @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 applyChanges(component) {
-    markDirty(component);
-    getRootComponents(component).forEach(rootComponent => detectChanges(rootComponent));
+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;
 }
 
 /**
@@ -14105,890 +14097,181 @@ function applyChanges(component) {
  * 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:
+ * Create interpolation bindings with a variable number of expressions.
  *
- *   bazel run //packages/core/test/bundling/todo:devserver
+ * 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.
  *
- *  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`.
+ * `values`:
+ * - has static text at even indexes,
+ * - has evaluated expressions at odd indexes.
  *
- * These functions are available globally when Angular is in development
- * mode and are automatically stripped away from prod mode is on.
+ * Returns the concatenated string when any of the arguments changes, `NO_CHANGE` otherwise.
  */
-function publishDefaultGlobalUtils() {
-    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);
-        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 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;
     }
-}
-/**
- * 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$1;
-        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;
-        }
+    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;
 }
-
 /**
- * @license
- * Copyright Google LLC All Rights Reserved.
+ * Creates an interpolation binding with 1 expression.
  *
- * 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
+ * @param prefix static value used for concatenation only.
+ * @param v0 value checked for change.
+ * @param suffix static value used for concatenation only.
  */
-// TODO: A hack to not pull in the NullInjector from @angular/core.
-const NULL_INJECTOR = {
-    get: (token, notFoundValue) => {
-        throwProviderNotFoundError(token, 'NullInjector');
-    }
-};
+function interpolation1(lView, prefix, v0, suffix) {
+    const different = bindingUpdated(lView, nextBindingIndex(), v0);
+    return different ? prefix + renderStringify(v0) + suffix : NO_CHANGE;
+}
 /**
- * Bootstraps a Component into an existing host element and returns an instance
- * of the component.
- *
- * 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 componentType Component to bootstrap
- * @param options Optional parameters which control bootstrapping
- */
-function renderComponent(componentType /* Type as workaround for: Microsoft/TypeScript/issues/4881 */, opts = {}) {
-    ngDevMode && publishDefaultGlobalUtils();
-    ngDevMode && assertComponentType(componentType);
-    const rendererFactory = opts.rendererFactory || domRendererFactory3;
-    const sanitizer = opts.sanitizer || null;
-    const componentDef = getComponentDef$1(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();
-    }
-    return component;
+ * 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 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
- *
- * @returns Component view created
+ * Creates an interpolation binding with 3 expressions.
  */
-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;
+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;
 }
 /**
- * Creates a root component and sets it up with features and host bindings. Shared by
- * renderComponent() and ViewContainerRef.createComponent().
+ * Create an interpolation binding with 4 expressions.
  */
-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 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;
 }
-function createRootContext(scheduler, playerHandler) {
-    return {
-        components: [],
-        scheduler: scheduler || defaultScheduler,
-        clean: CLEAN_PROMISE,
-        playerHandler: playerHandler || null,
-        flags: 0 /* RootContextFlags.Empty */
-    };
+/**
+ * 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;
 }
 /**
- * Used to enable lifecycle hooks on the root component.
+ * 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;
+}
+
+/**
  *
- * 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.
+ * Update an interpolated attribute on an element with single bound value surrounded by text.
  *
- * Example:
+ * Used when the value passed to a property has 1 interpolated value in it:
  *
+ * ```html
+ * <div attr.title="prefix{{v0}}suffix"></div>
  * ```
- * renderComponent(AppComponent, {hostFeatures: [LifecycleHooksFeature]});
+ *
+ * Its compiled representation is::
+ *
+ * ```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
  */
-function LifecycleHooksFeature() {
-    const tNode = getCurrentTNode();
-    ngDevMode && assertDefined(tNode, 'TNode is required');
-    registerPostOrderHooks(getLView()[TVIEW], tNode);
+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 ɵɵattributeInterpolate1;
 }
 /**
- * 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.
+ * Update an interpolated attribute on an element with 2 bound values surrounded by text.
  *
- * Example:
- * ```
- * await whenRendered(myComponent);
+ * Used when the value passed to a property has 2 interpolated values in it:
+ *
+ * ```html
+ * <div attr.title="prefix{{v0}}-{{v1}}suffix"></div>
  * ```
  *
- * @param component Component to wait upon
- * @returns Promise which resolves when the component is rendered.
- */
-function whenRendered(component) {
-    return getRootContext(component).clean;
-}
-
-/**
- * @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
- */
-function getSuperType(type) {
-    return Object.getPrototypeOf(type.prototype).constructor;
-}
-/**
- * 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
- */
-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) {
-                const errorMessage = (typeof ngDevMode === 'undefined' || ngDevMode) ?
-                    `Directives cannot inherit Components. Directive ${stringifyForError(definition.type)} is attempting to extend component ${stringifyForError(superType)}` :
-                    '';
-                throw new RuntimeError(903 /* RuntimeErrorCode.INVALID_INHERITANCE */, errorMessage);
-            }
-            // 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);
-}
-/**
- * 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.
- */
-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;
-    }
-}
-
-/**
- * @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
- */
-/**
- * Fields which exist on either directive or component definitions, and need to be copied from
- * parent to child classes by the `ɵɵCopyDefinitionFeature`.
- */
-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.
-];
-/**
- * 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.
- */
-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',
-];
-/**
- * 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.
- *
- * The `ɵɵCopyDefinitionFeature` then copies any needed fields from the parent class' definition,
- * including things like the component template function.
- *
- * @param definition The definition of a child class which inherits from a parent class with its
- * own definition.
- *
- * @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.
- *
- * 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
- */
-let _symbolIterator = null;
-function getSymbolIterator() {
-    if (!_symbolIterator) {
-        const Symbol = _global$1['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;
-}
-
-/**
- * @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
- */
-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 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
- */
-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);
-        }
-    }
-}
-
-/**
- * @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(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];
-}
-/**
- * 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.
- *
- * @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:
- *
- * ```html
- * <div attr.title="prefix{{v0}}suffix"></div>
- * ```
- *
- * Its compiled representation is::
- *
- * ```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
- */
-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 ɵɵattributeInterpolate1;
-}
-/**
- *
- * 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');
- * ```
+ * ```ts
+ * ɵɵattributeInterpolate2('title', 'prefix', v0, '-', v1, 'suffix');
+ * ```
  *
  * @param attrName The name of the attribute to update
  * @param prefix Static value used for concatenation only.
@@ -15324,6 +14607,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.
@@ -15868,51 +15202,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 {
@@ -17986,7 +17311,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);
         }
@@ -19509,7 +18834,7 @@ function findLocaleData(locale) {
     if (parentLocale === 'en') {
         return localeEn;
     }
-    throw new Error(`Missing locale data for the locale "${locale}".`);
+    throw new RuntimeError(701 /* RuntimeErrorCode.MISSING_LOCALE_DATA */, ngDevMode && `Missing locale data for the locale "${locale}".`);
 }
 /**
  * Retrieves the default currency code for the given locale.
@@ -21839,7 +21164,7 @@ function noComponentFactoryError(component) {
     return error;
 }
 const ERROR_COMPONENT = 'ngComponent';
-function getComponent(error) {
+function getComponent$1(error) {
     return error[ERROR_COMPONENT];
 }
 class _NullComponentFactoryResolver {
@@ -22023,14 +21348,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
@@ -22038,7 +21355,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];
 }
 
 /**
@@ -22085,7 +21402,7 @@ class Version {
 /**
  * @publicApi
  */
-const VERSION = new Version('14.1.0-next.1');
+const VERSION = new Version('14.1.0-next.4');
 
 /**
  * @license
@@ -22423,8 +21740,7 @@ class ViewRef {
     }
     attachToViewContainerRef() {
         if (this._appRef) {
-            const errorMessage = ngDevMode ? 'This view is already attached directly to the ApplicationRef!' : '';
-            throw new RuntimeError(902 /* RuntimeErrorCode.VIEW_ALREADY_ATTACHED */, errorMessage);
+            throw new RuntimeError(902 /* RuntimeErrorCode.VIEW_ALREADY_ATTACHED */, ngDevMode && 'This view is already attached directly to the ApplicationRef!');
         }
         this._attachedToViewContainer = true;
     }
@@ -22434,8 +21750,7 @@ class ViewRef {
     }
     attachToAppRef(appRef) {
         if (this._attachedToViewContainer) {
-            const errorMessage = ngDevMode ? 'This view is already attached to a ViewContainer!' : '';
-            throw new RuntimeError(902 /* RuntimeErrorCode.VIEW_ALREADY_ATTACHED */, errorMessage);
+            throw new RuntimeError(902 /* RuntimeErrorCode.VIEW_ALREADY_ATTACHED */, ngDevMode && 'This view is already attached to a ViewContainer!');
         }
         this._appRef = appRef;
     }
@@ -22551,7 +21866,13 @@ class ComponentFactory extends ComponentFactory$1 {
                 realEnvironmentInjector;
         }
         const rootViewInjector = realEnvironmentInjector ? new ChainedInjector(injector, realEnvironmentInjector) : injector;
-        const rendererFactory = rootViewInjector.get(RendererFactory2, domRendererFactory3);
+        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
@@ -22615,218 +21936,656 @@ class ComponentFactory extends ComponentFactory$1 {
         finally {
             leaveView();
         }
-        return new ComponentRef(this.componentType, component, createElementRef(tElementNode, rootLView), rootLView, tElementNode);
+        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$1(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 context.component;
 }
-const componentFactoryResolver = new ComponentFactoryResolver();
 /**
- * Creates a ComponentFactoryResolver and stores it on the injector. Or, if the
- * ComponentFactoryResolver
- * already exists, retrieves the existing ComponentFactoryResolver.
+ * 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`).
  *
- * @returns The ComponentFactoryResolver instance to use
+ * @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 injectComponentFactoryResolver() {
-    return componentFactoryResolver;
+function getContext(element) {
+    assertDomElement(element);
+    const context = getLContext(element);
+    const lView = context ? context.lView : null;
+    return lView === null ? null : lView[CONTEXT];
 }
 /**
- * Represents an instance of a Component created via a {@link ComponentFactory}.
+ * Retrieves the component instance whose view contains the DOM element.
  *
- * `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.
+ * 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 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);
-    }
-    destroy() {
-        this.hostView.destroy();
-    }
-    onDestroy(callback) {
-        this.hostView.onDestroy(callback);
+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];
 }
-
 /**
- * @license
- * Copyright Google LLC All Rights Reserved.
+ * Retrieves all root components associated with a DOM element, directive or component instance.
+ * Root components are those which have been bootstrapped by Angular.
  *
- * 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
+ * @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] : [];
+}
 /**
- * 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 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 createNgModuleRef(ngModule, parentInjector) {
-    return new NgModuleRef(ngModule, parentInjector ?? null);
+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);
 }
-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$1(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;
+/**
+ * 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 this._r3Injector.get(token, notFoundValue, injectFlags);
+        providerTokens.push(value);
     }
-    destroy() {
-        ngDevMode && assertDefined(this.destroyCbs, 'NgModule already destroyed');
-        const injector = this._r3Injector;
-        !injector.destroyed && injector.destroy();
-        this.destroyCbs.forEach(fn => fn());
-        this.destroyCbs = null;
+    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) {
+        return [];
     }
-    onDestroy(callback) {
-        ngDevMode && assertDefined(this.destroyCbs, 'NgModule already destroyed');
-        this.destroyCbs.push(callback);
+    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];
+}
+/**
+ * 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(directiveOrComponentInstance) {
+    const { constructor } = directiveOrComponentInstance;
+    if (!constructor) {
+        throw new Error('Unable to find the instance constructor');
     }
-}
-class NgModuleFactory extends NgModuleFactory$1 {
-    constructor(moduleType) {
-        super();
-        this.moduleType = moduleType;
+    // 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$1(constructor);
+    if (componentDef) {
+        return {
+            inputs: componentDef.inputs,
+            outputs: componentDef.outputs,
+            encapsulation: componentDef.encapsulation,
+            changeDetection: componentDef.onPush ? ChangeDetectionStrategy.OnPush :
+                ChangeDetectionStrategy.Default
+        };
     }
-    create(parentInjector) {
-        return new NgModuleRef(this.moduleType, parentInjector);
+    const directiveDef = getDirectiveDef(constructor);
+    if (directiveDef) {
+        return { inputs: directiveDef.inputs, outputs: directiveDef.outputs };
     }
+    return null;
 }
-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);
+/**
+ * Retrieve map of local references.
+ *
+ * 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 || {};
 }
 /**
- * Create a new environment injector.
+ * 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
- * @developerPreview
+ * @globalApi ng
  */
-function createEnvironmentInjector(providers, parent = null, debugName = null) {
-    const adapter = new EnvironmentNgModuleRefAdapter(providers, parent, debugName);
-    return adapter.injector;
+function getHostElement(componentOrDirective) {
+    return getLContext(componentOrDirective).native;
 }
-
 /**
- * @license
- * Copyright Google LLC All Rights Reserved.
+ * Retrieves the rendered text for a given 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
+ * 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 || '';
+}
 /**
- * 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.
+ * 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
  */
-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();
+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 });
                 }
             }
         }
-        finally {
-            this.cachedInjectors.clear();
-        }
     }
+    listeners.sort(sortListeners);
+    return listeners;
+}
+function sortListeners(a, b) {
+    if (a.name == b.name)
+        return 0;
+    return a.name < b.name ? -1 : 1;
 }
-/** @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}.
+ * This function should not exist because it is megamorphic and only mostly correct.
  *
- * 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.
+ * See call site for more info.
+ */
+function isDirectiveDefHack(obj) {
+    return obj.type !== undefined && obj.template !== undefined && obj.declaredInputs !== undefined;
+}
+/**
+ * Returns the attached `DebugNode` instance for an element in the DOM.
  *
- * @codeGenApi
+ * @param element DOM element which is owned by an existing component's view.
  */
-function ɵɵStandaloneFeature(definition) {
-    definition.getStandaloneInjector = (parentInjector) => {
-        return parentInjector.get(StandaloneService).getOrCreateStandaloneInjector(definition);
-    };
+function getDebugNode(element) {
+    if (ngDevMode && !(element instanceof Node)) {
+        throw new Error('Expecting instance of DOM Element');
+    }
+    const lContext = getLContext(element);
+    const lView = lContext ? lContext.lView : null;
+    if (lView === null) {
+        return null;
+    }
+    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;
+}
+/**
+ * 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');
+    }
 }
 
 /**
@@ -24046,7 +23805,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;
@@ -24713,7 +24472,7 @@ function patchModuleCompilation() {
 function isModuleWithProviders$1(value) {
     return value.ngModule !== undefined;
 }
-function isNgModule(value) {
+function isNgModule$1(value) {
     return !!getNgModuleDef(value);
 }
 
@@ -25136,7 +24895,7 @@ function patchComponentDefWithScope(componentDef, transitiveScopes) {
  * (either a NgModule or a standalone component / directive / pipe).
  */
 function transitiveScopesFor(type) {
-    if (isNgModule(type)) {
+    if (isNgModule$1(type)) {
         return transitiveScopesForNgModule(type);
     }
     else if (isStandalone(type)) {
@@ -25220,7 +24979,7 @@ function transitiveScopesForNgModule(moduleType) {
         const exportedType = exported;
         // Either the type is a module, a pipe, or a component/directive (which may not have a
         // ɵcmp as it might be compiled asynchronously).
-        if (isNgModule(exportedType)) {
+        if (isNgModule$1(exportedType)) {
             // When this module exports another, the exported module's exported directives and pipes are
             // added to both the compilation and exported scopes of this module.
             const exportedScope = transitiveScopesFor(exportedType);
@@ -25527,7 +25286,7 @@ class R3TestBedCompiler {
         // module's provider list.
         this.providerOverridesByModule = new Map();
         this.providerOverridesByToken = new Map();
-        this.moduleProvidersOverridden = new Set();
+        this.scopesWithOverriddenProviders = new Set();
         this.testModuleRef = null;
         class DynamicTestModule {
         }
@@ -25695,7 +25454,7 @@ class R3TestBedCompiler {
         this.queueTypesFromModulesArray([moduleType]);
         this.compileTypesSync();
         this.applyProviderOverrides();
-        this.applyProviderOverridesToModule(moduleType);
+        this.applyProviderOverridesInScope(moduleType);
         this.applyTransitiveScopes();
     }
     /**
@@ -25705,7 +25464,7 @@ class R3TestBedCompiler {
         this.queueTypesFromModulesArray([moduleType]);
         await this.compileComponents();
         this.applyProviderOverrides();
-        this.applyProviderOverridesToModule(moduleType);
+        this.applyProviderOverridesInScope(moduleType);
         this.applyTransitiveScopes();
     }
     /**
@@ -25806,50 +25565,52 @@ class R3TestBedCompiler {
         this.seenComponents.clear();
         this.seenDirectives.clear();
     }
-    applyProviderOverridesToModule(moduleType) {
-        if (this.moduleProvidersOverridden.has(moduleType)) {
+    /**
+     * Applies provider overrides to a given type (either an NgModule or a standalone component)
+     * and all imported NgModules and standalone components recursively.
+     */
+    applyProviderOverridesInScope(type) {
+        const hasScope = isStandaloneComponent(type) || isNgModule(type);
+        // The function can be re-entered recursively while inspecting dependencies
+        // of an NgModule or a standalone component. Exit early if we come across a
+        // type that can not have a scope (directive or pipe) or the type is already
+        // processed earlier.
+        if (!hasScope || this.scopesWithOverriddenProviders.has(type)) {
             return;
         }
-        this.moduleProvidersOverridden.add(moduleType);
+        this.scopesWithOverriddenProviders.add(type);
         // NOTE: the line below triggers JIT compilation of the module injector,
         // which also invokes verification of the NgModule semantics, which produces
         // detailed error messages. The fact that the code relies on this line being
         // present here is suspicious and should be refactored in a way that the line
         // below can be moved (for ex. after an early exit check below).
-        const injectorDef = moduleType[ɵNG_INJ_DEF];
+        const injectorDef = type[ɵNG_INJ_DEF];
         // No provider overrides, exit early.
         if (this.providerOverridesByToken.size === 0)
             return;
-        if (isStandaloneComponent(moduleType)) {
+        if (isStandaloneComponent(type)) {
             // Visit all component dependencies and override providers there.
-            const def = getComponentDef(moduleType);
+            const def = getComponentDef(type);
             const dependencies = maybeUnwrapFn(def.dependencies ?? []);
             for (const dependency of dependencies) {
-                // Proceed with examining dependencies recursively
-                // when a dependency is a standalone component or an NgModule.
-                // In AOT, the `dependencies` might also contain regular (NgModule-based)
-                // Component, Directive and Pipes. Skip them here, they are handled in a
-                // different location (in the `configureTestingModule` function).
-                if (isStandaloneComponent(dependency) || hasNgModuleDef(dependency)) {
-                    this.applyProviderOverridesToModule(dependency);
-                }
+                this.applyProviderOverridesInScope(dependency);
             }
         }
         else {
             const providers = [
                 ...injectorDef.providers,
-                ...(this.providerOverridesByModule.get(moduleType) || [])
+                ...(this.providerOverridesByModule.get(type) || [])
             ];
             if (this.hasProviderOverrides(providers)) {
-                this.maybeStoreNgDef(ɵNG_INJ_DEF, moduleType);
-                this.storeFieldOfDefOnType(moduleType, ɵNG_INJ_DEF, 'providers');
+                this.maybeStoreNgDef(ɵNG_INJ_DEF, type);
+                this.storeFieldOfDefOnType(type, ɵNG_INJ_DEF, 'providers');
                 injectorDef.providers = this.getOverriddenProviders(providers);
             }
             // Apply provider overrides to imported modules recursively
-            const moduleDef = moduleType[ɵNG_MOD_DEF];
+            const moduleDef = type[ɵNG_MOD_DEF];
             const imports = maybeUnwrapFn(moduleDef.imports);
             for (const importedModule of imports) {
-                this.applyProviderOverridesToModule(importedModule);
+                this.applyProviderOverridesInScope(importedModule);
             }
             // Also override the providers on any ModuleWithProviders imports since those don't appear in
             // the moduleDef.
@@ -26086,7 +25847,7 @@ class R3TestBedCompiler {
             });
         });
         this.initialNgDefs.clear();
-        this.moduleProvidersOverridden.clear();
+        this.scopesWithOverriddenProviders.clear();
         this.restoreComponentResolutionQueue();
         // Restore the locale ID to the default value, this shouldn't be necessary but we never know
         ɵsetLocaleId(ɵDEFAULT_LOCALE_ID);
@@ -26113,7 +25874,7 @@ class R3TestBedCompiler {
             providers,
         }, /* allowDuplicateDeclarationsInRoot */ true);
         // clang-format on
-        this.applyProviderOverridesToModule(this.testModuleType);
+        this.applyProviderOverridesInScope(this.testModuleType);
     }
     get injector() {
         if (this._injector !== null) {
@@ -26213,6 +25974,9 @@ function getComponentDef(value) {
 function hasNgModuleDef(value) {
     return value.hasOwnProperty('ɵmod');
 }
+function isNgModule(value) {
+    return hasNgModuleDef(value);
+}
 function maybeUnwrapFn(maybeFn) {
     return maybeFn instanceof Function ? maybeFn() : maybeFn;
 }