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

…ppShell

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

packages/schematics/angular/server/index.ts

@@ -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')}()`,
+ ),
  ]);
  };
 }

packages/schematics/angular/server/index_spec.ts

@@ -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', () => {