NgRx - The Complete Guide

Author: Your Name

src/app/app.module.ts

@@ -22,7 +22,6 @@ import {EffectsModule} from '@ngrx/effects';
 import {MatProgressSpinnerModule} from '@angular/material';
 import {metaReducers, reducers} from './reducers';
 import {AuthGuard} from './auth/auth.guard';
-import {EntityDataModule} from '@ngrx/data';
 
 
 const routes: Routes = [
@@ -65,7 +64,6 @@ const routes: Routes = [
         }),
         StoreDevtoolsModule.instrument({maxAge: 25, logOnly: environment.production}),
         EffectsModule.forRoot([]),
-        EntityDataModule.forRoot({}),
         StoreRouterConnectingModule.forRoot({
             stateKey: 'router',
             routerState: RouterState.Minimal

src/app/courses/courses.module.ts

@@ -21,92 +21,66 @@ import {MatCardModule} from '@angular/material/card';
 import {MatButtonModule} from '@angular/material/button';
 import {MatIconModule} from '@angular/material/icon';
 import {RouterModule, Routes} from '@angular/router';
-import {EntityDataService, EntityDefinitionService, EntityMetadataMap} from '@ngrx/data';
+import { EntityDataService, EntityDefinitionService, EntityMetadataMap} from '@ngrx/data';
 import {compareCourses, Course} from './model/course';
 
 import {compareLessons, Lesson} from './model/lesson';
-import {CourseEntityService} from './services/course-entity.service';
-import {CoursesResolver} from './services/courses.resolver';
-import {CoursesDataService} from './services/courses-data.service';
 
 
 export const coursesRoutes: Routes = [
-    {
-        path: '',
-        component: HomeComponent,
-        resolve: {
-            courses: CoursesResolver
-        }
-    },
-    {
-        path: ':courseUrl',
-        component: CourseComponent,
-        resolve: {
-            courses: CoursesResolver
-        }
-    }
-];
-
-const entityMetadata: EntityMetadataMap = {
-    Course: {
-        sortComparer: compareCourses
-    }
-};
+  {
+    path: '',
+    component: HomeComponent
 
+  },
+  {
+    path: ':courseUrl',
+    component: CourseComponent
+  }
+];
 
 @NgModule({
-    imports: [
-        CommonModule,
-        MatButtonModule,
-        MatIconModule,
-        MatCardModule,
-        MatTabsModule,
-        MatInputModule,
-        MatTableModule,
-        MatPaginatorModule,
-        MatSortModule,
-        MatProgressSpinnerModule,
-        MatSlideToggleModule,
-        MatDialogModule,
-        MatSelectModule,
-        MatDatepickerModule,
-        MatMomentDateModule,
-        ReactiveFormsModule,
-        RouterModule.forChild(coursesRoutes)
-    ],
-    declarations: [
-        HomeComponent,
-        CoursesCardListComponent,
-        EditCourseDialogComponent,
-        CourseComponent
-    ],
-    exports: [
-        HomeComponent,
-        CoursesCardListComponent,
-
-        EditCourseDialogComponent,
-        CourseComponent
-    ],
-    entryComponents: [EditCourseDialogComponent],
-    providers: [
-        CoursesHttpService,
-        CourseEntityService,
-        CoursesResolver,
-        CoursesDataService
-    ]
+  imports: [
+    CommonModule,
+    MatButtonModule,
+    MatIconModule,
+    MatCardModule,
+    MatTabsModule,
+    MatInputModule,
+    MatTableModule,
+    MatPaginatorModule,
+    MatSortModule,
+    MatProgressSpinnerModule,
+    MatSlideToggleModule,
+    MatDialogModule,
+    MatSelectModule,
+    MatDatepickerModule,
+    MatMomentDateModule,
+    ReactiveFormsModule,
+    RouterModule.forChild(coursesRoutes)
+  ],
+  declarations: [
+    HomeComponent,
+    CoursesCardListComponent,
+    EditCourseDialogComponent,
+    CourseComponent
+  ],
+  exports: [
+    HomeComponent,
+    CoursesCardListComponent,
+    EditCourseDialogComponent,
+    CourseComponent
+  ],
+  entryComponents: [EditCourseDialogComponent],
+  providers: [
+    CoursesHttpService
+  ]
 })
 export class CoursesModule {
 
-    constructor(
-        private eds: EntityDefinitionService,
-        private entityDataService: EntityDataService,
-        private coursesDataService: CoursesDataService) {
-
-        eds.registerMetadataMap(entityMetadata);
-
-        entityDataService.registerService('Course', coursesDataService);
+  constructor() {
 
-    }
+  }
 
 
 }

src/app/courses/home/home.component.ts

@@ -6,7 +6,6 @@ import {EditCourseDialogComponent} from '../edit-course-dialog/edit-course-dialo
 import {MatDialog} from '@angular/material';
 import {map, shareReplay} from 'rxjs/operators';
 import {CoursesHttpService} from '../services/courses-http.service';
-import {CourseEntityService} from '../services/course-entity.service';
 
 
 
@@ -19,13 +18,16 @@ export class HomeComponent implements OnInit {
 
     promoTotal$: Observable<number>;
 
+    loading$: Observable<boolean>;
+
     beginnerCourses$: Observable<Course[]>;
 
     advancedCourses$: Observable<Course[]>;
 
+
     constructor(
       private dialog: MatDialog,
-      private coursesService: CourseEntityService) {
+      private coursesHttpService: CoursesHttpService) {
 
     }
 
@@ -35,17 +37,26 @@ export class HomeComponent implements OnInit {
 
   reload() {
 
-    this.beginnerCourses$ = this.coursesService.entities$
+    const courses$ = this.coursesHttpService.findAllCourses()
+      .pipe(
+        map(courses => courses.sort(compareCourses)),
+        shareReplay()
+      );
+
+    this.loading$ = courses$.pipe(map(courses => !!courses));
+
+    this.beginnerCourses$ = courses$
       .pipe(
         map(courses => courses.filter(course => course.category == 'BEGINNER'))
       );
 
-    this.advancedCourses$ = this.coursesService.entities$
+
+    this.advancedCourses$ = courses$
       .pipe(
         map(courses => courses.filter(course => course.category == 'ADVANCED'))
       );
 
-    this.promoTotal$ = this.coursesService.entities$
+    this.promoTotal$ = courses$
         .pipe(
             map(courses => courses.filter(course => course.promo).length)
         );