SSR、测试与 i18n

路线图进阶节点：SSR/SSG（Angular Universal）、单元测试（Jasmine/Karma 或 Jest）、i18n 与性能优化。对照 Next.js 核心 内置 SSR/RSC，Angular SSR 需 @angular/ssr 或 Universal 集成。

学习目标

• 了解 Angular SSR 与预渲染（SSG）基本流程
• 用 TestBed 为组件/服务写单元测试
• 知道 i18n 标记与 @angular/localize 入口

核心概念

SSR 与构建

ng add @angular/ssr
ng build --configuration=production

服务端渲染首屏 HTML，客户端 hydration 接管交互。SEO 与首屏性能场景与 Next.js SSR 目标相同；Angular 更偏传统 SPA + 可选 SSR，Next.js 默认服务端优先。

组件测试

import { TestBed } from "@angular/core/testing";
import { TrackCardComponent } from "./track-card.component";

describe("TrackCardComponent", () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [TrackCardComponent],
    }).compileComponents();
  });

  it("应渲染标题", () => {
    const fixture = TestBed.createComponent(TrackCardComponent);
    fixture.componentRef.setInput("title", "Angular 路线图");
    fixture.componentRef.setInput("slug", "angular-roadmap-essentials");
    fixture.detectChanges();
    expect(fixture.nativeElement.textContent).toContain("Angular 路线图");
  });
});

i18n 与性能

模板标记：<h1 i18n="@@welcome">欢迎</h1>，提取翻译文件后构建多语言包。性能：OnPush 变更策略、trackBy、懒加载路由、Signals/Zoneless 减检测范围。

与 React/Next 对照

主题	Angular	Next.js
SSR	@angular/ssr	App Router 默认
测试	TestBed + Jasmine/Jest	Jest + RTL
i18n	@angular/localize	next-intl 等
性能	OnPush / Signals	RSC / 静态生成

练习

• 为 TrackCard 写一条「渲染 title」单测
• 对照路线图 Advanced 节点，列出 SSR 与 CSR 适用场景

小结