I recently went through the steps outlined in a tutorial on https://angular.io/tutorial/toh-pt6 to create a dashboard display for my specific project. Everything worked smoothly with a local mock, but I encountered issues when I switched to using the in-memory web API.
The error that keeps popping up is shown here: https://i.sstatic.net/qzo2c.png
I tried looking at the live code example (found at https://stackblitz.com/angular/vvxldjlmnna) to pinpoint what I might be doing wrong, but couldn't identify the problem.
To set up the in-memory web API, I first installed the necessary npm package by running
npm install angular-in-memory-web-api --saveIn my app.module.ts, I imported the required modules in the following order:
@NgModule({
FormsModule,
HttpClientModule,
HttpClientInMemoryWebApiModule.forRoot(InMemoryDataService),
// I also tried:
// HttpClientInMemoryWebApiModule.forRoot(
// InMemoryDataService, { dataEncapsulation: false }
// ),
AppRoutingModule
The dashboard display is implemented using the router-outlet and a router module defined like this:
const routes: Routes = [{ path: 'dashboard', component: DashboardComponent },
{ path: '', redirectTo: '/dashboard', pathMatch: 'full' }
];
@NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
})
In the in-memory-data.service.ts file:
export class InMemoryDataService implements InMemoryDbService {
createDb() {
const DashboardReports = [
{ id: 1, date: new Date(2018, 8, 3, 0, 0, 0, 0), overtime: 0, project: 'W31226', superintendent: 'Toon', km: 105, status: 1 },
{ id: 2, date: new Date(2018, 8, 4, 0, 0, 0, 0), overtime: 1.75, project: 'W31226', superintendent: 'Toon', km: 105, status: 2 }
];
return {DashboardReports}; // Pay close attention to the curly braces here
}
}
// Overrides the genId method to ensure that a hero always has an id.
// If the DashboardReports array is empty,
// the method below returns the initial number (21).
// if the DashboardReports array is not empty, the method below returns the highest
// report id + 1.
genId(dashboardreport: DashboardReport[]): number {
return dashboardreport.length > 0 ? Math.max(...dashboardreport.map(report => report.id)) + 1 : 21;
}
In the dashboard.service.ts file, I'm fetching data from the API using HttpClient. The DashboardService looks like this:
private dashboardDataUrl = 'api/dashboard';
constructor(private http: HttpClient) { }
/** GET Dashboard Reports from the server */
getDashboardReports (): Observable<DashboardReport[]> {
return this.http.get<DashboardReport[]>(this.dashboardDataUrl);
}
In the dashboard component, I retrieve the data by calling the service:
ngOnInit() {
this.getReports();
}
getReports(): void {
this.dashboardService.getDashboardReports().subscribe(reports => this.dashboardReports = reports);
}
Lastly, here is the structure of the DashboardReport class:
export class DashboardReport{
id: number;
date: Date;
overtime: number;
project: string;
superintendent: string;
km: number;
status: number;
}