Angular 2 Router load header and footer every time

I am using Angular 2 beta and created a web page with 3 links/components.

I have separately created a header, mainnav and footer component which should only load once?

The problem is that when I navigate to the different links the whole page seems to reload. I don’t want the header, mainnav and footer to reload every time, it’s too slow.

Shouldn’t Angular just load the content and not have to reload everything else?

What am I doing wrong?

Here’s the code:

import {Component} from 'angular2/core';
import {RouteConfig} from 'angular2/router';
import {ROUTER_DIRECTIVES} from 'angular2/router';

import {mainnav} from './mainnav.component';
import {header} from './header.component';
import {footer} from './footer.component';

import {HomeComponent} from './home.component';
import {AboutComponent} from './about.component';
import {ContactComponent} from './contact.component';

    selector: 'my-app',
    directives: [mainnav, header, footer, ROUTER_DIRECTIVES],
    template: `



    { path: '/home', name: 'Home', component: HomeComponent, useAsDefault: true },
    { path: '/about', name: 'About', component: AboutComponent },
    { path: '/contact', name: 'Contact', component: ContactComponent }


export class AppComponent {


The links:

 <ul class="nav navbar-nav">
    <li class="active"><a href="home">Home</a></li>
    <li><a href="about">About</a></li>
    <li><a href="contact">Contact</a></li>

I know I’m not using [routerLink], would that make a difference in the loading?

Leave a Reply

2 Comment threads
0 Thread replies
Most reacted comment
Hottest comment thread
1 Comment authors
Jason Recent comment authors
newest oldest most voted
Notify of

now, routerLink can be written:

template: `
  <h1>Component Router</h1>
    <a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
    <a routerLink="/heroes" routerLinkActive="active">Heroes</a>



You should use routerLink instead

<ul class="nav navbar-nav">
    <li class="active"><a [routerLink]="['/Home']">Home</a></li>
    <li><a [routerLink]="['/About']">About</a></li>
    <li><a [routerLink]="['/Contact']">Contact</a></li>