angular · alan-agius4 · Oct 26, 2023
diff --git a/.pullapprove.yml b/.pullapprove.yml
@@ -519,10 +519,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:

diff --git a/README.md b/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/

diff --git a/aio/content/errors/NG0912.md b/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({

diff --git a/aio/content/examples/examples.bzl b/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},

diff --git a/...t/examples/universal-ngmodule/BUILD.bazel → aio/content/examples/ssr/BUILD.bazel b/...t/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",
 )
diff --git a/.../universal/doc-files/app/app.component.ts → ...amples/ssr/doc-files/app/app.component.ts b/.../universal/doc-files/app/app.component.ts → ...amples/ssr/doc-files/app/app.component.ts
diff --git a/.../examples/universal/doc-files/main.old.ts → ...ontent/examples/ssr/doc-files/main.old.ts b/.../examples/universal/doc-files/main.old.ts → ...ontent/examples/ssr/doc-files/main.old.ts
diff --git a/...niversal-ngmodule/e2e/src/app.e2e-spec.ts → ...tent/examples/ssr/e2e/src/app.e2e-spec.ts b/...niversal-ngmodule/e2e/src/app.e2e-spec.ts → ...tent/examples/ssr/e2e/src/app.e2e-spec.ts
diff --git a/...es/universal-ngmodule/example-config.json → aio/content/examples/ssr/example-config.json b/...es/universal-ngmodule/example-config.json → aio/content/examples/ssr/example-config.json
@@ -1,5 +1,5 @@
 {
-  "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"]}

diff --git a/aio/content/examples/ssr/readme.md b/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`
diff --git a/aio/content/examples/ssr/server.ts b/aio/content/examples/ssr/server.ts
@@ -0,0 +1,65 @@
+// #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) => {
+    commonEngine
+      .render({
+        bootstrap,
+        documentFilePath: indexHtml,
+        url: req.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();
diff --git a/...versal-ngmodule/src/app/app.component.css → ...nt/examples/ssr/src/app/app.component.css b/...versal-ngmodule/src/app/app.component.css → ...nt/examples/ssr/src/app/app.component.css
diff --git a/...ersal-ngmodule/src/app/app.component.html → ...t/examples/ssr/src/app/app.component.html b/...ersal-ngmodule/src/app/app.component.html → ...t/examples/ssr/src/app/app.component.html
diff --git a/...amples/universal/src/app/app.component.ts → ...ent/examples/ssr/src/app/app.component.ts b/...amples/universal/src/app/app.component.ts → ...ent/examples/ssr/src/app/app.component.ts
diff --git a/...es/universal/src/app/app.config.server.ts → ...examples/ssr/src/app/app.config.server.ts b/...es/universal/src/app/app.config.server.ts → ...examples/ssr/src/app/app.config.server.ts
diff --git a/.../examples/universal/src/app/app.config.ts → ...ontent/examples/ssr/src/app/app.config.ts b/.../examples/universal/src/app/app.config.ts → ...ontent/examples/ssr/src/app/app.config.ts
@@ -1,30 +1,21 @@
 // #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
+    provideHttpClient(withFetch()),
     provideClientHydration(),
-    // #enddocregion client-hydration
     provideProtractorTestingSupport(), // essential for e2e testing
 
     // #docregion in-mem
@@ -38,9 +29,6 @@ export const appConfig: ApplicationConfig = {
       )
     ),
     // #enddocregion in-mem
-    // #docregion client-hydration
     // ...
-    // #docregion core
   ],
 };
-// #enddocregion client-hydration, core
diff --git a/.../examples/universal/src/app/app.routes.ts → ...ontent/examples/ssr/src/app/app.routes.ts b/.../examples/universal/src/app/app.routes.ts → ...ontent/examples/ssr/src/app/app.routes.ts
diff --git a/...src/app/dashboard/dashboard.component.css → ...src/app/dashboard/dashboard.component.css b/...src/app/dashboard/dashboard.component.css → ...src/app/dashboard/dashboard.component.css
diff --git a/...rc/app/dashboard/dashboard.component.html → ...rc/app/dashboard/dashboard.component.html b/...rc/app/dashboard/dashboard.component.html → ...rc/app/dashboard/dashboard.component.html
diff --git a/.../src/app/dashboard/dashboard.component.ts → .../src/app/dashboard/dashboard.component.ts b/.../src/app/dashboard/dashboard.component.ts → .../src/app/dashboard/dashboard.component.ts
diff --git a/...app/hero-detail/hero-detail.component.css → ...app/hero-detail/hero-detail.component.css b/...app/hero-detail/hero-detail.component.css → ...app/hero-detail/hero-detail.component.css
diff --git a/...pp/hero-detail/hero-detail.component.html → ...pp/hero-detail/hero-detail.component.html b/...pp/hero-detail/hero-detail.component.html → ...pp/hero-detail/hero-detail.component.html
diff --git a/.../app/hero-detail/hero-detail.component.ts → .../app/hero-detail/hero-detail.component.ts b/.../app/hero-detail/hero-detail.component.ts → .../app/hero-detail/hero-detail.component.ts
diff --git a/...app/hero-search/hero-search.component.css → ...app/hero-search/hero-search.component.css b/...app/hero-search/hero-search.component.css → ...app/hero-search/hero-search.component.css
diff --git a/...pp/hero-search/hero-search.component.html → ...pp/hero-search/hero-search.component.html b/...pp/hero-search/hero-search.component.html → ...pp/hero-search/hero-search.component.html
diff --git a/.../app/hero-search/hero-search.component.ts → .../app/hero-search/hero-search.component.ts b/.../app/hero-search/hero-search.component.ts → .../app/hero-search/hero-search.component.ts
diff --git a/...niversal-ngmodule/src/app/hero.service.ts → ...tent/examples/ssr/src/app/hero.service.ts b/...niversal-ngmodule/src/app/hero.service.ts → ...tent/examples/ssr/src/app/hero.service.ts
diff --git a/...amples/universal-ngmodule/src/app/hero.ts → aio/content/examples/ssr/src/app/hero.ts b/...amples/universal-ngmodule/src/app/hero.ts → aio/content/examples/ssr/src/app/hero.ts
diff --git a/...odule/src/app/heroes/heroes.component.css → ...s/ssr/src/app/heroes/heroes.component.css b/...odule/src/app/heroes/heroes.component.css → ...s/ssr/src/app/heroes/heroes.component.css
diff --git a/...dule/src/app/heroes/heroes.component.html → .../ssr/src/app/heroes/heroes.component.html b/...dule/src/app/heroes/heroes.component.html → .../ssr/src/app/heroes/heroes.component.html
diff --git a/...versal/src/app/heroes/heroes.component.ts → ...es/ssr/src/app/heroes/heroes.component.ts b/...versal/src/app/heroes/heroes.component.ts → ...es/ssr/src/app/heroes/heroes.component.ts
diff --git a/...gmodule/src/app/in-memory-data.service.ts → ...les/ssr/src/app/in-memory-data.service.ts b/...gmodule/src/app/in-memory-data.service.ts → ...les/ssr/src/app/in-memory-data.service.ts
diff --git a/...ersal-ngmodule/src/app/message.service.ts → ...t/examples/ssr/src/app/message.service.ts b/...ersal-ngmodule/src/app/message.service.ts → ...t/examples/ssr/src/app/message.service.ts
diff --git a/...e/src/app/messages/messages.component.css → ...r/src/app/messages/messages.component.css b/...e/src/app/messages/messages.component.css → ...r/src/app/messages/messages.component.css
diff --git a/.../src/app/messages/messages.component.html → .../src/app/messages/messages.component.html b/.../src/app/messages/messages.component.html → .../src/app/messages/messages.component.html
diff --git a/...al/src/app/messages/messages.component.ts → ...sr/src/app/messages/messages.component.ts b/...al/src/app/messages/messages.component.ts → ...sr/src/app/messages/messages.component.ts
diff --git a/...universal-ngmodule/src/app/mock-heroes.ts → ...ntent/examples/ssr/src/app/mock-heroes.ts b/...universal-ngmodule/src/app/mock-heroes.ts → ...ntent/examples/ssr/src/app/mock-heroes.ts
diff --git a/...xamples/universal-ngmodule/src/index.html → aio/content/examples/ssr/src/index.html b/...xamples/universal-ngmodule/src/index.html → aio/content/examples/ssr/src/index.html
diff --git a/...ent/examples/universal/src/main.server.ts → aio/content/examples/ssr/src/main.server.ts b/...ent/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
diff --git a/aio/content/examples/universal/src/main.ts → aio/content/examples/ssr/src/main.ts b/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));
diff --git a/aio/content/examples/ssr/tsconfig.app.json b/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"
+  ]
+}
diff --git a/...t/examples/universal-ngmodule/zipper.json → aio/content/examples/ssr/zipper.json b/...t/examples/universal-ngmodule/zipper.json → aio/content/examples/ssr/zipper.json
diff --git a/aio/content/examples/universal-ngmodule/server.ts b/aio/content/examples/universal-ngmodule/server.ts
diff --git a/aio/content/examples/universal-ngmodule/src/app/app-routing.module.ts b/aio/content/examples/universal-ngmodule/src/app/app-routing.module.ts
diff --git a/aio/content/examples/universal-ngmodule/src/app/app.component.ts b/aio/content/examples/universal-ngmodule/src/app/app.component.ts
diff --git a/aio/content/examples/universal-ngmodule/src/app/app.module.server.ts b/aio/content/examples/universal-ngmodule/src/app/app.module.server.ts
diff --git a/aio/content/examples/universal-ngmodule/src/app/app.module.ts b/aio/content/examples/universal-ngmodule/src/app/app.module.ts