Trying to use select of #ngrx/store causes undefined variable - angularjs

Question

I have been following https://github.com/ngrx/example-app very closely while creating a project in Angular.
I'm trying to select a value from a root reducer in my component, and it is not working.
The component (and line) in question:
import { Component } from '#angular/core';
import { Observable } from 'rxjs/Observable';
import { Store } from '#ngrx/store';
import * as rootReducer from '../../reducer/';
import * as layoutActions from '../../actions/layout';
#Component({
selector: 'app-nav-bar',
template: `
<nav>
<div class="logo">
linkme
</div>
<a routerLink="/home">Home</a>
<a routerLink="/groups">Groups</a>
<div class="button" (click)="toggleAddModal()">add thing</div>
</nav>
<add-link-modal [open]="showAddModal$ | async"></add-link-modal>
`,
styleUrls: ['./nav-bar.component.scss']
})
export class NavBarComponent {
showAddModal$: Observable<boolean>;
constructor(private store : Store<rootReducer.State>) {
****** this.showAddModal$ = store.select(rootReducer.getShowAddModal); ****** this is the line that is breaking
}
toggleAddModal()
{
this.store.dispatch({type: layoutActions.TOGGLE_ADD_MODAL})
}
}
app.module.ts
...
import { Store, StoreModule } from '#ngrx/store';
import { reducers } from './reducer/'
import { AppComponent } from './app.component';
...
#NgModule({
...
imports: [
...
StoreModule.provideStore(reducers)
...
],
..
})
export class AppModule { }
reducers/index.ts
import { combineReducers } from '#ngrx/store';
import { createSelector } from 'reselect';
import { ActionReducer } from '#ngrx/store';
import * as fromLinks from './links';
import * as fromLayout from './layout';
export interface State{
layout: fromLayout.LayoutState
links: fromLinks.LinkState
}
const globalReducers = {
layoutReducer:fromLayout.layoutReducer,
linksReducer: fromLinks.linkReducer
};
const globalState: ActionReducer<State> = combineReducers(globalReducers);
export function reducers(state: any, action: any) { return globalState(state, action);}
/*layout*/
export const getLayoutState = (state: State) => state.layout;
export const getShowAddModal = createSelector(getLayoutState, fromLayout.getShowAddModal);
reducers/layout.ts
import { ActionReducer, Action } from '#ngrx/store';
import * as layoutActions from '../actions/layout';
export interface LayoutState {
showAddModal: boolean;
}
const initialState: LayoutState = {
showAddModal: false,
};
export function layoutReducer(state = initialState, action: Action): LayoutState {
switch (action.type) {
case layoutActions.TOGGLE_ADD_MODAL:
const newBoolState = state.showAddModal ? false : true ;
return {
showAddModal: newBoolState
};
default:
return state;
}
}
export const getShowAddModal = (state: LayoutState) => state.showAddModal; *** This is the undefined value
I am getting a TypeError: Cannot read property 'showAddModal' of undefined, in the method getShowAddModal in layout.ts. Any idea what I'm doing wrong? It is almost exact as in the example. Here is the reducer folder containing the files I have been closely following: https://github.com/ngrx/example-app/tree/master/src/app/reducers
Any help will be appreciated.