CODEWITHSUNDEEP
angular
user3044394
user3044394

Reputation: 135

Angular 5 - Page refreshing on route instead of DOM update

I started a fresh Angular 5 project and implemented routing by following the Angular Documentation, however the page is refreshing on a routing event instead of updating the DOM.

Below are my imports for app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
...
const appRoutes: Routes = [
    { path: 'app-signup', component: SignupComponent, data: { title: 'Sign Up' } 
},
...
imports: [
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true } // <-- debugging purposes only
    ),
    BrowserModule
],

Also, here is the relevant app.component.html code:

...
<router-outlet></router-outlet>
...
<a href="/app-signup" routerLinkActive="active">Sign Up,</a>

After the page reloads I am seeing the correct component being displayed within router-outlet, but the DOM should be updating with no refresh.

Upvotes: 0

Views: 738

Answers (1)

Safiyya
Safiyya

Reputation: 1393

Replace href by routerLink

href is html anchor tag attribute to navigate to another page. Here a new page will be loaded.

RouterLink is used to achieve the same functionality but angular 2 or above are single page applications, where the page should not reload. RouterLink navigates to New Url and the component is rendered in place of routeroutlet without reloading the page.

Upvotes: 1

Related Questions