CODEWITHSUNDEEP
angularangular-router
Vessaredan
Vessaredan

Reputation: 49

Angular7 router is refreshing entire screen

Angular7 router is refreshing the entire page whenever the route changes. From app.component.html I have tried having the router-outlet directly on this page as well as wrapping it in another controller on the app.component.html page. No matter which options is used everytime route changes, entire screen is reloaded. I only want the router-outlet area to reload. I have never had this issue before with routing.

From app.component.html I have tried having the router-outlet directly on this page as well as wrapping it in another controller on the app.component.html page. No matter which options is used everytime route changes, entire screen is reloaded.

<!--Header Component-->
<app-header></app-header>
<div class="container-fluid" style="height:100%;">
  <div class="row" style="height:100%">
    <div class="col-2 sideNavContainer">
      <!--Side Nav Component-->
      <app-side-nav></app-side-nav>
    </div>
    <div class="col-10 main-container">
      <!--<div class="container-fluid">-->
      <div class="row dark-blue-bar" style="width: 100%;">
        <!--Tab Bar Component-->
        <app-tab-bar style="width: 100%"></app-tab-bar>
      </div>
      <div class="row" style="padding-left: 10px; margin-left: 0px">
        <!--Main Content Component-->
        <router-outlet></router-outlet>
      </div>
      <!--</div>-->
    </div>
  </div>
</div>

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { DashboardComponent } from './core/dashboard/dashboard.component';
import { CodeSetOverviewComponent} from './core/code-set-overview/code-set-overview.component';

const routes: Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path: 'dashboard', component: DashboardComponent},
  { path: 'codeSetOverview', component: CodeSetOverviewComponent}
];

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

SIDE NAV LINK EXAMPLE

<ul class="nav flex-column side-nav">
    <li class="nav-item">
      <a class="nav-link active" href="dashboard" rel="no-refresh"><i class="fas fa-columns" style="color:white; padding-right: 10px"></i>DASHBOARD</a>
    </li>

When route changes, only refresh the router-outlet section and not entire page.

Upvotes: 0

Views: 2522

Answers (3)

Taher
Taher

Reputation: 258

this should fix it :

 <li class="nav-item">
      <a [routerLink]='dashboard'>DASHBOARD
 </li>

Upvotes: 0

Rambou
Rambou

Reputation: 1058

Another solution would be to change your routing strategy to Hash. This can be achieved by set useHash to true. RouterModule.forRoot(routes, {useHash: true}) Then your dashboard link would be like localhost:4040/#/dashboard and not refreshing your browser's tab.

Clearly, it's a not better solution than the others mentioned above but it suits your case.

Upvotes: 0

Johar Zaman
Johar Zaman

Reputation: 2103

You should not be using href in Angular Template in order to navigate without reloading.

You should use routerLink

Example: 

<a class="nav-link active" [routerLink]="['/dashboard']" rel="no-refresh"><i class="fas fa-columns" style="color:white; padding-right: 10px"></i>DASHBOARD</a>

Upvotes: 4

Related Questions