stuck on angular2 (RC1) routing - angularjs

Question

I'm new to Angular, starting out with Angular 2. I created a skeleton application (with the help of npm). My app has two components:
app.component.ts
import { Component } from '#angular/core';
import {Routes, ROUTER_DIRECTIVES} from '#angular/router';
import { InviteComponent } from './howdy.component';
#Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})
#Routes([
{ path: '/', component: AppComponent },
{ path: '/howdy', component: HowdyComponent },
])
export class AppComponent{}
howdy.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
template: '<h1>Howdy</h1>'
})
export class HowdyComponent{}
main.ts
import { bootstrap } from '#angular/platform-browser-dynamic';
import {ROUTER_PROVIDERS} from '#angular/router';
import { AppComponent } from './app.component';
bootstrap(AppComponent, [
ROUTER_PROVIDERS
]);
What I want to start off with is simple routing. I'd like the "\" route to load app.component, and "\howdy" route to load howdy.component.
Right now app.component loads up no matter what route is used.
What am I doing wrong?

Answer 1

Firstly, you have to have <router-outlet> somewhere, to mark a place to render the component content in. Otherwise, You are not putting them anywhere. Remember, this is a Single Page Application not like static pages. Unlike static page, SPA's has a single starting point. In your case it's main.ts which always bootstraps to AppComponent.
Secondly, AppComponent is the component that is responsible for routing, so you can't route back to it. You will have loop. So, you need to set another component for the main route /.
Any way, here is your code edited to make it work, check this plunk:
import { Component } from '#angular/core';
import {Routes, ROUTER_DIRECTIVES} from '#angular/router';
import { HowdyComponent } from './howdy.component';
#Component({
selector: 'main-route',
template: '<h1>My First Angular 2 App</h1>'
})
export class MainComponent{}
#Component({
selector: 'my-app',
directives:[ROUTER_DIRECTIVES],
template: `
<a [routerLink]="['/howdy']">Howdy</a>
<a [routerLink]="['/']">Main</a>
<router-outlet></router-outlet>
`
})
#Routes([
{ path: '/', component: MainComponent },
{ path: '/howdy', component: HowdyComponent }
])
export class AppComponent{}
Alternatively, check this plunk , you can just remove the route to / and keep the one for /howdy
#Component({
selector: 'my-app',
directives:[ROUTER_DIRECTIVES],
template: `
<a [routerLink]="['/howdy']">Howdy</a>
<a [routerLink]="['/']">Main</a>
<h1>This line will be visible everywhere .. </h1>
<router-outlet></router-outlet>
`
})
#Routes([
{ path: '/howdy', component: HowdyComponent }
])
export class AppComponent{}
Also, regardless of which approach you choose, don't forget to add <base href="./"> in index.html

Answer 2

Missing router-outlet, can be the reason.
AppComponent is always loaded first, /invite will be stuffed in router-outlet

Answer 3

You need to add
import {ROUTER_PROVIDERS, APP_BASE_HREF} from 'angular2/router';
//...
bootstrap(AppComponent, [ROUTER_PROVIDERS]);
in your main.ts file