Angular 2 Routing in SharePoint Framework - SPFX

Question

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 {} 

Answer 1

Please try to add provider in your component directly instead of adding module.ts

import { Component, OnInit } from '@angular/core';
import { IEmployee } from './employee';
import { EmployeeService } from './employee.service'

@Component({
    selector: 'list-employee',
    templateUrl: "app/Employee/employeeList.component.html",
    styleUrls: ['app/Employee/employeeList.component.css'],
    providers: [EmployeeService]
})

 1. employee.service.ts



import { Injectable } from '@angular/core';
import { IEmployee } from './employee';
@Injectable()
export class EmployeeService {
    getEmployees(): IEmployee[] {
        return [

        ];
    }
}