多组件Angular应用部署GCP App Engine子路由404问题

Angular是单页应用（SPA），所有路由逻辑都在客户端侧执行，服务端不存在/test对应的实体文件。你当前的app.yaml配置存在两个核心问题：

• 两个handler都只绑定了/路径，只能响应根路径请求，/test这类子路径没有匹配的处理规则
• 没有配置SPA必需的路径回退逻辑，非根路径请求不会转发给index.html交由Angular路由处理

本地ng serve能正常运行是因为Angular开发服务器默认内置了SPA路径回退规则，和App Engine静态文件服务的逻辑不一致，所以不会复现这个问题。另外你当前使用的python27运行时已经官方弃用，后续可以按需替换为更适配静态站点的运行时，修复当前路由问题不需要强制更换。

1. 替换app.yaml配置 #

核心逻辑是按优先级匹配请求：先响应带后缀的静态资源（js、css、图片、字体等），剩下所有非静态资源的请求全部回退到index.html。
替换后的完整配置如下：

runtime: python27
api_version: 1
threadsafe: true

handlers:
  # 优先匹配所有带后缀的静态资源，直接返回对应文件
  - url: /(.*\.(js|css|png|jpg|jpeg|gif|svg|ico|woff|woff2|ttf|eot|map|txt))$
    static_files: dist/gcp/\1
    upload: dist/gcp/.*\.(js|css|png|jpg|jpeg|gif|svg|ico|woff|woff2|ttf|eot|map|txt)$

  # 其余所有路径全部回退到index.html，交给Angular前端路由处理
  - url: /.*
    static_files: dist/gcp/index.html
    upload: dist/gcp/index.html

skip_files:
  - e2e/
  - node_modules/
  - src/
  - coverage/
  - ^(.*/)?\..*$
  - ^(.*/)?.*\.json$
  - ^(.*/)?.*\.md$
  - ^(.*/)?.*\.yaml$
  - ^LICENSE

注意：如果执行ng build时自定义了baseHref、deployUrl参数，或者Angular版本构建输出的目录嵌套在dist/gcp/browser下，要对应调整配置里dist/gcp的路径前缀，和实际构建产物的目录结构保持一致。

2. 重新构建部署 #

先执行ng build（生产环境建议加--prod参数压缩产物），确认dist/gcp目录下直接存在index.html和静态资源文件后，再执行部署命令：

ng build --prod
gcloud app deploy --project=<<MyGCPProjectId>>

部署完成后直接访问/test路径，或者点击首页的跳转链接就可以正常加载Test组件，不会再出现404错误。

你之前注释掉的通配规则没有生效，核心是App Engine的handler匹配是严格按照配置从上到下的顺序执行的，你之前把static_dir规则放在通配规则前面，匹配到对应路径后就不会再执行后面的规则，而且原规则的通配写法也没有放在静态资源匹配规则之后，会导致js、css等静态资源也被返回成index.html，页面加载异常。

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