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

Question

I've essentially run into this problem, where I need a reference to the current route to use gradients, but have yet to figure out how to translate the solution into Angular 2.

There are various approaches proposed in the answers to this question. If you want to see them compared, see this [SO answer](https://stackoverflow.com/a/60705771/245602). — George Hawkins, Jun 28 '20 at 13:11

score 37 · Accepted Answer · edited Aug 22 '19 at 12:06

37

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

edited Aug 22 '19 at 12:06

ne4istb

662
5
17

answered May 30 '16 at 04:12

Günter Zöchbauer

623,577
216
2,003
1,567

Hi, thanks for answering! I'm using the new router library in rc0 which doesn't seem to have a Location provider. Using `window.location.pathname` does seem to work fine for my purposes though, maybe I was just overthinking it a bit. – Kevin Stricker May 30 '16 at 05:12
1

Ah, thanks again, I'd forgotten about `@angular/common`, I had only checked router and core. – Kevin Stricker May 30 '16 at 05:21
4

@GünterZöchbauer This is only displaying after the base address! any updates? – Murhaf Sousli Nov 03 '16 at 22:17
Yup, I wasn't able to find anything that provides more info except `window.location` (see Plunker). – Günter Zöchbauer Nov 21 '16 at 18:51
14

this does not work with angular 5 it gave me just the path – Samuel Thompson Nov 06 '17 at 20:58
1

A couple of updates: 1) The actual documentation link is https://angular.io/api/common/Location#prepareexternalurl 2) 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 make it works. Tested in Angular 8.1. – ne4istb Aug 22 '19 at 10:27

guduf · Answer 2 · 2019-08-29T12:02:33.843

24

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

edited Aug 29 '19 at 12:02

answered Mar 08 '17 at 09:16

guduf

412
4
14

This was the only working solution I could find for Angular 5+ – Rohan Nov 26 '18 at 01:08
DOCUMENT is deprecated in angular 5+ – Satish Pokala Apr 23 '19 at 13:44
@SatishPokala it's not in v8, v9 – s-f Apr 15 '20 at 14:43

Sagar · Answer 3 · 2017-12-26T11:54:15.097

21

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

edited Dec 26 '17 at 11:54

answered Dec 22 '17 at 16:29

Sagar

3,107
2
26
35

the document object is a free object which you can access without any initialization. – tibi May 20 '20 at 10:00

score 2 · Answer 4 · answered Jul 13 '17 at 13:30

2

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

answered Jul 13 '17 at 13:30

Elvin Garibzade

475
4
12

score -1 · Answer 5 · answered Feb 25 '20 at 10:32

With base href:

import { DOCUMENT, LocationStrategy } from '@angular/common';


@Injectable()
export class SomeService {
  constructor(@Inject(DOCUMENT) private readonly document: any,
    private readonly locationStrategy: LocationStrategy) {}

  // for localhost: http://localhost:4200/someBaseHref
  getUrl(): string {
    return `${this.document.location.origin}/${this.locationStrategy.getBaseHref()}`
  }

}

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

5 Answers5

Location object

The document.location object is your one stop solution.

Linked

Related