Angular无需开启SSR如何注入少量静态预渲染页面？

首先明确：你要的需求完全可以在不使用SSR的前提下落地，有两种成熟的实现方案可选。

这是最贴合Angular技术栈的实现方式，刚好匹配你「仅少量静态页面需要预生成」的需求：

• 原理是在构建打包阶段就为你指定的路由生成完整的静态HTML文件，不会产生运行时的服务器负载，也不会生成大量冗余文件，你列多少路由就生成多少对应的静态页面
• 配置方式非常简单，只需要在angular.json的构建配置中新增预渲染相关配置，指定需要预渲染的路由列表即可：

  "prerender": {
    "routes": ["/", "/about"]
  }
  

• 打包后对应路由的静态HTML会直接生成在dist目录下，部署后服务器命中这些路由时直接返回对应静态HTML即可，加载速度和原生静态页一致，且页面有完整内容，对SEO非常友好，其余路由仍然走正常的Angular SPA路由逻辑
• 额外优势：可以复用Angular现有组件（如公共导航、页脚），不需要单独维护一套静态页代码，维护成本极低

如果你不想修改Angular的构建配置，可以直接通过服务器的路由规则实现：

• 自己手写落地页、关于页的静态HTML文件，和Angular打包后的产物一起部署到服务器
• 在Nginx/Apache等Web服务器中配置路由规则：当请求路径匹配你指定的静态页路由（如/、/about）时，直接返回对应的静态HTML文件；其余所有请求统一返回Angular SPA的入口index.html，走正常的Angular路由逻辑
• 该方案完全不需要修改Angular项目代码，灵活度更高，适合需要完全自定义静态页逻辑的场景

• 两种方案的静态页SEO效果都和SSR一致，因为返回给搜索引擎爬虫的都是包含完整内容的HTML
• 如果静态页需要和Angular应用的路由打通，直接在静态页的导航链接中写对应路由路径即可，跳转后会自动进入Angular SPA的运行逻辑

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