Debugging Ngrx 2019 - TNS/NG

app.component.tns.html

<RadSideDrawer
  (drawerOpening)="onDrawerOpening($event)" 
  (drawerClosing)="onDrawerClosing($event)"
  (drawerClosed)="onDrawerClosed($event)"
  (drawerPan)="onDrawerPan($event)"
  [drawerContentSize]="screenWidth"
  [gesturesEnabled]="(user$ | async).length > 1 ? true : false"
>
  <StackLayout tkDrawerContent class="drawer-container" #container>
    <GridLayout rows="auto" columns="21,68,200" class="user">
        <Image src="https://i.imgur.com/ttgE12O.png" col="1" width="68" height="68" #picture></Image>
        <StackLayout col="2" class="userInfo">
          <Label [text]="user$ | async" class="name"></Label>        
          <Label text="ID #{{ userId }}" class="userId"></Label>
        </StackLayout>      
    </GridLayout>
    <StackLayout>
      <GridLayout rows="60" columns="21,68,*" class="menu-item" [nsRouterLink]="['/home']" nsRouterLinkActive="menu-item-active" (tap)="onCloseMenu()" clearHistory="true">
        <FlexboxLayout justifyContent="center" col="1">
            <Label text="&#xe91e;" class="ico dashboard firstColumn"></Label>
        </FlexboxLayout>        
        <Label text="Dashboard" class="secondColumn" col="2"></Label>
      </GridLayout>
      <GridLayout rows="60" columns="21,68,*" class="menu-item" [nsRouterLink]="['/expenses']" nsRouterLinkActive="menu-item-active" (tap)="onCloseMenu()" clearHistory="true">
        <FlexboxLayout justifyContent="center" col="1">
          <Label text="&#xe914;" class="ico firstColumn expenses"></Label>
        </FlexboxLayout>
        <Label text="My Expenses" class="secondColumn" col="2"></Label>
      </GridLayout>
      <GridLayout rows="60" columns="21,68,*" class="menu-item"  [nsRouterLink]="['/approvals']" nsRouterLinkActive="menu-item-active" (tap)="onCloseMenu()" clearHistory="true">
        <FlexboxLayout justifyContent="center" col="1">
            <Label text="&#xe90f;" class="ico firstColumn approvals"></Label>            
        </FlexboxLayout>
        <Label text="Approvals" class="secondColumn" col="2"></Label>
      </GridLayout>
      <GridLayout rows="60" columns="21,68,*" class="disabled-item">
        <FlexboxLayout justifyContent="center" col="1">
            <Label text="&#xe900;" class="ico firstColumn proxy"></Label>            
        </FlexboxLayout>       
        <Label text="Proxy" class="secondColumn" col="2"></Label>
      </GridLayout>
      <GridLayout rows="60" columns="21,68,*" class="menu-item" [nsRouterLink]="['/settings']" nsRouterLinkActive="menu-item-active" (tap)="onCloseMenu()" clearHistory="true">
        <FlexboxLayout justifyContent="center" col="1">
            <Label text="&#xe910;" class="ico firstColumn settings"></Label>            
        </FlexboxLayout>
        <Label text="Settings" class="secondColumn" col="2"></Label>        
      </GridLayout>  
    </StackLayout>
  </StackLayout>
   <GridLayout tkMainContent #mainView>
      <page-router-outlet ></page-router-outlet>
      <ns-dock-monitor screenCover="0.5"></ns-dock-monitor>
   </GridLayout>  
</RadSideDrawer>

app.module.tns.ts

import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { NativeScriptModule } from 'nativescript-angular/nativescript.module';
import { NativeScriptHttpClientModule } from 'nativescript-angular/http-client';
import { NativeScriptUISideDrawerModule } from 'nativescript-ui-sidedrawer/angular/side-drawer-directives';
import { StoreModule } from '@ngrx/store';
import { reducers } from './reducers';
import { EffectsModule } from '@ngrx/effects';
import { AppEffects } from './app.effects';
import { AppRoutingModule } from './app-routing.module.tns';
import { AppComponent } from './app.component';
import { DashboardModule } from './dashboard/dashboard.module.tns';
import { AuthModule } from './auth/auth.module.tns';
import { UserEffects } from './auth/effects/user.effects';
import { environment } from '../environments/environment';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { NativeScriptDevToolsMonitors } from 'ngrx-devtools-nativescript';

import { LibNgOauthMobileService } from '@sec-spec/nativescript-lib-ng-oauth-mobile-service';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { HttpConfigInterceptor } from './services/http-config/http-config.interceptor.tns';



// Uncomment and add to NgModule imports if you need to use two-way binding
// import { NativeScriptFormsModule } from 'nativescript-angular/forms';


@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    NativeScriptModule,
    NativeScriptHttpClientModule,
    AppRoutingModule,
    DashboardModule,
    AuthModule,
    NativeScriptUISideDrawerModule,
    NativeScriptDevToolsMonitors,
    StoreModule.forRoot(reducers, {
      runtimeChecks: {
        strictStateImmutability: true
      }
    }),
    !environment.production ? StoreDevtoolsModule.instrument() : [],
    EffectsModule.forRoot([
      AppEffects,
      UserEffects
    ]),
  ],
  providers: [
    LibNgOauthMobileService,
    {
      multi: true,
      provide: HTTP_INTERCEPTORS,
      useClass: HttpConfigInterceptor,
    },
  ],
  bootstrap: [AppComponent],
  schemas: [NO_ERRORS_SCHEMA]
})
export class AppModule { }