Application unexpected behavior on clicking browser history back/forward buttons

[amaneer94]

When I navigate through the application's router links all work perfectly. But when I try to navigate back using the browser's back button application shows multiple instances of angular components.

// app-routing.ts (navbar app)
const routes: Routes = [
  {
    path: '', component: NavbarComponent,
    children: [
      { path: 'login', component: LoginComponent },
      { path: 'dashboard', component: DashboardComponent },
    ]
  },
  { path: '**', component: NavbarComponent }
];

Please see the attached gif.

[amaneer94]

One more thing this warning shows in console logs
core.js:16834 Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()'?

[joeldenning]

The console warning is unrelated. See #53

Could you push a minimal repo that reproduces the error shown in the gif? I won't be able to look at this until next week, but a github repo that reproduces the issue would help me debug a lot.

[amaneer94]

Hi @joeldenning, After a lot of exploring the topics on Angular router-outlet, ngZones, Change Detection and of course your discussion in issue #53 (comment) . I tried the following piece of code in the sub-application's root component's constructor and it solved my UI problem also application became stable like magic.

import { Component, OnInit, ChangeDetectorRef, NgZone } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app-root.component.html',
  styleUrls: ['./app-root.component.css']
})
export class MainContentComponent implements OnInit {

  constructor(
    public router: Router,
    public cd: ChangeDetectorRef,
    public ngZone: NgZone
    ) {
    this.router.events.pipe(filter(e => e instanceof NavigationEnd)).subscribe((e: NavigationEnd) => {
      this.ngZone.run(() => {
        this.cd.detectChanges();
      })
    })
  }
}

I dont know whether this is the best practice or not, if you can analyse it and let me know. Thanks!

[joeldenning]

I am still unable to reproduce this problem. If anyone can push a repo that reproduces this would help. The back button works when navigating at http://coexisting-angular-microfrontends.surge.sh/.

I dont know whether this is the best practice or not, if you can analyse it and let me know. Thanks!

Your code is forcing an angular change detection tick every time that the route changes. Which is pretty similar to what older versions of single-spa-angular did before there was a big fix in single-spa@4.3.0 that made it unnecessary. Once single-spa@4.3.0 was released, we removed the angular tick code from single-spa-angular and things have been working fine. Since you are running into a situation where it isn't working fine, we might need to look at it again.

I am going to close this since I have no way to reproduce. Please reopen if the error persists and there's a way to reproduce.

[amaneer94]

Hi @joeldenning
I am still having the same problem with browser back/forward buttons even I have upgraded the single-spa-angular to ^3.0.1.
I have been able to prepare a repo, you would be able to produce the issue.

https://github.com/amaneer94/single-spa

[amaneer94]

[amaneer94]

Hi, @joeldenning I am looking forward to hearing from you.

[joeldenning]

I will look at this tomorrow, in conjunction with looking at #94

[gustavo9601]

Hi @joeldenning, After a lot of exploring the topics on Angular router-outlet, ngZones, Change Detection and of course your discussion in issue #53 (comment) . I tried the following piece of code in the sub-application's root component's constructor and it solved my UI problem also application became stable like magic.

import { Component, OnInit, ChangeDetectorRef, NgZone } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app-root.component.html',
  styleUrls: ['./app-root.component.css']
})
export class MainContentComponent implements OnInit {

  constructor(
    public router: Router,
    public cd: ChangeDetectorRef,
    public ngZone: NgZone
    ) {
    this.router.events.pipe(filter(e => e instanceof NavigationEnd)).subscribe((e: NavigationEnd) => {
      this.ngZone.run(() => {
        this.cd.detectChanges();
      })
    })
  }
}

I dont know whether this is the best practice or not, if you can analyse it and let me know. Thanks!

Thank you very much, It still work in angular 17 you saved my day :D