feat(@schematics/angular): enable hydration when adding SSR, SSG or AppShell

This commits updates the internal server schematic that is used by SSR and AppShell schematics to include `provideClientHydration` in the list of providers, which causes hydration to be enabled for application.

For more information about `provideClientHydration`, see: https://angular.io/api/platform-browser/provideClientHydration
This commit is contained in:
Alan Agius 2023-09-22 09:06:38 +00:00 committed by Alan Agius
parent 6daf23faa2
commit 6979eba3c9
2 changed files with 18 additions and 0 deletions

View File

@ -22,6 +22,7 @@ import {
} from '@angular-devkit/schematics';
import { NodePackageInstallTask } from '@angular-devkit/schematics/tasks';
import { posix } from 'node:path';
import { addRootProvider } from '../utility';
import {
NodeDependencyType,
addPackageJsonDependency,
@ -220,6 +221,11 @@ export default function (options: ServerOptions): Rule {
updateConfigFileBrowserBuilder(options, tsConfigDirectory),
]),
addDependencies(),
addRootProvider(
options.project,
({ code, external }) =>
code`${external('provideClientHydration', '@angular/platform-browser')}()`,
),
]);
};
}

View File

@ -91,6 +91,12 @@ describe('Server Schematic', () => {
expect(contents.compilerOptions.types).toEqual(['node']);
expect(contents.files).toEqual(['src/main.ts', 'src/main.server.ts']);
});
it(`should add 'provideClientHydration' to the providers list`, async () => {
const tree = await schematicRunner.runSchematic('server', defaultOptions, appTree);
const contents = tree.readContent('/projects/bar/src/app/app.module.ts');
expect(contents).toContain(`provideClientHydration()`);
});
});
describe('standalone application', () => {
@ -128,6 +134,12 @@ describe('Server Schematic', () => {
const contents = tree.readContent(filePath);
expect(contents).toContain(`const serverConfig: ApplicationConfig = {`);
});
it(`should add 'provideClientHydration' to the providers list`, async () => {
const tree = await schematicRunner.runSchematic('server', defaultOptions, appTree);
const contents = tree.readContent('/projects/bar/src/app/app.config.ts');
expect(contents).toContain(`providers: [provideClientHydration()]`);
});
});
describe('Legacy browser builder', () => {