Search code examples
htmlangulartypescriptgoogle-chrome-extensionangular14

Angular back button in chrome stack router outlet


I'm having an issue (Angular 14) with Chrome and back button of the browser, when return to the previews page (url) it doesn't delete the current page (components in URL), and instead it adds other and stack more and more when continue to press back button. (As mutch i go deep in the app)

This don't appear in Firefox or Safari, it works as expected.

The app have a main module that have other 2 feature modules, they load with lazy loading and works perfect. This problem only happen when I go back to the previews url.

app.component

<div class="main-container">
  <mat-toolbar>
   ...
  </mat-toolbar>
  <div class="content-page">
    <router-outlet></router-outlet>
  </div>

main.component

<router-outlet></router-outlet>

The main component is load by route '' when the app loads. The feature modules loads when user click a button.

Example of the DOM when going back several times and it stacks more router-outlets instead of remove the previews one


Solution

  • Found the problem, it isn't code problem, it was an extension install in browser (chrome) Jam from jam.dev, that provoke this problem. Uninstalled this extension and it fixed the problem.