I cant navigate to the index page, when i click back button in Angular

Question

I have Angular project. on the index page I have buttons, which drives me in another page. when I want to go back on index page, I click back button of browser and then comes just a white page, not my index page. did u have same issue?

Answer 1

As far as I know this is not an issue with angular routing. I would suggest checking that the routing is configured correctly.

Assuming that you have set up angular routing in your project ( this ), you have to ensure that the route for your index page is registered correctly. In your app-routing.module.ts there should be something like this:

const routes: Routes = [
  { path: 'another-page', component: AnotherPageComponent },
  { path: '', component: IndexPageComponent },
  { path: '**', redirectTo: '' }
]

In your app.module.ts , ensure that the BrowserModule and the AppRoutingModule have been imported.

If angular routing is configured correctly, you could maybe enable route debugging to find the problem. Other answers suggest that this might be helpful ( here , here ).

Answer 2

I fixed this issue with following: I gave my index page (app.component.html) class "mainPage"

<div class="mainPage" #mainPage>
... // index page
</div>

Then I wrote following code in app.component.ts:

export class AppComponent implements OnInit{
  @ViewChild('mainPage') buttons!: ElementRef;
  constructor(private renderer: Renderer2, private el: ElementRef, private router: Router){
      
    router.events.subscribe((eve : any )=>{
        this.currentRoute = router.url;
        if(this.currentRoute == '/'){
          this.showIndex();
        } 
      });
  }
  
  currentRoute : string = "";\
ngOnInit(): void {

  }
  hideIndex(){
    this.renderer.addClass(this.buttons.nativeElement, "d-none");
  }
  showIndex(){
    this.renderer.removeClass(this.buttons.nativeElement, "d-none");
  }
  title = '';
}