feat(@schematics/angular): add ng new --ssr

This commit enabled users to opt-in adding SSR and SSG to their application during the `ng new` experience. This can be done either by using the `--ssr` option or answer `Yes` when prompted.
angular · Sep 25, 2023 · 741cca7 · 741cca7
1 parent 6a85b13
commit 741cca7
Show file tree

Hide file tree

Showing 8 changed files with 37 additions and 5 deletions.
diff --git a/docs/design/analytics.md b/docs/design/analytics.md
@@ -58,6 +58,7 @@ PROJECT NAME TO BUILD OR A MODULE NAME.**
 | SchematicCollectionName | `ep.ng_schematic_collection_name` | `string` |
 | SchematicName | `ep.ng_schematic_name` | `string` |
 | Standalone | `ep.ng_standalone` | `string` |
+| SSR | `ep.ng_ssr` | `string` |
 | Style | `ep.ng_style` | `string` |
 | Routing | `ep.ng_routing` | `string` |
 | InlineTemplate | `ep.ng_inline_template` | `string` |

diff --git a/packages/angular/cli/src/analytics/analytics-parameters.ts b/packages/angular/cli/src/analytics/analytics-parameters.ts
@@ -72,6 +72,7 @@ export enum EventCustomDimension {
   SchematicCollectionName = 'ep.ng_schematic_collection_name',
   SchematicName = 'ep.ng_schematic_name',
   Standalone = 'ep.ng_standalone',
+  SSR = 'ep.ng_ssr',
   Style = 'ep.ng_style',
   Routing = 'ep.ng_routing',
   InlineTemplate = 'ep.ng_inline_template',

diff --git a/packages/angular/ssr/schematics/ng-add/index.ts b/packages/angular/ssr/schematics/ng-add/index.ts
@@ -6,9 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import { Rule, externalSchematic } from '@angular-devkit/schematics';
+import { externalSchematic } from '@angular-devkit/schematics';
 import { Schema as SSROptions } from './schema';
 
-export default function (options: SSROptions): Rule {
-  return externalSchematic('@schematics/angular', 'ssr', options);
-}
+export default (options: SSROptions) => externalSchematic('@schematics/angular', 'ssr', options);
diff --git a/packages/angular/ssr/schematics/ng-add/index_spec.ts b/packages/angular/ssr/schematics/ng-add/index_spec.ts
@@ -11,7 +11,7 @@ import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/te
 
 import { join } from 'node:path';
 
-describe('SSR Schematic', () => {
+describe('@angular/ssr ng-add schematic', () => {
   const defaultOptions = {
     project: 'test-app',
   };

diff --git a/packages/schematics/angular/application/index.ts b/packages/schematics/angular/application/index.ts
@@ -98,6 +98,11 @@ export default function (options: ApplicationOptions): Rule {
         ]),
         MergeStrategy.Overwrite,
       ),
+      options.ssr
+        ? schematic('ssr', {
+            project: options.name,
+          })
+        : noop(),
       options.skipPackageJson ? noop() : addDependenciesToPackageJson(options),
     ]);
   };

diff --git a/packages/schematics/angular/application/index_spec.ts b/packages/schematics/angular/application/index_spec.ts
@@ -169,6 +169,20 @@ describe('Application Schematic', () => {
     });
   });
 
+  it(`should create an application with SSR features when 'ssr=true'`, async () => {
+    const options = { ...defaultOptions, ssr: true };
+    const filePath = '/projects/foo/server.ts';
+    expect(workspaceTree.exists(filePath)).toBeFalse();
+    const tree = await schematicRunner.runSchematic('application', options, workspaceTree);
+    expect(tree.exists(filePath)).toBeTrue();
+  });
+
+  it(`should not create an application with SSR features when 'ssr=false'`, async () => {
+    const options = { ...defaultOptions, ssr: false };
+    const tree = await schematicRunner.runSchematic('application', options, workspaceTree);
+    expect(tree.exists('/projects/foo/server.ts')).toBeFalse();
+  });
+
   describe(`update package.json`, () => {
     it(`should add build-angular to devDependencies`, async () => {
       const tree = await schematicRunner.runSchematic('application', defaultOptions, workspaceTree);

diff --git a/packages/schematics/angular/application/schema.json b/packages/schematics/angular/application/schema.json
@@ -107,6 +107,13 @@
       "type": "boolean",
       "default": true,
       "x-user-analytics": "ep.ng_standalone"
+    },
+    "ssr": {
+      "description": "Creates an application with Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering) enabled.",
+      "x-prompt": "Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)?",
+      "type": "boolean",
+      "default": false,
+      "x-user-analytics": "ep.ng_ssr"
     }
   },
   "required": ["name"]

diff --git a/packages/schematics/angular/ng-new/schema.json b/packages/schematics/angular/ng-new/schema.json
@@ -139,6 +139,12 @@
       "type": "boolean",
       "default": true,
       "x-user-analytics": "ep.ng_standalone"
+    },
+    "ssr": {
+      "description": "Creates an application with Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering) enabled.",
+      "type": "boolean",
+      "default": false,
+      "x-user-analytics": "ep.ng_ssr"
     }
   },
   "required": ["name", "version"]