title: Login/Home pages not destroyed when login/logout in Ionic 5 router
body: <p>My project is in IONIC 5 and Firstore. There are 2 different <code>ion-router-outlet</code> for authenticated (Home) and unauthenticated (Index) routes. Following is the code for dynamically opening the login/home page for users in class <code>app.component.ts</code>.</p>
  
  <pre><code>  this.afAuth.authState.subscribe(user =&gt; {
      if (user) {
        this.router.navigateByUrl('home');
      } else {
        this.router.navigateByUrl('index');
      }
    }); 
  </code></pre>
  
  <p>Flow: Login Page -> (login) -> Home Page -> (logout) ->  Login Page. When the Home page is open the Login page is still loaded and in the navigation stack. The <code>ngOnDestroy</code> of the Login page does not execute. After the logout, the Login page opens again but the class <code>constructor</code> and <code>ngOnInit</code> method does not execute. This is causing a lot of issues as the page initialization is not reloading. The same issue happening for flow Home Page -> (logout) -> Login Page -> (login) ->  Home Page. 
  How can I destroy the Login page after login and Home page after logout so that those can reload if reopened in the same session?</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>Following is the routing config:</p>
  
  <p>app-routing.module.ts</p>
  
  <pre><code>const routes: Routes = [
    {
      path: 'home',
      canLoad: [AuthGuard],
      loadChildren: () =&gt; import('./home/home.module').then(m =&gt; m.HomePageModule)
    },
    {
      path: 'index',
      loadChildren: () =&gt; import('./index/index.module').then(m =&gt; m.IndexPageModule)
    },
  ];
  </code></pre>
  
  <p>Both the <code>Home.html</code> and <code>Index.html</code> has the same following code.</p>
  
  <pre><code>&lt;ion-content&gt;
    &lt;ion-router-outlet&gt;&lt;/ion-router-outlet&gt;
  &lt;/ion-content&gt;
  </code></pre>
  
  <p>index-routing.module.ts</p>
  
  <pre><code>const routes: Routes = [
    {
      path: '',
      component: IndexPage,
      children:[
        {
          path: '',
          loadChildren: () =&gt; import('../pages/login/login.module').then( m =&gt; m.LoginPageModule)
        },
      ]
    }
  ];
  </code></pre>
  
  <p>home-routing.module.ts</p>
  
  <pre><code>const routes: Routes = [
    {
      path: '',
      component: HomePage,
      children:[
        {
          path: '',
          loadChildren: () =&gt; import('../pages/user/user.module').then( m =&gt; m.UserPageModule)
        },
  .....
  Other authenticated pages
  ]
  </code></pre>