61

I need to get my current route without params in Angular 2, I found a way to get the current route with params as follows:

 this.router.url

and then split it:

 this.router.url.split(';')[0]

But this looks as workaround, I think there should be better way?

2
  • this.dom.URL.split('?')[0] -> where dom is instance of DOCUMENT Commented Aug 7, 2019 at 17:59
  • 3
    The "angular" way would be to import Router from @angular/router and then "simply" use this.router.parseUrl(this.router.url).root.children.primary.segments. If the goal was to make as many developers as possible prefer Vue or React over Angular, it's a job very well done. Hat off, Angular architects! And no, providing subscriptions is not enough. What if I want to get the activated route params in a component created after route has changed (i.e: a modal)? You need to expose subscriptions as well as methods to get the current value. Make it easy to use for children! That's your goal!
    – tao
    Commented Oct 10, 2020 at 11:36

15 Answers 15

55

To get current route without query parameters, you can use below mentioned single line:

this.router.url.split('?')[0] 
3
  • 7
    How your approach is different from the one OP mentioned in his question (this.router.url.split(';')[0])? Commented Oct 18, 2018 at 19:44
  • shouldn't you subscribe to an observable?
    – Bellash
    Commented Sep 13, 2021 at 16:03
  • this was the best solution for my use case, since it uses an Angular service, which makes it a lot easier to stub out in testing
    – migreva
    Commented Mar 22, 2022 at 16:43
45

parseTree from Router helps fetching the segments without any knowledge about url structure.

import { Router } from '@angular/router';
...
constructor(private router: Router) {}
...
const urlTree = this.router.parseUrl(url);
const urlWithoutParams = urlTree.root.children['primary'].segments.map(it => it.path).join('/');

Start from here. If you have secondary outlets adjust as required.

1
  • If url is /, there are no primary children. So, urlWithoutParam should be / if urlTree.root.children.primary is undefined. Commented Jan 27, 2020 at 12:51
30

For me, this is the cleanest solution I managed to do. I hope it helps

import { Router } from '@angular/router';
    
constructor(private router: Router){}

getUrlWithoutParams(){
   let urlTree = this.router.parseUrl(this.router.url);
   urlTree.queryParams = {}; 
   urlTree.fragment = null; // optional
   return urlTree.toString();
}
6
  • 2
    no need to use let here, it's ok to use const
    – dude
    Commented Nov 27, 2020 at 21:24
  • nice strategy, I tried some variation with urlTree... the only thing is that I think it makes testing harder?
    – ahong
    Commented Jan 21, 2021 at 0:06
  • @ahong i guess it might be harder, but i think the "split" methods mentioned in other answers are the hardest when it comes to testing Commented Jan 21, 2021 at 10:25
  • 1
    we are using a mock router for our tests so the parseUrl method is not available. Seems like someone recommended the RouterTestingModule stackoverflow.com/a/59855413/2088345. It was just a bit more set up.
    – ahong
    Commented Jan 21, 2021 at 19:36
  • awesome! just 1 more thing urlTree.fragment = null; in case you use that.
    – Shadoweb
    Commented Jan 28, 2022 at 17:44
14

Short and simple pure js.

location.pathname
5
  • ROFL. I wonder if anyone could provide a hint of why not just use this clean and sweet solution as compared to the angular centric solutions.
    – Harald
    Commented Jul 30, 2021 at 13:31
  • 3
    @Harald If you are in a SSR environment with Angular, window and location are not available. Commented Aug 19, 2021 at 10:47
  • 1
    Exactly. SSR makes it impossible on the server-side, though for many other use-cases, location.pathname would be ideal. Commented Sep 13, 2021 at 12:12
  • It's not work for hash route. for example, http://example.com/#/app?x=1 Commented Nov 25, 2021 at 5:57
  • 1
    It may be easier to migrate if using Angular API. I think. Commented Nov 26, 2021 at 13:41
5

Native javascript will work to split the url into logical parts. Check out the "location" (or window.location) object. For example, using location at the url https://example.com/pathname1/pathname2?queryParam1=1&queryParam2=2 yields

location.origin === 'https://example.com/pathname1/pathname2'
location.href === 'https://example.com/pathname1/pathname2?queryParam1=1&queryParam2=2'
location.pathname === '/pathname1/pathname2'
location.search === '?queryParam1=1&queryParam2=2'
5

If you are using webpack, you can use the url polyfill module which comes bundled, along with the Angular Router module.

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import * as url from 'url'

@Component({
  selector: 'app-component',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

  public constructor(public readonly router: Router) {}

  public ngOnInit() {
    const urlInfo = url.parse(this.router.url)
    console.log(urlInfo.pathname)
  }
}
2
3

I had a similar requirement, depending on which route I used to get the component I wanted different outcomes.

I found that activatedRoute.routeConfig.path was a great option and made it easy for me to see which route had been used.

constructor(private activatedRoute: ActivatedRoute) {}
ngOnInit() {
  if (this.activatedRoute.routeConfig.path === 'heroes/:id')
1
  • Didn't work for me. this.activatedRoute.routeConfig.path returns a blank string.
    – mdailey77
    Commented Nov 5, 2021 at 13:36
2

this could help you:

  1. Import Router:

    import { Router } from '@angular/router';
    
  2. Signature in the constructor:

    constructor(private _router: Router) {}
    
  3. Check the _router events property:

    this._router.events
        .subscribe(
            (url:any) => {
                let _ruta = "";
                url.url.split("/").forEach(element => {
                    if(element!=="" && _ruta==="")
                        _ruta="/"+element;
                    });
                console.log("route: "+_ruta); //<<<---- Root path
                console.log("to URL:"+url.url); //<<<---- Destination URL 
                console.log("from URL:"+this._router.url);//<<<---- Current URL
            }); 
    
1

To get current route without query parameters, you can use below mentioned single line:

this.url = this.url.substr(0, this.url.lastIndexOf("?"));
1

this worked like a charm for me:

  currentUrl: string;

  constructor(private router: Router) {}

  ngOnInit() {
    const urlTree: UrlTree = this.router.parseUrl(this.router.url);
    const urlSegmentGroup: UrlSegmentGroup = urlTree.root.children['primary'];
    this.currentUrl = urlSegmentGroup ? urlSegmentGroup.segments.map((it) => it.path).join('/') : '';
  }
0

In my case I needed to compare the previous route and the new route, when changing only the :id on the url via router.navigate. Since I wanted the path without the different ids, I got the original path of the route:

/* 
    Routes = [
        { path: 'main/details/:id', component: DetailComponent }
    ]

    previousRoute = '/main/details/1'
    newRoute      = '/main/details/2'
*/

this.routeSubscription = this.router.events.filter((event) => event instanceof ResolveStart)
                                           .pairwise() // returns previous and current events
                                           .subscribe((ev: [ResolveStart, ResolveStart]) => {

    let sameRoute = ev[0].state.root.firstChild.routeConfig.path == ev[1].state.root.firstChild.routeConfig.path ?
                       ev[0].state.root.firstChild.routeConfig.path : undefiend;
    if (sameRoute) {
        // Same routes, probably different ids 
        console.log(sameRoute) // gives 'main/details/:id'
    } else {
        // Different routes
    }
});
1
  • This didn't work for me, the event had no state property
    – Zymotik
    Commented Jan 2, 2018 at 15:46
0

I use locationStrategy like in accept answer but with .split() method. LocationStrategy work perfect in Angular 4 & Angular 5;

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

export class MyService {
    constructor(private locationStrategy: LocationStrategy) {
    }

    public getUrl(filters: FilterConfig[]): void {
        const url = this.locationStrategy.path();
        const urlArray = url.split('?');

        return urlArray[0];
    }
}

One more things you should carry about is to be sure that your <router-outlet> is properly initialize before you try to get locationStrategy.path(). If <router-outlet> isn't initialize any Angular services can't return URL and query params properly.

To be sure that you location strategy is initialize you can use subscribe method like:

this.router.events.subscribe((evt) => {
...
}

But in this case you trigger your function on each router change so you need to protect this case if it's unwanted.

0

None of these worked for me.

There are many approaches to this, but in this case a guard was in place to stop users going to specific URL's. This worked fine except when URL's had parameters as the passed URL always contained all the parameters.

E.G: myPage/param1/param2

Or: myPage?param1=1&param2=2

In this case I'd want just myPage.

I coded the below, I don't like it, I'm sure it can be improved but haven't found anything else that works so far:

    let url: string = state.url;
    let urlParams: string[];

    if (url.includes("?")) {
        url = url.substr(0, url.indexOf('?'));
    } else {
        urlParams = route.url.toString().split(';')[0].split(',');

        if (urlParams.length > 1) {
            urlParams.shift(); // Remove first element which is page name

            // Get entire splitting on each param
            let fullUrlSegments: string[] = state.url.split('/');
            // Remove number of params from full URL
            fullUrlSegments = fullUrlSegments.slice(0, fullUrlSegments.length - urlParams.length);

            url = fullUrlSegments.join('/');
        }
    }

    alert(url);

state.url comes from the implementation for CanActivate (or inject Router).

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) Observable<boolean> { ... }
0

You could use URL https://developer.mozilla.org/en-US/docs/Web/API/URL/URL

const url = new URL("https://example.org/route/test?test")
const path = url.origin + url.pathname

But does not work in Internet Explorer.

0

Using Angular PlatformLocation:

@Component{...}
// or
@Service{...}
export class Some {
constructor(private platformLocation: PlatformLocation) {
  console.log(this.platformLocation.pathname);
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.