[IncomeApp] using ngrx with lazyload

3. IncomeApp/src/app/app-routing.module.ts

@@ -2,10 +2,16 @@ import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { LoginComponent } from './auth/components/login/login.component';
 import { RegisterComponent } from './auth/components/register/register.component';
+import { AuthGuardService } from './auth/guards/auth-guard.service';
 
 const routes: Routes = [
   { path: 'login', component: LoginComponent },
   { path: 'register', component: RegisterComponent },
+  {
+    path: '',
+    loadChildren: () => import('./income-expenses/income-expenses.module').then(m => m.IncomeExpensesModule),
+    canLoad: [ AuthGuardService ]
+  },
   { path: '**', pathMatch: 'full', redirectTo: '' },
 ];
 

3. IncomeApp/src/app/app.module.ts

@@ -1,8 +1,6 @@
-import { IncomeExpensesModule } from './income-expenses/income-expenses.module';
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { AppRoutingModule } from './app-routing.module';
-import { FormsModule } from '@angular/forms';
 import { AngularFireModule } from '@angular/fire';
 import { AngularFirestoreModule } from '@angular/fire/firestore';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -15,28 +13,25 @@ import { AppComponent } from './app.component';
 import { environment } from './../environments/environment';
 import { appReducers } from './app.reducer';
 import { AuthModule } from './auth/auth.module';
-import { SharedModule } from './shared/shared.module';
-import { DashboardComponent } from './dashboard/components/dashboard/dashboard.component';
 
 @NgModule({
   declarations: [
     AppComponent,
-    DashboardComponent
   ],
   imports: [
     AuthModule,
-    IncomeExpensesModule,
-    SharedModule,
     BrowserModule,
     AppRoutingModule,
-    FormsModule,
     AngularFireModule.initializeApp(environment.firebaseConfig),
     AngularFirestoreModule,
     BrowserAnimationsModule,
-    ToastrModule.forRoot({ progressBar: true }),
     ChartsModule,
+    ToastrModule.forRoot({ progressBar: true }),
     StoreModule.forRoot(appReducers),
-    StoreDevtoolsModule.instrument({ maxAge: 25, logOnly: environment.production })
+    StoreDevtoolsModule.instrument({ 
+      maxAge: 25,
+      // logOnly: environment.production
+    })
   ],
   providers: [],
   bootstrap: [AppComponent]

3. IncomeApp/src/app/app.reducer.ts

@@ -1,16 +1,13 @@
 import * as fromUI from './shared/ui.reducer';
 import * as fromAuth from './auth/auth.reducer';
-import * as fromIncomeExpenses from './income-expenses/income-expenses.reducer';
 import { ActionReducerMap } from '@ngrx/store';
 
 export interface AppState {
   ui: fromUI.State;
   auth: fromAuth.AuthState
-  incomeExpenses: fromIncomeExpenses.IncomeExpensesState
 }
 
 export const appReducers: ActionReducerMap<AppState> = {
   ui: fromUI.UIReducer,
   auth: fromAuth.AuthReducer,
-  incomeExpenses: fromIncomeExpenses.IncomeExpensesReducer
 }

3. IncomeApp/src/app/auth/auth.module.ts

@@ -4,16 +4,19 @@ import { RegisterComponent } from './components/register/register.component';
 import { FormsModule } from '@angular/forms';
 import { AngularFireAuthModule } from '@angular/fire/auth';
 import { CommonModule } from '@angular/common';
+import { RouterModule, } from '@angular/router';
+
 
 @NgModule({
-  declarations: [
-    LoginComponent,
-    RegisterComponent
-  ],
   imports: [
     CommonModule,
+    RouterModule,
     FormsModule,
     AngularFireAuthModule,
+  ],
+  declarations: [
+    LoginComponent,
+    RegisterComponent
   ]
 })
 export class AuthModule {}

3. IncomeApp/src/app/auth/guards/auth-guard.service.ts

@@ -1,15 +1,20 @@
 import { Injectable } from '@angular/core';
-import { CanActivate, Router } from '@angular/router';
+import { CanActivate, CanLoad } from '@angular/router';
 import { AuthService } from '../services/auth.service';
+import { take } from 'rxjs/operators';
 
 @Injectable({
   providedIn: 'root'
 })
-export class AuthGuardService implements CanActivate{
+export class AuthGuardService implements CanActivate, CanLoad{
 
   constructor(private authSrv: AuthService) { }
 
   canActivate() {
     return this.authSrv.isAuth();
   }
+
+  canLoad() {
+    return this.authSrv.isAuth().pipe(take(1));
+  }
 }

3. IncomeApp/src/app/dashboard/dashboard.module.ts

@@ -1,4 +1,3 @@
-import { IncomeExpensesModule } from './../income-expenses/income-expenses.module';
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { DashboardComponent } from './components/dashboard/dashboard.component';
@@ -21,13 +20,12 @@ const routes: Routes = [
 ];
 
 @NgModule({
-  declarations: [],
   imports: [
-    RouterModule.forChild(routes),
-    IncomeExpensesModule
+    RouterModule.forChild(routes)
   ],
   exports: [
-    RouterModule
-  ]
+    RouterModule,
+  ],
+  declarations: []
 })
 export class DashboardModule { }

3. IncomeApp/src/app/income-expenses/components/detail/detail.component.ts

@@ -1,7 +1,7 @@
+import { IncomeState } from './../../income-expenses.reducer';
 import { map } from 'rxjs/operators';
 import { Component, OnInit } from '@angular/core';
 import { Store } from '@ngrx/store';
-import { AppState } from 'src/app/app.reducer';
 import { Observable } from 'rxjs';
 import { IncomeExpenses } from '../../models/income-expenses.model';
 import { IncomeExpensesService } from '../../services/income-expenses.service';
@@ -15,7 +15,7 @@ export class DetailComponent implements OnInit {
 
   items$: Observable<IncomeExpenses[]>;
 
-  constructor(private store: Store<AppState>, private incomeSrv: IncomeExpensesService) { }
+  constructor(private store: Store<IncomeState>, private incomeSrv: IncomeExpensesService) { }
 
   ngOnInit() {
     this.items$ = this.store.select('incomeExpenses').pipe(map(incomeExpenses => incomeExpenses.items));

3. IncomeApp/src/app/income-expenses/components/income-expenses/income-expenses.component.ts

@@ -1,9 +1,9 @@
+import { IncomeState } from './../../income-expenses.reducer';
 import { IncomeExpensesService } from '../../services/income-expenses.service';
 import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormControl, Validators } from '@angular/forms';
 import { IncomeExpenses } from '../../models/income-expenses.model';
 import { Store } from '@ngrx/store';
-import { AppState } from 'src/app/app.reducer';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 
@@ -18,7 +18,7 @@ export class IncomeExpensesComponent implements OnInit {
   type: string = 'income';
   loading$: Observable<boolean>;
 
-  constructor(private incomeSrv: IncomeExpensesService, private store: Store<AppState>) { }
+  constructor(private incomeSrv: IncomeExpensesService, private store: Store<IncomeState>) { }
 
   ngOnInit() {
     this.loading$ = this.store.select('ui').pipe(map(ui => ui.isLoading));

3. IncomeApp/src/app/income-expenses/components/statistics/statistics.component.ts

@@ -1,7 +1,7 @@
+import { IncomeState } from './../../income-expenses.reducer';
 import { IncomeExpenses } from '../../models/income-expenses.model';
 import { Component, OnInit } from '@angular/core';
 import { Store } from '@ngrx/store';
-import { AppState } from 'src/app/app.reducer';
 import { Subscription } from 'rxjs';
 import { Label } from 'ng2-charts';
 
@@ -20,7 +20,7 @@ export class StatisticsComponent implements OnInit {
   doughnutChartLabels: Label[] = ['Ingesos', 'Egresos'];
   doughnutChartData: number[] = [];
 
-  constructor(private store: Store<AppState>) { }
+  constructor(private store: Store<IncomeState>) { }
 
   ngOnInit() {
     this.dataSubscription = this.store.select('incomeExpenses').subscribe(data => {

3. IncomeApp/src/app/income-expenses/income-expenses.module.ts

@@ -8,19 +8,25 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { ChartsModule } from 'ng2-charts';
 import { SharedModule } from '../shared/shared.module';
 import { DashboardModule } from '../dashboard/dashboard.module';
+import { DashboardComponent } from '../dashboard/components/dashboard/dashboard.component';
+import { StoreModule } from '@ngrx/store';
+import { IncomeExpensesReducer } from './income-expenses.reducer';
 
 @NgModule({
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    DashboardModule,
+    SharedModule,
+    ChartsModule,
+    StoreModule.forFeature('incomeExpenses', IncomeExpensesReducer)
+  ],
   declarations: [
+    DashboardComponent,
     IncomeExpensesComponent,
     StatisticsComponent,
     DetailComponent,
-    OrderIncomesPipe
-  ],
-  imports: [
-    CommonModule,
-    SharedModule,
-    ReactiveFormsModule,
-    ChartsModule    
+    OrderIncomesPipe,
   ]
 })
 export class IncomeExpensesModule { }

3. IncomeApp/src/app/income-expenses/income-expenses.reducer.ts

@@ -1,10 +1,16 @@
-import { IncomeExpenses } from './models/income-expenses.model';
 import * as incomeExpensesActions from './income-expenses.actions';
+import { IncomeExpenses } from './models/income-expenses.model';
+import { AppState } from '../app.reducer';
 
 export interface IncomeExpensesState { items: IncomeExpenses[]; }
+
+export interface IncomeState extends AppState {
+  incomeExpenses: IncomeExpensesState;
+}
+
 const initState: IncomeExpensesState = { items: [] };
 
-export function IncomeExpensesReducer (state = initState, action: incomeExpensesActions.actions) {
+export function IncomeExpensesReducer (state = initState, action: incomeExpensesActions.actions): IncomeExpensesState {
   switch (action.type) {
     case incomeExpensesActions.SET_ITEMS:
       return { items: [ ...action.items ]};

3. IncomeApp/src/app/shared/shared.module.ts

@@ -3,6 +3,7 @@ import { FooterComponent } from './components/footer/footer.component';
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { NavbarComponent } from './components/navbar/navbar.component';
+import { RouterModule } from '@angular/router';
 
 @NgModule({
   declarations: [
@@ -11,7 +12,8 @@ import { NavbarComponent } from './components/navbar/navbar.component';
     FooterComponent
   ],
   imports: [
-    CommonModule
+    CommonModule,
+    RouterModule
   ],
   exports: [
     NavbarComponent,