Configuring Routes

Create app.routes.ts

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

const APP_ROUTES: Routes = [
  { path: '', component: HomeComponent },
  { path: '**', redirectTo: '/user/1', pathMatch: 'full' }
];

export const routing = RouterModule.forRoot(APP_ROUTES);

In app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule  } from '@angular/platform-browser';

import { AppComponent }   from './app.component';
import { routing } from "./app.routing";
import { HomeComponent } from "./home-component.component";


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

Using Routes

In app.component.ts

import { Component } from '@angular/core'
import { ROUTER_DIRECTIVES } from "@angular/router";

@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: `
  <h1>Routes Placeholder</h1>
  <router-outlet></router-outlet>
  `,
  directives: [ROUTER_DIRECTIVES]
})
export class AppComponent {
}

In index.html

<body>
  <app-root>Loading...</app-root>
</body>

Default Route

const APP_ROUTES: Routes = [
  { path: '', component: HomeComponent }
];

Not Found Route

const APP_ROUTES: Routes = [
  { path: '**', redirectTo: '/user/1', pathMatch: 'full' }
];
PreviousRoutingNextRoute Navigation

Last updated

Was this helpful?