fix(core): deprecate moduleId @Component property (#49496)

devversion · atscott · commit 316c91b1a47f · 2023-03-24T10:27:10.000-07:00
The `moduleId` directive field does not have any effect as of Ivy. In View Engine it was used for resolving template and styles relative to the component source location- but ultimately this is not needed as the Angular compiler knows the source file location at build time, and at runtime never even consulted `moduleId`. An XHR is always issue using the extact specified URL. For Angular CLI users, relative URLs in JIT are still possible because the CLI has a TS transform that will replace the references with actual Webpack imports. `moduleId` does not seem worth keeping in the future, as it's not used currently, and even if we would consider supporting relative JIT resource URLs through it, it would be deeply coupled to CommonJS `module.id`. DEPRECATED: The `@Directive`/`@Component` `moduleId` property is now deprecated. It did not have any effect for multiple major versions and will be removed in v17. PR Close #49496
diff --git a/aio/content/guide/cheatsheet.md b/aio/content/guide/cheatsheet.md
@@ -64,7 +64,6 @@
 
 | Component configuration <br /> `@Component` extends `@Directive`, so the `@Directive` configuration applies to components as well                            | Details |
 |:---                                                                                                                                                          |:---     |
-| <code-example format="typescript" hideCopy language="typescript"> moduleId: module.id </code-example>                                                        | If set, the `templateUrl` and `styleUrl` are resolved relative to the component.        |
 | <code-example format="typescript" hideCopy language="typescript"> viewProviders: [MyService, { provide: &hellip; }] </code-example>                          | List of dependency injection providers scoped to this component's view.                 |
 | <code-example format="typescript" hideCopy language="typescript"> template: 'Hello {{name}}' &NewLine;templateUrl: 'my-component.html' </code-example>       | Inline template or external template URL of the component's view.                       |
 | <code-example format="typescript" hideCopy language="typescript"> styles: ['.primary {color: red}'] &NewLine;styleUrls: ['my-component.css'] </code-example> | List of inline CSS styles or external stylesheet URLs for styling the component's view. |
diff --git a/aio/content/guide/deprecations.md b/aio/content/guide/deprecations.md
@@ -109,6 +109,7 @@ v16 - v19
 | `@angular/common`                   | [`NgComponentOutlet.ngComponentOutletNgModuleFactory`](#common)                                            | v14           | v17         |
 | `@angular/common`                   | [`DatePipe` - `DATE_PIPE_DEFAULT_TIMEZONE`](api/common/DATE_PIPE_DEFAULT_TIMEZONE)                         | v15           | v17         |
 | `@angular/core`                     | NgModule and `'any'` options for [`providedIn`](#core)                                                     | v15           | v17         |
+| `@angular/core`                     | [`@Component.moduleId`](api/core/Component#moduleId) | v16 | v17 |
 | `@angular/router`                   | [`RouterLinkWithHref` directive](#router)                                                                  | v15           | v17         |
 | `@angular/router`                   | [Router writeable properties](#router-writable-properties)                                                 | v15.1         | v17         |
 | `@angular/router`                   | [Router CanLoad guards](#router-can-load)                                                 | v15.1         | v17         |
@@ -176,6 +177,8 @@ In the [API reference section](api) of this site, deprecated APIs are indicated
 | [`providedIn`](api/core/Injectable#providedIn) with NgModule | Prefer `'root'` providers, or use NgModule `providers` if scoping to an NgModule is necessary | v15 | none |
 | [`providedIn: 'any'`](api/core/Injectable#providedIn) | none | v15 | This option has confusing semantics and nearly zero usage. |
 | [`EnvironmentInjector.runInContext`](api/core/EnvironmentInjector#runInContext) | `runInInjectionContext`  | v16 | `runInInjectionContext` is a more flexible operation which supports element injectors as well |
+| [`@Component.moduleId`](api/core/Component#moduleId) | none | v16 |
+
 
 <a id="testing"></a>
 
diff --git a/goldens/public-api/core/index.md b/goldens/public-api/core/index.md
@@ -189,6 +189,7 @@ export interface Component extends Directive {
     encapsulation?: ViewEncapsulation;
     imports?: (Type<any> | ReadonlyArray<any>)[];
     interpolation?: [string, string];
+    // @deprecated
     moduleId?: string;
     preserveWhitespaces?: boolean;
     schemas?: SchemaMetadata[];
diff --git a/packages/core/src/metadata/directives.ts b/packages/core/src/metadata/directives.ts
@@ -543,6 +543,7 @@ export interface Component extends Directive {
    * SystemJS exposes the `__moduleName` variable within each module.
    * In CommonJS, this can  be set to `module.id`.
    *
+   * @deprecated This option does not have any effect. Will be removed in Angular v17.
    */
   moduleId?: string;
 

Original file line number	Diff line number	Diff line change
`@@ -543,6 +543,7 @@ export interface Component extends Directive {`
`543`	`543`	* SystemJS exposes the `__moduleName` variable within each module.
`544`	`544`	* In CommonJS, this can be set to `module.id`.
`545`	`545`	`*`
	`546`	`+ * @deprecated This option does not have any effect. Will be removed in Angular v17.`
`546`	`547`	`*/`
`547`	`548`	`moduleId?: string;`
`548`	`549`