fix(@schematics/angular): add additional checks for application builder usage

The Angular schematics have been updated to perform additional checks for
both the `@angular-devkit/build-angular:application` and `@angular/build:application`
builders. This ensures that the schematics generate the appropriate output for
each of these build systems in addition to the Webpack-based `browser` builder.

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

@@ -169,4 +169,44 @@ describe('PWA Schematic', () => {
       expect(swFlag).toBeTrue();
     });
   });
+
+  describe('@angular-devkit/build-angular:application builder', () => {
+    beforeEach(() => {
+      const config = JSON.parse(appTree.readContent('/angular.json'));
+      const build = config.projects.bar.architect.build;
+
+      build.builder = '@angular-devkit/build-angular:application';
+
+      appTree.overwrite('/angular.json', JSON.stringify(config, undefined, 2));
+    });
+
+    it('should run the service worker schematic', async () => {
+      const tree = await schematicRunner.runSchematic('ng-add', defaultOptions, appTree);
+      const configText = tree.readContent('/angular.json');
+      const config = JSON.parse(configText);
+      const swFlag = config.projects.bar.architect.build.configurations.production.serviceWorker;
+
+      expect(swFlag).toBe('projects/bar/ngsw-config.json');
+    });
+  });
+
+  describe('@angular/build:application builder', () => {
+    beforeEach(() => {
+      const config = JSON.parse(appTree.readContent('/angular.json'));
+      const build = config.projects.bar.architect.build;
+
+      build.builder = '@angular/build:application';
+
+      appTree.overwrite('/angular.json', JSON.stringify(config, undefined, 2));
+    });
+
+    it('should run the service worker schematic', async () => {
+      const tree = await schematicRunner.runSchematic('ng-add', defaultOptions, appTree);
+      const configText = tree.readContent('/angular.json');
+      const config = JSON.parse(configText);
+      const swFlag = config.projects.bar.architect.build.configurations.production.serviceWorker;
+
+      expect(swFlag).toBe('projects/bar/ngsw-config.json');
+    });
+  });
 });

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('karma-coverage'),<% if (needDevkitPlugin) { %>
-      require('@angular-devkit/build-angular/plugins/karma')
+      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 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'`);
+    });
+
+    it('should not include devkit karma plugin with angular/build:karma is used', async () => {
+      applicationTree.overwrite(
+        'angular.json',
+        applicationTree
+          .readText('angular.json')
+          .replace('@angular-devkit/build-angular:karma', '@angular/build:karma'),
+      );
+      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 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/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',
 }