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

package/fesm2020/core.mjs

@@ -1,5 +1,5 @@
 /**
- * @license Angular v15.0.0-next.4
+ * @license Angular v15.0.0-next.5
  * (c) 2010-2022 Google LLC. https://angular.io/
  * License: MIT
  */
@@ -1759,11 +1759,12 @@ function rememberChangeHistoryAndInvokeOnChangesHook() {
     }
 }
 function ngOnChangesSetInput(instance, value, publicName, privateName) {
+    const declaredName = this.declaredInputs[publicName];
+    ngDevMode && assertString(declaredName, 'Name of input in ngOnChanges has to be a string');
     const simpleChangesStore = getSimpleChangesStore(instance) ||
         setSimpleChangesStore(instance, { previous: EMPTY_OBJ, current: null });
     const current = simpleChangesStore.current || (simpleChangesStore.current = {});
     const previous = simpleChangesStore.previous;
-    const declaredName = this.declaredInputs[publicName];
     const previousChange = previous[declaredName];
     current[declaredName] = new SimpleChange(previousChange && previousChange.currentValue, value, previous === EMPTY_OBJ);
     instance[privateName] = value;
@@ -4127,8 +4128,11 @@ const Attribute = makeParamDecorator('Attribute', (attributeName) => ({ attribut
  * As you can see in the Tree-shakable InjectionToken example below.
  *
  * Additionally, if a `factory` is specified you can also specify the `providedIn` option, which
- * overrides the above behavior and marks the token as belonging to a particular `@NgModule`. As
- * mentioned above, `'root'` is the default value for `providedIn`.
+ * overrides the above behavior and marks the token as belonging to a particular `@NgModule` (note:
+ * this option is now deprecated). As mentioned above, `'root'` is the default value for
+ * `providedIn`.
+ *
+ * The `providedIn: NgModule` and `providedIn: 'any'` options are deprecated.
  *
  * @usageNotes
  * ### Basic Examples
@@ -7256,7 +7260,7 @@ class Version {
 /**
  * @publicApi
  */
-const VERSION = new Version('15.0.0-next.4');
+const VERSION = new Version('15.0.0-next.5');
 
 /**
  * @license
@@ -12279,9 +12283,6 @@ function createViewBlueprint(bindingStartIndex, initialViewLength) {
     }
     return blueprint;
 }
-function createError(text, token) {
-    return new Error(`Renderer: ${text} [${stringifyForError(token)}]`);
-}
 /**
  * Locates the host native element, used for bootstrapping existing nodes into rendering pipeline.
  *
@@ -12405,26 +12406,49 @@ function createTNode(tView, tParent, type, index, value, attrs) {
     }
     return tNode;
 }
-function generatePropertyAliases(inputAliasMap, directiveDefIdx, propStore) {
-    for (let publicName in inputAliasMap) {
-        if (inputAliasMap.hasOwnProperty(publicName)) {
-            propStore = propStore === null ? {} : propStore;
-            const internalName = inputAliasMap[publicName];
-            if (propStore.hasOwnProperty(publicName)) {
-                propStore[publicName].push(directiveDefIdx, internalName);
+/**
+ * Generates the `PropertyAliases` data structure from the provided input/output mapping.
+ * @param aliasMap Input/output mapping from the directive definition.
+ * @param directiveIndex Index of the directive.
+ * @param propertyAliases Object in which to store the results.
+ * @param hostDirectiveAliasMap Object used to alias or filter out properties for host directives.
+ * If the mapping is provided, it'll act as an allowlist, as well as a mapping of what public
+ * name inputs/outputs should be exposed under.
+ */
+function generatePropertyAliases(aliasMap, directiveIndex, propertyAliases, hostDirectiveAliasMap) {
+    for (let publicName in aliasMap) {
+        if (aliasMap.hasOwnProperty(publicName)) {
+            propertyAliases = propertyAliases === null ? {} : propertyAliases;
+            const internalName = aliasMap[publicName];
+            // If there are no host directive mappings, we want to remap using the alias map from the
+            // definition itself. If there is an alias map, it has two functions:
+            // 1. It serves as an allowlist of bindings that are exposed by the host directives. Only the
+            // ones inside the host directive map will be exposed on the host.
+            // 2. The public name of the property is aliased using the host directive alias map, rather
+            // than the alias map from the definition.
+            if (hostDirectiveAliasMap === null) {
+                addPropertyAlias(propertyAliases, directiveIndex, publicName, internalName);
             }
-            else {
-                (propStore[publicName] = [directiveDefIdx, internalName]);
+            else if (hostDirectiveAliasMap.hasOwnProperty(publicName)) {
+                addPropertyAlias(propertyAliases, directiveIndex, hostDirectiveAliasMap[publicName], internalName);
             }
         }
     }
-    return propStore;
+    return propertyAliases;
+}
+function addPropertyAlias(propertyAliases, directiveIndex, publicName, internalName) {
+    if (propertyAliases.hasOwnProperty(publicName)) {
+        propertyAliases[publicName].push(directiveIndex, internalName);
+    }
+    else {
+        propertyAliases[publicName] = [directiveIndex, internalName];
+    }
 }
 /**
  * Initializes data structures required to work with directive inputs and outputs.
  * Initialization is done for all directives matched on a given TNode.
  */
-function initializeInputAndOutputAliases(tView, tNode) {
+function initializeInputAndOutputAliases(tView, tNode, hostDirectiveDefinitionMap) {
     ngDevMode && assertFirstCreatePass(tView);
     const start = tNode.directiveStart;
     const end = tNode.directiveEnd;
@@ -12433,16 +12457,21 @@ function initializeInputAndOutputAliases(tView, tNode) {
     const inputsFromAttrs = ngDevMode ? new TNodeInitialInputs() : [];
     let inputsStore = null;
     let outputsStore = null;
-    for (let i = start; i < end; i++) {
-        const directiveDef = tViewData[i];
-        inputsStore = generatePropertyAliases(directiveDef.inputs, i, inputsStore);
-        outputsStore = generatePropertyAliases(directiveDef.outputs, i, outputsStore);
+    for (let directiveIndex = start; directiveIndex < end; directiveIndex++) {
+        const directiveDef = tViewData[directiveIndex];
+        const aliasData = hostDirectiveDefinitionMap ? hostDirectiveDefinitionMap.get(directiveDef) : null;
+        const aliasedInputs = aliasData ? aliasData.inputs : null;
+        const aliasedOutputs = aliasData ? aliasData.outputs : null;
+        inputsStore =
+            generatePropertyAliases(directiveDef.inputs, directiveIndex, inputsStore, aliasedInputs);
+        outputsStore =
+            generatePropertyAliases(directiveDef.outputs, directiveIndex, outputsStore, aliasedOutputs);
         // 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 = (inputsStore !== null && tNodeAttrs !== null && !isInlineTemplate(tNode)) ?
-            generateInitialInputs(inputsStore, i, tNodeAttrs) :
+            generateInitialInputs(inputsStore, directiveIndex, tNodeAttrs) :
             null;
         inputsFromAttrs.push(initialInputs);
     }
@@ -12567,16 +12596,19 @@ function resolveDirectives(tView, lView, tNode, localRefs) {
     ngDevMode && assertFirstCreatePass(tView);
     let hasDirectives = false;
     if (getBindingsEnabled()) {
-        const directiveDefs = findDirectiveDefMatches(tView, lView, tNode);
         const exportsMap = localRefs === null ? null : { '': -1 };
+        const matchResult = findDirectiveDefMatches(tView, tNode);
+        let directiveDefs;
+        let hostDirectiveDefs;
+        if (matchResult === null) {
+            directiveDefs = hostDirectiveDefs = null;
+        }
+        else {
+            [directiveDefs, hostDirectiveDefs] = matchResult;
+        }
         if (directiveDefs !== null) {
-            // 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++) {
-                diPublicInInjector(getOrCreateNodeInjectorForNode(tNode, lView), tView, directiveDefs[i].type);
-            }
             hasDirectives = true;
-            initializeDirectives(tView, lView, tNode, directiveDefs, exportsMap);
+            initializeDirectives(tView, lView, tNode, directiveDefs, exportsMap, hostDirectiveDefs);
         }
         if (exportsMap)
             cacheMatchingLocalNames(tNode, localRefs, exportsMap);
@@ -12586,8 +12618,13 @@ function resolveDirectives(tView, lView, tNode, localRefs) {
     return hasDirectives;
 }
 /** Initializes the data structures necessary for a list of directives to be instantiated. */
-function initializeDirectives(tView, lView, tNode, directives, exportsMap) {
+function initializeDirectives(tView, lView, tNode, directives, exportsMap, hostDirectiveDefs) {
     ngDevMode && assertFirstCreatePass(tView);
+    // 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 < directives.length; i++) {
+        diPublicInInjector(getOrCreateNodeInjectorForNode(tNode, lView), tView, directives[i].type);
+    }
     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:
@@ -12633,7 +12670,7 @@ function initializeDirectives(tView, lView, tNode, directives, exportsMap) {
         }
         directiveIdx++;
     }
-    initializeInputAndOutputAliases(tView, tNode);
+    initializeInputAndOutputAliases(tView, tNode, hostDirectiveDefs);
 }
 /**
  * Add `hostBindings` to the `TView.hostBindingOpCodes`.
@@ -12745,11 +12782,12 @@ 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, lView, tNode) {
+function findDirectiveDefMatches(tView, tNode) {
     ngDevMode && assertFirstCreatePass(tView);
     ngDevMode && assertTNodeType(tNode, 3 /* TNodeType.AnyRNode */ | 12 /* TNodeType.AnyContainer */);
     const registry = tView.directiveRegistry;
     let matches = null;
+    let hostDirectiveDefs = null;
     if (registry) {
         for (let i = 0; i < registry.length; i++) {
             const def = registry[i];
@@ -12775,7 +12813,8 @@ function findDirectiveDefMatches(tView, lView, tNode) {
                     // 4. Selector-matched directives.
                     if (def.findHostDirectiveDefs !== null) {
                         const hostDirectiveMatches = [];
-                        def.findHostDirectiveDefs(hostDirectiveMatches, def, tView, lView, tNode);
+                        hostDirectiveDefs = hostDirectiveDefs || new Map();
+                        def.findHostDirectiveDefs(def, hostDirectiveMatches, hostDirectiveDefs);
                         // 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.
@@ -12793,13 +12832,14 @@ function findDirectiveDefMatches(tView, lView, tNode) {
                 }
                 else {
                     // Append any host directives to the matches first.
-                    def.findHostDirectiveDefs?.(matches, def, tView, lView, tNode);
+                    hostDirectiveDefs = hostDirectiveDefs || new Map();
+                    def.findHostDirectiveDefs?.(def, matches, hostDirectiveDefs);
                     matches.push(def);
                 }
             }
         }
     }
-    return matches;
+    return matches === null ? null : [matches, hostDirectiveDefs];
 }
 /**
  * Marks a given TNode as a component's host. This consists of:
@@ -13880,15 +13920,26 @@ class ComponentFactory extends ComponentFactory$1 {
         let component;
         let tElementNode;
         try {
-            const rootDirectives = [this.componentDef];
+            const rootComponentDef = this.componentDef;
+            let rootDirectives;
+            let hostDirectiveDefs = null;
+            if (rootComponentDef.findHostDirectiveDefs) {
+                rootDirectives = [];
+                hostDirectiveDefs = new Map();
+                rootComponentDef.findHostDirectiveDefs(rootComponentDef, rootDirectives, hostDirectiveDefs);
+                rootDirectives.push(rootComponentDef);
+            }
+            else {
+                rootDirectives = [rootComponentDef];
+            }
             const hostTNode = createRootComponentTNode(rootLView, hostRNode);
-            const componentView = createRootComponentView(hostTNode, hostRNode, this.componentDef, rootDirectives, rootLView, rendererFactory, hostRenderer);
+            const componentView = createRootComponentView(hostTNode, hostRNode, rootComponentDef, 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) {
-                setRootNodeAttributes(hostRenderer, this.componentDef, hostRNode, rootSelectorOrNode);
+                setRootNodeAttributes(hostRenderer, rootComponentDef, hostRNode, rootSelectorOrNode);
             }
             if (projectableNodes !== undefined) {
                 projectNodes(tElementNode, this.ngContentSelectors, projectableNodes);
@@ -13896,7 +13947,7 @@ class ComponentFactory extends ComponentFactory$1 {
             // 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, rootDirectives, rootLView, [LifecycleHooksFeature]);
+            component = createRootComponent(componentView, rootComponentDef, rootDirectives, hostDirectiveDefs, rootLView, [LifecycleHooksFeature]);
             renderView(rootTView, rootLView, null);
         }
         finally {
@@ -13996,8 +14047,7 @@ function createRootComponentView(tNode, rNode, rootComponentDef, rootDirectives,
     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, rootComponentDef.type);
-        markAsComponentHost(tView, tNode, 0);
+        markAsComponentHost(tView, tNode, rootDirectives.length - 1);
     }
     addToViewTree(rootView, componentView);
     // Store component view at node index, with node as the HOST
@@ -14019,12 +14069,12 @@ function applyRootComponentStyling(rootDirectives, tNode, rNode, hostRenderer) {
  * Creates a root component and sets it up with features and host bindings.Shared by
  * renderComponent() and ViewContainerRef.createComponent().
  */
-function createRootComponent(componentView, rootComponentDef, rootDirectives, rootLView, hostFeatures) {
+function createRootComponent(componentView, rootComponentDef, rootDirectives, hostDirectiveDefs, rootLView, hostFeatures) {
     const rootTNode = getCurrentTNode();
     ngDevMode && assertDefined(rootTNode, 'tNode should have been already created');
     const tView = rootLView[TVIEW];
     const native = getNativeByTNode(rootTNode, rootLView);
-    initializeDirectives(tView, rootLView, rootTNode, rootDirectives, null);
+    initializeDirectives(tView, rootLView, rootTNode, rootDirectives, null, hostDirectiveDefs);
     for (let i = 0; i < rootDirectives.length; i++) {
         const directiveIndex = rootTNode.directiveStart + i;
         const directiveInstance = getNodeInjectable(rootLView, tView, directiveIndex, rootTNode);
@@ -14345,7 +14395,7 @@ function ɵɵCopyDefinitionFeature(definition) {
  * found in the LICENSE file at https://angular.io/license
  */
 /**
- * This feature add the host directives behavior to a directive definition by patching a
+ * This feature adds 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
  * directive matching.
  *
@@ -14379,14 +14429,20 @@ function ɵɵHostDirectivesFeature(rawHostDirectives) {
             });
     };
 }
-function findHostDirectiveDefs(matches, def, tView, lView, tNode) {
-    if (def.hostDirectives !== null) {
-        for (const hostDirectiveConfig of def.hostDirectives) {
+function findHostDirectiveDefs(currentDef, matchedDefs, hostDirectiveDefs) {
+    if (currentDef.hostDirectives !== null) {
+        for (const hostDirectiveConfig of currentDef.hostDirectives) {
             const hostDirectiveDef = getDirectiveDef(hostDirectiveConfig.directive);
-            // TODO(crisbeto): assert that the def exists.
+            if (typeof ngDevMode === 'undefined' || ngDevMode) {
+                validateHostDirective(hostDirectiveConfig, hostDirectiveDef, matchedDefs);
+            }
+            // We need to patch the `declaredInputs` so that
+            // `ngOnChanges` can map the properties correctly.
+            patchDeclaredInputs(hostDirectiveDef.declaredInputs, hostDirectiveConfig.inputs);
             // Host directives execute before the host so that its host bindings can be overwritten.
-            findHostDirectiveDefs(matches, hostDirectiveDef, tView, lView, tNode);
-            matches.push(hostDirectiveDef);
+            findHostDirectiveDefs(hostDirectiveDef, matchedDefs, hostDirectiveDefs);
+            hostDirectiveDefs.set(hostDirectiveDef, hostDirectiveConfig);
+            matchedDefs.push(hostDirectiveDef);
         }
     }
 }
@@ -14404,6 +14460,90 @@ function bindingArrayToMap(bindings) {
     }
     return result;
 }
+/**
+ * `ngOnChanges` has some leftover legacy ViewEngine behavior where the keys inside the
+ * `SimpleChanges` event refer to the *declared* name of the input, not its public name or its
+ * minified name. E.g. in `@Input('alias') foo: string`, the name in the `SimpleChanges` object
+ * will always be `foo`, and not `alias` or the minified name of `foo` in apps using property
+ * minification.
+ *
+ * This is achieved through the `DirectiveDef.declaredInputs` map that is constructed when the
+ * definition is declared. When a property is written to the directive instance, the
+ * `NgOnChangesFeature` will try to remap the property name being written to using the
+ * `declaredInputs`.
+ *
+ * Since the host directive input remapping happens during directive matching, `declaredInputs`
+ * won't contain the new alias that the input is available under. This function addresses the
+ * issue by patching the host directive aliases to the `declaredInputs`. There is *not* a risk of
+ * this patching accidentally introducing new inputs to the host directive, because `declaredInputs`
+ * is used *only* by the `NgOnChangesFeature` when determining what name is used in the
+ * `SimpleChanges` object which won't be reached if an input doesn't exist.
+ */
+function patchDeclaredInputs(declaredInputs, exposedInputs) {
+    for (const publicName in exposedInputs) {
+        if (exposedInputs.hasOwnProperty(publicName)) {
+            const remappedPublicName = exposedInputs[publicName];
+            const privateName = declaredInputs[publicName];
+            // We *technically* shouldn't be able to hit this case because we can't have multiple
+            // inputs on the same property and we have validations against conflicting aliases in
+            // `validateMappings`. If we somehow did, it would lead to `ngOnChanges` being invoked
+            // with the wrong name so we have a non-user-friendly assertion here just in case.
+            if ((typeof ngDevMode === 'undefined' || ngDevMode) &&
+                declaredInputs.hasOwnProperty(remappedPublicName)) {
+                assertEqual(declaredInputs[remappedPublicName], declaredInputs[publicName], `Conflicting host directive input alias ${publicName}.`);
+            }
+            declaredInputs[remappedPublicName] = privateName;
+        }
+    }
+}
+/**
+ * Verifies that the host directive has been configured correctly.
+ * @param hostDirectiveConfig Host directive configuration object.
+ * @param directiveDef Directive definition of the host directive.
+ * @param matchedDefs Directives that have been matched so far.
+ */
+function validateHostDirective(hostDirectiveConfig, directiveDef, matchedDefs) {
+    // TODO(crisbeto): implement more of these checks in the compiler.
+    const type = hostDirectiveConfig.directive;
+    if (directiveDef === null) {
+        if (getComponentDef(type) !== null) {
+            throw new RuntimeError(310 /* RuntimeErrorCode.HOST_DIRECTIVE_COMPONENT */, `Host directive ${type.name} cannot be a component.`);
+        }
+        throw new RuntimeError(307 /* RuntimeErrorCode.HOST_DIRECTIVE_UNRESOLVABLE */, `Could not resolve metadata for host directive ${type.name}. ` +
+            `Make sure that the ${type.name} class is annotated with an @Directive decorator.`);
+    }
+    if (!directiveDef.standalone) {
+        throw new RuntimeError(308 /* RuntimeErrorCode.HOST_DIRECTIVE_NOT_STANDALONE */, `Host directive ${directiveDef.type.name} must be standalone.`);
+    }
+    if (matchedDefs.indexOf(directiveDef) > -1) {
+        throw new RuntimeError(309 /* RuntimeErrorCode.DUPLICATE_DIRECTITVE */, `Directive ${directiveDef.type.name} matches multiple times on the same element. ` +
+            `Directives can only match an element once.`);
+    }
+    validateMappings('input', directiveDef, hostDirectiveConfig.inputs);
+    validateMappings('output', directiveDef, hostDirectiveConfig.outputs);
+}
+/**
+ * Checks that the host directive inputs/outputs configuration is valid.
+ * @param bindingType Kind of binding that is being validated. Used in the error message.
+ * @param def Definition of the host directive that is being validated against.
+ * @param hostDirectiveDefs Host directive mapping object that shold be validated.
+ */
+function validateMappings(bindingType, def, hostDirectiveDefs) {
+    const className = def.type.name;
+    const bindings = bindingType === 'input' ? def.inputs : def.outputs;
+    for (const publicName in hostDirectiveDefs) {
+        if (hostDirectiveDefs.hasOwnProperty(publicName)) {
+            if (!bindings.hasOwnProperty(publicName)) {
+                throw new RuntimeError(311 /* RuntimeErrorCode.HOST_DIRECTIVE_UNDEFINED_BINDING */, `Directive ${className} does not have an ${bindingType} with a public name of ${publicName}.`);
+            }
+            const remappedPublicName = hostDirectiveDefs[publicName];
+            if (bindings.hasOwnProperty(remappedPublicName) &&
+                bindings[remappedPublicName] !== publicName) {
+                throw new RuntimeError(312 /* RuntimeErrorCode.HOST_DIRECTIVE_CONFLICTING_ALIAS */, `Cannot alias ${bindingType} ${publicName} of host directive ${className} to ${remappedPublicName}, because it already has a different ${bindingType} with the same public name.`);
+            }
+        }
+    }
+}
 
 /**
  * @license
@@ -24329,7 +24469,7 @@ function generateStandaloneInDeclarationsError(type, location) {
 function verifySemanticsOfNgModuleDef(moduleType, allowDuplicateDeclarationsInRoot, importingModule) {
     if (verifiedNgModule.get(moduleType))
         return;
-    // skip verifications of standalone components, directives and pipes
+    // skip verifications of standalone components, directives, and pipes
     if (isStandalone(moduleType))
         return;
     verifiedNgModule.set(moduleType, true);