Angular项目升级至12后本地运行正常 部署GitHub Pages无报错无法访问

我近期将Angular项目从版本9逐步升级至版本12，未跨版本升级。项目在本地启动时运行完全正常：

但将项目发布部署到GitHub Pages后完全无法使用，且控制台无任何报错信息：

我初步判断问题和版本迁移无关，大概率与osm-map.component.ts组件相关，我此前对该组件做了扩展，通过GET请求获取更多参数，相关代码如下：

constructor(private service: OsmMessageServiceService, private translateService: TranslateService, private route: ActivatedRoute, private router: Router) { }

ngOnInit() {
    this.router.events
        .subscribe(e => {
        if (e.constructor.name === 'NavigationEnd' && this.router.navigated) {
            this.route.queryParams.subscribe(params => {

            let isDraggable = true;
            let isMetric = true;

            if (params['isApp']) {
                this.status = params['isApp'] == "true" ? true : false;
            }
            if (params['isMetric']) {
                isMetric = params['isMetric'] == "true" ? true : false;
                if (!isMetric) {
                this.defaultUnits = 'ft/s²';
                }
            }
            if (params['newLoc']) {
                this.newLoc = params['newLoc'].split(',').map(Number);
            }

            localStorage.setItem('isMetric', `${isMetric}`);
            localStorage.setItem('defaultUnits', this.defaultUnits);

            this.resizeMap();
            });
        }
    });
}

我甚至将这些改动回退到版本9进行发布，GitHub Pages上仍会出现该故障。其余改动极小，仅针对ng-bootstrap标签页的API变更做了少量帮助页调整，无功能层面改动。
我的项目发布命令如下：

ng build --prod --base-href "https://fanmixco.github.io/gravitynow-angular/"

目前临时故障站点地址：https://fanmixco.github.io/gnow-temp/
可复现故障的访问路径：

• https://fanmixco.github.io/gnow-temp?isApp=true
• https://fanmixco.github.io/gnow-temp/?isApp=true&isMetric=false

最棘手的是JS控制台没有任何错误或警告，无法定位根因：

我添加日志调试后发现NavigationEnd事件从未触发，调试代码如下：

ngOnInit() {
    console.log("ngOnInit");
    this.router.events
      .subscribe(e => {
        console.log("event subscriber started");
        if (e.constructor.name === 'NavigationEnd' && this.router.navigated) {
          console.log("NavigationEnd");

另外，我将编译后的产物在本地运行时（需先删除index.html中的GitHub路径配置）也完全正常。请问我该如何定位并解决该问题？
附：项目仓库地址为https://github.com/FANMixco/gravitynow-angular

解决方案 #

根因定位 #

1. base-href配置不匹配：你发布到gnow-temp临时站点时，build命令的base-href仍写死为https://fanmixco.github.io/gravitynow-angular/，和实际部署路径不一致，导致Angular路由无法识别当前路径，首次加载时不会触发NavigationEnd事件。本地测试删除base配置后恢复正常，完全吻合该问题特征。
2. 路由事件判断方式错误：你通过e.constructor.name === 'NavigationEnd'判断事件类型，生产环境打包时会做类名混淆，NavigationEnd会被压缩为短字符名称，该判断条件永远不成立，即使路径匹配也不会执行后续逻辑。本地开发无混淆所以运行正常。

修复步骤 #

• 修正build命令的base-href配置，和实际部署路径保持一致：
  部署到gnow-temp站点时使用命令：
  ng build --prod --base-href "/gnow-temp/"
  部署到原项目路径时对应修改为/gravitynow-angular/即可。
• 替换路由事件判断逻辑，使用Angular原生类型守卫避免打包混淆影响：
  首先导入NavigationEnd类型：
  import { NavigationEnd } from '@angular/router';
  然后将判断条件改为：

  if (e instanceof NavigationEnd && this.router.navigated)
  

• 优化嵌套订阅避免内存泄漏：你当前在router事件订阅中嵌套订阅queryParams会产生内存泄漏风险，建议用rxjs操作符重构：

  import { filter, switchMap } from 'rxjs/operators';
  
  this.router.events.pipe(
    filter(e => e instanceof NavigationEnd && this.router.navigated),
    switchMap(() => this.route.queryParams)
  ).subscribe(params => {
    // 原有参数处理逻辑
  })
  

• 补充GitHub Pages单页应用配置：如果你使用的是PathLocationStrategy，需要将站点的404.html内容设置为和index.html完全一致，避免直接访问带参数路径时出现404问题。

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