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...

Have you set your base href in the index.html? it should be like the [docs suggest](https://angular.io/docs/ts/latest/guide/router.html#!#base-href) `` — Jarod Moser, Jul 14 '16 at 17:09
beta17, base href is fine, I have a re-write rule to serve /app/index.html automatically which I thought was required to get PathLocationStrategy to work...but it does not...using node lite server — Mames, Jul 14 '16 at 17:52

score 1 · Answer 1 · answered Jul 14 '16 at 17:08

1

In the new router especification you need something like this:

router.navigateByUrl("/app");

or

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

answered Jul 14 '16 at 17:08

Reginaldo Camargo Ribeiro

767
4
15

score 0 · Answer 2 · answered Jul 14 '16 at 17:11

0

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

answered Jul 14 '16 at 17:11

Arpit Agarwal

3,993
24
30

you are correct, in my server web.config I have Removing this line and testing - I now 404 after I refresh on the http://localhost/app/test link – Mames Jul 14 '16 at 17:28
As I said you need to configure the path for rewrite than redirect. Which server you are using that may help in suggesting how to rewrite – Arpit Agarwal Jul 14 '16 at 17:31
For Apache tomcat: https://tomcat.apache.org/tomcat-8.0-doc/rewrite.html – Arpit Agarwal Jul 14 '16 at 17:34
node lite..looking at similar stackoverflow questions it seems as though this re-write rule is correct. I just don't understand why it does not work with PathLocationStrategy routing – Mames Jul 14 '16 at 17:54

score 0 · Answer 3 · answered Jul 14 '16 at 18:06

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!

Angular2 routing - manual url navigation

3 Answers3

Linked