Trying to add multiple reducers to a forFeature lazy loading module 'ids' of undefined at selectIds'

Question

I am trying to implement ngrx on an app but having this problem of connecting the states. I have a root reducer that provides to store as StoreModule.forRoot(reducers) in the app.module.ts

rootreducer:

import * as fromAuth from 'app/auth/auth.reducer'
import { authReducer } from 'app/auth/auth.reducer';

export interface State {
  auth: fromAuth.State;
}
export const reducers: ActionReducerMap<State> = {
  auth: fromAuth.authReducer
};

I created an index.ts in the lazyloading folder lazyloading/index.ts:

export interface CollectionsState {
  collections: fromCollections.State;
  pages: fromPages.State;
}

export interface State extends fromRoot.State {
  collections: CollectionsState;
}

export const reducers = {
  collection: fromCollections.collectionReducer,
  page: fromPages.pageReducer
};


export const getCollectionsState = createFeatureSelector<CollectionsState>('collections');

export const getCollectionEntitiesState = createSelector(
  getCollectionsState,
  state => state.collections
);

And in the lazy loaded module provided it as StoreModule.forFeature('collections', reducers)

Then I try to use it in a component as

import { Store, select } from '@ngrx/store';
import * as actions from '@collections/state/actions/collection.actions';
import * as fromCollections from '@collections/state';
//get collections
this.cols = this.store.pipe(select(fromCollections.selectAll))
this.store.dispatch(  new actions.Query() );

This gives me an error, undefined at selectIds

IndexComponent.html:10 ERROR TypeError: Cannot read property 'ids' of undefined at selectIds (entity.es5.js:45) at eval (store.es5.js:567) at Array.map () ......

How can I fix this?