Angular

Basic precaution: Ensure you have the tag
as the first child under your head tag in your index.html file. This tag tells that your app folder is the application
root. Angular 2 would then know to organize your links.
First step is to check if you are pointing to correct/latest routing dependencies in package.json -
"dependencies": {
......
"@angular/router": "3.0.0-beta.1",
......
}
Second step is to define the route as per it's class definition -
class Route {
path : string
pathMatch : 'full'|'prefix'
component : Type|string
.........
}
In a routes file (route/routes.ts), import all the components which you need to configure for different routing
paths. Empty path means that view is loaded by default. ":" in the path indicates dynamic parameter passed to the
loaded component.
Routes are made available to application via dependency injection. ProviderRouter method is called with
RouterConfig as parameter so that it can be injected to the components for calling routing specific tasks.
import { provideRouter, RouterConfig } from '@angular/router';
import { BarDetailComponent } from '../components/bar-detail.component';
import { DashboardComponent } from '../components/dashboard.component';
import { LoginComponent } from '../components/login.component';
import { SignupComponent } from '../components/signup.component';
export const appRoutes: RouterConfig = [
{ path: '', pathMatch: 'full', redirectTo: 'login' },
{ path: 'dashboard', component: DashboardComponent },
{ path: 'bars/:id', component: BarDetailComponent },
{ path: 'login', component: LoginComponent },
{ path: 'signup', component: SignupComponent }
];
export const APP_ROUTER_PROVIDER = [provideRouter(appRoutes)];
Third step is to bootstrap the route provider.
In your main.ts (It can be any name. basically, it should your main file defined in systemjs.config)
import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './components/app.component';
import { APP_ROUTER_PROVIDER } from "./routes/routes";
bootstrap(AppComponent, [ APP_ROUTER_PROVIDER ]).catch(err => console.error(err));
GoalKicker.com – Angular 2 Notes for Professionals 76