@angular/core 14.0.0-rc.2 → 14.0.0-rc.3

package/fesm2020/core.mjs

@@ -1,5 +1,5 @@
 /**
- * @license Angular v14.0.0-rc.2
+ * @license Angular v14.0.0-rc.3
  * (c) 2010-2022 Google LLC. https://angular.io/
  * License: MIT
  */
@@ -954,8 +954,8 @@ function ɵɵdefineComponent(componentDefinition) {
  */
 function ɵɵsetComponentScope(type, directives, pipes) {
     const def = type.ɵcmp;
-    def.directiveDefs = () => directives.map(extractDirectiveDef);
-    def.pipeDefs = () => pipes.map(getPipeDef$1);
+    def.directiveDefs = () => (typeof directives === 'function' ? directives() : directives).map(extractDirectiveDef);
+    def.pipeDefs = () => (typeof pipes === 'function' ? pipes() : pipes).map(getPipeDef$1);
 }
 function extractDirectiveDef(type) {
     return getComponentDef(type) || getDirectiveDef(type);
@@ -4858,9 +4858,9 @@ function setCurrentInjector(injector) {
 function injectInjectorOnly(token, flags = InjectFlags.Default) {
     if (_currentInjector === undefined) {
         const errorMessage = (typeof ngDevMode === 'undefined' || ngDevMode) ?
-            `inject() must be called from an injection context` :
+            `inject() must be called from an injection context (a constructor, a factory function or a field initializer)` :
             '';
-        throw new RuntimeError(203 /* RuntimeErrorCode.MISSING_INJECTION_CONTEXT */, errorMessage);
+        throw new RuntimeError(-203 /* RuntimeErrorCode.MISSING_INJECTION_CONTEXT */, errorMessage);
     }
     else if (_currentInjector === null) {
         return injectRootLimpMode(token, undefined, flags);
@@ -4895,29 +4895,71 @@ Please check that 1) the type for the parameter at index ${index} is correct and
 }
 /**
  * Injects a token from the currently active injector.
- *
- * Must be used in the context of a factory function such as one defined for an
- * `InjectionToken`. Throws an error if not called from such a context.
- *
- * Within such a factory function, using this function to request injection of a dependency
- * is faster and more type-safe than providing an additional array of dependencies
- * (as has been common with `useFactory` providers).
- *
- * @param token The injection token for the dependency to be injected.
+ * `inject` is only supported during instantiation of a dependency by the DI system. It can be used
+ * during:
+ * - Construction (via the `constructor`) of a class being instantiated by the DI system, such
+ * as an `@Injectable` or `@Component`.
+ * - In the initializer for fields of such classes.
+ * - In the factory function specified for `useFactory` of a `Provider` or an `@Injectable`.
+ * - In the `factory` function specified for an `InjectionToken`.
+ *
+ * @param token A token that represents a dependency that should be injected.
  * @param flags Optional flags that control how injection is executed.
  * The flags correspond to injection strategies that can be specified with
  * parameter decorators `@Host`, `@Self`, `@SkipSef`, and `@Optional`.
- * @returns the injected value if injection is successful, `null` otherwise.
+ * @returns the injected value if operation is successful, `null` otherwise.
+ * @throws if called outside of a supported context.
  *
  * @usageNotes
+ * In practice the `inject()` calls are allowed in a constructor, a constructor parameter and a
+ * field initializer:
  *
- * ### Example
+ * ```typescript
+ * @Injectable({providedIn: 'root'})
+ * export class Car {
+ *   radio: Radio|undefined;
+ *   // OK: field initializer
+ *   spareTyre = inject(Tyre);
  *
- * {@example core/di/ts/injector_spec.ts region='ShakableInjectionToken'}
+ *   constructor() {
+ *     // OK: constructor body
+ *     this.radio = inject(Radio);
+ *   }
+ * }
+ * ```
+ *
+ * It is also legal to call `inject` from a provider's factory:
+ *
+ * ```typescript
+ * providers: [
+ *   {provide: Car, useFactory: () => {
+ *     // OK: a class factory
+ *     const engine = inject(Engine);
+ *     return new Car(engine);
+ *   }}
+ * ]
+ * ```
+ *
+ * Calls to the `inject()` function outside of the class creation context will result in error. Most
+ * notably, calls to `inject()` are disallowed after a class instance was created, in methods
+ * (including lifecycle hooks):
+ *
+ * ```typescript
+ * @Component({ ... })
+ * export class CarComponent {
+ *   ngOnInit() {
+ *     // ERROR: too late, the component instance was already created
+ *     const engine = inject(Engine);
+ *     engine.start();
+ *   }
+ * }
+ * ```
  *
  * @publicApi
  */
-const inject = ɵɵinject;
+function inject(token, flags = InjectFlags.Default) {
+    return ɵɵinject(token, flags);
+}
 function injectArgs(types) {
     const args = [];
     for (let i = 0; i < types.length; i++) {
@@ -11369,20 +11411,54 @@ function createTNodeAtIndex(tView, index, type, name, attrs) {
     return tNode;
 }
 /**
- * Checks if the current component is declared inside of a standalone component template.
+ * 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 isHostComponentStandalone(lView) {
+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, fall back to the non-standalone scenario.
+    // Unable to obtain a context.
     if (!context)
-        return false;
-    const componentDef = getComponentDef(context.constructor);
+        return null;
+    return context.constructor ? getComponentDef(context.constructor) : null;
+}
+/**
+ * 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?.standalone);
 }
+/**
+ * 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) {
+    !ngDevMode && throwError('Must never be called in production mode');
+    const hostComponentDef = getDeclarationComponentDef(lView);
+    const componentClassName = hostComponentDef?.type?.name;
+    return componentClassName ? ` (used in the '${componentClassName}' component template)` : '';
+}
 /**
  * When elements are created dynamically after a view blueprint is created (e.g. through
  * i18nApply()), we need to adjust the blueprint for future
@@ -12051,7 +12127,7 @@ function elementPropertyInternal(tView, tNode, lView, propName, value, renderer,
             validateAgainstEventProperties(propName);
             if (!validateProperty(element, tNode.value, propName, tView.schemas)) {
                 // Return here since we only log warnings for unknown properties.
-                handleUnknownPropertyError(propName, tNode);
+                handleUnknownPropertyError(propName, tNode, lView);
                 return;
             }
             ngDevMode.rendererSetProperty++;
@@ -12071,7 +12147,7 @@ function elementPropertyInternal(tView, tNode, lView, propName, value, renderer,
         // If the node is a container and the property didn't
         // match any of the inputs or schemas we should throw.
         if (ngDevMode && !matchingSchemas(tView.schemas, tNode.value)) {
-            handleUnknownPropertyError(propName, tNode);
+            handleUnknownPropertyError(propName, tNode, lView);
         }
     }
 }
@@ -12172,12 +12248,20 @@ function matchingSchemas(schemas, tagName) {
     }
     return false;
 }
+/**
+ * The set of known control flow directives.
+ * We use this set to produce a more precises error message with a note
+ * that the `CommonModule` should also be included.
+ */
+const KNOWN_CONTROL_FLOW_DIRECTIVES = new Set(['ngIf', 'ngFor', 'ngSwitch', 'ngSwitchCase', 'ngSwitchDefault']);
 /**
  * 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 node on which we encountered the property.
+ * @param tNode A `TNode` that represents a current component that is being rendered.
+ * @param lView An `LView` that represents a current component that is being rendered.
  */
-function handleUnknownPropertyError(propName, tNode) {
+function handleUnknownPropertyError(propName, tNode, lView) {
     let tagName = tNode.value;
     // Special-case a situation when a structural directive is applied to
     // an `<ng-template>` element, for example: `<ng-template *ngIf="true">`.
@@ -12188,7 +12272,36 @@ function handleUnknownPropertyError(propName, tNode) {
     if (!tagName && tNode.type === 4 /* TNodeType.Container */) {
         tagName = 'ng-template';
     }
-    const message = `Can't bind to '${propName}' since it isn't a known property of '${tagName}'.`;
+    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 `CommonModule` is not imported.
+        message += `\nIf the '${propName}' is an Angular control flow directive, ` +
+            `please make sure that the 'CommonModule' is ${importLocation}.`;
+    }
+    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.`;
+        }
+    }
     if (shouldThrowErrorOnUnknownProperty) {
         throw new RuntimeError(303 /* RuntimeErrorCode.UNKNOWN_BINDING */, message);
     }
@@ -14974,8 +15087,7 @@ function elementStartFirstCreatePass(index, tView, lView, native, name, attrsInd
     const tNode = getOrCreateTNode(tView, index, 2 /* TNodeType.Element */, name, attrs);
     const hasDirectives = resolveDirectives(tView, lView, tNode, getConstant(tViewConsts, localRefsIndex));
     if (ngDevMode) {
-        const hostIsStandalone = isHostComponentStandalone(lView);
-        validateElementIsKnown(native, tNode.value, tView.schemas, hasDirectives, hostIsStandalone);
+        validateElementIsKnown(native, lView, tNode.value, tView.schemas, hasDirectives);
     }
     if (tNode.attrs !== null) {
         computeStaticStyling(tNode, tNode.attrs, false);
@@ -15113,12 +15225,12 @@ function ɵɵelement(index, name, attrsIndex, localRefsIndex) {
  * - the element is allowed by one of the schemas
  *
  * @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
- * @param hostIsStandalone Boolean indicating whether the host is a standalone component
  */
-function validateElementIsKnown(element, tagName, schemas, hasDirectives, hostIsStandalone) {
+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
@@ -15138,10 +15250,12 @@ function validateElementIsKnown(element, tagName, schemas, hasDirectives, hostIs
             (typeof customElements !== 'undefined' && tagName.indexOf('-') > -1 &&
                 !customElements.get(tagName));
         if (isUnknown && !matchingSchemas(schemas, tagName)) {
-            const schemas = `'${hostIsStandalone ? '@Component' : '@NgModule'}.schemas'`;
-            let message = `'${tagName}' is not a known element:\n`;
-            message += `1. If '${tagName}' is an Angular component, then verify that it is ${hostIsStandalone ? 'included in the \'@Component.imports\' of this component' :
-                'a part of this module'}.\n`;
+            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.`;
@@ -21641,7 +21755,7 @@ class Version {
 /**
  * @publicApi
  */
-const VERSION = new Version('14.0.0-rc.2');
+const VERSION = new Version('14.0.0-rc.3');
 
 /**
  * @license