PathLocationStrategy

A LocationStrategy used to configure the Location service to represent its state in the path of the browser's URL.

If you're using PathLocationStrategy, you may provide a APP_BASE_HREF or add a <base href> element to the document to override the default.

For instance, if you provide an APP_BASE_HREF of '/my/app/' and call location.go('/foo'), the browser's URL will become example.com/my/app/foo. To ensure all relative URIs resolve correctly, the <base href> and/or APP_BASE_HREF should end with a /.

Similarly, if you add <base href='/my/app/'/> to the document and call location.go('/foo'), the browser's URL will become example.com/my/app/foo.

Note that when using PathLocationStrategy, neither the query nor the fragment in the <base href> will be preserved, as outlined by the RFC.

To ensure that trailing slashes are always present or never present in the URL, use TrailingSlashPathLocationStrategy or NoTrailingSlashPathLocationStrategy.

Example

import {Location, LocationStrategy, PathLocationStrategy} from '@angular/common';
import {Component} from '@angular/core';

@Component({
  selector: 'path-location',
  providers: [Location, {provide: LocationStrategy, useClass: PathLocationStrategy}],
  template: `
    <h1>PathLocationStrategy</h1>
    Current URL is: <code>{{ location.path() }}</code
    ><br />
    Normalize: <code>/foo/bar/</code> is: <code>{{ location.normalize('foo/bar') }}</code
    ><br />
  `,
  standalone: false,
})
export class PathLocationComponent {
  location: Location;
  constructor(location: Location) {
    this.location = location;
  }
}