I've created an interceptor which should grab the id out of the url and write it to the console. When it is written right before the get method is called, everything works as expected. But inside the interceptor the same call returns null because the paramsMap is empty. I've created the following Stackblitz

Stackblitz

To test navigate to https://angular-ivy-dfbb5r.stackblitz.io/test/2

The output in the console is

2 
null

Here is the app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { RouterModule, Routes } from '@angular/router';
import { ErrorComponent } from './error.component';
import { IdInterceptorService } from './id-interceptor.service';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';

const routes: Routes = [
  { path: 'test/:id', component: HelloComponent },

  {
    path: '**',
    component: ErrorComponent,
  },
];

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(routes),
    HttpClientModule,
  ],
  declarations: [AppComponent, HelloComponent, ErrorComponent],
  bootstrap: [AppComponent],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: IdInterceptorService, multi: true },
  ],
})
export class AppModule {}

Here is hello.component.ts

import { HttpClient } from '@angular/common/http';
import { Component, Input } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'hello',
  template: `<h1>Hello {{name}}!</h1>`,
  styles: [`h1 { font-family: Lato; }`],
})
export class HelloComponent {
  constructor(
    private activatedRoute: ActivatedRoute,
    private httpClient: HttpClient
  ) {}
  ngOnInit(): void {
    console.log(this.activatedRoute.snapshot.paramMap.get('id'));
    //outputs 2
      
    this.httpClient.get('http://www.google.com').subscribe(() => {});
  }
  @Input() name: string;
}

Here is the interceptor

import {
  HttpEvent,
  HttpHandler,
  HttpInterceptor,
  HttpRequest,
} from '@angular/common/http';
import { Injectable } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable()
export class IdInterceptorService implements HttpInterceptor {
  constructor(private activatedRoute: ActivatedRoute) {}

  intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    console.log(this.activatedRoute.snapshot.paramMap.get('id'));
    //outputs null

    return next.handle(req);
  }
}

CodePudding user response：

this happends because interceptor exists in other injector, and it injects "root" ActivatedRoute=the one that renders AppComponent instead. To get the child root, you can for example do

this.activatedRoute.children[0].snapshot.paramMap.get('id')