一个 Angular 网站在 GitHub 页面中发布后出现故障，但在本地运行

Question

最近，我将我的应用程序从 Angular 9 升级到 12（一个接一个，我没有直接跳转），当我在本地 PC 上吃午饭时它看起来很完美：

但是当我发布并上传到GitHub时，页面完全崩溃了（控制台中没有任何内容）:

我几乎确信问题与与迁移无关的 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();
            });
        }
    });
}

我什至用 V9 发布了这些更改，但错误一直出现在 GitHub 页中。

由于 ng-bootstrap 选项卡中的一些 API 更改，我在帮助中做了一些小改动，因此其余更改很小，但它们是看不见。

这是我发布网站的方式：

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

这是一个带有破壳的临时网站：

https://fanmixco.github.io/gnow-temp/

部分案例：

最糟糕的是，我在 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 URL）。知道我做错了什么吗？

P.S.:

如果你想查看，这是我的回购协议：

https://github.com/FANMixco/gravitynow-angular

Answer 1

我能够根据这个答案修复它：

我不得不将函数从 ngOnInit() 移动到 constructor 并做一些小的调整，比如添加一个不同的 if if (event instanceof NavigationEnd)。这是最终代码：

constructor(private service: OsmMessageServiceService, private translateService: TranslateService, private route: ActivatedRoute, private router: Router) { 
this.router.events.subscribe(event => {
  if (event instanceof NavigationEnd) {
      this.route.queryParams.subscribe(params => {

完成此操作后，应用程序将按预期开始工作。

一个 Angular 网站在 GitHub 页面中发布后出现故障，但在本地运行

An Angular website is broken after it's published in GitHub Pages but works on local

github

github-pages

angular-routing

angular

angular-router