Angular 2 default route when base href not root

Question

I have these routes defined:

const routes: Routes = [
    { path: 'Home', component: DashboardComponent },
    { path: '', redirectTo: '/Home', pathMatch: 'full' }, 
    { path: '**', component: NotFoundComponent }, 
];

and base href set like this:

<base href="/Site1/" />

When I navigate to localhost/Site1 I get the NotFound component, when I was expecting it to redirect to /Home

If I try localhost/Site1/ (with trailing forward slash) it does match the default route and redirects to /Home

How can I get the first URL to redirect properly?

Just remove slash after Site1 like this <base href="/Site1" /> — digit
Dont you use any port? like 3000 or 4200? And have you implemented HashLocationStrategy? — The Hungry Dictator
Also having exact same problem, did you find any reason why it works like that ? — Maksym Cierzniak

Aravind Aravind · Accepted Answer · 2017-04-13T02:43:25

You add extra / in your route definitions

    const routes: Routes = [
            { path: 'Home', component: DashboardComponent },
            ///////////////////////////////////////////////////////////////////////
            //        removed the extra slash in the below line 
            ///////////////////////////////////////////////////////////////////////
            { path: '', redirectTo: 'Home', pathMatch: 'full' },  
            { path: '**', component: NotFoundComponent }, 
        ];

Angular 2 default route when base href not root

2 Answers