Being completely new to Angular 2, I find myself facing a routing dilemma that I can't seem to wrap my head around.
@Component({
selector: 'app',
templateUrl: 'app/app.template.html',
directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
{path:'/index', name:'Index', component: IndexComponent, useAsDefault: true},
{path:'/home', name: 'Home', component: HomeComponent}
])
export class AppComponent { }
Within the IndexComponent, there is a button with the attribute: [routerLink]="['Home']"
Upon clicking the button, the HomeComponent correctly appears and the URL changes from http://localhost/index to http://localhost/home as expected.
However, upon refreshing the page, the URL becomes http://localhost/home/index and displays the index template. If the browser is refreshed again, errors are thrown.
While I haven't delved too deeply into the documentation, my assumption is that refreshing the /home page is causing confusion for Angular 2 in determining the correct route. Is this accurate? How can I ensure that if the user refreshes the browser on the /home page, they are taken back to the /index page?