Angular 14应用兼容带哈希与无哈希URL的方案问询

核心思路 #

切换到PathLocationStrategy作为默认路由策略，同时添加哈希URL的自动重定向逻辑，让旧的带哈希链接能自动跳转到对应的无哈希路径，新链接直接使用无哈希格式，兼顾新老用户需求。

步骤1：切换到PathLocationStrategy #

修改app.module.ts中的路由配置，移除useHash: true，并显式指定使用PathLocationStrategy：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes, LocationStrategy, PathLocationStrategy } from '@angular/router';

import { AppComponent } from './app.component';
// 导入你的业务组件

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

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, RouterModule.forRoot(routes)],
  providers: [{ provide: LocationStrategy, useClass: PathLocationStrategy }],
  bootstrap: [AppComponent]
})
export class AppModule { }

步骤2：添加哈希URL自动重定向 #

创建应用初始化函数，在启动时检查URL是否包含哈希路径，若有则自动跳转到对应无哈希URL，同时保留查询参数：

在app.module.ts中新增以下代码：

import { APP_INITIALIZER } from '@angular/core';
import { Router } from '@angular/router';

// 哈希URL重定向处理函数
export function redirectHashUrls(router: Router) {
  return () => {
    const hashContent = window.location.hash.slice(1); // 去除开头的#
    if (hashContent) {
      // 拆分路径与查询参数
      const [targetPath, queryString] = hashContent.split('?');
      const finalUrl = queryString ? `${targetPath}?${queryString}` : targetPath;
      // 跳转至无哈希路径
      router.navigateByUrl(finalUrl);
    }
  };
}

然后在@NgModule的providers数组中注册这个初始化函数：

providers: [
  { provide: LocationStrategy, useClass: PathLocationStrategy },
  {
    provide: APP_INITIALIZER,
    useFactory: redirectHashUrls,
    deps: [Router],
    multi: true
  }
],

步骤3：配置服务器端路由 fallback #

使用PathLocationStrategy时，服务器必须将所有非静态资源的请求转发到index.html，否则刷新无哈希URL会返回404：

Nginx 配置示例

在站点配置中添加：

location / {
  try_files $uri $uri/ /index.html;
}

Apache 配置示例

在项目根目录的.htaccess文件中添加：

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

效果验证 #

• 旧的带哈希URL（如https://localhost:4200/#/agenda?data=2023-03-22）会自动跳转到无哈希路径https://localhost:4200/agenda?data=2023-03-22
• 直接访问无哈希URL可正常加载页面，刷新不会出现404
• 无哈希URL在Instagram等平台分享时不会被截断

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