部署Google Cloud App Engine后Angular路由URL出现#符号问题

问题描述 #

部署在Google Cloud App Engine的Angular应用，访问时所有路由前都会自动添加#符号，例如：

http://myapp.domain.com/#/dashboard

当前使用的app.yaml配置如下：

runtime: python27
api_version: 1
threadsafe: true

skip_files:
- ^(?!dist) 

handlers:
  - url: /
    secure: always
    static_files: dist/myapp/index.html
    upload: dist/myapp/index.html

  #  Routing rules for resources, css, js, images etc. Any file with format filename.ext
  - url: /(.*\.(.+))$
    secure: always
    static_files: dist/myapp/\1
    upload: dist/myapp/(.*\.(.+))$

  #  Routing rule for Angular Routing
  - url: /(.*)
    secure: always
    static_files: dist/myapp/index.html
    upload: dist/myapp/index.html

问题原因 #

这是因为Angular默认启用了HashLocationStrategy路由模式，该模式通过URL中的#区分客户端路由和服务器路径，避免页面刷新时服务器返回404。但大多数场景下我们需要无#的HTML5路由模式（PathLocationStrategy）。

解决方案 #

1. 修改Angular项目配置，启用HTML5路由模式 #

打开Angular项目的app-routing.module.ts文件，做以下任一修改：

方式一：通过Providers配置路由策略

import { NgModule } from '@angular/core';
import { Routes, RouterModule, LocationStrategy, PathLocationStrategy } from '@angular/router';
// 导入你的组件

const routes: Routes = [
  // 你的路由配置示例
  // { path: 'dashboard', component: DashboardComponent },
  // { path: '', redirectTo: '/dashboard', pathMatch: 'full' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  // 配置使用PathLocationStrategy，去掉#号
  providers: [{ provide: LocationStrategy, useClass: PathLocationStrategy }]
})
export class AppRoutingModule { }

方式二：在RouterModule中禁用Hash模式

直接在RouterModule.forRoot方法中设置useHash: false，效果与上面一致：

RouterModule.forRoot(routes, { useHash: false })

修改完成后，重新构建Angular项目（执行ng build --prod），再重新部署到App Engine。

2. 确认App Engine配置正确性 #

你当前的app.yaml配置已经满足SPA路由需求：

• 根路径直接返回index.html
• 所有静态资源（css、js、图片等）正确映射到dist/myapp目录下的文件
• 所有其他路径都返回index.html，交由Angular客户端处理路由逻辑

该配置确保启用HTML5模式后，刷新非根路径（如/dashboard）时不会出现404错误，无需额外修改。

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