Angular URL带查询参数自动加斜杠问题及Node.js部署解决需求

一、本地开发环境（localhost:4200）的处理 #

Angular默认会规范化URL，自动在根路径的查询参数前补斜杠。要禁用该行为，需修改路由配置并自定义路径处理逻辑：

1. 在app-routing.module.ts中，自定义PathLocationStrategy跳过URL规范化，同时配置路由的URL更新策略：

import { NgModule } from '@angular/core';
import { RouterModule, Routes, UrlUpdateStrategy, PathLocationStrategy, LocationStrategy } from '@angular/router';
import { AppComponent } from './app.component';

class CustomPathLocationStrategy extends PathLocationStrategy {
  prepareExternalUrl(internalUrl: string): string {
    // 针对根路径带查询参数的情况，移除多余斜杠
    if (internalUrl.startsWith('/?')) {
      return internalUrl.substring(1);
    }
    return super.prepareExternalUrl(internalUrl);
  }
}

const routes: Routes = [
  { path: '', component: AppComponent },
  // 其他路由配置
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    urlUpdateStrategy: 'eager',
    useHash: false // 保持非哈希模式
  })],
  exports: [RouterModule],
  providers: [{ provide: LocationStrategy, useClass: CustomPathLocationStrategy }]
})
export class AppRoutingModule { }

2. 修改angular.json的开发服务器配置，禁用自动补斜杠的重定向：
   在projects.your-project-name.architect.serve.options中添加：

"servePath": ""

二、部署到Node.js（Express）环境的处理 #

部署到/portal路径时，需同时调整Express路由配置和Angular的base href：

1. Angular构建时指定base href为/portal：

ng build --base-href="/portal"

2. 修改Express配置，禁用自动补斜杠的重定向规则：

const express = require('express');
const app = express();

// 关闭Express自动补斜杠的重定向行为
app.set('strict routing', true);

// 托管Angular构建产物的静态文件
app.use('/portal', express.static('dist/your-project-name'));

// 处理SPA路由，返回index.html
app.get('/portal', (req, res) => {
  res.sendFile('index.html', { root: 'dist/your-project-name' });
});

// 匹配带查询参数的/portal请求
app.get('/portal*', (req, res) => {
  res.sendFile('index.html', { root: 'dist/your-project-name' });
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

3. 调整Angular的自定义路径策略，适配/portal路径：
   更新app-routing.module.ts中的CustomPathLocationStrategy：

class CustomPathLocationStrategy extends PathLocationStrategy {
  prepareExternalUrl(internalUrl: string): string {
    const baseHref = this.getBaseHref();
    // 处理/portal路径下的查询参数，避免添加多余斜杠
    if (internalUrl === '/?' && baseHref === '/portal') {
      return '/portal';
    }
    if (internalUrl.startsWith('/?')) {
      return baseHref + internalUrl.substring(1);
    }
    return super.prepareExternalUrl(internalUrl);
  }
}

完成以上配置后，无论本地开发还是部署到Node.js环境，访问localhost:4200?id=1或localhost:3000/portal?id=99时，URL都不会自动添加多余斜杠。

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