@angular/core 15.0.0-next.2 → 15.0.0-next.4

package/fesm2015/testing.mjs

@@ -1,10 +1,10 @@
 /**
- * @license Angular v15.0.0-next.2
+ * @license Angular v15.0.0-next.4
  * (c) 2010-2022 Google LLC. https://angular.io/
  * License: MIT
  */
 
-import { getDebugNode as getDebugNode$1, RendererFactory2 as RendererFactory2$1, InjectionToken as InjectionToken$1, ɵstringify, ɵReflectionCapabilities, Directive, Component, Pipe, NgModule, ɵgetInjectableDef, resolveForwardRef as resolveForwardRef$1, ɵNG_COMP_DEF, ɵRender3NgModuleRef, ApplicationInitStatus, LOCALE_ID as LOCALE_ID$1, ɵDEFAULT_LOCALE_ID, ɵsetLocaleId, ɵRender3ComponentFactory, ɵcompileComponent, ɵNG_DIR_DEF, ɵcompileDirective, ɵNG_PIPE_DEF, ɵcompilePipe, ɵNG_MOD_DEF, ɵtransitiveScopesFor, ɵpatchComponentDefWithScope, ɵNG_INJ_DEF, ɵcompileNgModuleDefs, NgZone, Compiler, COMPILER_OPTIONS, ɵNgModuleFactory, ModuleWithComponentFactories, Injector as Injector$1, InjectFlags as InjectFlags$1, ɵsetAllowDuplicateNgModuleIdsForTest, ɵresetCompiledComponents, ɵsetUnknownElementStrictMode as ɵsetUnknownElementStrictMode$1, ɵsetUnknownPropertyStrictMode as ɵsetUnknownPropertyStrictMode$1, ɵgetUnknownElementStrictMode as ɵgetUnknownElementStrictMode$1, ɵgetUnknownPropertyStrictMode as ɵgetUnknownPropertyStrictMode$1, ɵflushModuleScopingQueueAsMuchAsPossible } from '@angular/core';
+import { getDebugNode as getDebugNode$1, RendererFactory2 as RendererFactory2$1, InjectionToken as InjectionToken$1, ɵstringify, ɵReflectionCapabilities, Directive, Component, Pipe, NgModule, ɵgetInjectableDef, resolveForwardRef as resolveForwardRef$1, ɵNG_COMP_DEF, ɵRender3NgModuleRef, ApplicationInitStatus, LOCALE_ID as LOCALE_ID$1, ɵDEFAULT_LOCALE_ID, ɵsetLocaleId, ɵRender3ComponentFactory, ɵcompileComponent, ɵNG_DIR_DEF, ɵcompileDirective, ɵNG_PIPE_DEF, ɵcompilePipe, ɵNG_MOD_DEF, ɵtransitiveScopesFor, ɵpatchComponentDefWithScope, ɵNG_INJ_DEF, ɵcompileNgModuleDefs, NgZone, Compiler, COMPILER_OPTIONS, ɵNgModuleFactory, ModuleWithComponentFactories, ɵconvertToBitFlags, Injector as Injector$1, InjectFlags as InjectFlags$1, ɵsetAllowDuplicateNgModuleIdsForTest, ɵresetCompiledComponents, ɵsetUnknownElementStrictMode as ɵsetUnknownElementStrictMode$1, ɵsetUnknownPropertyStrictMode as ɵsetUnknownPropertyStrictMode$1, ɵgetUnknownElementStrictMode as ɵgetUnknownElementStrictMode$1, ɵgetUnknownPropertyStrictMode as ɵgetUnknownPropertyStrictMode$1, ɵflushModuleScopingQueueAsMuchAsPossible } from '@angular/core';
 import { __awaiter } from 'tslib';
 import { ResourceLoader } from '@angular/compiler';
 import { Subject, Subscription } from 'rxjs';
@@ -2175,17 +2175,21 @@ 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);
+    return ɵɵinject(token, convertToBitFlags(flags));
+}
+// Converts object-based DI flags (`InjectOptions`) to bit flags (`InjectFlags`).
+function convertToBitFlags(flags) {
+    if (typeof flags === 'undefined' || typeof flags === 'number') {
+        return flags;
+    }
+    // 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`.
+    return (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 */));
 }
 function injectArgs(types) {
     const args = [];
@@ -2569,7 +2573,8 @@ function ɵɵdefineComponent(componentDefinition) {
             setInput: null,
             schemas: componentDefinition.schemas || null,
             tView: null,
-            applyHostDirectives: null,
+            findHostDirectiveDefs: null,
+            hostDirectives: null,
         };
         const dependencies = componentDefinition.dependencies;
         const feature = componentDefinition.features;
@@ -2903,10 +2908,10 @@ function isLContainer(value) {
     return Array.isArray(value) && value[TYPE] === true;
 }
 function isContentQueryHost(tNode) {
-    return (tNode.flags & 8 /* TNodeFlags.hasContentQuery */) !== 0;
+    return (tNode.flags & 4 /* TNodeFlags.hasContentQuery */) !== 0;
 }
 function isComponentHost(tNode) {
-    return (tNode.flags & 2 /* TNodeFlags.isComponentHost */) === 2 /* TNodeFlags.isComponentHost */;
+    return tNode.componentOffset > -1;
 }
 function isDirectiveHost(tNode) {
     return (tNode.flags & 1 /* TNodeFlags.isDirectiveHost */) === 1 /* TNodeFlags.isDirectiveHost */;
@@ -4316,7 +4321,7 @@ const unusedValueExportToPlacateAjd$5 = 1;
  * @param tNode
  */
 function hasClassInput(tNode) {
-    return (tNode.flags & 16 /* TNodeFlags.hasClassInput */) !== 0;
+    return (tNode.flags & 8 /* TNodeFlags.hasClassInput */) !== 0;
 }
 /**
  * Returns `true` if the `TNode` has a directive which has `@Input()` for `style` binding.
@@ -4340,7 +4345,7 @@ function hasClassInput(tNode) {
  * @param tNode
  */
 function hasStyleInput(tNode) {
-    return (tNode.flags & 32 /* TNodeFlags.hasStyleInput */) !== 0;
+    return (tNode.flags & 16 /* TNodeFlags.hasStyleInput */) !== 0;
 }
 
 /**
@@ -5232,7 +5237,7 @@ class NodeInjector {
         this._lView = _lView;
     }
     get(token, notFoundValue, flags) {
-        return getOrCreateInjectable(this._tNode, this._lView, token, flags, notFoundValue);
+        return getOrCreateInjectable(this._tNode, this._lView, token, convertToBitFlags(flags), notFoundValue);
     }
 }
 /** Creates a `NodeInjector` for the current node. */
@@ -7135,6 +7140,7 @@ class R3Injector extends EnvironmentInjector {
     }
     get(token, notFoundValue = THROW_IF_NOT_FOUND, flags = InjectFlags.Default) {
         this.assertNotDestroyed();
+        flags = convertToBitFlags(flags);
         // Set the injection context.
         const previousInjector = setCurrentInjector(this);
         const previousInjectImplementation = setInjectImplementation(undefined);
@@ -7636,7 +7642,7 @@ class Version {
 /**
  * @publicApi
  */
-const VERSION = new Version('15.0.0-next.2');
+const VERSION = new Version('15.0.0-next.4');
 
 /**
  * @license
@@ -7671,29 +7677,70 @@ const NOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR = {};
  * 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
  */
+// Keeps track of the currently-active LViews.
+const TRACKED_LVIEWS = new Map();
+// Used for generating unique IDs for LViews.
+let uniqueIdCounter = 0;
+/** Gets a unique ID that can be assigned to an LView. */
+function getUniqueLViewId() {
+    return uniqueIdCounter++;
+}
+/** Starts tracking an LView. */
+function registerLView(lView) {
+    ngDevMode && assertNumber(lView[ID], 'LView must have an ID in order to be registered');
+    TRACKED_LVIEWS.set(lView[ID], lView);
+}
+/** Gets an LView by its unique ID. */
+function getLViewById(id) {
+    ngDevMode && assertNumber(id, 'ID used for LView lookup must be a number');
+    return TRACKED_LVIEWS.get(id) || null;
+}
+/** Stops tracking an LView. */
+function unregisterLView(lView) {
+    ngDevMode && assertNumber(lView[ID], 'Cannot stop tracking an LView that does not have an ID');
+    TRACKED_LVIEWS.delete(lView[ID]);
+}
+
 /**
- * Defines a schema that allows an NgModule to contain the following:
- * - Non-Angular elements named with dash case (`-`).
- * - Element properties named with dash case (`-`).
- * Dash case is the naming convention for custom elements.
+ * @license
+ * Copyright Google LLC All Rights Reserved.
  *
- * @publicApi
+ * 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 CUSTOM_ELEMENTS_SCHEMA = {
-    name: 'custom-elements'
-};
 /**
- * Defines a schema that allows any property on any element.
- *
- * This schema allows you to ignore the errors related to any unknown elements or properties in a
- * template. The usage of this schema is generally discouraged because it prevents useful validation
- * and may hide real errors in your template. Consider using the `CUSTOM_ELEMENTS_SCHEMA` instead.
+ * The internal view context which is specific to a given DOM element, directive or
+ * component instance. Each value in here (besides the LView and element node details)
+ * can be present, null or undefined. If undefined then it implies the value has not been
+ * looked up yet, otherwise, if null, then a lookup was executed and nothing was found.
  *
- * @publicApi
+ * Each value will get filled when the respective value is examined within the getContext
+ * function. The component, element and each directive instance will share the same instance
+ * of the context.
  */
-const NO_ERRORS_SCHEMA = {
-    name: 'no-errors-schema'
-};
+class LContext {
+    constructor(
+    /**
+     * ID of the component's parent view data.
+     */
+    lViewId, 
+    /**
+     * The index instance of the node.
+     */
+    nodeIndex, 
+    /**
+     * The instance of the DOM node that is attached to the lNode.
+     */
+    native) {
+        this.lViewId = lViewId;
+        this.nodeIndex = nodeIndex;
+        this.native = native;
+    }
+    /** Component's parent view data. */
+    get lView() {
+        return getLViewById(this.lViewId);
+    }
+}
 
 /**
  * @license
@@ -7702,337 +7749,305 @@ const NO_ERRORS_SCHEMA = {
  * 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 shouldThrowErrorOnUnknownElement = false;
-/**
- * Sets a strict mode for JIT-compiled components to throw an error on unknown elements,
- * instead of just logging the error.
- * (for AOT-compiled ones this check happens at build time).
- */
-function ɵsetUnknownElementStrictMode(shouldThrow) {
-    shouldThrowErrorOnUnknownElement = shouldThrow;
-}
-/**
- * Gets the current value of the strict mode.
- */
-function ɵgetUnknownElementStrictMode() {
-    return shouldThrowErrorOnUnknownElement;
-}
-let shouldThrowErrorOnUnknownProperty = false;
-/**
- * Sets a strict mode for JIT-compiled components to throw an error on unknown properties,
- * instead of just logging the error.
- * (for AOT-compiled ones this check happens at build time).
- */
-function ɵsetUnknownPropertyStrictMode(shouldThrow) {
-    shouldThrowErrorOnUnknownProperty = shouldThrow;
-}
-/**
- * Gets the current value of the strict mode.
- */
-function ɵgetUnknownPropertyStrictMode() {
-    return shouldThrowErrorOnUnknownProperty;
-}
 /**
- * Validates that the element is known at runtime and produces
- * an error if it's not the case.
- * This check is relevant for JIT-compiled components (for AOT-compiled
- * ones this check happens at build time).
+ * Returns the matching `LContext` data for a given DOM node, directive or component instance.
  *
- * The element is considered known if either:
- * - it's a known HTML element
- * - it's a known custom element
- * - the element matches any directive
- * - the element is allowed by one of the schemas
+ * This function will examine the provided DOM element, component, or directive instance\'s
+ * monkey-patched property to derive the `LContext` data. Once called then the monkey-patched
+ * value will be that of the newly created `LContext`.
  *
- * @param element Element to validate
- * @param lView An `LView` that represents a current component that is being rendered
- * @param tagName Name of the tag to check
- * @param schemas Array of schemas
- * @param hasDirectives Boolean indicating that the element matches any directive
+ * If the monkey-patched value is the `LView` instance then the context value for that
+ * target will be created and the monkey-patch reference will be updated. Therefore when this
+ * function is called it may mutate the provided element\'s, component\'s or any of the associated
+ * directive\'s monkey-patch values.
+ *
+ * If the monkey-patch value is not detected then the code will walk up the DOM until an element
+ * is found which contains a monkey-patch reference. When that occurs then the provided element
+ * will be updated with a new context (which is then returned). If the monkey-patch value is not
+ * detected for a component/directive instance then it will throw an error (all components and
+ * directives should be automatically monkey-patched by ivy).
+ *
+ * @param target Component, Directive or DOM Node.
  */
-function validateElementIsKnown(element, lView, tagName, schemas, hasDirectives) {
-    // If `schemas` is set to `null`, that's an indication that this Component was compiled in AOT
-    // mode where this check happens at compile time. In JIT mode, `schemas` is always present and
-    // defined as an array (as an empty array in case `schemas` field is not defined) and we should
-    // execute the check below.
-    if (schemas === null)
-        return;
-    // If the element matches any directive, it's considered as valid.
-    if (!hasDirectives && tagName !== null) {
-        // The element is unknown if it's an instance of HTMLUnknownElement, or it isn't registered
-        // as a custom element. Note that unknown elements with a dash in their name won't be instances
-        // of HTMLUnknownElement in browsers that support web components.
-        const isUnknown = 
-        // Note that we can't check for `typeof HTMLUnknownElement === 'function'`,
-        // because while most browsers return 'function', IE returns 'object'.
-        (typeof HTMLUnknownElement !== 'undefined' && HTMLUnknownElement &&
-            element instanceof HTMLUnknownElement) ||
-            (typeof customElements !== 'undefined' && tagName.indexOf('-') > -1 &&
-                !customElements.get(tagName));
-        if (isUnknown && !matchingSchemas(schemas, tagName)) {
-            const isHostStandalone = isHostComponentStandalone(lView);
-            const templateLocation = getTemplateLocationDetails(lView);
-            const schemas = `'${isHostStandalone ? '@Component' : '@NgModule'}.schemas'`;
-            let message = `'${tagName}' is not a known element${templateLocation}:\n`;
-            message += `1. If '${tagName}' is an Angular component, then verify that it is ${isHostStandalone ? 'included in the \'@Component.imports\' of this component' :
-                'a part of an @NgModule where this component is declared'}.\n`;
-            if (tagName && tagName.indexOf('-') > -1) {
-                message +=
-                    `2. If '${tagName}' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the ${schemas} of this component to suppress this message.`;
+function getLContext(target) {
+    let mpValue = readPatchedData(target);
+    if (mpValue) {
+        // only when it's an array is it considered an LView instance
+        // ... otherwise it's an already constructed LContext instance
+        if (isLView(mpValue)) {
+            const lView = mpValue;
+            let nodeIndex;
+            let component = undefined;
+            let directives = undefined;
+            if (isComponentInstance(target)) {
+                nodeIndex = findViaComponent(lView, target);
+                if (nodeIndex == -1) {
+                    throw new Error('The provided component was not found in the application');
+                }
+                component = target;
+            }
+            else if (isDirectiveInstance(target)) {
+                nodeIndex = findViaDirective(lView, target);
+                if (nodeIndex == -1) {
+                    throw new Error('The provided directive was not found in the application');
+                }
+                directives = getDirectivesAtNodeIndex(nodeIndex, lView);
             }
             else {
-                message +=
-                    `2. To allow any element add 'NO_ERRORS_SCHEMA' to the ${schemas} of this component.`;
+                nodeIndex = findViaNativeElement(lView, target);
+                if (nodeIndex == -1) {
+                    return null;
+                }
             }
-            if (shouldThrowErrorOnUnknownElement) {
-                throw new RuntimeError(304 /* RuntimeErrorCode.UNKNOWN_ELEMENT */, message);
+            // the goal is not to fill the entire context full of data because the lookups
+            // are expensive. Instead, only the target data (the element, component, container, ICU
+            // expression or directive details) are filled into the context. If called multiple times
+            // with different target values then the missing target data will be filled in.
+            const native = unwrapRNode(lView[nodeIndex]);
+            const existingCtx = readPatchedData(native);
+            const context = (existingCtx && !Array.isArray(existingCtx)) ?
+                existingCtx :
+                createLContext(lView, nodeIndex, native);
+            // only when the component has been discovered then update the monkey-patch
+            if (component && context.component === undefined) {
+                context.component = component;
+                attachPatchData(context.component, context);
             }
-            else {
-                console.error(formatRuntimeError(304 /* RuntimeErrorCode.UNKNOWN_ELEMENT */, message));
+            // only when the directives have been discovered then update the monkey-patch
+            if (directives && context.directives === undefined) {
+                context.directives = directives;
+                for (let i = 0; i < directives.length; i++) {
+                    attachPatchData(directives[i], context);
+                }
+            }
+            attachPatchData(context.native, context);
+            mpValue = context;
+        }
+    }
+    else {
+        const rElement = target;
+        ngDevMode && assertDomNode(rElement);
+        // if the context is not found then we need to traverse upwards up the DOM
+        // to find the nearest element that has already been monkey patched with data
+        let parent = rElement;
+        while (parent = parent.parentNode) {
+            const parentContext = readPatchedData(parent);
+            if (parentContext) {
+                const lView = Array.isArray(parentContext) ? parentContext : parentContext.lView;
+                // the edge of the app was also reached here through another means
+                // (maybe because the DOM was changed manually).
+                if (!lView) {
+                    return null;
+                }
+                const index = findViaNativeElement(lView, rElement);
+                if (index >= 0) {
+                    const native = unwrapRNode(lView[index]);
+                    const context = createLContext(lView, index, native);
+                    attachPatchData(native, context);
+                    mpValue = context;
+                    break;
+                }
             }
         }
     }
+    return mpValue || null;
 }
 /**
- * Validates that the property of the element is known at runtime and returns
- * false if it's not the case.
- * This check is relevant for JIT-compiled components (for AOT-compiled
- * ones this check happens at build time).
+ * Creates an empty instance of a `LContext` context
+ */
+function createLContext(lView, nodeIndex, native) {
+    return new LContext(lView[ID], nodeIndex, native);
+}
+/**
+ * Takes a component instance and returns the view for that component.
  *
- * The property is considered known if either:
- * - it's a known property of the element
- * - the element is allowed by one of the schemas
- * - the property is used for animations
- *
- * @param element Element to validate
- * @param propName Name of the property to check
- * @param tagName Name of the tag hosting the property
- * @param schemas Array of schemas
- */
-function isPropertyValid(element, propName, tagName, schemas) {
-    // If `schemas` is set to `null`, that's an indication that this Component was compiled in AOT
-    // mode where this check happens at compile time. In JIT mode, `schemas` is always present and
-    // defined as an array (as an empty array in case `schemas` field is not defined) and we should
-    // execute the check below.
-    if (schemas === null)
-        return true;
-    // The property is considered valid if the element matches the schema, it exists on the element,
-    // or it is synthetic, and we are in a browser context (web worker nodes should be skipped).
-    if (matchingSchemas(schemas, tagName) || propName in element || isAnimationProp(propName)) {
-        return true;
-    }
-    // Note: `typeof Node` returns 'function' in most browsers, but on IE it is 'object' so we
-    // need to account for both here, while being careful with `typeof null` also returning 'object'.
-    return typeof Node === 'undefined' || Node === null || !(element instanceof Node);
-}
-/**
- * Logs or throws an error that a property is not supported on an element.
- *
- * @param propName Name of the invalid property
- * @param tagName Name of the tag hosting the property
- * @param nodeType Type of the node hosting the property
- * @param lView An `LView` that represents a current component
+ * @param componentInstance
+ * @returns The component's view
  */
-function handleUnknownPropertyError(propName, tagName, nodeType, lView) {
-    // Special-case a situation when a structural directive is applied to
-    // an `<ng-template>` element, for example: `<ng-template *ngIf="true">`.
-    // In this case the compiler generates the `ɵɵtemplate` instruction with
-    // the `null` as the tagName. The directive matching logic at runtime relies
-    // on this effect (see `isInlineTemplate`), thus using the 'ng-template' as
-    // a default value of the `tNode.value` is not feasible at this moment.
-    if (!tagName && nodeType === 4 /* TNodeType.Container */) {
-        tagName = 'ng-template';
-    }
-    const isHostStandalone = isHostComponentStandalone(lView);
-    const templateLocation = getTemplateLocationDetails(lView);
-    let message = `Can't bind to '${propName}' since it isn't a known property of '${tagName}'${templateLocation}.`;
-    const schemas = `'${isHostStandalone ? '@Component' : '@NgModule'}.schemas'`;
-    const importLocation = isHostStandalone ?
-        'included in the \'@Component.imports\' of this component' :
-        'a part of an @NgModule where this component is declared';
-    if (KNOWN_CONTROL_FLOW_DIRECTIVES.has(propName)) {
-        // Most likely this is a control flow directive (such as `*ngIf`) used in
-        // a template, but the directive or the `CommonModule` is not imported.
-        const correspondingImport = KNOWN_CONTROL_FLOW_DIRECTIVES.get(propName);
-        message += `\nIf the '${propName}' is an Angular control flow directive, ` +
-            `please make sure that either the '${correspondingImport}' directive or the 'CommonModule' is ${importLocation}.`;
+function getComponentViewByInstance(componentInstance) {
+    let patchedData = readPatchedData(componentInstance);
+    let lView;
+    if (isLView(patchedData)) {
+        const contextLView = patchedData;
+        const nodeIndex = findViaComponent(contextLView, componentInstance);
+        lView = getComponentLViewByIndex(nodeIndex, contextLView);
+        const context = createLContext(contextLView, nodeIndex, lView[HOST]);
+        context.component = componentInstance;
+        attachPatchData(componentInstance, context);
+        attachPatchData(context.native, context);
     }
     else {
-        // May be an Angular component, which is not imported/declared?
-        message += `\n1. If '${tagName}' is an Angular component and it has the ` +
-            `'${propName}' input, then verify that it is ${importLocation}.`;
-        // May be a Web Component?
-        if (tagName && tagName.indexOf('-') > -1) {
-            message += `\n2. If '${tagName}' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' ` +
-                `to the ${schemas} of this component to suppress this message.`;
-            message += `\n3. To allow any property add 'NO_ERRORS_SCHEMA' to ` +
-                `the ${schemas} of this component.`;
-        }
-        else {
-            // If it's expected, the error can be suppressed by the `NO_ERRORS_SCHEMA` schema.
-            message += `\n2. To allow any property add 'NO_ERRORS_SCHEMA' to ` +
-                `the ${schemas} of this component.`;
-        }
+        const context = patchedData;
+        const contextLView = context.lView;
+        ngDevMode && assertLView(contextLView);
+        lView = getComponentLViewByIndex(context.nodeIndex, contextLView);
     }
-    reportUnknownPropertyError(message);
+    return lView;
 }
-function reportUnknownPropertyError(message) {
-    if (shouldThrowErrorOnUnknownProperty) {
-        throw new RuntimeError(303 /* RuntimeErrorCode.UNKNOWN_BINDING */, message);
+/**
+ * This property will be monkey-patched on elements, components and directives.
+ */
+const MONKEY_PATCH_KEY_NAME = '__ngContext__';
+/**
+ * Assigns the given data to the given target (which could be a component,
+ * directive or DOM node instance) using monkey-patching.
+ */
+function attachPatchData(target, data) {
+    ngDevMode && assertDefined(target, 'Target expected');
+    // Only attach the ID of the view in order to avoid memory leaks (see #41047). We only do this
+    // for `LView`, because we have control over when an `LView` is created and destroyed, whereas
+    // we can't know when to remove an `LContext`.
+    if (isLView(data)) {
+        target[MONKEY_PATCH_KEY_NAME] = data[ID];
+        registerLView(data);
     }
     else {
-        console.error(formatRuntimeError(303 /* RuntimeErrorCode.UNKNOWN_BINDING */, message));
+        target[MONKEY_PATCH_KEY_NAME] = data;
     }
 }
 /**
- * WARNING: this is a **dev-mode only** function (thus should always be guarded by the `ngDevMode`)
- * and must **not** be used in production bundles. The function makes megamorphic reads, which might
- * be too slow for production mode and also it relies on the constructor function being available.
- *
- * Gets a reference to the host component def (where a current component is declared).
- *
- * @param lView An `LView` that represents a current component that is being rendered.
+ * Returns the monkey-patch value data present on the target (which could be
+ * a component, directive or a DOM node).
  */
-function getDeclarationComponentDef(lView) {
-    !ngDevMode && throwError('Must never be called in production mode');
-    const declarationLView = lView[DECLARATION_COMPONENT_VIEW];
-    const context = declarationLView[CONTEXT];
-    // Unable to obtain a context.
-    if (!context)
-        return null;
-    return context.constructor ? getComponentDef$1(context.constructor) : null;
+function readPatchedData(target) {
+    ngDevMode && assertDefined(target, 'Target expected');
+    const data = target[MONKEY_PATCH_KEY_NAME];
+    return (typeof data === 'number') ? getLViewById(data) : data || null;
+}
+function readPatchedLView(target) {
+    const value = readPatchedData(target);
+    if (value) {
+        return (isLView(value) ? value : value.lView);
+    }
+    return null;
+}
+function isComponentInstance(instance) {
+    return instance && instance.constructor && instance.constructor.ɵcmp;
+}
+function isDirectiveInstance(instance) {
+    return instance && instance.constructor && instance.constructor.ɵdir;
 }
 /**
- * WARNING: this is a **dev-mode only** function (thus should always be guarded by the `ngDevMode`)
- * and must **not** be used in production bundles. The function makes megamorphic reads, which might
- * be too slow for production mode.
- *
- * Checks if the current component is declared inside of a standalone component template.
- *
- * @param lView An `LView` that represents a current component that is being rendered.
+ * Locates the element within the given LView and returns the matching index
  */
-function isHostComponentStandalone(lView) {
-    !ngDevMode && throwError('Must never be called in production mode');
-    const componentDef = getDeclarationComponentDef(lView);
-    // Treat host component as non-standalone if we can't obtain the def.
-    return !!(componentDef === null || componentDef === void 0 ? void 0 : componentDef.standalone);
+function findViaNativeElement(lView, target) {
+    const tView = lView[TVIEW];
+    for (let i = HEADER_OFFSET; i < tView.bindingStartIndex; i++) {
+        if (unwrapRNode(lView[i]) === target) {
+            return i;
+        }
+    }
+    return -1;
 }
 /**
- * WARNING: this is a **dev-mode only** function (thus should always be guarded by the `ngDevMode`)
- * and must **not** be used in production bundles. The function makes megamorphic reads, which might
- * be too slow for production mode.
- *
- * Constructs a string describing the location of the host component template. The function is used
- * in dev mode to produce error messages.
- *
- * @param lView An `LView` that represents a current component that is being rendered.
+ * Locates the next tNode (child, sibling or parent).
  */
-function getTemplateLocationDetails(lView) {
-    var _a;
-    !ngDevMode && throwError('Must never be called in production mode');
-    const hostComponentDef = getDeclarationComponentDef(lView);
-    const componentClassName = (_a = hostComponentDef === null || hostComponentDef === void 0 ? void 0 : hostComponentDef.type) === null || _a === void 0 ? void 0 : _a.name;
-    return componentClassName ? ` (used in the '${componentClassName}' component template)` : '';
+function traverseNextElement(tNode) {
+    if (tNode.child) {
+        return tNode.child;
+    }
+    else if (tNode.next) {
+        return tNode.next;
+    }
+    else {
+        // Let's take the following template: <div><span>text</span></div><component/>
+        // After checking the text node, we need to find the next parent that has a "next" TNode,
+        // in this case the parent `div`, so that we can find the component.
+        while (tNode.parent && !tNode.parent.next) {
+            tNode = tNode.parent;
+        }
+        return tNode.parent && tNode.parent.next;
+    }
 }
 /**
- * The set of known control flow directives and their corresponding imports.
- * We use this set to produce a more precises error message with a note
- * that the `CommonModule` should also be included.
+ * Locates the component within the given LView and returns the matching index
  */
-const KNOWN_CONTROL_FLOW_DIRECTIVES = new Map([
-    ['ngIf', 'NgIf'], ['ngFor', 'NgFor'], ['ngSwitchCase', 'NgSwitchCase'],
-    ['ngSwitchDefault', 'NgSwitchDefault']
-]);
+function findViaComponent(lView, componentInstance) {
+    const componentIndices = lView[TVIEW].components;
+    if (componentIndices) {
+        for (let i = 0; i < componentIndices.length; i++) {
+            const elementComponentIndex = componentIndices[i];
+            const componentView = getComponentLViewByIndex(elementComponentIndex, lView);
+            if (componentView[CONTEXT] === componentInstance) {
+                return elementComponentIndex;
+            }
+        }
+    }
+    else {
+        const rootComponentView = getComponentLViewByIndex(HEADER_OFFSET, lView);
+        const rootComponent = rootComponentView[CONTEXT];
+        if (rootComponent === componentInstance) {
+            // we are dealing with the root element here therefore we know that the
+            // element is the very first element after the HEADER data in the lView
+            return HEADER_OFFSET;
+        }
+    }
+    return -1;
+}
 /**
- * Returns true if the tag name is allowed by specified schemas.
- * @param schemas Array of schemas
- * @param tagName Name of the tag
+ * Locates the directive within the given LView and returns the matching index
  */
-function matchingSchemas(schemas, tagName) {
-    if (schemas !== null) {
-        for (let i = 0; i < schemas.length; i++) {
-            const schema = schemas[i];
-            if (schema === NO_ERRORS_SCHEMA ||
-                schema === CUSTOM_ELEMENTS_SCHEMA && tagName && tagName.indexOf('-') > -1) {
-                return true;
+function findViaDirective(lView, directiveInstance) {
+    // if a directive is monkey patched then it will (by default)
+    // have a reference to the LView of the current view. The
+    // element bound to the directive being search lives somewhere
+    // in the view data. We loop through the nodes and check their
+    // list of directives for the instance.
+    let tNode = lView[TVIEW].firstChild;
+    while (tNode) {
+        const directiveIndexStart = tNode.directiveStart;
+        const directiveIndexEnd = tNode.directiveEnd;
+        for (let i = directiveIndexStart; i < directiveIndexEnd; i++) {
+            if (lView[i] === directiveInstance) {
+                return tNode.index;
             }
         }
+        tNode = traverseNextElement(tNode);
     }
-    return false;
+    return -1;
 }
-
 /**
- * @license
- * Copyright Google LLC All Rights Reserved.
+ * Returns a list of directives applied to a node at a specific index. The list includes
+ * directives matched by selector and any host directives, but it excludes components.
+ * Use `getComponentAtNodeIndex` to find the component applied to a node.
  *
- * 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 nodeIndex The node index
+ * @param lView The target view data
  */
-const ERROR_ORIGINAL_ERROR = 'ngOriginalError';
-function wrappedError(message, originalError) {
-    const msg = `${message} caused by: ${originalError instanceof Error ? originalError.message : originalError}`;
-    const error = Error(msg);
-    error[ERROR_ORIGINAL_ERROR] = originalError;
-    return error;
+function getDirectivesAtNodeIndex(nodeIndex, lView) {
+    const tNode = lView[TVIEW].data[nodeIndex];
+    if (tNode.directiveStart === 0)
+        return EMPTY_ARRAY;
+    const results = [];
+    for (let i = tNode.directiveStart; i < tNode.directiveEnd; i++) {
+        const directiveInstance = lView[i];
+        if (!isComponentInstance(directiveInstance)) {
+            results.push(directiveInstance);
+        }
+    }
+    return results;
 }
-function getOriginalError(error) {
-    return error[ERROR_ORIGINAL_ERROR];
+function getComponentAtNodeIndex(nodeIndex, lView) {
+    const tNode = lView[TVIEW].data[nodeIndex];
+    const { directiveStart, componentOffset } = tNode;
+    return componentOffset > -1 ? lView[directiveStart + componentOffset] : 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
- */
 /**
- * Provides a hook for centralized exception handling.
- *
- * The default implementation of `ErrorHandler` prints error messages to the `console`. To
- * intercept error handling, write a custom exception handler that replaces this default as
- * appropriate for your app.
- *
- * @usageNotes
- * ### Example
- *
- * ```
- * class MyErrorHandler implements ErrorHandler {
- *   handleError(error) {
- *     // do something with the exception
- *   }
- * }
- *
- * @NgModule({
- *   providers: [{provide: ErrorHandler, useClass: MyErrorHandler}]
- * })
- * class MyModule {}
- * ```
- *
- * @publicApi
+ * Returns a map of local references (local reference name => element or directive instance) that
+ * exist on a given element.
  */
-class ErrorHandler {
-    constructor() {
-        /**
-         * @internal
-         */
-        this._console = console;
-    }
-    handleError(error) {
-        const originalError = this._findOriginalError(error);
-        this._console.error('ERROR', error);
-        if (originalError) {
-            this._console.error('ORIGINAL ERROR', originalError);
-        }
-    }
-    /** @internal */
-    _findOriginalError(error) {
-        let e = error && getOriginalError(error);
-        while (e && getOriginalError(e)) {
-            e = getOriginalError(e);
+function discoverLocalRefs(lView, nodeIndex) {
+    const tNode = lView[TVIEW].data[nodeIndex];
+    if (tNode && tNode.localNames) {
+        const result = {};
+        let localIndex = tNode.index + 1;
+        for (let i = 0; i < tNode.localNames.length; i += 2) {
+            result[tNode.localNames[i]] = lView[localIndex];
+            localIndex++;
         }
-        return e || null;
+        return result;
     }
+    return null;
 }
 
 /**
@@ -8043,46 +8058,28 @@ class ErrorHandler {
  * found in the LICENSE file at https://angular.io/license
  */
 /**
- * Disallowed strings in the comment.
+ * Defines a schema that allows an NgModule to contain the following:
+ * - Non-Angular elements named with dash case (`-`).
+ * - Element properties named with dash case (`-`).
+ * Dash case is the naming convention for custom elements.
  *
- * see: https://html.spec.whatwg.org/multipage/syntax.html#comments
- */
-const COMMENT_DISALLOWED = /^>|^->|<!--|-->|--!>|<!-$/g;
-/**
- * Delimiter in the disallowed strings which needs to be wrapped with zero with character.
+ * @publicApi
  */
-const COMMENT_DELIMITER = /(<|>)/;
-const COMMENT_DELIMITER_ESCAPED = '\u200B$1\u200B';
+const CUSTOM_ELEMENTS_SCHEMA = {
+    name: 'custom-elements'
+};
 /**
- * Escape the content of comment strings so that it can be safely inserted into a comment node.
- *
- * The issue is that HTML does not specify any way to escape comment end text inside the comment.
- * Consider: `<!-- The way you close a comment is with ">", and "->" at the beginning or by "-->" or
- * "--!>" at the end. -->`. Above the `"-->"` is meant to be text not an end to the comment. This
- * can be created programmatically through DOM APIs. (`<!--` are also disallowed.)
- *
- * see: https://html.spec.whatwg.org/multipage/syntax.html#comments
- *
- * ```
- * div.innerHTML = div.innerHTML
- * ```
- *
- * One would expect that the above code would be safe to do, but it turns out that because comment
- * text is not escaped, the comment may contain text which will prematurely close the comment
- * opening up the application for XSS attack. (In SSR we programmatically create comment nodes which
- * may contain such text and expect them to be safe.)
+ * Defines a schema that allows any property on any element.
  *
- * This function escapes the comment text by looking for comment delimiters (`<` and `>`) and
- * surrounding them with `_>_` where the `_` is a zero width space `\u200B`. The result is that if a
- * comment contains any of the comment start/end delimiters (such as `<!--`, `-->` or `--!>`) the
- * text it will render normally but it will not cause the HTML parser to close/open the comment.
+ * This schema allows you to ignore the errors related to any unknown elements or properties in a
+ * template. The usage of this schema is generally discouraged because it prevents useful validation
+ * and may hide real errors in your template. Consider using the `CUSTOM_ELEMENTS_SCHEMA` instead.
  *
- * @param value text to make safe for comment node by escaping the comment open/close character
- *     sequence.
+ * @publicApi
  */
-function escapeCommentText(value) {
-    return value.replace(COMMENT_DISALLOWED, (text) => text.replace(COMMENT_DELIMITER, COMMENT_DELIMITER_ESCAPED));
-}
+const NO_ERRORS_SCHEMA = {
+    name: 'no-errors-schema'
+};
 
 /**
  * @license
@@ -8091,400 +8088,412 @@ function escapeCommentText(value) {
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-function normalizeDebugBindingName(name) {
-    // Attribute names with `$` (eg `x-y$`) are valid per spec, but unsupported by some browsers
-    name = camelCaseToDashCase(name.replace(/[$@]/g, '_'));
-    return `ng-reflect-${name}`;
-}
-const CAMEL_CASE_REGEXP = /([A-Z])/g;
-function camelCaseToDashCase(input) {
-    return input.replace(CAMEL_CASE_REGEXP, (...m) => '-' + m[1].toLowerCase());
-}
-function normalizeDebugBindingValue(value) {
-    try {
-        // Limit the size of the value as otherwise the DOM just gets polluted.
-        return value != null ? value.toString().slice(0, 30) : value;
-    }
-    catch (e) {
-        return '[ERROR] Exception while trying to serialize the value';
-    }
-}
-
+let shouldThrowErrorOnUnknownElement = 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
+ * Sets a strict mode for JIT-compiled components to throw an error on unknown elements,
+ * instead of just logging the error.
+ * (for AOT-compiled ones this check happens at build time).
  */
-// Keeps track of the currently-active LViews.
-const TRACKED_LVIEWS = new Map();
-// Used for generating unique IDs for LViews.
-let uniqueIdCounter = 0;
-/** Gets a unique ID that can be assigned to an LView. */
-function getUniqueLViewId() {
-    return uniqueIdCounter++;
-}
-/** Starts tracking an LView. */
-function registerLView(lView) {
-    ngDevMode && assertNumber(lView[ID], 'LView must have an ID in order to be registered');
-    TRACKED_LVIEWS.set(lView[ID], lView);
-}
-/** Gets an LView by its unique ID. */
-function getLViewById(id) {
-    ngDevMode && assertNumber(id, 'ID used for LView lookup must be a number');
-    return TRACKED_LVIEWS.get(id) || null;
-}
-/** Stops tracking an LView. */
-function unregisterLView(lView) {
-    ngDevMode && assertNumber(lView[ID], 'Cannot stop tracking an LView that does not have an ID');
-    TRACKED_LVIEWS.delete(lView[ID]);
+function ɵsetUnknownElementStrictMode(shouldThrow) {
+    shouldThrowErrorOnUnknownElement = shouldThrow;
 }
-
 /**
- * @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
+ * Gets the current value of the strict mode.
  */
+function ɵgetUnknownElementStrictMode() {
+    return shouldThrowErrorOnUnknownElement;
+}
+let shouldThrowErrorOnUnknownProperty = false;
 /**
- * The internal view context which is specific to a given DOM element, directive or
- * component instance. Each value in here (besides the LView and element node details)
- * can be present, null or undefined. If undefined then it implies the value has not been
- * looked up yet, otherwise, if null, then a lookup was executed and nothing was found.
- *
- * Each value will get filled when the respective value is examined within the getContext
- * function. The component, element and each directive instance will share the same instance
- * of the context.
+ * Sets a strict mode for JIT-compiled components to throw an error on unknown properties,
+ * instead of just logging the error.
+ * (for AOT-compiled ones this check happens at build time).
  */
-class LContext {
-    constructor(
-    /**
-     * ID of the component's parent view data.
-     */
-    lViewId, 
-    /**
-     * The index instance of the node.
-     */
-    nodeIndex, 
-    /**
-     * The instance of the DOM node that is attached to the lNode.
-     */
-    native) {
-        this.lViewId = lViewId;
-        this.nodeIndex = nodeIndex;
-        this.native = native;
-    }
-    /** Component's parent view data. */
-    get lView() {
-        return getLViewById(this.lViewId);
-    }
+function ɵsetUnknownPropertyStrictMode(shouldThrow) {
+    shouldThrowErrorOnUnknownProperty = shouldThrow;
 }
-
 /**
- * @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
+ * Gets the current value of the strict mode.
  */
+function ɵgetUnknownPropertyStrictMode() {
+    return shouldThrowErrorOnUnknownProperty;
+}
 /**
- * Returns the matching `LContext` data for a given DOM node, directive or component instance.
+ * Validates that the element is known at runtime and produces
+ * an error if it's not the case.
+ * This check is relevant for JIT-compiled components (for AOT-compiled
+ * ones this check happens at build time).
  *
- * This function will examine the provided DOM element, component, or directive instance\'s
- * monkey-patched property to derive the `LContext` data. Once called then the monkey-patched
- * value will be that of the newly created `LContext`.
+ * The element is considered known if either:
+ * - it's a known HTML element
+ * - it's a known custom element
+ * - the element matches any directive
+ * - the element is allowed by one of the schemas
  *
- * If the monkey-patched value is the `LView` instance then the context value for that
- * target will be created and the monkey-patch reference will be updated. Therefore when this
- * function is called it may mutate the provided element\'s, component\'s or any of the associated
- * directive\'s monkey-patch values.
- *
- * If the monkey-patch value is not detected then the code will walk up the DOM until an element
- * is found which contains a monkey-patch reference. When that occurs then the provided element
- * will be updated with a new context (which is then returned). If the monkey-patch value is not
- * detected for a component/directive instance then it will throw an error (all components and
- * directives should be automatically monkey-patched by ivy).
- *
- * @param target Component, Directive or DOM Node.
+ * @param element Element to validate
+ * @param lView An `LView` that represents a current component that is being rendered
+ * @param tagName Name of the tag to check
+ * @param schemas Array of schemas
+ * @param hasDirectives Boolean indicating that the element matches any directive
  */
-function getLContext(target) {
-    let mpValue = readPatchedData(target);
-    if (mpValue) {
-        // only when it's an array is it considered an LView instance
-        // ... otherwise it's an already constructed LContext instance
-        if (isLView(mpValue)) {
-            const lView = mpValue;
-            let nodeIndex;
-            let component = undefined;
-            let directives = undefined;
-            if (isComponentInstance(target)) {
-                nodeIndex = findViaComponent(lView, target);
-                if (nodeIndex == -1) {
-                    throw new Error('The provided component was not found in the application');
-                }
-                component = target;
-            }
-            else if (isDirectiveInstance(target)) {
-                nodeIndex = findViaDirective(lView, target);
-                if (nodeIndex == -1) {
-                    throw new Error('The provided directive was not found in the application');
-                }
-                directives = getDirectivesAtNodeIndex(nodeIndex, lView, false);
+function validateElementIsKnown(element, lView, tagName, schemas, hasDirectives) {
+    // If `schemas` is set to `null`, that's an indication that this Component was compiled in AOT
+    // mode where this check happens at compile time. In JIT mode, `schemas` is always present and
+    // defined as an array (as an empty array in case `schemas` field is not defined) and we should
+    // execute the check below.
+    if (schemas === null)
+        return;
+    // If the element matches any directive, it's considered as valid.
+    if (!hasDirectives && tagName !== null) {
+        // The element is unknown if it's an instance of HTMLUnknownElement, or it isn't registered
+        // as a custom element. Note that unknown elements with a dash in their name won't be instances
+        // of HTMLUnknownElement in browsers that support web components.
+        const isUnknown = 
+        // Note that we can't check for `typeof HTMLUnknownElement === 'function'`,
+        // because while most browsers return 'function', IE returns 'object'.
+        (typeof HTMLUnknownElement !== 'undefined' && HTMLUnknownElement &&
+            element instanceof HTMLUnknownElement) ||
+            (typeof customElements !== 'undefined' && tagName.indexOf('-') > -1 &&
+                !customElements.get(tagName));
+        if (isUnknown && !matchingSchemas(schemas, tagName)) {
+            const isHostStandalone = isHostComponentStandalone(lView);
+            const templateLocation = getTemplateLocationDetails(lView);
+            const schemas = `'${isHostStandalone ? '@Component' : '@NgModule'}.schemas'`;
+            let message = `'${tagName}' is not a known element${templateLocation}:\n`;
+            message += `1. If '${tagName}' is an Angular component, then verify that it is ${isHostStandalone ? 'included in the \'@Component.imports\' of this component' :
+                'a part of an @NgModule where this component is declared'}.\n`;
+            if (tagName && tagName.indexOf('-') > -1) {
+                message +=
+                    `2. If '${tagName}' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the ${schemas} of this component to suppress this message.`;
             }
             else {
-                nodeIndex = findViaNativeElement(lView, target);
-                if (nodeIndex == -1) {
-                    return null;
-                }
-            }
-            // the goal is not to fill the entire context full of data because the lookups
-            // are expensive. Instead, only the target data (the element, component, container, ICU
-            // expression or directive details) are filled into the context. If called multiple times
-            // with different target values then the missing target data will be filled in.
-            const native = unwrapRNode(lView[nodeIndex]);
-            const existingCtx = readPatchedData(native);
-            const context = (existingCtx && !Array.isArray(existingCtx)) ?
-                existingCtx :
-                createLContext(lView, nodeIndex, native);
-            // only when the component has been discovered then update the monkey-patch
-            if (component && context.component === undefined) {
-                context.component = component;
-                attachPatchData(context.component, context);
+                message +=
+                    `2. To allow any element add 'NO_ERRORS_SCHEMA' to the ${schemas} of this component.`;
             }
-            // only when the directives have been discovered then update the monkey-patch
-            if (directives && context.directives === undefined) {
-                context.directives = directives;
-                for (let i = 0; i < directives.length; i++) {
-                    attachPatchData(directives[i], context);
-                }
+            if (shouldThrowErrorOnUnknownElement) {
+                throw new RuntimeError(304 /* RuntimeErrorCode.UNKNOWN_ELEMENT */, message);
             }
-            attachPatchData(context.native, context);
-            mpValue = context;
-        }
-    }
-    else {
-        const rElement = target;
-        ngDevMode && assertDomNode(rElement);
-        // if the context is not found then we need to traverse upwards up the DOM
-        // to find the nearest element that has already been monkey patched with data
-        let parent = rElement;
-        while (parent = parent.parentNode) {
-            const parentContext = readPatchedData(parent);
-            if (parentContext) {
-                const lView = Array.isArray(parentContext) ? parentContext : parentContext.lView;
-                // the edge of the app was also reached here through another means
-                // (maybe because the DOM was changed manually).
-                if (!lView) {
-                    return null;
-                }
-                const index = findViaNativeElement(lView, rElement);
-                if (index >= 0) {
-                    const native = unwrapRNode(lView[index]);
-                    const context = createLContext(lView, index, native);
-                    attachPatchData(native, context);
-                    mpValue = context;
-                    break;
-                }
+            else {
+                console.error(formatRuntimeError(304 /* RuntimeErrorCode.UNKNOWN_ELEMENT */, message));
             }
         }
     }
-    return mpValue || null;
 }
 /**
- * Creates an empty instance of a `LContext` context
+ * Validates that the property of the element is known at runtime and returns
+ * false if it's not the case.
+ * This check is relevant for JIT-compiled components (for AOT-compiled
+ * ones this check happens at build time).
+ *
+ * The property is considered known if either:
+ * - it's a known property of the element
+ * - the element is allowed by one of the schemas
+ * - the property is used for animations
+ *
+ * @param element Element to validate
+ * @param propName Name of the property to check
+ * @param tagName Name of the tag hosting the property
+ * @param schemas Array of schemas
  */
-function createLContext(lView, nodeIndex, native) {
-    return new LContext(lView[ID], nodeIndex, native);
+function isPropertyValid(element, propName, tagName, schemas) {
+    // If `schemas` is set to `null`, that's an indication that this Component was compiled in AOT
+    // mode where this check happens at compile time. In JIT mode, `schemas` is always present and
+    // defined as an array (as an empty array in case `schemas` field is not defined) and we should
+    // execute the check below.
+    if (schemas === null)
+        return true;
+    // The property is considered valid if the element matches the schema, it exists on the element,
+    // or it is synthetic, and we are in a browser context (web worker nodes should be skipped).
+    if (matchingSchemas(schemas, tagName) || propName in element || isAnimationProp(propName)) {
+        return true;
+    }
+    // Note: `typeof Node` returns 'function' in most browsers, but on IE it is 'object' so we
+    // need to account for both here, while being careful with `typeof null` also returning 'object'.
+    return typeof Node === 'undefined' || Node === null || !(element instanceof Node);
 }
 /**
- * Takes a component instance and returns the view for that component.
+ * Logs or throws an error that a property is not supported on an element.
  *
- * @param componentInstance
- * @returns The component's view
+ * @param propName Name of the invalid property
+ * @param tagName Name of the tag hosting the property
+ * @param nodeType Type of the node hosting the property
+ * @param lView An `LView` that represents a current component
  */
-function getComponentViewByInstance(componentInstance) {
-    let patchedData = readPatchedData(componentInstance);
-    let lView;
-    if (isLView(patchedData)) {
-        const contextLView = patchedData;
-        const nodeIndex = findViaComponent(contextLView, componentInstance);
-        lView = getComponentLViewByIndex(nodeIndex, contextLView);
-        const context = createLContext(contextLView, nodeIndex, lView[HOST]);
-        context.component = componentInstance;
-        attachPatchData(componentInstance, context);
-        attachPatchData(context.native, context);
+function handleUnknownPropertyError(propName, tagName, nodeType, lView) {
+    // Special-case a situation when a structural directive is applied to
+    // an `<ng-template>` element, for example: `<ng-template *ngIf="true">`.
+    // In this case the compiler generates the `ɵɵtemplate` instruction with
+    // the `null` as the tagName. The directive matching logic at runtime relies
+    // on this effect (see `isInlineTemplate`), thus using the 'ng-template' as
+    // a default value of the `tNode.value` is not feasible at this moment.
+    if (!tagName && nodeType === 4 /* TNodeType.Container */) {
+        tagName = 'ng-template';
+    }
+    const isHostStandalone = isHostComponentStandalone(lView);
+    const templateLocation = getTemplateLocationDetails(lView);
+    let message = `Can't bind to '${propName}' since it isn't a known property of '${tagName}'${templateLocation}.`;
+    const schemas = `'${isHostStandalone ? '@Component' : '@NgModule'}.schemas'`;
+    const importLocation = isHostStandalone ?
+        'included in the \'@Component.imports\' of this component' :
+        'a part of an @NgModule where this component is declared';
+    if (KNOWN_CONTROL_FLOW_DIRECTIVES.has(propName)) {
+        // Most likely this is a control flow directive (such as `*ngIf`) used in
+        // a template, but the directive or the `CommonModule` is not imported.
+        const correspondingImport = KNOWN_CONTROL_FLOW_DIRECTIVES.get(propName);
+        message += `\nIf the '${propName}' is an Angular control flow directive, ` +
+            `please make sure that either the '${correspondingImport}' directive or the 'CommonModule' is ${importLocation}.`;
     }
     else {
-        const context = patchedData;
-        const contextLView = context.lView;
-        ngDevMode && assertLView(contextLView);
-        lView = getComponentLViewByIndex(context.nodeIndex, contextLView);
+        // May be an Angular component, which is not imported/declared?
+        message += `\n1. If '${tagName}' is an Angular component and it has the ` +
+            `'${propName}' input, then verify that it is ${importLocation}.`;
+        // May be a Web Component?
+        if (tagName && tagName.indexOf('-') > -1) {
+            message += `\n2. If '${tagName}' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' ` +
+                `to the ${schemas} of this component to suppress this message.`;
+            message += `\n3. To allow any property add 'NO_ERRORS_SCHEMA' to ` +
+                `the ${schemas} of this component.`;
+        }
+        else {
+            // If it's expected, the error can be suppressed by the `NO_ERRORS_SCHEMA` schema.
+            message += `\n2. To allow any property add 'NO_ERRORS_SCHEMA' to ` +
+                `the ${schemas} of this component.`;
+        }
     }
-    return lView;
+    reportUnknownPropertyError(message);
 }
-/**
- * This property will be monkey-patched on elements, components and directives.
- */
-const MONKEY_PATCH_KEY_NAME = '__ngContext__';
-/**
- * Assigns the given data to the given target (which could be a component,
- * directive or DOM node instance) using monkey-patching.
- */
-function attachPatchData(target, data) {
-    ngDevMode && assertDefined(target, 'Target expected');
-    // Only attach the ID of the view in order to avoid memory leaks (see #41047). We only do this
-    // for `LView`, because we have control over when an `LView` is created and destroyed, whereas
-    // we can't know when to remove an `LContext`.
-    if (isLView(data)) {
-        target[MONKEY_PATCH_KEY_NAME] = data[ID];
-        registerLView(data);
+function reportUnknownPropertyError(message) {
+    if (shouldThrowErrorOnUnknownProperty) {
+        throw new RuntimeError(303 /* RuntimeErrorCode.UNKNOWN_BINDING */, message);
     }
     else {
-        target[MONKEY_PATCH_KEY_NAME] = data;
+        console.error(formatRuntimeError(303 /* RuntimeErrorCode.UNKNOWN_BINDING */, message));
     }
 }
 /**
- * Returns the monkey-patch value data present on the target (which could be
- * a component, directive or a DOM node).
+ * WARNING: this is a **dev-mode only** function (thus should always be guarded by the `ngDevMode`)
+ * and must **not** be used in production bundles. The function makes megamorphic reads, which might
+ * be too slow for production mode and also it relies on the constructor function being available.
+ *
+ * Gets a reference to the host component def (where a current component is declared).
+ *
+ * @param lView An `LView` that represents a current component that is being rendered.
  */
-function readPatchedData(target) {
-    ngDevMode && assertDefined(target, 'Target expected');
-    const data = target[MONKEY_PATCH_KEY_NAME];
-    return (typeof data === 'number') ? getLViewById(data) : data || null;
-}
-function readPatchedLView(target) {
-    const value = readPatchedData(target);
-    if (value) {
-        return (isLView(value) ? value : value.lView);
-    }
-    return null;
+function getDeclarationComponentDef(lView) {
+    !ngDevMode && throwError('Must never be called in production mode');
+    const declarationLView = lView[DECLARATION_COMPONENT_VIEW];
+    const context = declarationLView[CONTEXT];
+    // Unable to obtain a context.
+    if (!context)
+        return null;
+    return context.constructor ? getComponentDef$1(context.constructor) : null;
 }
-function isComponentInstance(instance) {
-    return instance && instance.constructor && instance.constructor.ɵcmp;
+/**
+ * WARNING: this is a **dev-mode only** function (thus should always be guarded by the `ngDevMode`)
+ * and must **not** be used in production bundles. The function makes megamorphic reads, which might
+ * be too slow for production mode.
+ *
+ * Checks if the current component is declared inside of a standalone component template.
+ *
+ * @param lView An `LView` that represents a current component that is being rendered.
+ */
+function isHostComponentStandalone(lView) {
+    !ngDevMode && throwError('Must never be called in production mode');
+    const componentDef = getDeclarationComponentDef(lView);
+    // Treat host component as non-standalone if we can't obtain the def.
+    return !!(componentDef === null || componentDef === void 0 ? void 0 : componentDef.standalone);
 }
-function isDirectiveInstance(instance) {
-    return instance && instance.constructor && instance.constructor.ɵdir;
+/**
+ * WARNING: this is a **dev-mode only** function (thus should always be guarded by the `ngDevMode`)
+ * and must **not** be used in production bundles. The function makes megamorphic reads, which might
+ * be too slow for production mode.
+ *
+ * Constructs a string describing the location of the host component template. The function is used
+ * in dev mode to produce error messages.
+ *
+ * @param lView An `LView` that represents a current component that is being rendered.
+ */
+function getTemplateLocationDetails(lView) {
+    var _a;
+    !ngDevMode && throwError('Must never be called in production mode');
+    const hostComponentDef = getDeclarationComponentDef(lView);
+    const componentClassName = (_a = hostComponentDef === null || hostComponentDef === void 0 ? void 0 : hostComponentDef.type) === null || _a === void 0 ? void 0 : _a.name;
+    return componentClassName ? ` (used in the '${componentClassName}' component template)` : '';
 }
 /**
- * Locates the element within the given LView and returns the matching index
+ * The set of known control flow directives and their corresponding imports.
+ * We use this set to produce a more precises error message with a note
+ * that the `CommonModule` should also be included.
  */
-function findViaNativeElement(lView, target) {
-    const tView = lView[TVIEW];
-    for (let i = HEADER_OFFSET; i < tView.bindingStartIndex; i++) {
-        if (unwrapRNode(lView[i]) === target) {
-            return i;
+const KNOWN_CONTROL_FLOW_DIRECTIVES = new Map([
+    ['ngIf', 'NgIf'], ['ngFor', 'NgFor'], ['ngSwitchCase', 'NgSwitchCase'],
+    ['ngSwitchDefault', 'NgSwitchDefault']
+]);
+/**
+ * Returns true if the tag name is allowed by specified schemas.
+ * @param schemas Array of schemas
+ * @param tagName Name of the tag
+ */
+function matchingSchemas(schemas, tagName) {
+    if (schemas !== null) {
+        for (let i = 0; i < schemas.length; i++) {
+            const schema = schemas[i];
+            if (schema === NO_ERRORS_SCHEMA ||
+                schema === CUSTOM_ELEMENTS_SCHEMA && tagName && tagName.indexOf('-') > -1) {
+                return true;
+            }
         }
     }
-    return -1;
+    return false;
 }
+
 /**
- * Locates the next tNode (child, sibling or parent).
+ * @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 traverseNextElement(tNode) {
-    if (tNode.child) {
-        return tNode.child;
+const ERROR_ORIGINAL_ERROR = 'ngOriginalError';
+function wrappedError(message, originalError) {
+    const msg = `${message} caused by: ${originalError instanceof Error ? originalError.message : originalError}`;
+    const error = Error(msg);
+    error[ERROR_ORIGINAL_ERROR] = originalError;
+    return error;
+}
+function getOriginalError(error) {
+    return error[ERROR_ORIGINAL_ERROR];
+}
+
+/**
+ * @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
+ */
+/**
+ * Provides a hook for centralized exception handling.
+ *
+ * The default implementation of `ErrorHandler` prints error messages to the `console`. To
+ * intercept error handling, write a custom exception handler that replaces this default as
+ * appropriate for your app.
+ *
+ * @usageNotes
+ * ### Example
+ *
+ * ```
+ * class MyErrorHandler implements ErrorHandler {
+ *   handleError(error) {
+ *     // do something with the exception
+ *   }
+ * }
+ *
+ * @NgModule({
+ *   providers: [{provide: ErrorHandler, useClass: MyErrorHandler}]
+ * })
+ * class MyModule {}
+ * ```
+ *
+ * @publicApi
+ */
+class ErrorHandler {
+    constructor() {
+        /**
+         * @internal
+         */
+        this._console = console;
     }
-    else if (tNode.next) {
-        return tNode.next;
+    handleError(error) {
+        const originalError = this._findOriginalError(error);
+        this._console.error('ERROR', error);
+        if (originalError) {
+            this._console.error('ORIGINAL ERROR', originalError);
+        }
     }
-    else {
-        // Let's take the following template: <div><span>text</span></div><component/>
-        // After checking the text node, we need to find the next parent that has a "next" TNode,
-        // in this case the parent `div`, so that we can find the component.
-        while (tNode.parent && !tNode.parent.next) {
-            tNode = tNode.parent;
+    /** @internal */
+    _findOriginalError(error) {
+        let e = error && getOriginalError(error);
+        while (e && getOriginalError(e)) {
+            e = getOriginalError(e);
         }
-        return tNode.parent && tNode.parent.next;
+        return e || null;
     }
 }
+
 /**
- * Locates the component within the given LView and returns the matching index
+ * @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 findViaComponent(lView, componentInstance) {
-    const componentIndices = lView[TVIEW].components;
-    if (componentIndices) {
-        for (let i = 0; i < componentIndices.length; i++) {
-            const elementComponentIndex = componentIndices[i];
-            const componentView = getComponentLViewByIndex(elementComponentIndex, lView);
-            if (componentView[CONTEXT] === componentInstance) {
-                return elementComponentIndex;
-            }
-        }
-    }
-    else {
-        const rootComponentView = getComponentLViewByIndex(HEADER_OFFSET, lView);
-        const rootComponent = rootComponentView[CONTEXT];
-        if (rootComponent === componentInstance) {
-            // we are dealing with the root element here therefore we know that the
-            // element is the very first element after the HEADER data in the lView
-            return HEADER_OFFSET;
-        }
-    }
-    return -1;
-}
 /**
- * Locates the directive within the given LView and returns the matching index
+ * Disallowed strings in the comment.
+ *
+ * see: https://html.spec.whatwg.org/multipage/syntax.html#comments
  */
-function findViaDirective(lView, directiveInstance) {
-    // if a directive is monkey patched then it will (by default)
-    // have a reference to the LView of the current view. The
-    // element bound to the directive being search lives somewhere
-    // in the view data. We loop through the nodes and check their
-    // list of directives for the instance.
-    let tNode = lView[TVIEW].firstChild;
-    while (tNode) {
-        const directiveIndexStart = tNode.directiveStart;
-        const directiveIndexEnd = tNode.directiveEnd;
-        for (let i = directiveIndexStart; i < directiveIndexEnd; i++) {
-            if (lView[i] === directiveInstance) {
-                return tNode.index;
-            }
-        }
-        tNode = traverseNextElement(tNode);
-    }
-    return -1;
-}
+const COMMENT_DISALLOWED = /^>|^->|<!--|-->|--!>|<!-$/g;
+/**
+ * Delimiter in the disallowed strings which needs to be wrapped with zero with character.
+ */
+const COMMENT_DELIMITER = /(<|>)/;
+const COMMENT_DELIMITER_ESCAPED = '\u200B$1\u200B';
 /**
- * Returns a list of directives extracted from the given view based on the
- * provided list of directive index values.
+ * Escape the content of comment strings so that it can be safely inserted into a comment node.
  *
- * @param nodeIndex The node index
- * @param lView The target view data
- * @param includeComponents Whether or not to include components in returned directives
+ * The issue is that HTML does not specify any way to escape comment end text inside the comment.
+ * Consider: `<!-- The way you close a comment is with ">", and "->" at the beginning or by "-->" or
+ * "--!>" at the end. -->`. Above the `"-->"` is meant to be text not an end to the comment. This
+ * can be created programmatically through DOM APIs. (`<!--` are also disallowed.)
+ *
+ * see: https://html.spec.whatwg.org/multipage/syntax.html#comments
+ *
+ * ```
+ * div.innerHTML = div.innerHTML
+ * ```
+ *
+ * One would expect that the above code would be safe to do, but it turns out that because comment
+ * text is not escaped, the comment may contain text which will prematurely close the comment
+ * opening up the application for XSS attack. (In SSR we programmatically create comment nodes which
+ * may contain such text and expect them to be safe.)
+ *
+ * This function escapes the comment text by looking for comment delimiters (`<` and `>`) and
+ * surrounding them with `_>_` where the `_` is a zero width space `\u200B`. The result is that if a
+ * comment contains any of the comment start/end delimiters (such as `<!--`, `-->` or `--!>`) the
+ * text it will render normally but it will not cause the HTML parser to close/open the comment.
+ *
+ * @param value text to make safe for comment node by escaping the comment open/close character
+ *     sequence.
  */
-function getDirectivesAtNodeIndex(nodeIndex, lView, includeComponents) {
-    const tNode = lView[TVIEW].data[nodeIndex];
-    let directiveStartIndex = tNode.directiveStart;
-    if (directiveStartIndex == 0)
-        return EMPTY_ARRAY;
-    const directiveEndIndex = tNode.directiveEnd;
-    if (!includeComponents && tNode.flags & 2 /* TNodeFlags.isComponentHost */)
-        directiveStartIndex++;
-    return lView.slice(directiveStartIndex, directiveEndIndex);
-}
-function getComponentAtNodeIndex(nodeIndex, lView) {
-    const tNode = lView[TVIEW].data[nodeIndex];
-    let directiveStartIndex = tNode.directiveStart;
-    return tNode.flags & 2 /* TNodeFlags.isComponentHost */ ? lView[directiveStartIndex] : null;
+function escapeCommentText(value) {
+    return value.replace(COMMENT_DISALLOWED, (text) => text.replace(COMMENT_DELIMITER, COMMENT_DELIMITER_ESCAPED));
 }
+
 /**
- * Returns a map of local references (local reference name => element or directive instance) that
- * exist on a given element.
+ * @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 discoverLocalRefs(lView, nodeIndex) {
-    const tNode = lView[TVIEW].data[nodeIndex];
-    if (tNode && tNode.localNames) {
-        const result = {};
-        let localIndex = tNode.index + 1;
-        for (let i = 0; i < tNode.localNames.length; i += 2) {
-            result[tNode.localNames[i]] = lView[localIndex];
-            localIndex++;
-        }
-        return result;
+function normalizeDebugBindingName(name) {
+    // Attribute names with `$` (eg `x-y$`) are valid per spec, but unsupported by some browsers
+    name = camelCaseToDashCase(name.replace(/[$@]/g, '_'));
+    return `ng-reflect-${name}`;
+}
+const CAMEL_CASE_REGEXP = /([A-Z])/g;
+function camelCaseToDashCase(input) {
+    return input.replace(CAMEL_CASE_REGEXP, (...m) => '-' + m[1].toLowerCase());
+}
+function normalizeDebugBindingValue(value) {
+    try {
+        // Limit the size of the value as otherwise the DOM just gets polluted.
+        return value != null ? value.toString().slice(0, 30) : value;
+    }
+    catch (e) {
+        return '[ERROR] Exception while trying to serialize the value';
     }
-    return null;
 }
 
 /**
@@ -9215,9 +9224,10 @@ function getClosestRElement(tView, tNode, lView) {
     }
     else {
         ngDevMode && assertTNodeType(parentTNode, 3 /* TNodeType.AnyRNode */ | 4 /* TNodeType.Container */);
-        if (parentTNode.flags & 2 /* TNodeFlags.isComponentHost */) {
+        const { componentOffset } = parentTNode;
+        if (componentOffset > -1) {
             ngDevMode && assertTNodeForLView(parentTNode, lView);
-            const encapsulation = tView.data[parentTNode.directiveStart].encapsulation;
+            const { encapsulation } = tView.data[parentTNode.directiveStart + componentOffset];
             // We've got a parent which is an element in the current view. We just need to verify if the
             // parent element is not a component. Component's content nodes are not inserted immediately
             // because they will be projected, and so doing insert at this point would be wasteful.
@@ -9450,10 +9460,10 @@ function applyNodes(renderer, action, tNode, lView, parentRElement, beforeNode,
         if (isProjection) {
             if (action === 0 /* WalkTNodeTreeAction.Create */) {
                 rawSlotValue && attachPatchData(unwrapRNode(rawSlotValue), lView);
-                tNode.flags |= 4 /* TNodeFlags.isProjected */;
+                tNode.flags |= 2 /* TNodeFlags.isProjected */;
             }
         }
-        if ((tNode.flags & 64 /* TNodeFlags.isDetached */) !== 64 /* TNodeFlags.isDetached */) {
+        if ((tNode.flags & 32 /* TNodeFlags.isDetached */) !== 32 /* TNodeFlags.isDetached */) {
             if (tNodeType & 8 /* TNodeType.ElementContainer */) {
                 applyNodes(renderer, action, tNode.child, lView, parentRElement, beforeNode, false);
                 applyToElementOrContainer(action, renderer, parentRElement, rawSlotValue, beforeNode);
@@ -9647,6 +9657,19 @@ function writeDirectClass(renderer, element, newValue) {
     }
     ngDevMode && ngDevMode.rendererSetClassName++;
 }
+/** Sets up the static DOM attributes on an `RNode`. */
+function setupStaticAttributes(renderer, element, tNode) {
+    const { mergedAttrs, classes, styles } = tNode;
+    if (mergedAttrs !== null) {
+        setUpAttributes(renderer, element, mergedAttrs);
+    }
+    if (classes !== null) {
+        writeDirectClass(renderer, element, classes);
+    }
+    if (styles !== null) {
+        writeDirectStyle(renderer, element, styles);
+    }
+}
 
 /**
  * @license
@@ -11508,6 +11531,7 @@ class TNode {
     index, //
     insertBeforeIndex, //
     injectorIndex, //
+    componentOffset, //
     directiveStart, //
     directiveEnd, //
     directiveStylingLast, //
@@ -11540,6 +11564,7 @@ class TNode {
         this.index = index;
         this.insertBeforeIndex = insertBeforeIndex;
         this.injectorIndex = injectorIndex;
+        this.componentOffset = componentOffset;
         this.directiveStart = directiveStart;
         this.directiveEnd = directiveEnd;
         this.directiveStylingLast = directiveStylingLast;
@@ -11617,21 +11642,19 @@ class TNode {
     }
     get flags_() {
         const flags = [];
-        if (this.flags & 16 /* TNodeFlags.hasClassInput */)
+        if (this.flags & 8 /* TNodeFlags.hasClassInput */)
             flags.push('TNodeFlags.hasClassInput');
-        if (this.flags & 8 /* TNodeFlags.hasContentQuery */)
+        if (this.flags & 4 /* TNodeFlags.hasContentQuery */)
             flags.push('TNodeFlags.hasContentQuery');
-        if (this.flags & 32 /* TNodeFlags.hasStyleInput */)
+        if (this.flags & 16 /* TNodeFlags.hasStyleInput */)
             flags.push('TNodeFlags.hasStyleInput');
-        if (this.flags & 128 /* TNodeFlags.hasHostBindings */)
+        if (this.flags & 64 /* TNodeFlags.hasHostBindings */)
             flags.push('TNodeFlags.hasHostBindings');
-        if (this.flags & 2 /* TNodeFlags.isComponentHost */)
-            flags.push('TNodeFlags.isComponentHost');
         if (this.flags & 1 /* TNodeFlags.isDirectiveHost */)
             flags.push('TNodeFlags.isDirectiveHost');
-        if (this.flags & 64 /* TNodeFlags.isDetached */)
+        if (this.flags & 32 /* TNodeFlags.isDetached */)
             flags.push('TNodeFlags.isDetached');
-        if (this.flags & 4 /* TNodeFlags.isProjected */)
+        if (this.flags & 2 /* TNodeFlags.isProjected */)
             flags.push('TNodeFlags.isProjected');
         return flags.join('|');
     }
@@ -12141,7 +12164,7 @@ function getOrCreateTNode(tView, index, type, name, attrs) {
             // See `TNodeType.Placeholder` and `LFrame.inI18n` for more context.
             // If the `TNode` was not pre-declared than it means it was not mentioned which means it was
             // removed, so we mark it as detached.
-            tNode.flags |= 64 /* TNodeFlags.isDetached */;
+            tNode.flags |= 32 /* TNodeFlags.isDetached */;
         }
     }
     else if (tNode.type & 64 /* TNodeType.Placeholder */) {
@@ -12445,7 +12468,7 @@ function createDirectivesInstances(tView, lView, tNode) {
     if (!getBindingsEnabled())
         return;
     instantiateAllDirectives(tView, lView, tNode, getNativeByTNode(tNode, lView));
-    if ((tNode.flags & 128 /* TNodeFlags.hasHostBindings */) === 128 /* TNodeFlags.hasHostBindings */) {
+    if ((tNode.flags & 64 /* TNodeFlags.hasHostBindings */) === 64 /* TNodeFlags.hasHostBindings */) {
         invokeDirectivesHostBindings(tView, lView, tNode);
     }
 }
@@ -12645,6 +12668,7 @@ function createTNode(tView, tParent, type, index, value, attrs) {
         index, // index: number
         null, // insertBeforeIndex: null|-1|number|number[]
         injectorIndex, // injectorIndex: number
+        -1, // componentOffset: number
         -1, // directiveStart: number
         -1, // directiveEnd: number
         -1, // directiveStylingLast: number
@@ -12680,6 +12704,7 @@ function createTNode(tView, tParent, type, index, value, attrs) {
             directiveStart: -1,
             directiveEnd: -1,
             directiveStylingLast: -1,
+            componentOffset: -1,
             propertyBindings: null,
             flags: 0,
             providerIndexes: 0,
@@ -12743,24 +12768,23 @@ function initializeInputAndOutputAliases(tView, tNode) {
     let outputsStore = null;
     for (let i = start; i < end; i++) {
         const directiveDef = tViewData[i];
-        const directiveInputs = directiveDef.inputs;
+        inputsStore = generatePropertyAliases(directiveDef.inputs, i, inputsStore);
+        outputsStore = generatePropertyAliases(directiveDef.outputs, i, outputsStore);
         // Do not use unbound attributes as inputs to structural directives, since structural
         // directive inputs can only be set using microsyntax (e.g. `<div *dir="exp">`).
         // TODO(FW-1930): microsyntax expressions may also contain unbound/static attributes, which
         // should be set for inline templates.
-        const initialInputs = (tNodeAttrs !== null && !isInlineTemplate(tNode)) ?
-            generateInitialInputs(directiveInputs, tNodeAttrs) :
+        const initialInputs = (inputsStore !== null && tNodeAttrs !== null && !isInlineTemplate(tNode)) ?
+            generateInitialInputs(inputsStore, i, tNodeAttrs) :
             null;
         inputsFromAttrs.push(initialInputs);
-        inputsStore = generatePropertyAliases(directiveInputs, i, inputsStore);
-        outputsStore = generatePropertyAliases(directiveDef.outputs, i, outputsStore);
     }
     if (inputsStore !== null) {
         if (inputsStore.hasOwnProperty('class')) {
-            tNode.flags |= 16 /* TNodeFlags.hasClassInput */;
+            tNode.flags |= 8 /* TNodeFlags.hasClassInput */;
         }
         if (inputsStore.hasOwnProperty('style')) {
-            tNode.flags |= 32 /* TNodeFlags.hasStyleInput */;
+            tNode.flags |= 16 /* TNodeFlags.hasStyleInput */;
         }
     }
     tNode.initialInputs = inputsFromAttrs;
@@ -12867,28 +12891,6 @@ function setNgReflectProperties(lView, element, type, dataValue, value) {
         }
     }
 }
-/**
- * Instantiate a root component.
- */
-function instantiateRootComponent(tView, lView, def) {
-    const rootTNode = getCurrentTNode();
-    if (tView.firstCreatePass) {
-        if (def.providersResolver)
-            def.providersResolver(def);
-        const directiveIndex = allocExpando(tView, lView, 1, null);
-        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);
-    const native = getNativeByTNode(rootTNode, lView);
-    if (native) {
-        attachPatchData(native, lView);
-    }
-    return directive;
-}
 /**
  * Resolve the matched directives on a node.
  */
@@ -12901,53 +12903,13 @@ function resolveDirectives(tView, lView, tNode, localRefs) {
         const directiveDefs = findDirectiveDefMatches(tView, lView, tNode);
         const exportsMap = localRefs === null ? null : { '': -1 };
         if (directiveDefs !== null) {
-            hasDirectives = true;
-            initTNodeFlags(tNode, tView.data.length, directiveDefs.length);
-            // When the same token is provided by several directives on the same node, some rules apply in
-            // the viewEngine:
-            // - viewProviders have priority over providers
-            // - the last directive in NgModule.declarations has priority over the previous one
-            // So to match these rules, the order in which providers are added in the arrays is very
-            // important.
-            for (let i = 0; i < directiveDefs.length; i++) {
-                const def = directiveDefs[i];
-                if (def.providersResolver)
-                    def.providersResolver(def);
-            }
-            let preOrderHooksFound = false;
-            let preOrderCheckHooksFound = false;
-            let directiveIdx = allocExpando(tView, lView, directiveDefs.length, null);
-            ngDevMode &&
-                assertSame(directiveIdx, tNode.directiveStart, 'TNode.directiveStart should point to just allocated space');
+            // Publishes the directive types to DI so they can be injected. Needs to
+            // happen in a separate pass before the TNode flags have been initialized.
             for (let i = 0; i < directiveDefs.length; i++) {
-                const def = directiveDefs[i];
-                // Merge the attrs in the order of matches. This assumes that the first directive is the
-                // component itself, so that the component has the least priority.
-                tNode.mergedAttrs = mergeHostAttrs(tNode.mergedAttrs, def.hostAttrs);
-                configureViewWithDirective(tView, tNode, lView, directiveIdx, def);
-                saveNameToExportMap(directiveIdx, def, exportsMap);
-                if (def.contentQueries !== null)
-                    tNode.flags |= 8 /* TNodeFlags.hasContentQuery */;
-                if (def.hostBindings !== null || def.hostAttrs !== null || def.hostVars !== 0)
-                    tNode.flags |= 128 /* TNodeFlags.hasHostBindings */;
-                const lifeCycleHooks = def.type.prototype;
-                // Only push a node index into the preOrderHooks array if this is the first
-                // pre-order hook found on this node.
-                if (!preOrderHooksFound &&
-                    (lifeCycleHooks.ngOnChanges || lifeCycleHooks.ngOnInit || lifeCycleHooks.ngDoCheck)) {
-                    // We will push the actual hook function into this array later during dir instantiation.
-                    // We cannot do it now because we must ensure hooks are registered in the same
-                    // order that directives are created (i.e. injection order).
-                    (tView.preOrderHooks || (tView.preOrderHooks = [])).push(tNode.index);
-                    preOrderHooksFound = true;
-                }
-                if (!preOrderCheckHooksFound && (lifeCycleHooks.ngOnChanges || lifeCycleHooks.ngDoCheck)) {
-                    (tView.preOrderCheckHooks || (tView.preOrderCheckHooks = [])).push(tNode.index);
-                    preOrderCheckHooksFound = true;
-                }
-                directiveIdx++;
+                diPublicInInjector(getOrCreateNodeInjectorForNode(tNode, lView), tView, directiveDefs[i].type);
             }
-            initializeInputAndOutputAliases(tView, tNode);
+            hasDirectives = true;
+            initializeDirectives(tView, lView, tNode, directiveDefs, exportsMap);
         }
         if (exportsMap)
             cacheMatchingLocalNames(tNode, localRefs, exportsMap);
@@ -12956,17 +12918,66 @@ function resolveDirectives(tView, lView, tNode, localRefs) {
     tNode.mergedAttrs = mergeHostAttrs(tNode.mergedAttrs, tNode.attrs);
     return hasDirectives;
 }
+/** Initializes the data structures necessary for a list of directives to be instantiated. */
+function initializeDirectives(tView, lView, tNode, directives, exportsMap) {
+    ngDevMode && assertFirstCreatePass(tView);
+    initTNodeFlags(tNode, tView.data.length, directives.length);
+    // When the same token is provided by several directives on the same node, some rules apply in
+    // the viewEngine:
+    // - viewProviders have priority over providers
+    // - the last directive in NgModule.declarations has priority over the previous one
+    // So to match these rules, the order in which providers are added in the arrays is very
+    // important.
+    for (let i = 0; i < directives.length; i++) {
+        const def = directives[i];
+        if (def.providersResolver)
+            def.providersResolver(def);
+    }
+    let preOrderHooksFound = false;
+    let preOrderCheckHooksFound = false;
+    let directiveIdx = allocExpando(tView, lView, directives.length, null);
+    ngDevMode &&
+        assertSame(directiveIdx, tNode.directiveStart, 'TNode.directiveStart should point to just allocated space');
+    for (let i = 0; i < directives.length; i++) {
+        const def = directives[i];
+        // Merge the attrs in the order of matches. This assumes that the first directive is the
+        // component itself, so that the component has the least priority.
+        tNode.mergedAttrs = mergeHostAttrs(tNode.mergedAttrs, def.hostAttrs);
+        configureViewWithDirective(tView, tNode, lView, directiveIdx, def);
+        saveNameToExportMap(directiveIdx, def, exportsMap);
+        if (def.contentQueries !== null)
+            tNode.flags |= 4 /* TNodeFlags.hasContentQuery */;
+        if (def.hostBindings !== null || def.hostAttrs !== null || def.hostVars !== 0)
+            tNode.flags |= 64 /* TNodeFlags.hasHostBindings */;
+        const lifeCycleHooks = def.type.prototype;
+        // Only push a node index into the preOrderHooks array if this is the first
+        // pre-order hook found on this node.
+        if (!preOrderHooksFound &&
+            (lifeCycleHooks.ngOnChanges || lifeCycleHooks.ngOnInit || lifeCycleHooks.ngDoCheck)) {
+            // We will push the actual hook function into this array later during dir instantiation.
+            // We cannot do it now because we must ensure hooks are registered in the same
+            // order that directives are created (i.e. injection order).
+            (tView.preOrderHooks || (tView.preOrderHooks = [])).push(tNode.index);
+            preOrderHooksFound = true;
+        }
+        if (!preOrderCheckHooksFound && (lifeCycleHooks.ngOnChanges || lifeCycleHooks.ngDoCheck)) {
+            (tView.preOrderCheckHooks || (tView.preOrderCheckHooks = [])).push(tNode.index);
+            preOrderCheckHooksFound = true;
+        }
+        directiveIdx++;
+    }
+    initializeInputAndOutputAliases(tView, tNode);
+}
 /**
  * Add `hostBindings` to the `TView.hostBindingOpCodes`.
  *
  * @param tView `TView` to which the `hostBindings` should be added.
  * @param tNode `TNode` the element which contains the directive
- * @param lView `LView` current `LView`
  * @param directiveIdx Directive index in view.
  * @param directiveVarsIdx Where will the directive's vars be stored
  * @param def `ComponentDef`/`DirectiveDef`, which contains the `hostVars`/`hostBindings` to add.
  */
-function registerHostBindingOpCodes(tView, tNode, lView, directiveIdx, directiveVarsIdx, def) {
+function registerHostBindingOpCodes(tView, tNode, directiveIdx, directiveVarsIdx, def) {
     ngDevMode && assertFirstCreatePass(tView);
     const hostBindings = def.hostBindings;
     if (hostBindings) {
@@ -13067,7 +13078,7 @@ function invokeHostBindingsInCreationMode(def, directive) {
  * Matches the current node against all available selectors.
  * If a component is matched (at most one), it is returned in first position in the array.
  */
-function findDirectiveDefMatches(tView, viewData, tNode) {
+function findDirectiveDefMatches(tView, lView, tNode) {
     var _a;
     ngDevMode && assertFirstCreatePass(tView);
     ngDevMode && assertTNodeType(tNode, 3 /* TNodeType.AnyRNode */ | 12 /* TNodeType.AnyContainer */);
@@ -13078,25 +13089,47 @@ function findDirectiveDefMatches(tView, viewData, tNode) {
             const def = registry[i];
             if (isNodeMatchingSelectorList(tNode, def.selectors, /* isProjectionMode */ false)) {
                 matches || (matches = ngDevMode ? new MatchesArray() : []);
-                diPublicInInjector(getOrCreateNodeInjectorForNode(tNode, viewData), tView, def.type);
                 if (isComponentDef(def)) {
                     if (ngDevMode) {
                         assertTNodeType(tNode, 2 /* TNodeType.Element */, `"${tNode.value}" tags cannot be used as component hosts. ` +
                             `Please use a different tag to activate the ${stringify(def.type)} component.`);
-                        if (tNode.flags & 2 /* TNodeFlags.isComponentHost */) {
-                            // If another component has been matched previously, it's the first element in the
-                            // `matches` array, see how we store components/directives in `matches` below.
-                            throwMultipleComponentError(tNode, matches[0].type, def.type);
+                        if (isComponentHost(tNode)) {
+                            throwMultipleComponentError(tNode, matches.find(isComponentDef).type, def.type);
                         }
                     }
-                    markAsComponentHost(tView, tNode);
-                    // The component is always stored first with directives after.
-                    matches.unshift(def);
+                    // Components are inserted at the front of the matches array so that their lifecycle
+                    // hooks run before any directive lifecycle hooks. This appears to be for ViewEngine
+                    // compatibility. This logic doesn't make sense with host directives, because it
+                    // would allow the host directives to undo any overrides the host may have made.
+                    // To handle this case, the host directives of components are inserted at the beginning
+                    // of the array, followed by the component. As such, the insertion order is as follows:
+                    // 1. Host directives belonging to the selector-matched component.
+                    // 2. Selector-matched component.
+                    // 3. Host directives belonging to selector-matched directives.
+                    // 4. Selector-matched directives.
+                    if (def.findHostDirectiveDefs !== null) {
+                        const hostDirectiveMatches = [];
+                        def.findHostDirectiveDefs(hostDirectiveMatches, def, tView, lView, tNode);
+                        // Add all host directives declared on this component, followed by the component itself.
+                        // Host directives should execute first so the host has a chance to override changes
+                        // to the DOM made by them.
+                        matches.unshift(...hostDirectiveMatches, def);
+                        // Component is offset starting from the beginning of the host directives array.
+                        const componentOffset = hostDirectiveMatches.length;
+                        markAsComponentHost(tView, tNode, componentOffset);
+                    }
+                    else {
+                        // No host directives on this component, just add the
+                        // component def to the beginning of the matches.
+                        matches.unshift(def);
+                        markAsComponentHost(tView, tNode, 0);
+                    }
                 }
                 else {
+                    // Append any host directives to the matches first.
+                    (_a = def.findHostDirectiveDefs) === null || _a === void 0 ? void 0 : _a.call(def, matches, def, tView, lView, tNode);
                     matches.push(def);
                 }
-                (_a = def.applyHostDirectives) === null || _a === void 0 ? void 0 : _a.call(def, tView, viewData, tNode, matches);
             }
         }
     }
@@ -13104,12 +13137,13 @@ function findDirectiveDefMatches(tView, viewData, tNode) {
 }
 /**
  * Marks a given TNode as a component's host. This consists of:
- * - setting appropriate TNode flags;
+ * - setting the component offset on the TNode.
  * - storing index of component's host element so it will be queued for view refresh during CD.
  */
-function markAsComponentHost(tView, hostTNode) {
+function markAsComponentHost(tView, hostTNode, componentOffset) {
     ngDevMode && assertFirstCreatePass(tView);
-    hostTNode.flags |= 2 /* TNodeFlags.isComponentHost */;
+    ngDevMode && assertGreaterThan(componentOffset, -1, 'componentOffset must be great than -1');
+    hostTNode.componentOffset = componentOffset;
     (tView.components || (tView.components = ngDevMode ? new TViewComponents() : []))
         .push(hostTNode.index);
 }
@@ -13180,7 +13214,7 @@ function configureViewWithDirective(tView, tNode, lView, directiveIndex, def) {
     const nodeInjectorFactory = new NodeInjectorFactory(directiveFactory, isComponentDef(def), ɵɵdirectiveInject);
     tView.blueprint[directiveIndex] = nodeInjectorFactory;
     lView[directiveIndex] = nodeInjectorFactory;
-    registerHostBindingOpCodes(tView, tNode, lView, directiveIndex, allocExpando(tView, lView, def.hostVars, NO_CHANGE), def);
+    registerHostBindingOpCodes(tView, tNode, directiveIndex, allocExpando(tView, lView, def.hostVars, NO_CHANGE), def);
 }
 function addComponentLogic(lView, hostTNode, def) {
     const native = getNativeByTNode(hostTNode, lView);
@@ -13255,10 +13289,11 @@ function setInputsFromAttrs(lView, directiveIndex, instance, def, tNode, initial
  *
  * <my-component name="Bess"></my-component>
  *
- * @param inputs The list of inputs from the directive def
- * @param attrs The static attrs on this node
+ * @param inputs Input alias map that was generated from the directive def inputs.
+ * @param directiveIndex Index of the directive that is currently being processed.
+ * @param attrs Static attrs on this node.
  */
-function generateInitialInputs(inputs, attrs) {
+function generateInitialInputs(inputs, directiveIndex, attrs) {
     let inputsToStore = null;
     let i = 0;
     while (i < attrs.length) {
@@ -13279,7 +13314,17 @@ function generateInitialInputs(inputs, attrs) {
         if (inputs.hasOwnProperty(attrName)) {
             if (inputsToStore === null)
                 inputsToStore = [];
-            inputsToStore.push(attrName, inputs[attrName], attrs[i + 1]);
+            // Find the input's public name from the input store. Note that we can be found easier
+            // through the directive def, but we want to do it using the inputs store so that it can
+            // account for host directive aliases.
+            const inputConfig = inputs[attrName];
+            for (let j = 0; j < inputConfig.length; j += 2) {
+                if (inputConfig[j] === directiveIndex) {
+                    inputsToStore.push(attrName, inputConfig[j + 1], attrs[i + 1]);
+                    // A directive can't have multiple inputs with the same name so we can break here.
+                    break;
+                }
+            }
         }
         i += 2;
     }
@@ -14092,6 +14137,7 @@ class ChainedInjector {
         this.parentInjector = parentInjector;
     }
     get(token, notFoundValue, flags) {
+        flags = convertToBitFlags(flags);
         const value = this.injector.get(token, NOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR, flags);
         if (value !== NOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR ||
             notFoundValue === NOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR) {
@@ -14168,42 +14214,23 @@ class ComponentFactory extends ComponentFactory$1 {
         let component;
         let tElementNode;
         try {
-            const componentView = createRootComponentView(hostRNode, this.componentDef, rootLView, rendererFactory, hostRenderer);
+            const rootDirectives = [this.componentDef];
+            const hostTNode = createRootComponentTNode(rootLView, hostRNode);
+            const componentView = createRootComponentView(hostTNode, hostRNode, this.componentDef, rootDirectives, rootLView, rendererFactory, hostRenderer);
+            tElementNode = getTNode(rootTView, HEADER_OFFSET);
+            // TODO(crisbeto): in practice `hostRNode` should always be defined, but there are some tests
+            // where the renderer is mocked out and `undefined` is returned. We should update the tests so
+            // that this check can be removed.
             if (hostRNode) {
-                if (rootSelectorOrNode) {
-                    setUpAttributes(hostRenderer, hostRNode, ['ng-version', VERSION.full]);
-                }
-                else {
-                    // If host element is created as a part of this function call (i.e. `rootSelectorOrNode`
-                    // is not defined), also apply attributes and classes extracted from component selector.
-                    // Extract attributes and classes from the first selector only to match VE behavior.
-                    const { attrs, classes } = extractAttrsAndClassesFromSelector(this.componentDef.selectors[0]);
-                    if (attrs) {
-                        setUpAttributes(hostRenderer, hostRNode, attrs);
-                    }
-                    if (classes && classes.length > 0) {
-                        writeDirectClass(hostRenderer, hostRNode, classes.join(' '));
-                    }
-                }
+                setRootNodeAttributes(hostRenderer, this.componentDef, hostRNode, rootSelectorOrNode);
             }
-            tElementNode = getTNode(rootTView, HEADER_OFFSET);
             if (projectableNodes !== undefined) {
-                const projection = tElementNode.projection = [];
-                for (let i = 0; i < this.ngContentSelectors.length; i++) {
-                    const nodesforSlot = projectableNodes[i];
-                    // Projectable nodes can be passed as array of arrays or an array of iterables (ngUpgrade
-                    // case). Here we do normalize passed data structure to be an array of arrays to avoid
-                    // complex checks down the line.
-                    // We also normalize the length of the passed in projectable nodes (to match the number of
-                    // <ng-container> slots defined by a component).
-                    projection.push(nodesforSlot != null ? Array.from(nodesforSlot) : null);
-                }
+                projectNodes(tElementNode, this.ngContentSelectors, projectableNodes);
             }
             // TODO: should LifecycleHooksFeature and other host features be generated by the compiler and
             // executed here?
             // Angular 5 reference: https://stackblitz.com/edit/lifecycle-hooks-vcref
-            component =
-                createRootComponent(componentView, this.componentDef, rootLView, [LifecycleHooksFeature]);
+            component = createRootComponent(componentView, this.componentDef, rootDirectives, rootLView, [LifecycleHooksFeature]);
             renderView(rootTView, rootLView, null);
         }
         finally {
@@ -14274,11 +14301,22 @@ const NULL_INJECTOR = {
         throwProviderNotFoundError(token, 'NullInjector');
     }
 };
+/** Creates a TNode that can be used to instantiate a root component. */
+function createRootComponentTNode(lView, rNode) {
+    const tView = lView[TVIEW];
+    const index = HEADER_OFFSET;
+    ngDevMode && assertIndexInRange(lView, index);
+    lView[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.
+    return getOrCreateTNode(tView, index, 2 /* TNodeType.Element */, '#host', null);
+}
 /**
  * Creates the root component view and the root component node.
  *
  * @param rNode Render host element.
- * @param def ComponentDef
+ * @param rootComponentDef 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
@@ -14286,72 +14324,96 @@ const NULL_INJECTOR = {
  *
  * @returns Component view created
  */
-function createRootComponentView(rNode, def, rootView, rendererFactory, hostRenderer, sanitizer) {
+function createRootComponentView(tNode, rNode, rootComponentDef, rootDirectives, 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, getOrCreateComponentTView(def), null, def.onPush ? 32 /* LViewFlags.Dirty */ : 16 /* LViewFlags.CheckAlways */, rootView[index], tNode, rendererFactory, viewRenderer, sanitizer || null, null, null);
+    applyRootComponentStyling(rootDirectives, tNode, rNode, hostRenderer);
+    const viewRenderer = rendererFactory.createRenderer(rNode, rootComponentDef);
+    const componentView = createLView(rootView, getOrCreateComponentTView(rootComponentDef), null, rootComponentDef.onPush ? 32 /* LViewFlags.Dirty */ : 16 /* LViewFlags.CheckAlways */, rootView[tNode.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);
+        diPublicInInjector(getOrCreateNodeInjectorForNode(tNode, rootView), tView, rootComponentDef.type);
+        markAsComponentHost(tView, tNode, 0);
     }
     addToViewTree(rootView, componentView);
     // Store component view at node index, with node as the HOST
-    return rootView[index] = componentView;
+    return rootView[tNode.index] = componentView;
+}
+/** Sets up the styling information on a root component. */
+function applyRootComponentStyling(rootDirectives, tNode, rNode, hostRenderer) {
+    for (const def of rootDirectives) {
+        tNode.mergedAttrs = mergeHostAttrs(tNode.mergedAttrs, def.hostAttrs);
+    }
+    if (tNode.mergedAttrs !== null) {
+        computeStaticStyling(tNode, tNode.mergedAttrs, true);
+        if (rNode !== null) {
+            setupStaticAttributes(hostRenderer, rNode, tNode);
+        }
+    }
 }
 /**
  * Creates a root component and sets it up with features and host bindings.Shared by
  * renderComponent() and ViewContainerRef.createComponent().
  */
-function createRootComponent(componentView, componentDef, rootLView, hostFeatures) {
+function createRootComponent(componentView, rootComponentDef, rootDirectives, rootLView, hostFeatures) {
+    const rootTNode = getCurrentTNode();
+    ngDevMode && assertDefined(rootTNode, 'tNode should have been already created');
     const tView = rootLView[TVIEW];
-    // Create directive instance with factory() and store at next index in viewData
-    const component = instantiateRootComponent(tView, rootLView, componentDef);
-    // Root view only contains an instance of this component,
-    // so we use a reference to that component instance as a context.
+    const native = getNativeByTNode(rootTNode, rootLView);
+    initializeDirectives(tView, rootLView, rootTNode, rootDirectives, null);
+    for (let i = 0; i < rootDirectives.length; i++) {
+        const directiveIndex = rootTNode.directiveStart + i;
+        const directiveInstance = getNodeInjectable(rootLView, tView, directiveIndex, rootTNode);
+        attachPatchData(directiveInstance, rootLView);
+    }
+    invokeDirectivesHostBindings(tView, rootLView, rootTNode);
+    if (native) {
+        attachPatchData(native, rootLView);
+    }
+    // We're guaranteed for the `componentOffset` to be positive here
+    // since a root component always matches a component def.
+    ngDevMode &&
+        assertGreaterThan(rootTNode.componentOffset, -1, 'componentOffset must be great than -1');
+    const component = getNodeInjectable(rootLView, tView, rootTNode.directiveStart + rootTNode.componentOffset, rootTNode);
     componentView[CONTEXT] = rootLView[CONTEXT] = component;
     if (hostFeatures !== null) {
         for (const feature of hostFeatures) {
-            feature(component, componentDef);
+            feature(component, rootComponentDef);
         }
     }
     // 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);
+    executeContentQueries(tView, rootTNode, componentView);
+    return component;
+}
+/** Sets the static attributes on a root component. */
+function setRootNodeAttributes(hostRenderer, componentDef, hostRNode, rootSelectorOrNode) {
+    if (rootSelectorOrNode) {
+        setUpAttributes(hostRenderer, hostRNode, ['ng-version', VERSION.full]);
     }
-    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);
+    else {
+        // If host element is created as a part of this function call (i.e. `rootSelectorOrNode`
+        // is not defined), also apply attributes and classes extracted from component selector.
+        // Extract attributes and classes from the first selector only to match VE behavior.
+        const { attrs, classes } = extractAttrsAndClassesFromSelector(componentDef.selectors[0]);
+        if (attrs) {
+            setUpAttributes(hostRenderer, hostRNode, attrs);
+        }
+        if (classes && classes.length > 0) {
+            writeDirectClass(hostRenderer, hostRNode, classes.join(' '));
+        }
+    }
+}
+/** Projects the `projectableNodes` that were specified when creating a root component. */
+function projectNodes(tNode, ngContentSelectors, projectableNodes) {
+    const projection = tNode.projection = [];
+    for (let i = 0; i < ngContentSelectors.length; i++) {
+        const nodesforSlot = projectableNodes[i];
+        // Projectable nodes can be passed as array of arrays or an array of iterables (ngUpgrade
+        // case). Here we do normalize passed data structure to be an array of arrays to avoid
+        // complex checks down the line.
+        // We also normalize the length of the passed in projectable nodes (to match the number of
+        // <ng-container> slots defined by a component).
+        projection.push(nodesforSlot != null ? Array.from(nodesforSlot) : null);
     }
-    return component;
 }
 /**
  * Used to enable lifecycle hooks on the root component.
@@ -14609,6 +14671,13 @@ function ɵɵCopyDefinitionFeature(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
+ */
 /**
  * This feature add the host directives behavior to a directive definition by patching a
  * function onto it. The expectation is that the runtime will invoke the function during
@@ -14630,29 +14699,42 @@ function ɵɵCopyDefinitionFeature(definition) {
  * @codeGenApi
  */
 function ɵɵHostDirectivesFeature(rawHostDirectives) {
-    const unwrappedHostDirectives = Array.isArray(rawHostDirectives) ? rawHostDirectives : rawHostDirectives();
-    const hostDirectives = unwrappedHostDirectives.map(dir => typeof dir === 'function' ? { directive: dir, inputs: EMPTY_OBJ, outputs: EMPTY_OBJ } : {
-        directive: dir.directive,
-        inputs: bindingArrayToMap(dir.inputs),
-        outputs: bindingArrayToMap(dir.outputs)
-    });
     return (definition) => {
-        // TODO(crisbeto): implement host directive matching logic.
-        definition.applyHostDirectives =
-            (tView, viewData, tNode, matches) => { };
+        definition.findHostDirectiveDefs = findHostDirectiveDefs;
+        definition.hostDirectives =
+            (Array.isArray(rawHostDirectives) ? rawHostDirectives : rawHostDirectives()).map(dir => {
+                return typeof dir === 'function' ?
+                    { directive: resolveForwardRef(dir), inputs: EMPTY_OBJ, outputs: EMPTY_OBJ } :
+                    {
+                        directive: resolveForwardRef(dir.directive),
+                        inputs: bindingArrayToMap(dir.inputs),
+                        outputs: bindingArrayToMap(dir.outputs)
+                    };
+            });
     };
 }
+function findHostDirectiveDefs(matches, def, tView, lView, tNode) {
+    if (def.hostDirectives !== null) {
+        for (const hostDirectiveConfig of def.hostDirectives) {
+            const hostDirectiveDef = getDirectiveDef(hostDirectiveConfig.directive);
+            // TODO(crisbeto): assert that the def exists.
+            // Host directives execute before the host so that its host bindings can be overwritten.
+            findHostDirectiveDefs(matches, hostDirectiveDef, tView, lView, tNode);
+            matches.push(hostDirectiveDef);
+        }
+    }
+}
 /**
  * Converts an array in the form of `['publicName', 'alias', 'otherPublicName', 'otherAlias']` into
  * a map in the form of `{publicName: 'alias', otherPublicName: 'otherAlias'}`.
  */
 function bindingArrayToMap(bindings) {
-    if (!bindings || bindings.length === 0) {
+    if (bindings === undefined || bindings.length === 0) {
         return EMPTY_OBJ;
     }
     const result = {};
-    for (let i = 1; i < bindings.length; i += 2) {
-        result[bindings[i - 1]] = bindings[i];
+    for (let i = 0; i < bindings.length; i += 2) {
+        result[bindings[i]] = bindings[i + 1];
     }
     return result;
 }
@@ -15599,19 +15681,8 @@ function ɵɵelementStart(index, name, attrsIndex, localRefsIndex) {
         elementStartFirstCreatePass(adjustedIndex, tView, lView, native, name, attrsIndex, localRefsIndex) :
         tView.data[adjustedIndex];
     setCurrentTNode(tNode, true);
-    const mergedAttrs = tNode.mergedAttrs;
-    if (mergedAttrs !== null) {
-        setUpAttributes(renderer, native, mergedAttrs);
-    }
-    const classes = tNode.classes;
-    if (classes !== null) {
-        writeDirectClass(renderer, native, classes);
-    }
-    const styles = tNode.styles;
-    if (styles !== null) {
-        writeDirectStyle(renderer, native, styles);
-    }
-    if ((tNode.flags & 64 /* TNodeFlags.isDetached */) !== 64 /* TNodeFlags.isDetached */) {
+    setupStaticAttributes(renderer, native, tNode);
+    if ((tNode.flags & 32 /* TNodeFlags.isDetached */) !== 32 /* TNodeFlags.isDetached */) {
         // In the i18n case, the translation may have removed this element, so only add it if it is not
         // detached. See `TNodeType.Placeholder` and `LFrame.inI18n` for more context.
         appendChild(tView, lView, native, tNode);
@@ -16049,9 +16120,7 @@ function wrapListener(tNode, lView, context, listenerFn, wrapWithPreventDefault)
         }
         // In order to be backwards compatible with View Engine, events on component host nodes
         // must also mark the component view itself dirty (i.e. the view that it owns).
-        const startView = tNode.flags & 2 /* TNodeFlags.isComponentHost */ ?
-            getComponentLViewByIndex(tNode.index, lView) :
-            lView;
+        const startView = tNode.componentOffset > -1 ? getComponentLViewByIndex(tNode.index, lView) : lView;
         markViewDirty(startView);
         let result = executeListenerWithErrorHandling(lView, context, listenerFn, e);
         // A just-invoked listener function might have coalesced listeners so we need to check for
@@ -16208,7 +16277,7 @@ function ɵɵprojection(nodeIndex, selectorIndex = 0, attrs) {
         tProjectionNode.projection = selectorIndex;
     // `<ng-content>` has no content
     setCurrentTNodeAsNotParent();
-    if ((tProjectionNode.flags & 64 /* TNodeFlags.isDetached */) !== 64 /* TNodeFlags.isDetached */) {
+    if ((tProjectionNode.flags & 32 /* TNodeFlags.isDetached */) !== 32 /* TNodeFlags.isDetached */) {
         // re-distribution of projectable nodes is stored on a component's view level
         applyProjection(tView, lView, tProjectionNode);
     }
@@ -18122,7 +18191,7 @@ function normalizeSuffix(value, suffix) {
  * @param isClassBased `true` if `class` (`false` if `style`)
  */
 function hasStylingInputShadow(tNode, isClassBased) {
-    return (tNode.flags & (isClassBased ? 16 /* TNodeFlags.hasClassInput */ : 32 /* TNodeFlags.hasStyleInput */)) !== 0;
+    return (tNode.flags & (isClassBased ? 8 /* TNodeFlags.hasClassInput */ : 16 /* TNodeFlags.hasStyleInput */)) !== 0;
 }
 
 /**
@@ -19814,7 +19883,7 @@ function processI18nInsertBefore(renderer, childTNode, lView, childRNode, parent
             anchorRNode = i18nParent;
             i18nParent = parentRElement;
         }
-        if (i18nParent !== null && (childTNode.flags & 2 /* TNodeFlags.isComponentHost */) === 0) {
+        if (i18nParent !== null && childTNode.componentOffset === -1) {
             for (let i = 1; i < tNodeInsertBeforeIndex.length; i++) {
                 // No need to `unwrapRNode` because all of the indexes point to i18n text nodes.
                 // see `assertDomNode` below.
@@ -22302,7 +22371,7 @@ function getDirectives(node) {
         return [];
     }
     if (context.directives === undefined) {
-        context.directives = getDirectivesAtNodeIndex(nodeIndex, lView, false);
+        context.directives = getDirectivesAtNodeIndex(nodeIndex, lView);
     }
     // 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.
@@ -26085,7 +26154,7 @@ class TestBedImpl {
         return TestBedImpl.INSTANCE.overrideProvider(token, provider);
     }
     static inject(token, notFoundValue, flags) {
-        return TestBedImpl.INSTANCE.inject(token, notFoundValue, flags);
+        return TestBedImpl.INSTANCE.inject(token, notFoundValue, ɵconvertToBitFlags(flags));
     }
     /** @deprecated from v9.0.0 use TestBed.inject */
     static get(token, notFoundValue = Injector$1.THROW_IF_NOT_FOUND, flags = InjectFlags$1.Default) {
@@ -26219,7 +26288,7 @@ class TestBedImpl {
             return this;
         }
         const UNDEFINED = {};
-        const result = this.testModuleRef.injector.get(token, UNDEFINED, flags);
+        const result = this.testModuleRef.injector.get(token, UNDEFINED, ɵconvertToBitFlags(flags));
         return result === UNDEFINED ? this.compiler.injector.get(token, notFoundValue, flags) :
             result;
     }