Angular router url returns slash

Question

I'm trying to get the current router path by using Router, but when i do console.log(this.router.url) it returns "/", although i'm on the "/login". But when i'm consoling the entire this.router object, there is the property url which has value "/login".

here is my code from app.component.ts

export class AppComponent implements OnInit{
  constructor(private router: Router) {}

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

}

app.module.routing.ts

import {NgModule} from '@angular/core';
import {PreloadAllModules, RouterModule, Routes} from '@angular/router';

import {NotFoundComponent} from './not-found/not-found.component';
import {AuthGuard} from './auth/auth-guard.service';

const appRoutes: Routes = [
  { path: '', loadChildren: './first/first.module#FirstModule'},
  { path: 'login', loadChildren: './login/login.module#LoginModule'},
  { path: '404', component: NotFoundComponent, canActivate: [AuthGuard] },
  { path: '**', redirectTo: '/404'}
];

@NgModule({
  imports: [RouterModule.forRoot(appRoutes, {preloadingStrategy: PreloadAllModules})],
  exports: [RouterModule]
})
export class AppModuleRouting {}

and the FirstModule routing:

import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';

import {FirstComponent} from './first.component';
import {AuthGuard} from '../auth/auth-guard.service';

const firstRoutes: Routes = [
  { path: '', component: FirstComponent, canActivate: [AuthGuard], children:[
    { path: '', loadChildren: './content-container/container.module#ContainerModule' }
  ]}
];
@NgModule({
  imports: [RouterModule.forChild(firstRoutes)],
  exports: [RouterModule]
})
export class FirstRoutes {}

This seems to be the problem. stackoverflow.com/questions/52143306/… — Gary
– Gary, Commented Sep 3, 2018 at 6:09

carecki · Accepted Answer · 2019-02-22 19:25:14Z

41

Instead of trying to use Router (which is not ready to give you final route at this moment of navigation lifecycle), you can use Location service (https://angular.io/api/common/Location) and its method path, which will give you the url without base href. On the contrary, window.location.pathname is not aware of your angular toys and will give you path including base href.

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

export class AppComponent implements OnInit {
  constructor(private location: Location) {}

  ngOnInit(){
    console.log(this.location.path());
  }

}

answered Feb 22, 2019 at 19:25

carecki

1,30011 silver badges10 bronze badges

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

4 Comments

Kazi Over a year ago

its return the same with the "/" @carecki

Rohit Parte Over a year ago

It works perfectly for me in angular 7, Alternatively we can use JS core function console.log(window.location.href, this.router)

ironic_ollins Over a year ago

This is the solution to use if you don't want to wait (can be used in constructor too).

user1725382 Over a year ago

This worked great on Angular 9. Thanks for submitting!

Reza Kajbaf · Accepted Answer · 2018-06-28 20:13:08Z

14

I have the same issue. The router.url returns a slash because when ngOnInit runs on the main app component, the route is the root. I got the correct value for the url by doing this.

  this.router.events
  .pipe(
    filter(e => e instanceof NavigationEnd)
  )
  .subscribe( (navEnd:NavigationEnd) => {
    console.log(navEnd.urlAfterRedirects);
  });

Hope that helps. This did not work with Angular Universal however... still trying to figure that out.

answered Jun 28, 2018 at 20:13

Reza Kajbaf

5175 silver badges10 bronze badges

2 Comments

gourabix Over a year ago

This is a great answer and should be part of accepted answer.

KOVIKO Over a year ago

To get better typechecking in TypeScript, make the filter operator's predicate into a type guard: filter((e): e is NavigationEnd => e instanceof NavigationEnd)

Narpat Shekhawat · Accepted Answer · 2017-07-26 07:51:25Z

1

Type 1.We can also use window.location.pathname

Type 2.constructor(router: Router) { 

      router.events.subscribe((url:any) => console.log(url));

      console.log(router.url);  // to print only path eg:"/login"
}

answered Jul 26, 2017 at 7:51

Narpat Shekhawat

1111 silver badge4 bronze badges

Comments

NXT Dev · Accepted Answer · 2020-04-13 18:03:24Z

1

if you want to get the url whenever you click on a new link/page you should use this:

this.router.events.subscribe((routerData) => {
      if(routerData instanceof ResolveEnd){ 
         if(routerData.url === 'your url'){
           //Do something
         }
    } 
})

answered Apr 13, 2020 at 18:03

NXT Dev

1014 bronze badges

1 Comment

Shadi Alnamrouti Over a year ago

Thank you. This is the only solution that worked for me on Angular 11.

Tim Rasim · Accepted Answer · 2021-07-27 08:43:10Z

Though this is 4 years old me and others will find it when looking for this issue. I had this problem while checking urls in the AuthGuard CanActivate interfaced class. For me the answers did not work, since at the point the guard is checking the URL, it is not available in Location nor in router.url. This worked for me:

const finalUrl = this.router.getCurrentNavigation()?.finalUrl;   
const isLoginPage = finalUrl?.root.children['primary'].segments[0]?.path === 'login';

this.router.getCurrentNavigation()?.finalUrl returns an UrlTree that might seem a bit complicated to use, my example above only works since "login" will always be my first segment. For a better understanding you should take a look at this example usage from the documentation:

@Component({templateUrl:'template.html'})
class MyComponent {
  constructor(router: Router) {
    const tree: UrlTree =
      router.parseUrl('/team/33/(user/victor//support:help)?debug=true#fragment');
    const f = tree.fragment; // return 'fragment'
    const q = tree.queryParams; // returns {debug: 'true'}
    const g: UrlSegmentGroup = tree.root.children[PRIMARY_OUTLET];
    const s: UrlSegment[] = g.segments; // returns 2 segments 'team' and '33'
    g.children[PRIMARY_OUTLET].segments; // returns 2 segments 'user' and 'victor'
    g.children['support'].segments; // return 1 segment 'help'
  }
}

https://angular.io/api/router/UrlTree#usage-notes

Semahegn kassie · Accepted Answer · 2023-08-09 07:14:24Z

0

Try this one

setTimeout(() => {
  this.url=this.routers.url; 
}, 100);

answered Aug 9, 2023 at 7:14

Semahegn kassie

1

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Angular router url returns slash

6 Answers 6

4 Comments

2 Comments

Comments

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

4 Comments

2 Comments

Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related