Angular Universal预渲染在Firebase中失效问题求助

我用Angular Universal开发的应用，通过Angular CLI的ng deploy命令完成构建、预渲染并部署到Firebase免费账户，应用能正常部署，但预渲染功能失效，各路由的meta标签无法动态变更。已知Firebase免费账户支持预渲染，附上我的配置文件，求帮忙排查问题。

angular.json 相关配置片段 #

"prerender": {
      "builder": "@nguniversal/builders:prerender",
      "options": {
        "routes": [
          "manyRoutes"
        ]
      },
      "configurations": {
        "production": {
          "browserTarget": "app:build:production",             
          "serverTarget": "app:server:production"
        },
        "development": {
          "browserTarget": "app:build:development",
          "serverTarget": "app:server:development"
        }
      },
      "defaultConfiguration": "production"
    },
"deploy": {
      "builder": "@angular/fire:deploy",
      "options": {
        "prerender": true,
        "ssr": false,
        "browserTarget": "app:build:production",
        "firebaseProject": "app",
        "firebaseHostingSite": "app",            
        "prerenderTarget": "app:prerender:production"              
      }
    }

firebase.json 配置 #

{"hosting": [
    {
      "public": "dist/app/browser",
      "ignore": [
        "firebase.json",
        "**/.*",
        "**/node_modules/**"
      ],
      "rewrites": [
        {
          "source": "**",
          "destination": "/index.html"          
        }
      ]
    },
    {
      "target": "app",
      "public": "dist/app/browser",
      "ignore": [
        "**/.*"
      ],
      "headers": [
        {
          "source": "*.[0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f].+(css|js)",
          "headers": [
            {
              "key": "Cache-Control",
              "value": "public,max-age=31536000,immutable"
            }
          ]
        },
        {
          "source": "/@(ngsw-worker.js|ngsw.json)",
          "headers": [
            {
              "key": "Cache-Control",
              "value": "no-cache"
            }
          ]
        }
      ],
      "rewrites": [
        {
          "source": "**",
          "destination": "/index.html"
        }
      ]
    }
  ]
}

排查方向 #

• 路由配置占位符未替换：angular.json中prerender.options.routes里的"manyRoutes"是占位符，必须替换为实际需要预渲染的路由列表（比如["/", "/about", "/products"]）。如果保留占位符，预渲染只会处理这个不存在的路由，其他路由不会生成静态HTML文件。
• Firebase多站点配置冲突：firebase.json的hosting数组包含两个站点配置，第一个无target的配置会导致所有请求被重定向到index.html，忽略预渲染生成的静态文件。建议删除第一个冗余配置，只保留带target: "app"的配置项，确保部署时使用正确的站点设置。
• 预渲染产物生成验证：执行ng deploy前，先手动运行ng run app:prerender:production，检查dist/app/browser目录下是否生成对应路由的文件夹（比如/about路由会生成about/index.html）。如果没有生成，说明预渲染过程未正确执行，需排查server构建或路由配置问题。
• Firebase缓存清除：如果之前部署过纯SPA版本，Firebase可能缓存了旧的index.html。部署后可在Firebase控制台的Hosting页面手动清除缓存，或访问时添加查询参数强制刷新验证。
• Meta标签服务端设置：确保meta标签是通过Angular的Meta服务在服务器端执行阶段设置的（比如在组件的ngOnInit或server.ts中）。预渲染仅执行服务器端代码，若meta标签仅在浏览器端动态设置，预渲染的HTML中不会包含这些内容。

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