Routing#

npm install @angular/router --save

• router definition
• router content: <router-outlet> (dynamic content)
• ([routerLink]}
• RouterModule.forRoot(appRoutes);
• RouterModule.forChild(appRoutes);
• declarations: [<components-array>,...

app.routing.ts:

import {Routes, RouterModule, RouterStateSnapshot, ActivatedRouteSnapshot} from '@angular/router';

import {DashboardComponent} from './dashboard/dashboard.component';
import {SettingsComponent} from './settings/settings.component';
import {AboutComponent} from './about/about.component';
import {LoginComponent, LoginGuard, UserResolver} from './login/index';
import {NotFoundComponent} from './not-found/not-found.component';
import {tasksRoutes, tasksRoutingComponents, tasksRoutingProviders} from './tasks/tasks.routing';
import {ChatComponent} from './chat-component/chat.component';
import {RESOLVED_TOKEN} from './app.tokens';

export const appRoutes: Routes = [
  {path: 'dashboard', component: DashboardComponent, data: {title: 'Startseite'}}, // Dashboard unter /dashboard
  {path: '', redirectTo: '/dashboard', pathMatch: 'full'},
  {
    path: 'settings', component: SettingsComponent,
    data: {
      title: 'Einstellungen'
    },
    resolve: {
      user: UserResolver,
      token: RESOLVED_TOKEN
    }
  },

  {path: 'about', component: AboutComponent, data: {title: 'Über uns'}},
  {path: 'login', component: LoginComponent},

  {path: 'chat', component: ChatComponent, outlet: 'bottom'},

  {path: 'tasks', canActivate: [LoginGuard], children: tasksRoutes},


  /** Redirect Konfigurationen **/
  {path: '**', component: NotFoundComponent}, // immer als letztes konfigurieren - erste Route die matched wird angesteuert
];

export const appRouting = RouterModule.forRoot(appRoutes);

export const routingComponents = [DashboardComponent, SettingsComponent, AboutComponent, LoginComponent, ChatComponent, NotFoundComponent,
                                 ...tasksRoutingComponents];

app.module.ts:

import {routingComponents, appRouting, routingProviders} from './app.routing';

@NgModule({
  imports: [BrowserModule, FormsModule, ReactiveFormsModule,
            appRouting],
  entryComponents: [AppComponent],
  providers: [
    routingProviders,
    LoginService,
    Title,
    {provide: AUTH_ENABLED, useValue: true},
    TaskService
  ],
  declarations: [AppComponent,
    routingComponents,
    ShowErrorComponent,
    APPLICATION_VALIDATORS],
  bootstrap: [AppComponent]
})            

app.component.html:

<a routerLink='/'>Start</a>
<a routerLink='/settings'>Settings</a>
...
<router-outlet></router-outlet>