Routing verwenden

Routing bei Angular 2 sorgt dafür, dass man innerhalb der Anwendung navigieren kann ohne die Seiten jeweils „wirklich“ neuzuladen (was das Prinzip von Single Page Applications ad absurdum führen würde). Positiver Nebeneffekt: Es wird direkt mit SEO-freundlichen URLs gearbeitet.

Vorgehen:
Legt die Typescript-Datei „app.routing.ts“ im App-Verzeichniss („app“) an. In dieser Datei werden die Routing-Regeln definiert. Bei den Regeln muss die Reihenfolge beachtet werden, da sie von oben beginnend abgearbeitet werden.

app.routing.ts:

import { Routes, RouterModule } from "@angular/router";
import { AboutComponent } from "./about/about.component";
import { HomeComponent } from "./home/home.component";

const APP_ROUTES: Routes = [
    { path: '', redirectTo: '/home', pathMatch: 'full' },
    { path: 'home', component: HomeComponent },
    { path: 'about', component: AboutComponent },
];

export const routing = RouterModule.forRoot(APP_ROUTES);

In diesem Beispiel wird automatisch die „home“-Komponente verwendet, wenn die Startseite der Applikation angesteuert wird. Sollte der User den „about“-Bereich der Applikation aufrufen, wird direkt auf die „about“-Komponente verwiesen.

Die Router-Konfiguration selbst muss der Applikation bekannt gemacht werden:
app.module.ts:

...
import { routing } from "./app.routing";

@NgModule({
  declarations: [
...
  ],
imports: [
   ...
    routing
  ],
  providers: [
      ...
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Damit innerhalb einer Komponente andere Komponenten dynamisch geladen werden können, muss man in der jeweiligen Über-Komponente folgendes hinterlegen:

app.component.html:

<div class="container">
    <pm-header></pm-header>
    <router-outlet></router-outlet>
    <footer class="footer">
        Footer
    </footer>
</div> <!-- /container -->

Hier wird das Tag <router-outlet> (automatisch) gegen den jeweiligen gerouteten Komponenten-Inhalt ausgetauscht. Der Rest der Über-Komponente bleibt bestehen.

Zum Navigieren innerhalb Applikation muss auf spezielle Funktionen zurückgegriffen werden. Die Verlinkung via normalem <a>-Tag würde ein jeweiliges Neuladen der Seite erzwingen.
Der dafür notwendige Code sieht wie folgt aus:

<div class="header">
  <nav>
    <ul class="nav nav-pills pull-right">
      <li routerLinkActive="active" [routerLinkActiveOptions]="{exact: false}">
        <a [routerLink]="['/home']">Home</a>
      </li>
      <li routerLinkActive="active">
        <a [routerLink]="['/about']">About</a>
      </li>
    </ul>
  </nav>
</div>

WICHTIG:
Theoretisch würde man bereits mit dem gezeigten Beispiel innerhalb der Applikation navigieren können.
Wenn man aber die Seiten direkt ansurft oder die Seite im Browser neu lädt, würde eine Fehlermeldung angezeigt werden („Seite konnte nicht gefunden werden“). Das liegt daran, dass man für SEO-freundliche URLs dem Server _hinter_ der Applikation sagen muss, wie er mit diesen „schönen“ URLs umgehen muss.

Für Apache muss dafür das Modul „mod_rewrite“ aktiviert werden. Anschließend muss in der Angular 2 Applikation eine .htaccess-Datei mit folgendem Inhalt angelegt werden:

RewriteEngine on

        # Don't rewrite files or directories
        RewriteCond %{REQUEST_FILENAME} -f [OR]
        RewriteCond %{REQUEST_FILENAME} -d
        RewriteRule ^ - [L]

        # Rewrite everything else to index.html to allow html5 state links
        RewriteRule ^ index.html [L]

Damit sagt ihr dem Server, dass sämtliche Applikationsaufrufe über die Datei index.html geleitet werden sollen. Es bleibt zu beachten, dass die Datei .htaccess auch in den „dist“-Ordner mitkopiert werden muss, wenn die Anwendung deployt werden soll. Dazu muss in der Config-Datei der angular-cli (angular-cli.json) noch ein Eintrag im „assets“-Property hinterlegt werden.