Angular SSR与静态服务的Kubernetes Ingress配置问题排查

你的核心问题出在Ingress的rewrite规则配置错误，以及静态服务的路由适配问题，导致Angular应用的资源加载或路由逻辑异常，触发TypeError: Cannot read properties of undefined (reading 'call')错误。

1. 修复Ingress的Rewrite规则 #

当前Ingress配置中的rewrite-target: /$1需要配合带捕获组的path使用，但你定义的路径没有设置捕获组，导致请求被错误重写，破坏了Angular应用的资源路径和路由逻辑。

修正后的Ingress配置（推荐） #

移除不必要的rewrite规则，直接转发请求：

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: c-frontend-dev
  namespace: development
  annotations:
    nginx.ingress.kubernetes.io/ssl-redirect: "true"
spec:
  ingressClassName: nginx
  rules:
    - host: "demo.example.com"
      http:
        paths:
          # SSR路径：直接转发完整路径
          - pathType: Prefix
            path: "/pages/subscriptions"
            backend:
              service:
                name: c-ssr-dev
                port:
                  number: 4000
          # 静态资源路径：匹配所有根路径请求
          - pathType: Prefix
            path: "/"
            backend:
              service:
                name: c-static-dev
                port:
                  number: 8080

若需保留rewrite规则的替代方案 #

如果业务需要使用rewrite，给路径添加捕获组：

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: c-frontend-dev
  namespace: development
  annotations:
    nginx.ingress.kubernetes.io/ssl-redirect: "true"
    nginx.ingress.kubernetes.io/rewrite-target: /$1
spec:
  ingressClassName: nginx
  rules:
    - host: "demo.example.com"
      http:
        paths:
          - pathType: Prefix
            path: "/pages/subscriptions/(.*)"
            backend:
              service:
                name: c-ssr-dev
                port:
                  number: 4000
          - pathType: Prefix
            path: "/(.*)"
            backend:
              service:
                name: c-static-dev
                port:
                  number: 8080

2. 调整静态服务的构建与启动配置 #

构建时指定基础路径 #

修改镜像构建脚本中的npm run build命令，明确指定Angular的基础路径为根目录：

RUN npm run build --prod-nocdn -- --base-href /

优化serve命令参数 #

确保serve的单页应用模式正确生效，添加--single参数避免路由404：

CMD ["serve", "-s", ".", "-l", "8080", "--single"]

3. 验证SSR服务的路由兼容性 #

通过端口转发测试SSR服务的完整路径，确认服务本身能正确处理请求：

kubectl port-forward service/c-ssr-dev 4000:4000 -n development

访问http://localhost:4000/pages/subscriptions，检查页面渲染和资源加载是否正常。

4. 排查具体错误源 #

打开浏览器控制台，查看触发错误的具体资源路径。通常这类call属性未定义的错误，是因为某个JS文件加载失败（比如路径错误导致404），导致依赖的函数未初始化。重点检查静态资源的请求URL是否符合预期。

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