feat(angular): add --bundler flag for applications (#17919)

docs/generated/packages/angular/generators/application.json

@@ -161,6 +161,12 @@
         "description": "Generate a Angular app with a minimal setup.",
         "type": "boolean",
         "default": false
+      },
+      "bundler": {
+        "description": "Bundler to use to build the application.",
+        "type": "string",
+        "enum": ["webpack", "esbuild"],
+        "default": "webpack"
       }
     },
     "additionalProperties": false,

e2e/angular-core/src/projects.test.ts

@@ -53,6 +53,11 @@ describe('Angular Projects', () => {
       `generate @nx/angular:app ${standaloneApp} --directory=myDir --standalone=true --no-interactive`
     );
 
+    const esbuildApp = uniq('esbuild-app');
+    runCLI(
+      `generate @nx/angular:app ${esbuildApp} --bundler=esbuild --directory=myDir --no-interactive`
+    );
+
     updateFile(
       `apps/${app1}/src/app/app.module.ts`,
       `
@@ -73,10 +78,11 @@ describe('Angular Projects', () => {
 
     // check build
     runCLI(
-      `run-many --target build --projects=${app1},my-dir-${standaloneApp} --parallel --prod --output-hashing none`
+      `run-many --target build --projects=${app1},my-dir-${standaloneApp},my-dir-${esbuildApp} --parallel --prod --output-hashing none`
     );
     checkFilesExist(`dist/apps/${app1}/main.js`);
     checkFilesExist(`dist/apps/my-dir/${standaloneApp}/main.js`);
+    checkFilesExist(`dist/apps/my-dir/${esbuildApp}/index.html`);
     // This is a loose requirement because there are a lot of
     // influences external from this project that affect this.
     const es2015BundleSize = getSize(tmpProjPath(`dist/apps/${app1}/main.js`));
@@ -87,7 +93,7 @@ describe('Angular Projects', () => {
 
     // check unit tests
     runCLI(
-      `run-many --target test --projects=${app1},my-dir-${standaloneApp},${lib1} --parallel`
+      `run-many --target test --projects=${app1},my-dir-${standaloneApp},my-dir-${esbuildApp},${lib1} --parallel`
     );
 
     // check e2e tests

packages/angular/src/generators/application/application.spec.ts

@@ -969,6 +969,27 @@ describe('app', () => {
         appTree.read('apps/plain/src/app/app.component.html', 'utf-8')
       ).toMatchSnapshot();
     });
+
+    it('should generate a correct build target for --bundler=esbuild', async () => {
+      await generateApp(appTree, 'ngesbuild', {
+        routing: true,
+        bundler: 'esbuild',
+      });
+
+      const project = readProjectConfiguration(appTree, 'ngesbuild');
+      expect(project.targets.build.executor).toEqual(
+        '@angular-devkit/build-angular:browser-esbuild'
+      );
+      expect(
+        project.targets.build.configurations.development.namedChunks
+      ).toBeUndefined();
+      expect(
+        project.targets.build.configurations.development.vendorChunks
+      ).toBeUndefined();
+      expect(
+        project.targets.build.configurations.production.budgets
+      ).toBeUndefined();
+    });
   });
 });
 

packages/angular/src/generators/application/lib/create-project.ts

@@ -6,6 +6,10 @@ import type { NormalizedSchema } from './normalized-schema';
 
 export function createProject(tree: Tree, options: NormalizedSchema) {
   const installedAngularInfo = getInstalledAngularVersionInfo(tree);
+  const buildExecutor =
+    options.bundler === 'webpack'
+      ? '@angular-devkit/build-angular:browser'
+      : '@angular-devkit/build-angular:browser-esbuild';
   const project: AngularProjectConfiguration = {
     name: options.name,
     projectType: 'application',
@@ -15,7 +19,7 @@ export function createProject(tree: Tree, options: NormalizedSchema) {
     tags: options.parsedTags,
     targets: {
       build: {
-        executor: '@angular-devkit/build-angular:browser',
+        executor: buildExecutor,
         outputs: ['{options.outputPath}'],
         options: {
           outputPath: `dist/${
@@ -37,7 +41,9 @@ export function createProject(tree: Tree, options: NormalizedSchema) {
         },
         configurations: {
           production: {
-            budgets: [
+            budgets:
+              options.bundler === 'webpack'
+                ? [
                     {
                       type: 'initial',
                       maximumWarning: '500kb',
@@ -48,7 +54,8 @@ export function createProject(tree: Tree, options: NormalizedSchema) {
                       maximumWarning: '2kb',
                       maximumError: '4kb',
                     },
-            ],
+                  ]
+                : undefined,
             fileReplacements:
               installedAngularInfo.major === 14
                 ? [
@@ -63,10 +70,10 @@ export function createProject(tree: Tree, options: NormalizedSchema) {
           development: {
             buildOptimizer: false,
             optimization: false,
-            vendorChunk: true,
+            vendorChunk: options.bundler === 'webpack' ? true : undefined,
             extractLicenses: false,
             sourceMap: true,
-            namedChunks: true,
+            namedChunks: options.bundler === 'webpack' ? true : undefined,
           },
         },
         defaultConfiguration: 'production',

packages/angular/src/generators/application/lib/normalize-options.ts

@@ -68,6 +68,7 @@ export function normalizeOptions(
     e2eTestRunner: E2eTestRunner.Cypress,
     linter: Linter.EsLint,
     strict: true,
+    bundler: options.bundler ?? 'webpack',
     ...options,
     prefix,
     name: appProjectName,

packages/angular/src/generators/application/schema.d.ts

@@ -27,4 +27,5 @@ export interface Schema {
   standalone?: boolean;
   rootProject?: boolean;
   minimal?: boolean;
+  bundler?: 'webpack' | 'esbuild';
 }

packages/angular/src/generators/application/schema.json

@@ -164,6 +164,12 @@
       "description": "Generate a Angular app with a minimal setup.",
       "type": "boolean",
       "default": false
+    },
+    "bundler": {
+      "description": "Bundler to use to build the application.",
+      "type": "string",
+      "enum": ["webpack", "esbuild"],
+      "default": "webpack"
     }
   },
   "additionalProperties": false,