royter on redirect html not viewed in angular code example

Example 1: redirect angular

import { RoleComponent } from './role/role.component';
import { AppComponent } from './app.component';
import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: '', redirectTo: '/AppComponent', pathMatch: 'full' },
  { path: 'role', component: RoleComponent },

];

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule {
  constructor(private router: Router)
}

functionOnWhichRedirectShouldHappen(){
  router.navigate(['/role']);
}

Example 2: how to add changes every time you route navigate to page in angular

// Place import at the top
import { Router,NavigationStart} from '@angular/router';

//Place the code below inside your class
constructor(private router: Router){}

ngOnInit(){
   this.router.events.subscribe(event =>{
      if (event instanceof NavigationStart){
   		
      }
   })
}