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 }

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

I get following error


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'

    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';
export class EmployeeService {
    getEmployees(): IEmployee[] {
        return [


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.