Prevent Partail Page display: By using Resolver:

@Injectable()export class MovieResolver implements Resolve
     
       {  constructor(private movieService: MovieService) { }  resolve(route: ActivatedRouteSnapshot,          state: RouterStateSnapshot): Observable
      
        {    const id = route.paramMap.get('id');    return this.movieService.getMovie(+id);  }}
      
     

providers: [   MovieService,   MovieResolver]

{   path: 'movies/:id',   resolve: { movie: MovieResolver },   component: MovieDetailComponent},

ngOnInit(): void {   this.movie = this.route.snapshot.data['movie'];}

 

Display Loading spinner when switching page:

constructor(private router: Router) {   router.events.subscribe((routerEvent: Event) => {      this.checkRouterEvent(routerEvent);   });}checkRouterEvent(routerEvent: Event): void {   if (routerEvent instanceof NavigationStart) {      this.loading = true;   }   if (routerEvent instanceof NavigationEnd ||       routerEvent instanceof NavigationCancel ||       routerEvent instanceof NavigationError) {      this.loading = false;   }}

 

Enable route debugging:

RouterModule.forRoot([  {    path: '', component: ShellComponent,    children: [      { path: 'welcome', component: WelcomeComponent },      { path: 'movies', component: MovieListComponent },      { path: '', redirectTo: 'welcome', pathMatch: 'full' }    ]  },  { path: 'login', component: LoginComponent },  { path: '**', component: PageNotFoundComponent }], { enableTracing: true })