Angular 2 Routing (3.0.0+) Setting the Routes

Help us to keep this website almost Ad Free! It takes only 10 seconds of your time:
> Step 1: Go view our video on YouTube: EF Core Bulk Extensions
> Step 2: And Like the video. BONUS: You can also share it!

Example

NOTE: This example is based on the 3.0.0.-beta.2 release of the @angular/router. At the time of writing, this is the latest version of the router.

To use the router, define routes in a new TypeScript file like such

//app.routes.ts

import {provideRouter} from '@angular/router';

import {Home} from './routes/home/home';
import {Profile} from './routes/profile/profile';

export const routes = [
    {path: '', redirectTo: 'home'},
    {path: 'home', component: Home},
    {path: 'login', component: Login},
];

export const APP_ROUTES_PROVIDER = provideRouter(routes);

In the first line, we import provideRouter so we can let our application know what the routes are during the bootstrap phase.

Home and Profile are just two components as an example. You will need to import each Component you need as a route.

Then, export the array of routes.

path: The path to the component. YOU DO NOT NEED TO USE '/........' Angular will do this automatically

component: The component to load when the route is accessed

redirectTo: Optional. If you need to automatically redirect a user when they access a particular route, supply this.

Finally, we export the configured router. provideRouter will return a provider that we can boostrap so our application knows how to handle each route.



Got any Angular 2 Question?