It seems like `NoopLocationStrategy` doesn't work in certain websites.

[chan-dev]

We're currently developing a chrome extension and it works fine on all websites except against dev.to

Is there a way to customize NoopLocationStrategy or a workaround for certain websites?

[chan-dev]

I was able to create a workaround for dev.to

What i did was override the prepareExternalUrl and just keep on returning the set base href.

import {
  APP_BASE_HREF,
  LocationChangeListener,
  LocationStrategy,
  PlatformLocation,
} from '@angular/common';
import { Inject, Injectable, Optional } from '@angular/core';

@Injectable()
export class CustomNoopLocationStrategy extends LocationStrategy {
  private readonly baseHref: string;

  constructor(
    private platformLocation: PlatformLocation,
    @Optional() @Inject(APP_BASE_HREF) baseHref?: string
  ) {
    super();
    this.baseHref = baseHref || this.platformLocation.getBaseHrefFromDOM();
    if (!this.baseHref) {
      throw new Error(
        `No base href set. Please provide a value for the APP_BASE_HREF token or add a base element to the document.`
      );
    }
  }

  onPopState(fn: LocationChangeListener): void {}

  getBaseHref(): string {
    return this.baseHref;
  }

  path(includeHash: boolean = false): string {
    return '';
  }

  prepareExternalUrl(internal: string): string {
    // if (this.baseHref.endsWith('/') && internal.startsWith('/')) {
    // return this.baseHref.substring(0, this.baseHref.length - 1) + internal;
    // } else if (this.baseHref.endsWith('/') || internal.startsWith('/')) {
    // return this.baseHref + internal;
    // } else {
    // return `${this.baseHref}/${internal}`;
    // }
    return `${this.baseHref}`;
  }

  pushState(
    state: any,
    title: string,
    path: string,
    queryParams: string
  ): void {}

  replaceState(
    state: any,
    title: string,
    path: string,
    queryParams: string
  ): void {}

  forward(): void {}

  back(): void {}

  historyGo(): void {}
}

any reason why we have to keep track of internal path argument from prepareExternalUrl?

[fboeller]

Hey @chan-dev!
The internal argument is the part from routerLink like /my-route/abc/efg. prepareExternalUrl is used by Angular to figure out what URL to put on a native a element such that the browser can figure out on its own where to lead the user. By changing it to just the base href, I'd expect that every link now just goes to the application at root itself.

What problems have you seen with the NoopLocationStrategy with dev.to?
The implementation of prepareExternalUrl is in itself derived from the PathLocationStrategy of Angular (https://github.com/angular/angular/blob/0af354ce056c7e6254bd17a52d4199bf86f51c0e/packages/common/src/location/location_strategy.ts#L147)

[chan-dev]

@fboeller Since we're using Angular routing inside chrome extension, we don't want the extension to change the current page's url. This extension helps us most of the case except in the case of when visiting dev.to, it still changes the dev.to url.

Let's say we're currently visiting dev.to and user has redirected to route /test1 inside chrome extension, then what happens is the browser url will redirect to dev.to/test1 instead of being entirely isolated within the chrome extension.