feat(@schematics/angular): directly use @angular/build in new projects

The `@angular/build` package is now used directly within all newly created
projects and replaces the previous usage of the `@angular-devkit/build-angular`
package. This has the advantage of removing the need to install all of the
Webpack related transitive dependencies contained within `@angular-devkit/build-angular`
that are used to support the `browser` builder. This results in a significant
reduction in both total dependency count and disk install size for new projects.
New projects that would prefer to use the Webpack-based `browser` builder can still
install the `@angular-devkit/build-angular` package within the workspace.

The `@angular/build@19.2.0-next.2` package currently has a total unpacked size of ~115 MB.
The `@angular-devkit/build-angular@19.2.0-next.2` package currently has a total unpacked size of ~291 MB.

Author: clydin

packages/angular/build/src/builders/extract-i18n/application-extraction.ts

@@ -46,6 +46,9 @@ export async function extractMessages(
   buildOptions.index = false;
   buildOptions.serviceWorker = false;
   buildOptions.outputMode = OutputMode.Static;
+  buildOptions.appShell = undefined;
+  buildOptions.ssr = undefined;
+  buildOptions.prerender = undefined;
   buildOptions.server = undefined;
 
   // Build the application with the build options

packages/angular/pwa/pwa/index.ts

@@ -96,10 +96,14 @@ export default function (options: PwaOptions): Rule {
     for (const target of project.targets.values()) {
       if (
         target.builder === '@angular-devkit/build-angular:browser' ||
-        target.builder === '@angular-devkit/build-angular:application'
+        target.builder === '@angular-devkit/build-angular:application' ||
+        target.builder === '@angular/build:application'
       ) {
         buildTargets.push(target);
-      } else if (target.builder === '@angular-devkit/build-angular:karma') {
+      } else if (
+        target.builder === '@angular-devkit/build-angular:karma' ||
+        target.builder === '@angular/build:karma'
+      ) {
         testTargets.push(target);
       }
     }

packages/schematics/angular/application/index.ts

@@ -120,8 +120,8 @@ function addDependenciesToPackageJson(options: ApplicationOptions) {
       },
       {
         type: NodeDependencyType.Dev,
-        name: '@angular-devkit/build-angular',
-        version: latestVersions.DevkitBuildAngular,
+        name: '@angular/build',
+        version: latestVersions.AngularBuild,
       },
       {
         type: NodeDependencyType.Dev,
@@ -234,7 +234,7 @@ function addAppToWorkspaceFile(
     schematics,
     targets: {
       build: {
-        builder: Builders.Application,
+        builder: Builders.BuildApplication,
         defaultConfiguration: 'production',
         options: {
           outputPath: `dist/${folderName}`,
@@ -260,7 +260,7 @@ function addAppToWorkspaceFile(
         },
       },
       serve: {
-        builder: Builders.DevServer,
+        builder: Builders.BuildDevServer,
         defaultConfiguration: 'development',
         options: {},
         configurations: {
@@ -273,12 +273,12 @@ function addAppToWorkspaceFile(
         },
       },
       'extract-i18n': {
-        builder: Builders.ExtractI18n,
+        builder: Builders.BuildExtractI18n,
       },
       test: options.minimal
         ? undefined
         : {
-            builder: Builders.Karma,
+            builder: Builders.BuildKarma,
             options: {
               polyfills: options.experimentalZoneless ? [] : ['zone.js', 'zone.js/testing'],
               tsConfig: `${projectRoot}tsconfig.spec.json`,

packages/schematics/angular/application/index_spec.ts

@@ -205,13 +205,11 @@ describe('Application Schematic', () => {
   });
 
   describe(`update package.json`, () => {
-    it(`should add build-angular to devDependencies`, async () => {
+    it(`should add @angular/build to devDependencies`, async () => {
       const tree = await schematicRunner.runSchematic('application', defaultOptions, workspaceTree);
 
       const packageJson = JSON.parse(tree.readContent('package.json'));
-      expect(packageJson.devDependencies['@angular-devkit/build-angular']).toEqual(
-        latestVersions.DevkitBuildAngular,
-      );
+      expect(packageJson.devDependencies['@angular/build']).toEqual(latestVersions.AngularBuild);
     });
 
     it('should use the latest known versions in package.json', async () => {

packages/schematics/angular/config/files/karma.conf.js.template

@@ -4,13 +4,13 @@
 module.exports = function (config) {
   config.set({
     basePath: '',
-    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    frameworks: ['jasmine'<% if (needDevkitPlugin) { %>, '@angular-devkit/build-angular'<% } %>],
     plugins: [
       require('karma-jasmine'),
       require('karma-chrome-launcher'),
       require('karma-jasmine-html-reporter'),
-      require('karma-coverage'),
-      require('@angular-devkit/build-angular/plugins/karma')
+      require('karma-coverage'),<% if (needDevkitPlugin) { %>
+      require('@angular-devkit/build-angular/plugins/karma')<% } %>
     ],
     client: {
       jasmine: {

packages/schematics/angular/config/index.ts

@@ -66,9 +66,13 @@ function addKarmaConfig(options: ConfigOptions): Rule {
       );
     }
 
-    if (testTarget.builder !== AngularBuilder.Karma) {
+    if (
+      testTarget.builder !== AngularBuilder.Karma &&
+      testTarget.builder !== AngularBuilder.BuildKarma
+    ) {
       throw new SchematicsException(
-        `Cannot add a karma configuration as builder for "test" target in project does not use "${AngularBuilder.Karma}".`,
+        `Cannot add a karma configuration as builder for "test" target in project does not` +
+          ` use "${AngularBuilder.Karma}" or "${AngularBuilder.BuildKarma}".`,
       );
     }
 
@@ -87,6 +91,7 @@ function addKarmaConfig(options: ConfigOptions): Rule {
         applyTemplates({
           relativePathToWorkspaceRoot: relativePathToWorkspaceRoot(project.root),
           folderName,
+          needDevkitPlugin: testTarget.builder === AngularBuilder.Karma,
         }),
         move(project.root),
       ]),

packages/schematics/angular/config/index_spec.ts

@@ -58,6 +58,24 @@ describe('Config Schematic', () => {
       expect(tree.exists('projects/foo/karma.conf.js')).toBeTrue();
     });
 
+    it('should not include devkit karma plugin by default', async () => {
+      const tree = await runConfigSchematic(ConfigType.Karma);
+      const karmaConf = tree.readText('projects/foo/karma.conf.js');
+      expect(karmaConf).not.toContain(`'@angular-devkit/build-angular'`);
+    });
+
+    it('should include devkit karma plugin with angular-devkit/build-angular: karma is used', async () => {
+      applicationTree.overwrite(
+        'angular.json',
+        applicationTree
+          .readText('angular.json')
+          .replace('@angular/build:karma', '@angular-devkit/build-angular:karma'),
+      );
+      const tree = await runConfigSchematic(ConfigType.Karma);
+      const karmaConf = tree.readText('projects/foo/karma.conf.js');
+      expect(karmaConf).toContain(`'@angular-devkit/build-angular'`);
+    });
+
     it('should set the right coverage folder', async () => {
       const tree = await runConfigSchematic(ConfigType.Karma);
       const karmaConf = tree.readText('projects/foo/karma.conf.js');

packages/schematics/angular/environments/index.ts

@@ -75,7 +75,8 @@ function* generateConfigurationEnvironments(
   if (
     buildTarget.builder !== AngularBuilder.Browser &&
     buildTarget.builder !== AngularBuilder.BrowserEsbuild &&
-    buildTarget.builder !== AngularBuilder.Application
+    buildTarget.builder !== AngularBuilder.Application &&
+    buildTarget.builder !== AngularBuilder.BuildApplication
   ) {
     yield log(
       'warn',

packages/schematics/angular/library/index.ts

@@ -53,8 +53,8 @@ function addDependenciesToPackageJson() {
       },
       {
         type: NodeDependencyType.Dev,
-        name: '@angular-devkit/build-angular',
-        version: latestVersions.DevkitBuildAngular,
+        name: '@angular/build',
+        version: latestVersions.AngularBuild,
       },
       {
         type: NodeDependencyType.Dev,
@@ -91,7 +91,7 @@ function addLibToWorkspaceFile(
       prefix: options.prefix,
       targets: {
         build: {
-          builder: Builders.NgPackagr,
+          builder: Builders.BuildNgPackagr,
           defaultConfiguration: 'production',
           options: {
             project: `${projectRoot}/ng-package.json`,
@@ -106,7 +106,7 @@ function addLibToWorkspaceFile(
           },
         },
         test: {
-          builder: Builders.Karma,
+          builder: Builders.BuildKarma,
           options: {
             tsConfig: `${projectRoot}/tsconfig.spec.json`,
             polyfills: ['zone.js', 'zone.js/testing'],

packages/schematics/angular/library/index_spec.ts

@@ -388,9 +388,14 @@ describe('Library Schematic', () => {
     const tree = await schematicRunner.runSchematic('library', defaultOptions, workspaceTree);
 
     const workspace = JSON.parse(tree.readContent('/angular.json'));
-    expect(workspace.projects.foo.architect.build.builder).toBe(
-      '@angular-devkit/build-angular:ng-packagr',
-    );
+    expect(workspace.projects.foo.architect.build.builder).toBe('@angular/build:ng-packagr');
+  });
+
+  it(`should add 'karma' test builder`, async () => {
+    const tree = await schematicRunner.runSchematic('library', defaultOptions, workspaceTree);
+
+    const workspace = JSON.parse(tree.readContent('/angular.json'));
+    expect(workspace.projects.foo.architect.test.builder).toBe('@angular/build:karma');
   });
 
   describe('standalone=false', () => {

packages/schematics/angular/service-worker/index.ts

@@ -122,7 +122,10 @@ export default function (options: ServiceWorkerOptions): Rule {
     let browserEntryPoint: string | undefined;
     const ngswConfigPath = join(normalize(project.root), 'ngsw-config.json');
 
-    if (buildTarget.builder === Builders.Application) {
+    if (
+      buildTarget.builder === Builders.Application ||
+      buildTarget.builder === Builders.BuildApplication
+    ) {
       browserEntryPoint = buildOptions.browser as string;
       const productionConf = buildTarget.configurations?.production;
       if (productionConf) {

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

@@ -26,11 +26,14 @@ export enum Builders {
   Prerender = '@angular-devkit/build-angular:prerender',
   BrowserEsbuild = '@angular-devkit/build-angular:browser-esbuild',
   Karma = '@angular-devkit/build-angular:karma',
+  BuildKarma = '@angular/build:karma',
   TsLint = '@angular-devkit/build-angular:tslint',
   NgPackagr = '@angular-devkit/build-angular:ng-packagr',
   BuildNgPackagr = '@angular/build:ng-packagr',
   DevServer = '@angular-devkit/build-angular:dev-server',
+  BuildDevServer = '@angular/build:dev-server',
   ExtractI18n = '@angular-devkit/build-angular:extract-i18n',
+  BuildExtractI18n = '@angular/build:extract-i18n',
   Protractor = '@angular-devkit/build-angular:private-protractor',
   BuildApplication = '@angular/build:application',
 }

tests/legacy-cli/e2e/initialize/500-create-project.ts

@@ -43,12 +43,29 @@ export default async function () {
           namedChunks: true,
           buildOptimizer: false,
         };
+
+        const serve = json['projects']['test-project']['architect']['serve'];
+        serve.builder = '@angular-devkit/build-angular:dev-server';
+
+        const extract = json['projects']['test-project']['architect']['extract-i18n'];
+        if (extract) {
+          extract.builder = '@angular-devkit/build-angular:extract-i18n';
+        }
+
+        const test = json['projects']['test-project']['architect']['test'];
+        test.builder = '@angular-devkit/build-angular:karma';
       });
       await updateJsonFile('tsconfig.json', (tsconfig) => {
         delete tsconfig.compilerOptions.esModuleInterop;
         tsconfig.compilerOptions.allowSyntheticDefaultImports = true;
       });
     }
+
+    // Always need `@angular-devkit/build-angular` due to the use of protractor
+    await updateJsonFile('package.json', (packageJson) => {
+      packageJson.devDependencies['@angular-devkit/build-angular'] =
+        packageJson.devDependencies['@angular/build'];
+    });
   }
 
   await prepareProjectForE2e('test-project');

tests/legacy-cli/e2e/tests/build/jit-ngmodule.ts

@@ -39,6 +39,9 @@ export default async function () {
     };
 
     build.options.aot = false;
+
+    const serve = json['projects']['test-project-two']['architect']['serve'];
+    serve.builder = '@angular-devkit/build-angular:dev-server';
   });
   // Test it works
   await ng('e2e', 'test-project-two', '--configuration=production');

tests/legacy-cli/e2e/tests/build/rebuild-dot-dirname.ts

@@ -41,6 +41,9 @@ export default async function () {
           namedChunks: true,
           buildOptimizer: false,
         };
+
+        const serve = json['projects']['subdirectory-test-project']['architect']['serve'];
+        serve.builder = '@angular-devkit/build-angular:dev-server';
       });
     }
 

tests/legacy-cli/e2e/tests/commands/add/version-specifier.ts

@@ -15,7 +15,7 @@ export default async function () {
     await appendFile('.npmrc', '\nforce=true\n');
   }
 
-  const tag = (await isPrereleaseCli()) ? '@next' : '';
+  const tag = isPrereleaseCli() ? '@next' : '';
 
   await ng('add', `@angular/localize${tag}`, '--skip-confirmation');
   await expectFileToMatch('package.json', /@angular\/localize/);
@@ -30,13 +30,12 @@ export default async function () {
     throw new Error('Installation should not have been skipped');
   }
 
-  // v12.2.0 has a package.json engine field that supports Node.js v16+
-  const output3 = await ng('add', '@angular/localize@12.2.0', '--skip-confirmation');
+  const output3 = await ng('add', '@angular/localize@19.1.0', '--skip-confirmation');
   if (output3.stdout.includes('Skipping installation: Package already installed')) {
     throw new Error('Installation should not have been skipped');
   }
 
-  const output4 = await ng('add', '@angular/localize@12', '--skip-confirmation');
+  const output4 = await ng('add', '@angular/localize@19', '--skip-confirmation');
   if (!output4.stdout.includes('Skipping installation: Package already installed')) {
     throw new Error('Installation was not skipped');
   }

tests/legacy-cli/e2e/tests/test/test-environment.ts

@@ -33,8 +33,8 @@ export default function () {
             production: {
               fileReplacements: [
                 {
-                  src: 'src/environment.ts',
-                  replaceWith: 'src/environment.prod.ts',
+                  replace: 'src/environment.ts',
+                  with: 'src/environment.prod.ts',
                 },
               ],
             },

tests/legacy-cli/e2e/utils/project.ts

@@ -192,9 +192,6 @@ export async function useCIChrome(projectName: string, projectDir = ''): Promise
     const project = workspaceJson.projects[projectName];
     const appTargets = project.targets || project.architect;
     appTargets.test.options.browsers = 'ChromeHeadlessNoSandbox';
-    appTargets.test.options.builderMode = getGlobalVariable('argv')['esbuild']
-      ? 'application'
-      : 'browser';
   });
 }