Cordova打包Angular应用时路由baseHref配置失效问题求助

• 调整Angular打包配置 #

  在angular.json对应项目的build配置中，除保留"baseHref": "/appname"外，新增两个配置项：

  "deployUrl": "/appname/",
  "outputPath": "dist/appname"
  

  打包完成后将dist/appname下的所有文件复制到Cordova项目的www/appname目录，不要直接放在www根目录。可以在www根目录新增跳转用index.html，内容如下：

  <script>window.location.href = '/appname/'</script>
  

• 修改Cordova Browser平台启动参数 #

  运行启动命令时指定静态服务的根目录为appname子目录，直接匹配baseHref的路径规则：

  cordova run browser -- --port=4200 --www=platforms/browser/www/appname
  

  启动后直接访问http://localhost:4200即可命中Angular应用入口，不需要额外加/appname路径。

• （可选）启用Angular Hash路由策略 #

  如果你的OAuth服务支持带hash的回调地址，可以修改路由策略避免服务端404问题，修改app.module.ts的providers配置：

  import { HashLocationStrategy, LocationStrategy } from '@angular/common';
  
  @NgModule({
    providers: [
      { provide: LocationStrategy, useClass: HashLocationStrategy }
    ]
  })
  

  该方案需要同步将OAuth回调地址修改为http://localhost:4200/appname/#/callback。

• （可选）给Browser平台添加路由重写规则 #

  修改platforms/browser/cordova/serve.js文件，在静态资源处理逻辑前添加重定向规则，所有/appname开头的请求都指向Angular入口文件，由前端路由处理路径：

  app.get('*', (req, res, next) => {
    if (req.path.startsWith('/appname')) {
      res.sendFile(path.join(__dirname, '../www/appname/index.html'));
    } else {
      next();
    }
  });
  

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