Workaround for relative urls with ion-back-button[defaultHref]

my-page.component.html

<ion-back-button [defaultHref]="relativeUrl('..')"></ion-back-button>

my-page.component.ts

@RelativeLocation()
@Component({
  selector: 'page-my-page',
  templateUrl: 'my-page.page.html',
  styleUrls: ['my-page.page.scss'],
})
export class MyPagePage implements RelativeLocation {
  // Needed because TS can't infer the decorator adding the method
  public relativeUrl: (relativeUrl: string) => string;
}

relative-location.ts

// tslint:disable-next-line:interface-name
export interface RelativeLocation {
  relativeUrl: (relativeUrl: string) => string;
}

export function RelativeLocation() {
  return (target: any) => {
    let previousCurrentUrl: string | null;
    let cachedNextUrl: string | null;

    target.prototype.relativeUrl = (relativeUrl: string = '') => {
      const currentUrlString = window.location.toString();

      if (previousCurrentUrl === currentUrlString) {
        return cachedNextUrl;
      }

      const nextUrlRelativeString =
        window.location.protocol +
        '//' +
        window.location.host +
        window.location.pathname +
        '/' +
        relativeUrl;

      const nextUrl = new URL(nextUrlRelativeString);

      previousCurrentUrl = currentUrlString;
      cachedNextUrl = nextUrl.pathname.replace(/\/$/, '');

      return cachedNextUrl;
    };
  };
}