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.
This commit is contained in:
Alan Agius 2023-09-25 15:48:56 +00:00 committed by Alan Agius
parent 6a85b13b1f
commit 741cca73c1
8 changed files with 37 additions and 5 deletions

View File

@ -58,6 +58,7 @@ PROJECT NAME TO BUILD OR A MODULE NAME.**
| SchematicCollectionName | `ep.ng_schematic_collection_name` | `string` | | SchematicCollectionName | `ep.ng_schematic_collection_name` | `string` |
| SchematicName | `ep.ng_schematic_name` | `string` | | SchematicName | `ep.ng_schematic_name` | `string` |
| Standalone | `ep.ng_standalone` | `string` | | Standalone | `ep.ng_standalone` | `string` |
| SSR | `ep.ng_ssr` | `string` |
| Style | `ep.ng_style` | `string` | | Style | `ep.ng_style` | `string` |
| Routing | `ep.ng_routing` | `string` | | Routing | `ep.ng_routing` | `string` |
| InlineTemplate | `ep.ng_inline_template` | `string` | | InlineTemplate | `ep.ng_inline_template` | `string` |

View File

@ -72,6 +72,7 @@ export enum EventCustomDimension {
SchematicCollectionName = 'ep.ng_schematic_collection_name', SchematicCollectionName = 'ep.ng_schematic_collection_name',
SchematicName = 'ep.ng_schematic_name', SchematicName = 'ep.ng_schematic_name',
Standalone = 'ep.ng_standalone', Standalone = 'ep.ng_standalone',
SSR = 'ep.ng_ssr',
Style = 'ep.ng_style', Style = 'ep.ng_style',
Routing = 'ep.ng_routing', Routing = 'ep.ng_routing',
InlineTemplate = 'ep.ng_inline_template', InlineTemplate = 'ep.ng_inline_template',

View File

@ -6,9 +6,7 @@
* found in the LICENSE file at https://angular.io/license * 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'; import { Schema as SSROptions } from './schema';
export default function (options: SSROptions): Rule { export default (options: SSROptions) => externalSchematic('@schematics/angular', 'ssr', options);
return externalSchematic('@schematics/angular', 'ssr', options);
}

View File

@ -11,7 +11,7 @@ import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/te
import { join } from 'node:path'; import { join } from 'node:path';
describe('SSR Schematic', () => { describe('@angular/ssr ng-add schematic', () => {
const defaultOptions = { const defaultOptions = {
project: 'test-app', project: 'test-app',
}; };

View File

@ -98,6 +98,11 @@ export default function (options: ApplicationOptions): Rule {
]), ]),
MergeStrategy.Overwrite, MergeStrategy.Overwrite,
), ),
options.ssr
? schematic('ssr', {
project: options.name,
})
: noop(),
options.skipPackageJson ? noop() : addDependenciesToPackageJson(options), options.skipPackageJson ? noop() : addDependenciesToPackageJson(options),
]); ]);
}; };

View File

@ -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`, () => { describe(`update package.json`, () => {
it(`should add build-angular to devDependencies`, async () => { it(`should add build-angular to devDependencies`, async () => {
const tree = await schematicRunner.runSchematic('application', defaultOptions, workspaceTree); const tree = await schematicRunner.runSchematic('application', defaultOptions, workspaceTree);

View File

@ -107,6 +107,13 @@
"type": "boolean", "type": "boolean",
"default": true, "default": true,
"x-user-analytics": "ep.ng_standalone" "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"] "required": ["name"]

View File

@ -139,6 +139,12 @@
"type": "boolean", "type": "boolean",
"default": true, "default": true,
"x-user-analytics": "ep.ng_standalone" "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"] "required": ["name", "version"]