Angular从1.5升级至1.6后出现page not found错误的解决咨询

按优先级从高到低排查即可，90%的场景都是前两个问题导致：

• 第一优先级检查$locationProvider默认hash前缀兼容问题
  AngularJS 1.6对路由默认配置做了不兼容更新：1.5版本hashPrefix默认值为空，路由路径格式为#/page；1.6版本默认hashPrefix改为!，默认路由路径变成#!/page。升级后如果没手动改配置，所有旧路径都会匹配失败，直接触发页面找不到。
  修复方式：在应用的config配置块中显式把hashPrefix改回空字符串，对齐1.5版本行为：

  angular.module('yourApp')
    .config(['$locationProvider', function($locationProvider) {
      // 对齐1.5版本默认路由前缀配置
      $locationProvider.hashPrefix('');
      // 如果项目之前开了html5模式，确认该行配置没有被误删
      // $locationProvider.html5Mode(true);
    }]);
  

• 第二优先级检查Angular相关依赖版本一致性
  升级时如果只改了angular核心库的版本号，没有同步升级angular-route、angular-ui-router、angular-sanitize等配套Angular生态库的版本，会出现版本混装不兼容，路由模块初始化失败无法匹配路径。
  排查方式：打开浏览器控制台看是否有版本不兼容报错，确认所有angular开头的依赖、ui-router依赖版本统一为1.6.x，不要出现1.5和1.6版本混用的情况。同时检查index.html中写的依赖文件路径是否正确，有没有因为改版本号写错路径导致js文件加载404——核心库加载失败时Angular应用根本不会启动，也会报页面找不到。
• 第三优先级检查html5路由模式配置
  如果项目用了html5Mode(true)的无hash路由，首先确认index.html里的<base href="/">标签路径和项目实际部署路径一致，其次确认服务端配置了「所有业务路径都回退到index.html入口」的规则。1.6版本对html5模式下的路径校验比1.5更严格，base标签配置错误、服务端回退规则失效都会直接返回404。
• 第四优先级检查路由定义兼容性
  Angular 1.6收紧了路由定义的语法校验：1.5版本中即使不配置otherwise兜底规则，访问未定义路径也可能被默认处理，1.6版本下未配置兜底规则时，访问未注册路径会直接触发404；另外如果路由定义里用了1.6废弃的属性写法，会导致路由注册失败。
  修复方式：在路由配置末尾添加兜底跳转规则：

  // 用ngRoute的场景
  $routeProvider.otherwise({redirectTo: '/index'});
  // 用ui-router的场景
  $urlRouterProvider.otherwise('/index');
  

  同时逐行查看控制台的路由相关警告日志，把标注为废弃的写法替换成1.6支持的语法即可。

快速定位技巧：打开浏览器开发者工具的Network面板刷新页面，如果是js/css等静态资源报404，就是index.html里的依赖路径写错了；如果静态资源全部加载成功，页面显示的是应用自定义的404提示，直接按前面的路由配置问题排查即可。

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