How to handle parameters in url on browser refresh in angular app?

My app is loading url “localhost:4200/teams/team1” on a button click.when I refresh browser, I want my app to load the ‘localhost:4200/teams/team1’. But it looks like angular is not able to fetch “:name” parameter in url whenever I refresh my browser and it redirects it to PageNotFoundComponent. Please help me to find solution.

const routes: Routes = [
  {path:'',component:LandingPageComponent},
  {path:'teams/:name', canActivate:[AuthGuard], component: TeamComponent},

  {path:'error-handler',component:ErrorHandlerComponent},
  {path: '**', component:PageNotFoundComponent ,pathMatch:'full'}

];

Source: New feed
Source Url How to handle parameters in url on browser refresh in angular app?