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/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/index_spec.ts

@@ -58,22 +58,22 @@ describe('Config Schematic', () => {
       expect(tree.exists('projects/foo/karma.conf.js')).toBeTrue();
     });
 
-    it('should include devkit karma plugin by default', async () => {
+    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).toContain(`'@angular-devkit/build-angular'`);
+      expect(karmaConf).not.toContain(`'@angular-devkit/build-angular'`);
     });
 
-    it('should not include devkit karma plugin with angular/build:karma is used', async () => {
+    it('should include devkit karma plugin when angular-devkit/build-angular:karma is used', async () => {
       applicationTree.overwrite(
         'angular.json',
         applicationTree
           .readText('angular.json')
-          .replace('@angular-devkit/build-angular:karma', '@angular/build:karma'),
+          .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).not.toContain(`'@angular-devkit/build-angular'`);
+      expect(karmaConf).toContain(`'@angular-devkit/build-angular'`);
     });
 
     it('should set the right coverage folder', async () => {

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

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

@@ -60,6 +60,12 @@ export default async function () {
         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/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';
   });
 }