Angular Academy · 课时

配置 Angular SSR

使用 Angular CLI 添加 SSR

配置 Angular SSR 是 CoddyKit 上的免费 Angular Academy 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Angular Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Angular Academy 课程共包含 4 节课。

添加 SSR

启用 SSR 最快的方法是使用原理图 ng add @angular/ssr。它会为您接入服务器构建、基于 Express 的服务器和水合功能。

// terminal
// ng add @angular/ssr

新建项目

创建新应用时，您可以直接通过 SSR 标志选择启用 SSR，让项目从一开始就做好 SSR 准备。

// ng new my-app --ssr

原理图添加的内容

它会添加 server.ts（Express 服务器）、main.server.ts 启动文件和 app.config.server.ts，使用服务器选项更新 angular.json，并在应用配置中启用水合。

provideServerRendering

服务器应用配置通过 provideServerRendering() 提供 SSR 引擎，并将其与您的浏览器配置合并。

// app.config.server.ts
import { provideServerRendering } from '@angular/ssr';
import { mergeApplicationConfig } from '@angular/core';

const serverConfig = { providers: [provideServerRendering()] };
export const config = mergeApplicationConfig(appConfig, serverConfig);

客户端水合

浏览器配置会启用水合，使客户端复用服务器 HTML，而不是重新渲染。原理图会自动完成此配置。

// app.config.ts
import { provideClientHydration } from '@angular/platform-browser';

export const appConfig = {
  providers: [provideClientHydration()]
};

Express 服务器

server.ts 会创建一个 Express 应用，用于提供静态资源，并将其他所有路由的 HTML 渲染交给 Angular SSR 引擎。

// server.ts (simplified)
const app = express();
app.get('**', (req, res) => {
  angularApp.handle(req).then(response =>
    response ? writeResponseToNodeResponse(response, res) : res.sendStatus(404)
  );
});

开发服务器

开发期间，ng serve 会通过应用构建器自动运行 SSR，因此无需额外步骤即可看到服务器渲染的输出和水合效果。

// ng serve

构建生产版本

生产构建会生成一个 browser 资源包和一个 server 资源包。在生产环境中，您需要运行 Node 服务器入口来提供 SSR。

// ng build
// node dist/my-app/server/server.mjs

仅限浏览器的 API

代码也会在服务器上运行，而服务器上不存在 window、document 和 localStorage。请保护对此类对象的访问，否则 SSR 期间会发生崩溃。

import { isPlatformBrowser } from '@angular/common';
import { inject, PLATFORM_ID } from '@angular/core';

const isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
if (isBrowser) { localStorage.setItem('k', 'v'); }

HTTP 使用绝对网址

在服务器上，相对 API 网址没有来源。请使用绝对网址或配置基地址，以便服务器端的 HttpClient 调用能够正确解析。

验证 SSR 是否正常工作

要确认 SSR 正常工作，请请求一个页面并检查原始响应（例如使用 curl）。您应该能在 HTML 中看到渲染后的内容，而不只是空的应用根元素。

// curl http://localhost:4000/ | grep "<h1>"

快速检查

检查您对 SSR 配置的掌握情况。

回顾

您使用 ng add @angular/ssr 配置了 SSR：它会添加 Express 服务器、provideServerRendering() 和客户端水合。请记住保护仅限浏览器的 API，在服务器端使用绝对网址，并在原始响应中验证渲染后的 HTML。

常见问题解答

「配置 Angular SSR」课时是免费的吗？

是的 — 「配置 Angular SSR」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Angular Academy 课程的其余内容，请升级到 CoddyKit PRO。 Angular Academy 课程共包含 4 节课。

「配置 Angular SSR」这节课中我会学到什么？

使用 Angular CLI 添加 SSR 你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Angular Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Angular Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「配置 Angular SSR」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Angular Academy 课中编写并运行代码吗？

能。每节 Angular Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Angular Academy