I am trying to setup NgRx Data in sample project. The use case is to fetch Employee entities using Data Service and store them. So I defined data service, collection service and app module as below. I added All Employees button on home page which gets all employees in database. When I click on All Employees button, the end point is not being called. It seems I am missing something basic here
all-employees.component.html
<h1>All Employees</h1>
<ul>
<li *ngFor="let employee of employees$ | async">{{ employee.lastName }}, {{ employee.firstName }}</li>
</ul>
employee-data.service.ts
@Injectable()
export class EmployeeDataService extends DefaultDataService<Employee> {
constructor(http: HttpClient, httpUrlGenerator: HttpUrlGenerator, logger: Logger) {
super('Employee', http, httpUrlGenerator);
logger.log('Created custom Employee EntityDataService');
}
override getAll(): Observable<Employee[]> {
return this.http.get<Employee[]>('http://localhost:3000/employees');
}
}
and employee service like this employee.service.ts
@Injectable({
providedIn: 'root',
})
export class EmployeeService extends EntityCollectionServiceBase<Employee> {
constructor(serviceElementsFactory: EntityCollectionServiceElementsFactory) {
super('Employee', serviceElementsFactory);
}
}
and AppModule that ties all of these together app.module.ts
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
HttpClientModule,
RouterModule.forRoot(
[
{
path: 'all_employees',
component: AllEmployeesComponent,
},
],
{ initialNavigation: 'enabledBlocking' }
),
StoreModule.forRoot(reducers, {
metaReducers: !environment.production ? [] : [],
runtimeChecks: {
strictActionImmutability: true,
strictStateImmutability: true,
},
}),
EntityDataModule.forRoot({
entityMetadata: appEntityMetadata,
}),
EffectsModule.forRoot([]),
!environment.production ? StoreDevtoolsModule.instrument() : [],
StoreRouterConnectingModule.forRoot(),
],
providers: [EmployeeDataService],
bootstrap: [AppComponent],
})
export class AppModule {
constructor(entityDataService: EntityDataService, EmployeeDataService: EmployeeDataService) {
entityDataService.registerService('Employee', EmployeeDataService);
}
}
Code: The code uploaded to Github and run it by following the below instructions
- Clone the repo and install dependencies
- Start the sample JSON server
json-server --watch db.json
- Run the project
nx serve ngrx-demo
