Angular 2 Routing in SharePoint Framework – SPFX

Using Angular.IO site’s Routing example , I created a simple SPFX webpart with two components Dashboard and HeroDetails. When I try to run it through SharePoint site I see following error. Attaching my route values. I dont see any issues in default route etc. Let me know how do I fix.

    const routes: Routes = (
  { path: "", redirectTo: "/dashboard", pathMatch: "full" },
  { path: "dashboard",  component: DashboardComponent },
  { path: "detail/:id", component: StudentDetailComponent }
);

@NgModule({
  imports: ( RouterModule.forRoot(routes) ),
  exports: ( RouterModule ),
  providers:({provide: APP_BASE_HREF, useValue : "/" })
})
export class AppRoutingModule {} 

I get following error