docs: update SSR doc to reflect version 17 (angular#52398)

Changes to SSR doc

PR Close angular#52398

.pullapprove.yml

@@ -520,10 +520,8 @@ groups:
         contains_any_globs(files, [
           'packages/platform-server/**/{*,.*}',
           'aio/content/guide/prerendering.md',
-          'aio/content/guide/universal.md',
-          'aio/content/examples/universal/**/{*,.*}',
-          'aio/content/guide/universal-ngmodule.md',
-          'aio/content/examples/universal-ngmodule/**/{*,.*}'
+          'aio/content/guide/ssr.md',
+          'aio/content/examples/ssr/**/{*,.*}',
           ])
     reviewers:
       users:

README.md

@@ -152,7 +152,7 @@ Join the conversation and help the community.
 [forms]: https://angular.io/guide/forms-overview
 [api]: https://angular.io/api
 [angularelements]: https://angular.io/guide/elements
-[ssr]: https://angular.io/guide/universal
+[ssr]: https://angular.io/guide/ssr
 [schematics]: https://angular.io/guide/schematics
 [lazyloading]: https://angular.io/guide/lazy-loading-ngmodules
 [node.js]: https://nodejs.org/

aio/content/errors/NG0912.md

@@ -7,7 +7,7 @@ When creating components, Angular generates a unique component ID for each compo
 
 Component IDs are used in Angular internally:
 - for extra annotations of DOM nodes for style encapsulation
-- during [hydration](guide/hydration) to restore an application state after [server-side rendering](guide/universal). 
+- during [hydration](guide/hydration) to restore an application state after [server-side rendering](guide/ssr).
 
 To avoid issues that might be caused by the component ID collision, it's recommended to resolve them as described below.
 
@@ -32,9 +32,9 @@ Having these two components defined will trigger an ID generation collision and
 
 The warning message includes the class name of the two components whose IDs are colliding.
 
-The problem can be resolved using one of the solutions below: 
+The problem can be resolved using one of the solutions below:
 
-1. Change the selector of one of the two components. For example by using a pseudo-selector with no effect like `:not()` and a different tag name.  
+1. Change the selector of one of the two components. For example by using a pseudo-selector with no effect like `:not()` and a different tag name.
 
 ```typescript
 @Component({

aio/content/examples/examples.bzl

@@ -103,8 +103,7 @@ EXAMPLES = {
     "toh-pt5": {"stackblitz": True, "zip": True},
     "toh-pt6": {"stackblitz": True, "zip": True},
     "two-way-binding": {"stackblitz": True, "zip": True},
-    "universal": {"stackblitz": False, "zip": True},
-    "universal-ngmodule": {"stackblitz": False, "zip": True},
+    "ssr": {"stackblitz": False, "zip": True},
     "upgrade-lazy-load-ajs": {"stackblitz": False, "zip": True},
     "upgrade-module": {"stackblitz": False, "zip": False},
     "upgrade-phonecat-1-typescript": {"stackblitz": False, "zip": False},

aio/content/examples/universal-ngmodule/BUILD.bazel → aio/content/examples/ssr/BUILD.bazel

@@ -3,5 +3,5 @@ load("//aio/content/examples:examples.bzl", "docs_example")
 package(default_visibility = ["//visibility:public"])
 
 docs_example(
-    name = "universal",
+    name = "ssr",
 )

aio/content/examples/universal-ngmodule/example-config.json → aio/content/examples/ssr/example-config.json

@@ -1,7 +1,7 @@
 {
-  "projectType": "universal",
+  "projectType": "ssr",
   "e2e": [
     {"cmd": "yarn", "args": ["e2e", "--configuration=production", "--protractor-config=e2e/protractor-bazel.conf.js", "--no-webdriver-update", "--port=0"]},
-    {"cmd": "yarn", "args": ["run", "build:ssr"]}
+    {"cmd": "yarn", "args": ["build"]}
   ]
 }

aio/content/examples/ssr/readme.md

@@ -0,0 +1,9 @@
+# Instructions for Angular SSR Example Download
+
+This is the downloaded sample code for the [Angular SSR (Standalone) guide](https://angular.io/guide/ssr).
+
+## Install and Run
+
+1. `npm install` to install the `node_module` packages
+2. `ng serve` to launch the dev-server
+3. Launch the browser to `http://localhost:4200`

aio/content/examples/ssr/server.ts

@@ -0,0 +1,68 @@
+// #docplaster
+
+import { APP_BASE_HREF } from '@angular/common';
+import { CommonEngine } from '@angular/ssr';
+import express from 'express';
+import { fileURLToPath } from 'node:url';
+import { dirname, join, resolve } from 'node:path';
+import bootstrap from './src/main.server';
+
+// The Express app is exported so that it can be used by serverless Functions.
+export function app(): express.Express {
+  const server = express();
+  const serverDistFolder = dirname(fileURLToPath(import.meta.url));
+  const browserDistFolder = resolve(serverDistFolder, '../browser');
+  const indexHtml = join(serverDistFolder, 'index.server.html');
+  // #docregion CommonEngine
+  const commonEngine = new CommonEngine();
+  // #enddocregion CommonEngine
+
+  server.set('view engine', 'html');
+  server.set('views', browserDistFolder);
+
+  // #docregion data-request
+  // TODO: implement data requests securely
+  // Serve data from URLS that begin "/api/"
+  server.get('/api/**', (req, res) => {
+    res.status(404).send('data requests are not yet supported');
+  });
+  // #enddocregion data-request
+  // #docregion static
+  // Serve static files from /browser
+  server.get('*.*', express.static(browserDistFolder, {
+    maxAge: '1y'
+  }));
+  // #enddocregion static
+
+  // #docregion navigation-request
+  // All regular routes use the Angular engine
+  server.get('*', (req, res, next) => {
+    const { protocol, originalUrl, baseUrl, headers } = req;
+
+    commonEngine
+      .render({
+        bootstrap,
+        documentFilePath: indexHtml,
+        url: `${protocol}://${headers.host}${originalUrl}`,
+        publicPath: browserDistFolder,
+        providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }],
+      })
+      .then((html) => res.send(html))
+      .catch((err) => next(err));
+  });
+  // #enddocregion navigation-request
+
+  return server;
+}
+
+function run(): void {
+  const port = process.env['PORT'] || 4000;
+
+  // Start up the Node server
+  const server = app();
+  server.listen(port, () => {
+    console.log(`Node Express server listening on http://localhost:${port}`);
+  });
+}
+
+run();

aio/content/examples/universal/src/app/app.config.ts → aio/content/examples/ssr/src/app/app.config.ts

@@ -1,30 +1,22 @@
 // #docplaster
 import { importProvidersFrom } from '@angular/core';
 import { provideProtractorTestingSupport } from '@angular/platform-browser';
-// #docregion client-hydration
 import { provideClientHydration} from '@angular/platform-browser';
-// #enddocregion client-hydration
-// #docregion core
 import { ApplicationConfig } from '@angular/core';
 import { provideRouter } from '@angular/router';
-import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClient, withFetch } from '@angular/common/http';
 
 import { routes } from './app.routes';
-// #enddocregion core
 
 import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
 import { InMemoryDataService } from './in-memory-data.service';
-// #docregion client-hydration, core
 
 export const appConfig: ApplicationConfig = {
   providers: [
-    // #enddocregion client-hydration
     provideRouter(routes),
-    provideHttpClient(),
-    // #enddocregion core
-    // #docregion client-hydration
+     // TODO: Enable using Fetch API when disabling `HttpClientInMemoryWebApiModule`.
+    provideHttpClient(/* withFetch()*/ ),
     provideClientHydration(),
-    // #enddocregion client-hydration
     provideProtractorTestingSupport(), // essential for e2e testing
 
     // #docregion in-mem
@@ -38,9 +30,6 @@ export const appConfig: ApplicationConfig = {
       )
     ),
     // #enddocregion in-mem
-    // #docregion client-hydration
     // ...
-    // #docregion core
   ],
 };
-// #enddocregion client-hydration, core

aio/content/examples/universal/src/main.server.ts → aio/content/examples/ssr/src/main.server.ts

@@ -2,8 +2,5 @@ import { bootstrapApplication } from '@angular/platform-browser';
 import { AppComponent } from './app/app.component';
 import { config } from './app/app.config.server';
 
-// #docregion bootstrap
-// Parallels the client-side bootstrapping call in `main.ts`
 const bootstrap = () => bootstrapApplication(AppComponent, config);
 export default bootstrap;
-// #enddocregion bootstrap

aio/content/examples/universal/src/main.ts → aio/content/examples/ssr/src/main.ts

@@ -2,7 +2,5 @@ import { bootstrapApplication } from '@angular/platform-browser';
 import { AppComponent } from './app/app.component';
 import { appConfig } from './app/app.config';
 
-// #docregion bootstrap
 bootstrapApplication(AppComponent, appConfig)
-// #enddocregion bootstrap
     .catch(err => console.error(err));

aio/content/examples/ssr/tsconfig.app.json

@@ -0,0 +1,18 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": [
+      "node"
+    ]
+  },
+  "files": [
+    "src/main.ts",
+    "src/main.server.ts",
+    "server.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ]
+}