Check angular route path from interceptor

Question

I have a route path configured as:

{
    path: 'user/:id/edit/:type',
    component: UserEditTypeComponent,
},

I want to reach the path from the interceptor which i could access from activated routes as:

constructor(private activatedRoute: ActivatedRoute) {
}

ngOnInit() {
    console.log(this.activatedRoute.routeConfig.path);
}

This results in returning this path user/:id/edit/:type in the console.

I want to get the same path from interceptor which i have tried as:

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    let ar = this.injector.get(ActivatedRoute);
    console.log(ar.routeConfig.path);
}

this returns error as: Cannot read property 'path' of null. I have removed the path and tested and found routeConfig to be null.

How do we get the activated route inside the interceptor?

Is there any other method to access the path in interceptor?

If the question seems to be unclear could updated it with more information.

What is wrong with your first example using the ActivatedRoute ? — Orodan, Apr 09 '18 at 11:53
@Orodan There is nothing wrong in that example. The example is inside the component and i have a condition where i need to check the component's `path` in interceptor which is not working as expected. — PaladiN, Apr 09 '18 at 11:55
Have you tried getting the `ActivatedRoute` via constructor injection in the interceptor? Just like you are in the component. — R. Richards, Apr 09 '18 at 11:57
[check this link](https://scotch.io/@kashyapmukkamala/using-http-interceptor-with-angular2) — Sravan, Apr 09 '18 at 11:57
It's weird that you care for the current client-side route when performing an API request. Requests are usually wrapped in services which can be injected into different components, regardless of the current route. — Lazar Ljubenović, Apr 09 '18 at 11:57

score 6 · Answer 1 · edited Aug 07 '20 at 10:10

6

I know this is a little late.. but following will resolve your problem, had similar concerns..

constructor(private activatedRoute: ActivatedRoute) {
    console.log(activatedRoute.snapshot['_routerState'].url);
}

activatedRoute.snapshot['_routerState'].url will contain your /user/:id/edit/:type.

edited Aug 07 '20 at 10:10

akmozo

9,829
3
28
44

answered Jan 24 '19 at 14:17

yanky_cranky

1,303
1
11
16

score 5 · Answer 2 · answered Jun 24 '20 at 12:46

I got it to work like this after peeking in the implementation

constructor(private router: Router) {
   console.log(this.router.routerState.snapshot.url);
}

This will give you the whole url with params and everything. Like: user/234?hasName=true&hasShoes=false

score 4 · Answer 3 · answered Mar 31 '19 at 19:33

4

If in the interceptor the activated route and the snapshot aren't loaded with the current path or url, as a last choice, you could use the classic window.location

answered Mar 31 '19 at 19:33

Javi

345
3
7

score 1 · Answer 4 · answered May 13 '20 at 11:10

1

The best way to do this is to do it through the router object:

constructor(private router: Router) {
    console.log(this.router.routerState.snapshot);
}

This way you don't have to access hidden properties.

answered May 13 '20 at 11:10

Iván García García

495
4
11

Check angular route path from interceptor

4 Answers4