无源码Angular应用加载后绕过路由实现页面URL重定向

不需要获取Angular应用源代码，通过前端运行时拦截即可实现指定页面绕过Angular Router跳转，以下是可直接落地的方案：

方案1：入口页注入全局拦截脚本（稳定性最高，无侵入） #

Angular单页路由的所有内部跳转，底层都是基于浏览器history API实现，不会向服务端发送整页请求，因此IIS重定向规则无法覆盖这类场景。我们可以直接在Angular应用的入口静态文件中注入一段原生JS，从底层拦截所有跳转行为，匹配到旧路由时强制触发整页跳转，完全绕开Angular Router的处理。
操作步骤：

• 找到Angular应用部署根目录下的入口文件index.html（即IIS URL重写规则中配置的、所有路由fallback到的静态文件）
• 在文件末尾</body>标签闭合前，插入如下代码，替换其中的路径配置为你的实际业务路径：

(function() {
  // 替换为你的旧页面路由路径、新部署的静态页面地址
  const OLD_ROUTE = '/your-old-page-path';
  const NEW_PAGE_URL = '/your-new-page.html';

  function matchOldRoute(target) {
    try {
      const url = new URL(target, window.location.origin);
      // 如果旧路由带动态参数，可改为url.pathname.startsWith(OLD_ROUTE)做前缀匹配
      return url.pathname === OLD_ROUTE;
    } catch (err) {
      return false;
    }
  }

  function forceRedirect() {
    // replace不会在浏览器历史留下旧页面记录，体验更好
    window.location.replace(NEW_PAGE_URL);
  }

  // 初始化时先校验当前路径，覆盖直接访问旧路由的场景
  if (matchOldRoute(window.location.href)) {
    forceRedirect();
  }

  // 劫持Angular Router依赖的底层history方法
  const originPush = history.pushState;
  const originReplace = history.replaceState;
  history.pushState = function(...args) {
    if (args[2] && matchOldRoute(args[2])) return forceRedirect();
    return originPush.apply(this, args);
  };
  history.replaceState = function(...args) {
    if (args[2] && matchOldRoute(args[2])) return forceRedirect();
    return originReplace.apply(this, args);
  };

  // 覆盖浏览器前进/后退触发的路由切换
  window.addEventListener('popstate', () => {
    if (matchOldRoute(window.location.href)) forceRedirect();
  });

  // 捕获阶段拦截所有链接点击，优先于Angular RouterLink的事件绑定执行
  document.addEventListener('click', (e) => {
    const link = e.target.closest('a');
    if (!link) return;
    const href = link.getAttribute('href');
    if (!href || /^(https?:|mailto:|tel:)/.test(href) || link.target === '_blank') return;
    if (matchOldRoute(href)) {
      e.preventDefault();
      e.stopImmediatePropagation();
      forceRedirect();
    }
  }, true);
})();

注意：如果旧路由携带动态参数，把路径匹配逻辑从全等判断改为前缀匹配或者正则匹配即可。

该方案不会修改Angular应用的原有代码逻辑，仅针对配置的单个路由生效，其他页面的路由跳转完全不受影响。

方案2：修改构建产物主脚本（备选，风险较高） #

如果不方便修改index.html，可以直接修改Angular构建后生成的主脚本文件：

• 找到部署目录下文件名类似main.[hash].js的压缩脚本文件
• 全局搜索旧路由的路径字符串，定位到路由配置项的位置
• 将该路由对应的组件加载逻辑替换为window.location.replace('/your-new-page.html')
• 该方案需要精准定位混淆压缩后的代码位置，改错会导致整个应用崩溃，非必要不使用。

• 部署更新后必须清空浏览器静态资源缓存，避免旧版index.html缓存导致脚本不生效
• 覆盖三类测试场景：地址栏直接输入旧路由访问、应用内点击元素跳转到旧路由、浏览器前进/后退切换到旧路由，三类场景都需要正常跳转到新页面
• 原有IIS重定向规则可以保留，和前端拦截逻辑不冲突

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