Angular2 routing - manual url navigation

Question

I have a very simple app

My app.component.html looks like this:

<a [routerLink]="['/Test']">CLICK ME</a>
<div class="main-container">
    <router-outlet></router-outlet>
</div>

My app.component.ts looks like this:

@Component({
    selector: 'app',
    templateUrl: 'app/app.component.html',
    directives: [HomeComponent, TestComponent, ROUTER_DIRECTIVES]
})

@RouteConfig([
  {path: '/', component: HomeComponent, as: 'HomeComponent'},
  {path: '/test', component: TestComponent, as: 'Test'}
])

export class AppComponent { }

To navigate to my app, I go to

http://localhost/app

Which works perfect, it navigates me to my home component view as expected. When I click the "CLICK ME" button, I am navigated to

http://localhost/app/test

And my test component is rendered as expected... HOWEVER, if I manually navigate to

http://localhost/app/test

My home component is loaded instead of my test component...what gives? How can I set up routing so that manual navigation to the test url actually returns my test component's view in the router outlet? Is this possible? I don't want to go to the landing page every time...

Answer 1

This is probably due to server configration. Your server may be redirecting to index.html for any error path or path after context.

You should configure your server to rewrite the path than redirect.

Provide more info on server code and server being used

Answer 2

SOLVED - My bootstrap was missing some content...I had

bootstrap(AppComponent, [
  ROUTER_BINDINGS,
  bind(APP_BASE_HREF).toValue(location.pathname),
  bind(LocationStrategy).toClass(PathLocationStrategy )
  ]);

however this was incorrect, manually inputting:

bootstrap(AppComponent, [
  ROUTER_BINDINGS,
  bind(APP_BASE_HREF).toValue("/"),
  bind(LocationStrategy).toClass(PathLocationStrategy )
  ]);

Seemed to work. Thank you all for your help!

Answer 3

In the new router especification you need something like this:

router.navigateByUrl("/app");

or

router.navigate(['HomeComponent'], {relativeTo: route});