refactor(@angular-devkit/build-angular): remove deprecated browserTarget

The `browserTarget` option has been removed as part of the refactoring process. This option was part of a private API and is no longer used. Projects relying on this option should migrate to using the `buildTarget` option.

BREAKING CHANGE: The `browserTarget` option has been removed from the DevServer and ExtractI18n builders. `buildTarget` is to be used instead.

Author: alan-agius4

goldens/public-api/angular_devkit/build_angular/index.api.md

@@ -116,9 +116,7 @@ export enum CrossOrigin {
 // @public
 export interface DevServerBuilderOptions {
     allowedHosts?: string[];
-    // @deprecated
-    browserTarget?: string;
-    buildTarget?: string;
+    buildTarget: string;
     disableHostCheck?: boolean;
     forceEsbuild?: boolean;
     headers?: {
@@ -192,8 +190,6 @@ export type ExecutionTransformer<T> = (input: T) => T | Promise<T>;
 
 // @public
 export interface ExtractI18nBuilderOptions {
-    // @deprecated
-    browserTarget?: string;
     buildTarget?: string;
     format?: Format;
     outFile?: string;

modules/testing/builder/projects/hello-world-app/angular.json

@@ -102,19 +102,19 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "app:build",
+            "buildTarget": "app:build",
             "watch": false
           },
           "configurations": {
             "production": {
-              "browserTarget": "app:build:production"
+              "buildTarget": "app:build:production"
             }
           }
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "app:build",
+            "buildTarget": "app:build",
             "progress": false,
             "outputPath": "src"
           }

packages/angular/build/src/builders/dev-server/tests/behavior/build-inline-critical-css_spec.ts

@@ -32,7 +32,7 @@ describeServeBuilder(executeDevServer, DEV_SERVER_BUILDER_INFO, (harness, setupT
       await harness.writeFile('src/main.ts', '');
     });
 
-    it('inlines critical css when enabled in the "browserTarget" options', async () => {
+    it('inlines critical css when enabled in the "buildTarget" options', async () => {
       harness.useTarget('serve', {
         ...BASE_OPTIONS,
       });

packages/angular_devkit/build_angular/src/builders/dev-server/options.ts

@@ -37,7 +37,7 @@ export async function normalizeOptions(
   const cacheOptions = normalizeCacheOptions(projectMetadata, workspaceRoot);
 
   // Target specifier defaults to the current project's build target using a development configuration
-  const buildTargetSpecifier = options.buildTarget ?? options.browserTarget ?? `::development`;
+  const buildTargetSpecifier = options.buildTarget ?? `::development`;
   const buildTarget = targetFromTargetString(buildTargetSpecifier, projectName, 'build');
 
   // Get the application builder options.

packages/angular_devkit/build_angular/src/builders/dev-server/schema.json

@@ -4,12 +4,6 @@
   "description": "Dev Server target options for Build Facade.",
   "type": "object",
   "properties": {
-    "browserTarget": {
-      "type": "string",
-      "description": "A browser builder target to serve in the format of `project:target[:configuration]`. You can also pass in more than one configuration name as a comma-separated list. Example: `project:target:production,staging`.",
-      "pattern": "^[^:\\s]+:[^:\\s]+(:[^\\s]+)?$",
-      "x-deprecated": "Use 'buildTarget' instead."
-    },
     "buildTarget": {
       "type": "string",
       "description": "A build builder target to serve in the format of `project:target[:configuration]`. You can also pass in more than one configuration name as a comma-separated list. Example: `project:target:production,staging`.",
@@ -138,5 +132,5 @@
     }
   },
   "additionalProperties": false,
-  "anyOf": [{ "required": ["buildTarget"] }, { "required": ["browserTarget"] }]
+  "required": ["buildTarget"]
 }

packages/angular_devkit/build_angular/src/builders/dev-server/tests/behavior/build-inline-critical-css_spec.ts

@@ -32,7 +32,7 @@ describeServeBuilder(executeDevServer, DEV_SERVER_BUILDER_INFO, (harness, setupT
       await harness.writeFile('src/main.ts', '');
     });
 
-    it('inlines critical css when enabled in the "browserTarget" options', async () => {
+    it('inlines critical css when enabled in the "buildTarget" options', async () => {
       harness.useTarget('serve', {
         ...BASE_OPTIONS,
       });

packages/angular_devkit/build_angular/src/builders/dev-server/tests/behavior/serve-live-reload-proxies_spec.ts

@@ -15,13 +15,7 @@ import puppeteer, { Browser, Page } from 'puppeteer';
 import { count, debounceTime, finalize, switchMap, take, timeout } from 'rxjs';
 import { executeDevServer } from '../../index';
 import { describeServeBuilder } from '../jasmine-helpers';
-import {
-  BASE_OPTIONS,
-  BUILD_TIMEOUT,
-  DEV_SERVER_BUILDER_INFO,
-  describeBuilder,
-  setupBrowserTarget,
-} from '../setup';
+import { BASE_OPTIONS, BUILD_TIMEOUT, DEV_SERVER_BUILDER_INFO } from '../setup';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 declare const document: any;

packages/angular_devkit/build_angular/src/builders/extract-i18n/options.ts

@@ -34,7 +34,7 @@ export async function normalizeOptions(
   const projectRoot = path.join(workspaceRoot, (projectMetadata.root as string | undefined) ?? '');
 
   // Target specifier defaults to the current project's build target with no specified configuration
-  const buildTargetSpecifier = options.buildTarget ?? options.browserTarget ?? ':';
+  const buildTargetSpecifier = options.buildTarget ?? ':';
   const buildTarget = targetFromTargetString(buildTargetSpecifier, projectName, 'build');
 
   const i18nOptions = createI18nOptions(projectMetadata);

packages/angular_devkit/build_angular/src/builders/extract-i18n/schema.json

@@ -4,12 +4,6 @@
   "description": "Extract i18n target options for Build Facade.",
   "type": "object",
   "properties": {
-    "browserTarget": {
-      "type": "string",
-      "description": "A browser builder target to extract i18n messages in the format of `project:target[:configuration]`. You can also pass in more than one configuration name as a comma-separated list. Example: `project:target:production,staging`.",
-      "pattern": "^[^:\\s]+:[^:\\s]+(:[^\\s]+)?$",
-      "x-deprecated": "Use 'buildTarget' instead."
-    },
     "buildTarget": {
       "type": "string",
       "description": "A builder target to extract i18n messages in the format of `project:target[:configuration]`. You can also pass in more than one configuration name as a comma-separated list. Example: `project:target:production,staging`.",

packages/schematics/angular/migrations/update-workspace-config/migration.ts

@@ -13,13 +13,26 @@ import { Builders, ProjectType } from '../../utility/workspace-models';
 /**
  * Main entry point for the migration rule.
  *
- * This migration performs the following tasks:
- * - Loops through all application projects in the workspace.
- * - Identifies the build target for each application.
- * - If the `localize` option is enabled but the polyfill `@angular/localize/init` is not present,
- *   it adds the polyfill to the `polyfills` option of the build target.
+ * This schematic migration performs updates to the Angular workspace configuration
+ * to ensure that application projects are properly configured with polyfills
+ * required for internationalization (`localize`).
+ *
+ * It specifically targets application projects that use either the `application`
+ * or `browser-esbuild` builders.
+ *
+ * The migration process involves:
+ *
+ * 1. Iterating over all projects in the workspace.
+ * 2. Checking each project to determine if it is an application-type project.
+ * 3. For each application project, examining the associated build targets.
+ * 4. If a build target's `localize` option is enabled but the polyfill
+ *    `@angular/localize/init` is missing from the `polyfills` array, the polyfill
+ *    is automatically added to ensure proper internationalization support.
+ *
+ * Additionally, this migration updates projects that use the `dev-server` or `extract-i18n`
+ * builders to ensure that deprecated `browserTarget` options are migrated to the
+ * newer `buildTarget` field.
  *
- * This migration is specifically for application projects that use either the `application` or `browser-esbuild` builders.
  */
 export default function (): Rule {
   return updateWorkspace((workspace) => {
@@ -28,32 +41,47 @@ export default function (): Rule {
         continue;
       }
 
-      const buildTarget = project.targets.get('build');
-      if (
-        !buildTarget ||
-        (buildTarget.builder !== Builders.BuildApplication &&
-          buildTarget.builder !== Builders.Application &&
-          buildTarget.builder !== Builders.BrowserEsbuild)
-      ) {
-        continue;
-      }
+      for (const target of project.targets.values()) {
+        if (target.builder === Builders.DevServer || target.builder === Builders.ExtractI18n) {
+          // Migrate `browserTarget` to `buildTarget`
 
-      const polyfills = buildTarget.options?.['polyfills'];
-      if (
-        Array.isArray(polyfills) &&
-        polyfills.some(
-          (polyfill) => typeof polyfill === 'string' && polyfill.startsWith('@angular/localize'),
-        )
-      ) {
-        // Skip the polyfill is already added
-        continue;
-      }
+          for (const [, options] of allTargetOptions(target, false)) {
+            if (options['browserTarget'] && !options['buildTarget']) {
+              options['buildTarget'] = options['browserTarget'];
+            }
+
+            delete options['browserTarget'];
+          }
+        }
+
+        // Check if the target uses application-related builders
+        if (
+          target.builder !== Builders.BuildApplication &&
+          target.builder !== Builders.Application &&
+          target.builder !== Builders.BrowserEsbuild
+        ) {
+          continue;
+        }
+
+        // Check if polyfills include '@angular/localize/init'
+        const polyfills = target.options?.['polyfills'];
+        if (
+          Array.isArray(polyfills) &&
+          polyfills.some(
+            (polyfill) => typeof polyfill === 'string' && polyfill.startsWith('@angular/localize'),
+          )
+        ) {
+          // Skip if the polyfill is already present
+          continue;
+        }
 
-      for (const [, options] of allTargetOptions(buildTarget, false)) {
-        if (options['localize']) {
-          buildTarget.options ??= {};
-          ((buildTarget.options['polyfills'] ??= []) as string[]).push('@angular/localize/init');
-          break;
+        // Add '@angular/localize/init' polyfill if localize option is enabled
+        for (const [, options] of allTargetOptions(target, false)) {
+          if (options['localize']) {
+            target.options ??= {};
+            ((target.options['polyfills'] ??= []) as string[]).push('@angular/localize/init');
+            break;
+          }
         }
       }
     }

packages/schematics/angular/utility/workspace-models.ts

@@ -74,14 +74,9 @@ export interface BrowserBuilderOptions extends BrowserBuilderBaseOptions {
 }
 
 export interface ServeBuilderOptions {
-  /**
-   * @deprecated not used since version 17.0.0. Use the property "buildTarget" instead.
-   */
-  browserTarget: string;
-
-  // TODO: make it required, when the deprecated property "browserTarget" is removed.
-  buildTarget?: string;
+  buildTarget: string;
 }
+
 export interface LibraryBuilderOptions {
   tsConfig: string;
   project: string;

tests/legacy-cli/e2e/tests/i18n/setup.ts

@@ -243,7 +243,7 @@ export async function setupI18nConfig() {
       }
 
       buildConfigs[lang] = { localize: [lang] };
-      serveConfigs[lang] = { browserTarget: `test-project:build:${lang}` };
+      serveConfigs[lang] = { buildTarget: `test-project:build:${lang}` };
       e2eConfigs[lang] = {
         specs: [`./src/app.${lang}.e2e-spec.ts`],
         devServerTarget: `test-project:serve:${lang}`,