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/[email protected]` package currently has a total unpacked size of ~115 MB.
The `@angular-devkit/[email protected]` 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

@@ -67,9 +67,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}".`,
       );
     }
 
@@ -88,6 +92,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

@@ -76,7 +76,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', () => {