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

Solution 1:

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

Solution 2:

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);
  }
}

Solution 3:

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

Solution 4:

if you reload page , you can not get route path by Router or ActivatedRoute . You should use window.location.pathname