feat(@schematics/angular): allow application migration to use new bui…

…ld package in projects where possible

When using the optional application build system migration, the newly
introduced `@angular/build` package which contains only the new build
system and no Webpack-related dependencies will be directly used when
possible. The migration will check for usage of any other builders from
the `@angular-devkit/build-angular` package. if none are present in the
`angular.json` file (excluding `dev-server` and `extract-i18n`), the
`@angular/build` package will be added as a dependency and used in the
`angular.json` file. The `@angular-devkit/build-angular` package will
then be removed as a dependency. Project usage of karma and/or protractor
will be the most common reasons this part of the migration will not be
performed.

packages/schematics/angular/migrations/use-application-builder/migration.ts

@@ -16,8 +16,21 @@ import {
   externalSchematic,
 } from '@angular-devkit/schematics';
 import { basename, dirname, extname, join } from 'node:path/posix';
+import { removePackageJsonDependency } from '../../utility/dependencies';
+import {
+  DependencyType,
+  ExistingBehavior,
+  InstallBehavior,
+  addDependency,
+} from '../../utility/dependency';
 import { JSONFile } from '../../utility/json-file';
-import { TargetDefinition, allTargetOptions, updateWorkspace } from '../../utility/workspace';
+import { latestVersions } from '../../utility/latest-versions';
+import {
+  TargetDefinition,
+  allTargetOptions,
+  allWorkspaceTargets,
+  updateWorkspace,
+} from '../../utility/workspace';
 import { Builders, ProjectType } from '../../utility/workspace-models';
 import { findImports } from './css-import-lexer';
 
@@ -194,6 +207,51 @@ function updateProjects(tree: Tree, context: SchematicContext) {
       updateStyleImports(tree, projectSourceRoot, buildTarget);
     }
 
+    // Check for @angular-devkit/build-angular Webpack usage
+    let hasAngularDevkitUsage = false;
+    for (const [, target] of allWorkspaceTargets(workspace)) {
+      switch (target.builder) {
+        case Builders.Application:
+        case Builders.DevServer:
+        case Builders.ExtractI18n:
+          // Ignore application, dev server, and i18n extraction for devkit usage check.
+          // Both will be replaced if no other usage is found.
+          continue;
+      }
+
+      if (target.builder.startsWith('@angular-devkit/build-angular:')) {
+        hasAngularDevkitUsage = true;
+        break;
+      }
+    }
+
+    // Use @angular/build directly if there is no devkit package usage
+    if (!hasAngularDevkitUsage) {
+      for (const [, target] of allWorkspaceTargets(workspace)) {
+        switch (target.builder) {
+          case Builders.Application:
+            target.builder = '@angular/build:application';
+            break;
+          case Builders.DevServer:
+            target.builder = '@angular/build:dev-server';
+            break;
+          case Builders.ExtractI18n:
+            target.builder = '@angular/build:extract-i18n';
+            break;
+        }
+      }
+
+      // Add direct @angular/build dependencies and remove @angular-devkit/build-angular
+      rules.push(
+        addDependency('@angular/build', latestVersions.DevkitBuildAngular, {
+          type: DependencyType.Dev,
+          install: InstallBehavior.Always,
+          existing: ExistingBehavior.Replace,
+        }),
+      );
+      removePackageJsonDependency(tree, '@angular-devkit/build-angular');
+    }
+
     return chain(rules);
   });
 }