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 returnhttps://www.google.com/images
document.location.origin
will returnhttps://www.google.com
document.location.protocol
will returnhttps:
document.location.host
will returngoogle.com
document.location.hostname
will returngoogle
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