feat(angular): add generator to convert targets to use the esbuild-ba…

…sed application executor (#21333)
nrwl · Jan 30, 2024 · 7a77b0d · 7a77b0d
1 parent c46c286
commit 7a77b0d
Show file tree

Hide file tree

Showing 17 changed files with 1,010 additions and 37 deletions.
diff --git a/docs/generated/manifests/menus.json b/docs/generated/manifests/menus.json
@@ -6789,6 +6789,14 @@
                 "isExternal": false,
                 "disableCollapsible": false
               },
+              {
+                "id": "convert-to-application-executor",
+                "path": "/nx-api/angular/generators/convert-to-application-executor",
+                "name": "convert-to-application-executor",
+                "children": [],
+                "isExternal": false,
+                "disableCollapsible": false
+              },
               {
                 "id": "directive",
                 "path": "/nx-api/angular/generators/directive",

diff --git a/docs/generated/manifests/nx-api.json b/docs/generated/manifests/nx-api.json
@@ -177,6 +177,15 @@
         "path": "/nx-api/angular/generators/component-test",
         "type": "generator"
       },
+      "/nx-api/angular/generators/convert-to-application-executor": {
+        "description": "Converts projects to use the `@nx/angular:application` executor or the `@angular-devkit/build-angular:application` builder. _Note: this is only supported in Angular versions >= 17.0.0_.",
+        "file": "generated/packages/angular/generators/convert-to-application-executor.json",
+        "hidden": false,
+        "name": "convert-to-application-executor",
+        "originalFilePath": "/packages/angular/src/generators/convert-to-application-executor/schema.json",
+        "path": "/nx-api/angular/generators/convert-to-application-executor",
+        "type": "generator"
+      },
       "/nx-api/angular/generators/directive": {
         "description": "Generate an Angular directive.",
         "file": "generated/packages/angular/generators/directive.json",

diff --git a/docs/generated/packages-metadata.json b/docs/generated/packages-metadata.json
@@ -172,6 +172,15 @@
         "path": "angular/generators/component-test",
         "type": "generator"
       },
+      {
+        "description": "Converts projects to use the `@nx/angular:application` executor or the `@angular-devkit/build-angular:application` builder. _Note: this is only supported in Angular versions >= 17.0.0_.",
+        "file": "generated/packages/angular/generators/convert-to-application-executor.json",
+        "hidden": false,
+        "name": "convert-to-application-executor",
+        "originalFilePath": "/packages/angular/src/generators/convert-to-application-executor/schema.json",
+        "path": "angular/generators/convert-to-application-executor",
+        "type": "generator"
+      },
       {
         "description": "Generate an Angular directive.",
         "file": "generated/packages/angular/generators/directive.json",

diff --git a/docs/generated/packages/angular/generators/convert-to-application-executor.json b/docs/generated/packages/angular/generators/convert-to-application-executor.json
@@ -0,0 +1,34 @@
+{
+  "name": "convert-to-application-executor",
+  "factory": "./src/generators/convert-to-application-executor/convert-to-application-executor",
+  "schema": {
+    "$schema": "http://json-schema.org/schema",
+    "$id": "NxAngularConvertToApplicationExecutorGenerator",
+    "cli": "nx",
+    "title": "Converts projects to use the `@nx/angular:application` executor or the `@angular-devkit/build-angular:application` builder. _Note: this is only supported in Angular versions >= 17.0.0_.",
+    "description": "Converts a project or all projects using one of the `@angular-devkit/build-angular:browser`, `@angular-devkit/build-angular:browser-esbuild`, `@nx/angular:browser` and `@nx/angular:browser-esbuild` executors to use the `@nx/angular:application` executor or the `@angular-devkit/build-angular:application` builder. If the converted target is using one of the `@nx/angular` executors, the `@nx/angular:application` executor will be used. Otherwise, the `@angular-devkit/build-angular:application` builder will be used.",
+    "type": "object",
+    "properties": {
+      "project": {
+        "type": "string",
+        "description": "Name of the Angular application project to convert. It has to contain a target using one of the `@angular-devkit/build-angular:browser`, `@angular-devkit/build-angular:browser-esbuild`, `@nx/angular:browser` and `@nx/angular:browser-esbuild` executors. If not specified, all projects with such targets will be converted.",
+        "$default": { "$source": "argv", "index": 0 },
+        "x-priority": "important"
+      },
+      "skipFormat": {
+        "description": "Skip formatting files.",
+        "type": "boolean",
+        "default": false,
+        "x-priority": "internal"
+      }
+    },
+    "additionalProperties": false,
+    "presets": []
+  },
+  "description": "Converts projects to use the `@nx/angular:application` executor or the `@angular-devkit/build-angular:application` builder. _Note: this is only supported in Angular versions >= 17.0.0_.",
+  "implementation": "/packages/angular/src/generators/convert-to-application-executor/convert-to-application-executor.ts",
+  "aliases": [],
+  "hidden": false,
+  "path": "/packages/angular/src/generators/convert-to-application-executor/schema.json",
+  "type": "generator"
+}
diff --git a/docs/shared/reference/sitemap.md b/docs/shared/reference/sitemap.md
@@ -343,6 +343,7 @@
       - [component-cypress-spec](/nx-api/angular/generators/component-cypress-spec)
       - [component-story](/nx-api/angular/generators/component-story)
       - [component-test](/nx-api/angular/generators/component-test)
+      - [convert-to-application-executor](/nx-api/angular/generators/convert-to-application-executor)
       - [directive](/nx-api/angular/generators/directive)
       - [federate-module](/nx-api/angular/generators/federate-module)
       - [init](/nx-api/angular/generators/init)

diff --git a/e2e/angular-core/src/projects.test.ts b/e2e/angular-core/src/projects.test.ts
@@ -1,5 +1,6 @@
 import { names } from '@nx/devkit';
 import {
+  checkFilesDoNotExist,
   checkFilesExist,
   cleanupProject,
   getSize,
@@ -8,6 +9,7 @@ import {
   newProject,
   readFile,
   removeFile,
+  rmDist,
   runCLI,
   runCommandUntil,
   runE2ETests,
@@ -552,4 +554,52 @@ describe('Angular Projects', () => {
       `Successfully ran target test for project ${libName}`
     );
   }, 500_000);
+
+  it('should support generating applications with SSR and converting targets with webpack-based executors to use the application executor', async () => {
+    const esbuildApp = uniq('esbuild-app');
+    const webpackApp = uniq('webpack-app');
+
+    runCLI(
+      `generate @nx/angular:app ${esbuildApp} --bundler=esbuild --ssr --project-name-and-root-format=as-provided --no-interactive`
+    );
+
+    // check build produces both the browser and server bundles
+    runCLI(`build ${esbuildApp} --output-hashing none`);
+    checkFilesExist(
+      `dist/${esbuildApp}/browser/main.js`,
+      `dist/${esbuildApp}/server/server.mjs`
+    );
+
+    runCLI(
+      `generate @nx/angular:app ${webpackApp} --bundler=webpack --ssr --project-name-and-root-format=as-provided --no-interactive`
+    );
+
+    // check build only produces the browser bundle
+    runCLI(`build ${webpackApp} --output-hashing none`);
+    checkFilesExist(`dist/${webpackApp}/browser/main.js`);
+    checkFilesDoNotExist(`dist/${webpackApp}/server/main.js`);
+
+    // check server produces the server bundle
+    runCLI(`server ${webpackApp} --output-hashing none`);
+    checkFilesExist(`dist/${webpackApp}/server/main.js`);
+
+    rmDist();
+
+    // convert target with webpack-based executors to use the application executor
+    runCLI(
+      `generate @nx/angular:convert-to-application-executor ${webpackApp}`
+    );
+
+    // check build now produces both the browser and server bundles
+    runCLI(`build ${webpackApp} --output-hashing none`);
+    checkFilesExist(
+      `dist/${webpackApp}/browser/main.js`,
+      `dist/${webpackApp}/server/server.mjs`
+    );
+
+    // check server target is no longer available
+    expect(() =>
+      runCLI(`server ${webpackApp} --output-hashing none`)
+    ).toThrow();
+  }, 500_000);
 });
diff --git a/packages/angular/generators.json b/packages/angular/generators.json
@@ -39,6 +39,11 @@
       "schema": "./src/generators/component-test/schema.json",
       "description": "Creates a cypress component test file for a component."
     },
+    "convert-to-application-executor": {
+      "factory": "./src/generators/convert-to-application-executor/convert-to-application-executor",
+      "schema": "./src/generators/convert-to-application-executor/schema.json",
+      "description": "Converts projects to use the `@nx/angular:application` executor or the `@angular-devkit/build-angular:application` builder. _Note: this is only supported in Angular versions >= 17.0.0_."
+    },
     "directive": {
       "factory": "./src/generators/directive/directive",
       "schema": "./src/generators/directive/schema.json",