Angular 2 Component Router

Question

I am going crazy trying to setup a simple test app on Angular 2. I have 3 pages/components that I want to load with the new Component Router. I've gotten it to semi work. Currently I have two problems...

1 - If you type the path of the component you want to go to Ex. "http://127.0.0.1:8080/Test2" instead of loading my Test2 page, it fails saying that it can't find that route.

2 - When trying to load different pages, the first time that I click on a link, it will properly load the page. All other pages will throw an exception when I click on a link.

This is my setup:

App.ts

import {Component, bootstrap, provide} from 'angular2/angular2';
import {ROUTER_PROVIDERS, ROUTER_DIRECTIVES, RouteConfig, APP_BASE_HREF} from 'angular2/router';

import {Test1} from './Test1';
import {Test2} from './Test2';
import {Test3} from './Test3';

@Component({
    selector: 'my-app',
    template: '<test1></test1><router-outlet></router-outlet>',
    directives: [ROUTER_DIRECTIVES, Test1, Test2]
})

@RouteConfig([
  {path: '/', as: 'Home', component: Test1},
  {path: '/Test2', as: 'Test2', component: Test2},
  {path: '/Test3', as: 'Test3', component: Test3}   
])

class AppComponent {
  constructor() {}
 }

bootstrap(AppComponent, [ROUTER_PROVIDERS, provide(APP_BASE_HREF, { useValue: '/' })]);

Test1.ts

import {Component, bootstrap} from 'angular2/angular2';
import {RouterLink} from 'angular2/router';

@Component({
    selector: 'test1',
    templateUrl: 'app/Test1.html',
    directives: [RouterLink] 
})
export class Test1 { }

Test1.html

<h1> Test 1 </h1>
<a [router-link]="['/Test2']">Test Link 2</a>

Test2.ts

import {Component, bootstrap} from 'angular2/angular2';
import {RouterLink} from 'angular2/router';

@Component({
    selector: 'test2',
    templateUrl: 'app/Test2.html',
    directives: [RouterLink]
})
export class Test2 { }

Test2.html

<h1> Test 2 </h1>
<a [router-link]="['/Test3']">Test Link 3</a>

Test3.ts

import {Component, bootstrap} from 'angular2/angular2';
import {RouterLink} from 'angular2/router';

@Component({
    selector: 'test3',
    templateUrl: 'app/Test3.html',
    directives: [RouterLink]
})
export class Test3 { }

Test3.html

<h1> Test 3 </h1>
<a [router-link]="['/Test2']">Test Link 2</a>

Thanks for the help guys!

Yakov's LocationStrategy suggestion fixed the problem. For anyone having the same issue, the full working code at https://github.com/zorthgo/Angular2QuickstartTest, and the working version of my App.ts looks like this:

import {Component, bootstrap, provide} from 'angular2/angular2';
import {ROUTER_PROVIDERS, ROUTER_DIRECTIVES, RouteConfig, APP_BASE_HREF, LocationStrategy, HashLocationStrategy} from 'angular2/router';

import {Test1} from './Test1';
import {Test2} from './Test2';
import {Test3} from './Test3';

@Component({
    selector: 'my-app',
    template: ` <a [router-link]="['/Home']">Test1 Link</a>
                <a [router-link]="['/Test2', {id: 3}]">Test2 Link</a>
                <a [router-link]="['/Test3']">Test3 Link</a>
                <router-outlet></router-outlet>`,
    directives: [ROUTER_DIRECTIVES, Test1, Test2,Test3]
})

@RouteConfig([
  {path: '/',          component: Test1, as: 'Home'},
  {path: '/Test2/:id', component: Test2, as: 'Test2'},
  {path: '/Test3',     component: Test3, as: 'Test3'}

])

class AppComponent {
  constructor() { }
 }

bootstrap(AppComponent, [ROUTER_PROVIDERS, provide(LocationStrategy, { useClass: HashLocationStrategy })]);

I think `test3.ts @Component` should have `templateurl:'app/Test3.html'` — Chandermani, Oct 24 '15 at 06:52
1 comes because you are using the standard html5 based location change. In such a case the server infrastructure should do url redirect so that correct content (root content) is loaded irrespective of the url hit. — Chandermani, Oct 24 '15 at 06:52
Hi Chandemani, thanks for pointing that out! I've edited the test3 template Url. Well, but I am sure that must be a way to load different pages just by typing their URL on the address bar. I just can't seem to get that to work. When I click on the first link, the address displays the correct path. But if I refresh or try to go directly to that location I get a **Cannot GET /Test2**. — Zorthgo, Oct 24 '15 at 13:34
I have a working sample here if that helps:http://www.syntaxsuccess.com/viewarticle/routing-in-angular-2.0 — TGH, Oct 24 '15 at 15:45

score 5 · Accepted Answer · edited Sep 27 '16 at 05:46

5

I did something similar and it works. Try this:

bootstrap(AppComponent, [ROUTER_PROVIDERS, provide(LocationStrategy, {useClass: HashLocationStrategy})]);

edited Sep 27 '16 at 05:46

Avinash Raj

172,303
28
230
274

answered Oct 24 '15 at 15:19

Yakov Fain

11,972
5
33
38

Thanks for the help Yakov! That worked prefectly. :) – Zorthgo Oct 24 '15 at 16:26
Had some problems with this as well, works like a charm! – Jan_dh Oct 25 '15 at 17:19
can we use `ROUTER_DIRECTIVES` in bootstrap function parameters? – allenhwkim Jan 11 '16 at 18:54
exactly don't now but normally we use only PROVIDERS at the time of bootstraping your app – Pardeep Jain Feb 24 '16 at 05:22

Angular 2 Component Router

1 Answers1