I have a angular application where I wnat to route the user to a new page after succesfull login. But the webpage is not loading just the url is changing, I tried router-outlet but it renders the component under my login component. What I want is to route to a complete new page.

App-routing module:

const routes: Routes = [
  {path: 'dashboard' , component: DashboardComponent, canActivate: [AuthGuard]},
  {path: 'authenticate', component: LoginComponent},
  {path: '' , redirectTo: 'authenticate', pathMatch: 'full'}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [AuthGuard]
})
export class AppRoutingModule {

}

App component.html

  <nb-layout-header fixed >
    Moniesta
  </nb-layout-header>

  <nb-layout-column>
    <moniesta-login></moniesta-login>
    <router-outlet></router-outlet>
  </nb-layout-column>

  <nb-layout-footer fixed>
    <!-- Insert footer here -->
  </nb-layout-footer>

</nb-layout>

Method in my service to load to new url and webpage:

  authenticateUser(login: LoginModel){
    return this.http.post(environment.rootUrl + 'authenticate', {
      username: login.username,
      password: login.password,
    }).subscribe({
      next: (data) => {
       localStorage.setItem('token', data.toString())
        this.router.navigate(['/dashboard'])
      }, error: (error) => {
        this.isAuthenticated = false
      }
    })
  }

Could someone help me out and tell me what is wrong?