How to get current URL in Angular 2.0+

Question

I know this has been asked many times and I have tried to look for a solution.

My current URL is: http://localhost:4200/configuration

Below is one of the many online found solutions I am trying to implement.

export class AppComponent implements OnInit{
  title = 'app';
  constructor(private router: Router, private activatedRoute: ActivatedRoute) { 

  }

  ngOnInit() { 
    console.log("On Init");
    console.log(this.router.url);
    console.log(this.activatedRoute.url);
    //this.router.navigate(['/login']);
  }
}

On reload of page I get below output.

On Init 
\

I am just getting empty url. I am very curious to know what I am missing.

what do you expect to output?

Max Koretskyi
– Max Koretskyi

2017-09-04 14:41:55 +00:00
Commented Sep 4, 2017 at 14:41 — Max Koretskyi
– Max Koretskyi, Commented Sep 4, 2017 at 14:41
shouldn't I get /configuration ??

Dheeraj Kumar
– Dheeraj Kumar

2017-09-04 14:42:31 +00:00
Commented Sep 4, 2017 at 14:42 — Dheeraj Kumar
– Dheeraj Kumar, Commented Sep 4, 2017 at 14:42
show your routes confguratoin

Max Koretskyi
– Max Koretskyi

2017-09-04 14:43:32 +00:00
Commented Sep 4, 2017 at 14:43 — Max Koretskyi
– Max Koretskyi, Commented Sep 4, 2017 at 14:43
do you only want to get '/configuration ?

FAISAL
– FAISAL

2017-09-04 14:47:33 +00:00
Commented Sep 4, 2017 at 14:47 — FAISAL
– FAISAL, Commented Sep 4, 2017 at 14:47
@Faisal yes if possible.

Dheeraj Kumar
– Dheeraj Kumar

2017-09-04 15:05:52 +00:00
Commented Sep 4, 2017 at 15:05 — Dheeraj Kumar
– Dheeraj Kumar, Commented Sep 4, 2017 at 15:05

FAISAL · Accepted Answer · 2017-09-04 14:58:34Z

11

You can do it using location.href. Another option is to use DOCUMENT from '@angular/platform-browser':

import { DOCUMENT } from '@angular/platform-browser';

constructor(@Inject(DOCUMENT) private document: any){
    console.log(location.pathname);
    console.log(location.href);
    console.log(this.document.location.href);
}

If you only want to get "/configuration" from your url, then use location.pathname.

Demo here.

edited Sep 4, 2017 at 14:58

answered Sep 4, 2017 at 14:27

FAISAL

34.8k10 gold badges102 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Dheeraj Kumar Over a year ago

This is from Javascript. Is there no way to do this right in angular?

FAISAL Over a year ago

this is angular. Have you seen the demo ?

Aniruddha Das Over a year ago

its kind of a hack. i did it in a batter way but have refer once in office tomorrow

Graham Over a year ago

Why add the overhead of Angular if you can do something simply in JavaScript. That's a silly constraint to this Answer.

Graham Over a year ago

Very much aware of that, but Angular is a JavaScript framework therefore a JavaScript solution is also an Angular solution by proxy.

|

Vega · Accepted Answer · 2019-01-30 19:05:45Z

2

This will give "/configuration"

import { Router, NavigationEnd } from '@angular/router';
import { isPlatformBrowser } from '@angular/common';

....

constructor(
    private router: Router,
....

ngOnInit() {
    if (isPlatformBrowser) {
      this.router.events
        .filter(event => event instanceof NavigationEnd)
        .subscribe(() => {
          console.log(this.router.routerState.snapshot.url);
        })
    }
  }

or

  ngOnInit(){
    console.log(this.router.url)
  }

edited Jan 30, 2019 at 19:05

answered Sep 4, 2017 at 15:24

Vega

28.8k28 gold badges121 silver badges151 bronze badges

2 Comments

Miguel Lara Over a year ago

Works for me, by removing the "filter" line: if (isPlatformBrowser) { this.router.events.subscribe(() => { console.log(this.router.routerState.snapshot.url); }); }

Vega Over a year ago

@MiguelLara, just this.router.url gives the same result :)

csga5000 · Accepted Answer · 2018-02-10 01:10:42Z

0

You are accessing the property correctly. However, you're accessing it before it's set. See:

https://stackblitz.com/edit/angular-8phmvc

If you check the browser log you can see which part of each component's lifecycle has it set.

But long story short, instead of ngOnInit try ngAfterViewChecked or look for another way to subscribe to the current location using router.

answered Feb 10, 2018 at 1:10

csga5000

4,1615 gold badges45 silver badges53 bronze badges

Collectives™ on Stack Overflow

How to get current URL in Angular 2.0+

3 Answers 3

6 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related