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.