CODEWITHSUNDEEP
angularangular2-routing
Mames
Mames

Reputation: 95

Angular2 routing - manual url navigation

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

Upvotes: 2

Views: 3591

Answers (3)

Mames
Mames

Reputation: 95

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!

Upvotes: 0

Arpit Agarwal
Arpit Agarwal

Reputation: 4023

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

Upvotes: 0

Reginaldo Camargo Ribeiro
Reginaldo Camargo Ribeiro

Reputation: 768

In the new router especification you need something like this:

router.navigateByUrl("/app");

or

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

Upvotes: 1

Related Questions