Angular 18中SSG与SSR概念疑问及GitHub Pages部署咨询

核心概念澄清 #

Angular 18 中没有单独的「SSG」选项，官方将其归类为预渲染（Prerendering），这就是你理解的「构建时生成静态HTML/CSS/JS」的方案，完全不需要服务器，完美适配GitHub Pages的静态托管需求。

从零创建支持预渲染的 Angular 18 项目 #

如果你不想带SSR服务器代码，创建项目时不要选择SSR选项，后续手动添加预渲染支持：

• 创建基础项目：ng new my-ssg-app --no-ssr
• 添加预渲染依赖：ng add @angular/platform-server
• 在angular.json中配置预渲染路由（比如你的应用路由：/、/contact等）：

  "prerender": {
    "builder": "@angular-devkit/build-angular:prerender",
    "options": {
      "routes": ["/", "/about", "/contact"]
    },
    "configurations": {
      "production": {
        "browserTarget": "my-ssg-app:build:production"
      }
    }
  }
  

• 生成静态文件：执行ng build --production && ng prerender，最终静态文件在dist/my-ssg-app/browser目录下，直接部署到GitHub Pages即可。

从 SSR 项目转为纯预渲染（SSG） #

如果已经创建了带SSR的项目，只需移除服务器相关代码并调整配置：

• 删除server.ts、src/app/app.server.module.ts等服务器端文件
• 移除package.json中@angular/platform-server以外的SSR相关依赖（比如express）
• 修改angular.json，确保prerender配置指向正确的浏览器构建目标，删除server相关的构建配置
• 执行ng build --production && ng prerender生成静态文件

升级现有 Angular 13 项目到 18 并启用预渲染 #

1. 按官方步骤升级：

   ng update @angular/core@18 @angular/cli@18
   

   解决过程中出现的依赖冲突，确保项目能正常构建。
2. 添加预渲染支持：ng add @angular/platform-server
3. 配置预渲染路由（参考上文angular.json配置）
4. 构建并部署：将dist/[项目名]/browser目录下的文件推送到GitHub Pages的指定分支（通常是gh-pages）

关键注意事项 #

• GitHub Pages仅支持静态文件，预渲染生成的内容完全符合要求，不需要任何服务器端运行环境
• 预渲染会在构建时为指定路由生成完整的HTML文件，提升首屏加载速度和SEO效果，和你理解的SSG功能完全一致

内容的提问来源于stack exchange，提问作者Wesley