this.activatedRoute.params is undefined in Angular

Question

I have routing in app-routing.module.ts I want to get playerId and teamId from the router but it returns undefined in the console as I subscribe to it in AppComponent.

app.component.ts

export class AppComponent implements OnInit {
  constructor(private route: ActivatedRoute) {}
  ngOnInit(): void {
    this.route.params.pipe(map((p) => p['teamId'])).subscribe((param) => console.log(param)); //undefined
  }
}

app-routing.module.ts

const routes: Routes = [
  //{ path: 'auth', loadChildren: () => import('./modules/login/login.module').then((m) => m.LoginModule) },
  { path: 'teams', component: TeamsListComponent },
  { path: 'teams/:teamId', component: TeamDetailComponent },
  { path: 'teams/:teamId/players', component: PlayersListComponent },
  { path: 'teams/:teamId/players/:playerId', component: PlayerDetailComponent },
  { path: 'players', component: PlayersListComponent },
  { path: 'players/:playerId', component: PlayerDetailComponent },
];

The url: http://localhost:4291/teams/t1/players/p2