How do I get the absolute path of the current page in Angular 2?

Location object

The document.location object is your one stop solution.

Use the attributes inside location object from document to get the path in the way you need. Let's see this with an example.

So for https://www.google.com/images

  • document.location.href will return https://www.google.com/images
  • document.location.origin will return https://www.google.com
  • document.location.protocol will return https:
  • document.location.host will return google.com
  • document.location.hostname will return google
  • document.location.pathname will return /images

You can use the DOCUMENT injection from @angular/common.

import { Component, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';

@Component({...})
class SomeComponent {
  constructor(@Inject(DOCUMENT) document: any) {
    console.log(document.location.href);
  }
}

constructor(location:Location) {
  console.log(location.prepareExternalUrl(location.path()));
}

https://angular.io/api/common/Location#prepareexternalurl

As the documentation says:

Normalizes an external URL path. If the given URL doesn't begin with a leading slash ('/'), adds one before normalizing. Adds a hash if HashLocationStrategy is in use, or the APP_BASE_HREF if the PathLocationStrategy is in use.

It means that you have to explicitly specify APP_BASE_HREF to get an absolute path in Angular 5+.

window.location provides more information

Plunker example

Tags:

Angular