<div class="row">
  <div class="col-xs-12 col-sm-4">
    <div class="list-group">
      <a
        [routerLink] = "['/servers', 5, 'edit']"
        [queryParams] = "{allowEdit: '1'}"        <!-- Query parameter ? -->
        fragment = "loading"                      <!-- URL fragment #loading -->
        href="#"
        class="list-group-item"
        *ngFor="let server of servers">
        {{ server.name }}
      </a>
    </div>
  </div>
  <div class="col-xs-12 col-sm-4">
    <button class="btn btn-primary" (click)="onReload()">Reload Page Navigating Programatically</button>
    <a routerLink="/servers">Reload Page</a>
    <!--<app-edit-server></app-edit-server>-->
    <hr>
    <app-server></app-server>
  </div>
</div>

import { Component, OnInit } from '@angular/core';
import { ServersService } from './servers.service';
import {ActivatedRoute, Router} from '@angular/router';

@Component({
  selector: 'app-servers',
  templateUrl: './servers.component.html',
  styleUrls: ['./servers.component.css']
})
export class ServersComponent implements OnInit {
  private servers: {id: number, name: string, status: string}[] = [];

  constructor(private serversService: ServersService,
              private router: Router,
              private route: ActivatedRoute) { }

  ngOnInit() {
    this.servers = this.serversService.getServers();
  }

  /**
   * relativeTo specify the relative route and can be used to use relative path as '/servers' when the
   * programatica navigation is used
   */
  onReload() {
    this.router.navigate(['/servers'], {relativeTo: this.route});
  }

}

<h5>{{ server.name }}</h5>
<p>Server status is {{ server.status }}</p>

import { Component, OnInit } from '@angular/core';
import { ServersService } from '../servers.service';

@Component({
  selector: 'app-server',
  templateUrl: './server.component.html',
  styleUrls: ['./server.component.css']
})
export class ServerComponent implements OnInit {
  server: {id: number, name: string, status: string};

  constructor(private serversService: ServersService) { }

  ngOnInit() {
    this.server = this.serversService.getServer(1);    // retrieve the specific server related to this ID
  }

}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { UsersComponent } from './users/users.component';
import { ServersComponent } from './servers/servers.component';
import { UserComponent } from './users/user/user.component';
import { EditServerComponent } from './servers/edit-server/edit-server.component';
import { ServerComponent } from './servers/server/server.component';
import { ServersService } from './servers/servers.service';
import {RouterModule, Routes} from '@angular/router';

/**
 * It specify a path and the component that have to be showed as a page for this path (but still a single page application).
 * The view of the component is replaced in the DOM of outr single page by Angular
 * @type {[{path: string; component: UserComponent}]}
 */
const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'users', component: UsersComponent },
  { path: 'users/:id/:name', component: UserComponent},      /* Single parametrized (:id) user */
  { path: 'servers', component: ServersComponent },
  { path: 'servers/:id/edit', component: EditServerComponent }
]

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    UsersComponent,
    ServersComponent,
    UserComponent,
    EditServerComponent,
    ServerComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot(appRoutes)   // Register our routes in our application
  ],
  providers: [ServersService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Angular is running in the development mode. Call enableProdMode() to enable the production mode.
core.es5.js:1020 ERROR Error: Uncaught (in promise): InvalidCharacterError: Failed to execute 'setAttribute' on 'Element': '--' is not a valid attribute name.
Error: Failed to execute 'setAttribute' on 'Element': '--' is not a valid attribute name.
    at EmulatedEncapsulationDomRenderer2.DefaultDomRenderer2.setAttribute (platform-browser.es5.js:2825)
    at DebugRenderer2.setAttribute (core.es5.js:13653)
    at createElement (core.es5.js:9177)
    at createViewNodes (core.es5.js:12146)
    at callViewAction (core.es5.js:12626)
    at execComponentViewsAction (core.es5.js:12535)
    at createViewNodes (core.es5.js:12207)
    at createRootView (core.es5.js:12075)
    at callWithDebugContext (core.es5.js:13458)
    at Object.debugCreateRootView [as createRootView] (core.es5.js:12775)
    at EmulatedEncapsulationDomRenderer2.DefaultDomRenderer2.setAttribute (platform-browser.es5.js:2825)
    at DebugRenderer2.setAttribute (core.es5.js:13653)
    at createElement (core.es5.js:9177)
    at createViewNodes (core.es5.js:12146)
    at callViewAction (core.es5.js:12626)
    at execComponentViewsAction (core.es5.js:12535)
    at createViewNodes (core.es5.js:12207)
    at createRootView (core.es5.js:12075)
    at callWithDebugContext (core.es5.js:13458)
    at Object.debugCreateRootView [as createRootView] (core.es5.js:12775)
    at resolvePromise (zone.js:783)
    at resolvePromise (zone.js:754)
    at zone.js:831
    at ZoneDelegate.invokeTask (zone.js:424)
    at Object.onInvokeTask (core.es5.js:3881)
    at ZoneDelegate.invokeTask (zone.js:423)
    at Zone.runTask (zone.js:191)
    at drainMicroTaskQueue (zone.js:595)
    at <anonymous>
defaultErrorLogger @ core.es5.js:1020
ErrorHandler.handleError @ core.es5.js:1080
next @ core.es5.js:4503
schedulerFn @ core.es5.js:3635
SafeSubscriber.__tryOrUnsub @ Subscriber.js:238
SafeSubscriber.next @ Subscriber.js:185
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ core.es5.js:3621
(anonymous) @ core.es5.js:3912
ZoneDelegate.invoke @ zone.js:391
Zone.run @ zone.js:141
NgZone.runOutsideAngular @ core.es5.js:3844
onHandleError @ core.es5.js:3912
ZoneDelegate.handleError @ zone.js:395
Zone.runGuarded @ zone.js:157
_loop_1 @ zone.js:666
api.microtaskDrainDone @ zone.js:675
drainMicroTaskQueue @ zone.js:603
Promise resolved (async)
scheduleMicroTask @ zone.js:578
ZoneDelegate.scheduleTask @ zone.js:413
Zone.scheduleTask @ zone.js:235
Zone.scheduleMicroTask @ zone.js:255
scheduleResolveOrReject @ zone.js:829
ZoneAwarePromise.then @ zone.js:918
PlatformRef_._bootstrapModuleWithZone @ core.es5.js:4537
PlatformRef_.bootstrapModule @ core.es5.js:4522
122 @ main.ts:11
__webpack_require__ @ bootstrap 7f61d62415a6f5810bca:52
290 @ main.bundle.js:663
__webpack_require__ @ bootstrap 7f61d62415a6f5810bca:52
webpackJsonpCallback @ bootstrap 7f61d62415a6f5810bca:23
(anonymous) @ main.bundle.js:1