ion-back-button does not work correctly together with angular router navigate option "replaceUrl" (V4)

Bug Report

Ionic Info Run ionic info from a terminal/cmd prompt and paste the output below.

Ionic:

   ionic (Ionic CLI)          : 4.0.1 
   Ionic Framework            : @ionic/angular 4.0.0-beta.2
   @angular-devkit/core       : 0.7.3
   @angular-devkit/schematics : 0.7.3
   @angular/cli               : 6.1.3
   @ionic/ng-toolkit          : 1.0.6
   @ionic/schematics-angular  : 1.0.4

Cordova:

   cordova (Cordova CLI) : 7.0.1
   Cordova Platforms     : none

System:

   Android SDK Tools : 26.0.2
   NodeJS            : v8.11.3 (C:\Program Files\nodejs\node.exe)
   npm               : 6.2.0
   OS                : Windows 7

Environment:

   ANDROID_HOME : D:\Android\sdk

Describe the Bug ion-back-button does not work correctly together with angular router replaceUrl option

Steps to Reproduce if i navigate from “/home” to “/login” and then navigate to “/pageC” by setting: this.router.navigate([“/pageC”], {replaceUrl:true});

the browser back button correctly take me back to “/home” instead of "/login " but ion-back-button still take me back to “/login”

Related Code If you are able to illustrate the bug with an example, please provide a sample application via an online code collaborator such as StackBlitz, or GitHub.

Expected Behavior ion-back-button should take me back to “/home” instead of "/login " while the angular router option replaceUrl is set to “true”

Additional Context List any other information that is relevant to your issue. Stack traces, related issues, suggestions on how to fix, Stack Overflow links, forum links, screenshots, OS if applicable, etc.

[adsonrocha]

The way I’ve overcome this issue:

1. Created a custom directive:

import {Directive, HostListener} from '@angular/core';
import {Location} from '@angular/common';

@Directive({
  selector: '[app-location-back]'
})
export class LocationBackDirective {
  constructor(private location: Location) { }

  @HostListener('click', ['$event'])
  clickEvent(event) {
    event.preventDefault();
    event.stopPropagation();
    this.location.back();
  }
}

1. Used the directive’s selector as a property on my ion-button:

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button app-location-back fill="clear">
         <ion-icon name="arrow-back" slot="icon-only"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>...</ion-title>    
  </ion-toolbar>
</ion-header>

[Jesteban1125]

I suggest another alternative

Create a new class (CustomNavController) that extends from NavController

import { Optional } from '@angular/core';
import { UrlTree, Router } from '@angular/router';
import { Location } from '@angular/common';
import { NavController, Platform } from '@ionic/angular';
import { NavigationOptions } from '@ionic/angular/dist/providers/nav-controller';

export class CustomNavController extends NavController {
  constructor(
    platform: Platform,
    private _location: Location,
    @Optional() private _router?: Router,
  ) {
    super(platform, _location, _router);
  }

  navigateBack(url: string | UrlTree | any[], options: NavigationOptions = {}): Promise<boolean> {
    this.setDirection('back', options.animated, options.animationDirection);
    return new Promise((resolve, reject) => {
      this._location.back();
      resolve();
    });
  }
}

Add the CustomNavController class as your NavController to your providers (main module)

{ provide: NavController, useClass: CustomNavController }

Example:

@NgModule({
    ...
  providers: [
    ...
    { provide: NavController, useClass: CustomNavController }
    ...
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}