MacOS High Sierra下Outlook Web加载项Angular路由失效问题求助

我来分享几个针对你遇到的这个问题的可行解决方案，以及关于官方修复的信息：

临时修复方案（针对#被编码为%23的问题） #

核心问题是Outlook把URL里的#编码成了%23，导致Angular的hashbang路由（#!/...）无法识别，我们可以从以下几个角度处理：

• 在Angular初始化前修正URL
  在加载Angular框架的脚本之前，先加入一段代码检查并修正URL：

  // 放在Angular脚本之前执行
  const currentHref = window.location.href;
  if (currentHref.includes('%23')) {
    // 把%23换回#，同时调整参数位置
    const fixedHref = currentHref.replace('%23', '#').replace('?', '#');
    // 直接修改hash或者替换href，避免pushState（因为Outlook禁用了它）
    window.location.hash = fixedHref.split('#')[1];
  }
  

  这样Angular启动时就能识别到正确的路由路径了。

• 调整Angular路由的匹配逻辑
  在$routeProvider里添加一个兜底的路由处理，当路由不匹配时手动解析编码后的内容：

  angular.module('yourApp', ['ngRoute'])
    .config(['$routeProvider', function($routeProvider) {
      $routeProvider
        .when('/main/viewschedule', {
          templateUrl: 'views/viewschedule.html',
          controller: 'ScheduleController'
        })
        .otherwise(function($injector) {
          const $location = $injector.get('$location');
          const rawPath = $location.path();
          // 检查并解码%23
          if (rawPath.includes('%23')) {
            const correctedPath = rawPath.replace('%23', '/');
            $location.path(correctedPath).replace();
          }
        });
    }]);
  

• 修改清单中的URL格式
  尝试把清单里的URL改成不带#!的形式，比如https://localhost:4004/main/viewschedule，配合上面的URL修正逻辑，让编码后的%23能被正确映射到路由路径。

关于HTML5模式的说明 #

你提到启用HTML5模式失败，确实是因为Outlook的office.js会把window.history.pushState设为null，而这是HTML5路由模式的核心依赖。目前这个场景下不建议强行使用HTML5模式，上面的hash路由修复方案更稳妥。

官方修复的情况 #

好消息是，微软已经在后续版本的Outlook for Mac中修复了这个#字符被错误编码的问题。你当前使用的是15.40版本，建议升级到最新版的Outlook for Mac（现在的版本已经远高于这个版本），升级后应该不会再出现URL编码导致的路由问题。微软也一直在优化Office加载项在Mac平台的兼容性，后续版本会持续修复这类兼容性bug。

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