Angular获取独立于部署环境的相对路由路径问题

核心思路 #

绕开部署路径的影响，直接从Angular路由系统中提取配置里的原始路由路径，或者通过统一处理部署前缀来得到一致结果。

具体实现方法 #

方法1：从路由快照中提取纯净路径 #

通过ActivatedRoute递归遍历路由树，直接拼接路由配置里的路径片段：

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {}

getPureRoutePath(): string {
  let path = '';
  let currentRoute = this.route.root;
  // 遍历所有子路由，拼接路径
  while (currentRoute.firstChild) {
    currentRoute = currentRoute.firstChild;
    if (currentRoute.snapshot.url.length > 0) {
      path += '/' + currentRoute.snapshot.url.map(segment => segment.path).join('/');
    }
  }
  // 空路径时返回根路径
  return path || '/';
}

这个方法完全基于Angular的路由状态，不受部署环境的base href影响，无论本地还是生产环境，都能直接得到/mainpage这类配置的路由路径。

方法2：结合APP_BASE_HREF去除部署前缀 #

Angular会自动根据部署环境设置APP_BASE_HREF（生产环境可通过构建命令ng build --base-href /myapp/指定），利用这个值来过滤路径：

import { Router, APP_BASE_HREF } from '@angular/router';
import { Inject } from '@angular/core';

constructor(private router: Router, @Inject(APP_BASE_HREF) private baseHref: string) {}

getPureRoutePath(): string {
  const fullUrl = this.router.routerState.snapshot.url;
  // 去除base href前缀，兼容本地环境的根路径
  if (this.baseHref && this.baseHref !== '/') {
    return fullUrl.replace(new RegExp(`^${this.baseHref}`), '');
  }
  return fullUrl;
}

处理后，生产环境的/myapp/mainpage会被转换成/mainpage，和本地环境的结果保持一致。

方法3：通过环境变量统一处理 #

在环境配置文件中定义部署前缀：

• environment.ts（本地开发）：

export const environment = {
  production: false,
  deployPrefix: '/'
};

• environment.prod.ts（生产环境）：

export const environment = {
  production: true,
  deployPrefix: '/myapp/'
};

然后在代码中用环境变量过滤路径：

import { Router } from '@angular/router';
import { environment } from '../environments/environment';

constructor(private router: Router) {}

getPureRoutePath(): string {
  const fullUrl = this.router.routerState.snapshot.url;
  return fullUrl.replace(new RegExp(`^${environment.deployPrefix}`), '');
}

效果验证 #

• 本地环境：访问localhost:4200/mainpage，调用方法返回/mainpage
• 生产环境：访问myserver/myapp/mainpage，调用方法返回/mainpage

将这个结果作为重定向参数，后台登录后拼接至myserver/myapp/后，就能得到正确的目标地址，不会出现myserver/myapp/myapp/mainpage这类重复前缀的错误。

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