title: Why does the interceptor not get the route parameters?
body: <p>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</p>
  <p><a href="https://stackblitz.com/edit/angular-ivy-dfbb5r?file=src%2Fapp%2Fid-interceptor.service.ts" rel="nofollow noreferrer">Stackblitz</a></p>
  <p>To test navigate to <a href="https://angular-ivy-dfbb5r.stackblitz.io/test/2" rel="nofollow noreferrer">https://angular-ivy-dfbb5r.stackblitz.io/test/2</a></p>
  <p>The output in the console is</p>
  <pre><code>2 
  null
  </code></pre>
  <p>Here is the app.module.ts</p>
  <pre><code>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 {}
  </code></pre>
  <p>Here is hello.component.ts</p>
  <pre><code>import { HttpClient } from '@angular/common/http';
  import { Component, Input } from '@angular/core';
  import { ActivatedRoute } from '@angular/router';
  
  @Component({
    selector: 'hello',
    template: `&lt;h1&gt;Hello {{name}}!&lt;/h1&gt;`,
    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(() =&gt; {});
    }
    @Input() name: string;
  }
  </code></pre>
  <p>Here is the interceptor</p>
  <pre><code>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&lt;any&gt;,
      next: HttpHandler
    ): Observable&lt;HttpEvent&lt;any&gt;&gt; {
      console.log(this.activatedRoute.snapshot.paramMap.get('id'));
      //outputs null
  
      return next.handle(req);
    }
  }
  </code></pre>