一個 Angular 網站在 GitHub Pages 上發布后被破壞，但在本地工作

Question

最近，我將我的應用從 Angular 9 升級到了 12（一個一個，我沒有直接跳），當我在本地 PC 上吃午飯時，它看起來很完美：

但是當我發布並將其上傳到 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();
            });
        }
    });
}

我什至在 V9 中發布了這些更改，並且錯誤在 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");

另外，如果我在我的 PC 上運行編譯版本，它也可以正常工作（我必須在index.html之前刪除 GitHub URL）。 知道我做錯了什么嗎？

PS：

如果你想檢查它，這是我的回購：

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

Answer 1

我能夠根據這個答案修復它： https : //stackoverflow.com/a/56634968/1928691

我不得不將函數從ngOnInit()到constructor並做一些小的調整，比如添加一個不同的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 => {

完成此操作后，應用程序將按預期開始工作。