I am in the process of migrating my application to ngrx4.0.
I have followed the migration guide, and currently I have disabled dev-tools (as googling this issue pointed at a possible dev tools issue). My application compiles and runs, however in the browser console I have an error:
Error: Cannot convert undefined or null to object
Evaluating http://localhost:3000/app/main.js
Loading app
at Function.getPrototypeOf (<anonymous>)
at getParentCtor (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:1825:47)
at ReflectionCapabilities.parameters (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:1638:43)
at JitReflector.parameters (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:27439:44)
at CompileMetadataResolver._getDependenciesMetadata (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:15744:71)
at CompileMetadataResolver._getFactoryMetadata (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:15681:51)
at CompileMetadataResolver.getProviderMetadata (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:15954:43)
at eval (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:15875:49)
at Array.forEach (native)
at CompileMetadataResolver._getProvidersMetadata (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:15835:19)
my app.modules.ts looks like:
import { StoreModule } from '@ngrx/store';
import { reducers } from './_ngrx_reducers/index'
...typescript
@NgModule({
imports: [
BrowserModule,
...
StoreModule.forRoot(reducers)
],
Then my ngrx_reducers/index note you can see I import createSelector from @ngrx/store i have also tried using createSelector from the reselect package (same error)
export * from './oh_reducers';
import * as fromOrderHead from './oh_reducers';
import * as fromOrderLine from './ol_reducers';
import { Observable } from 'rxjs';
import { ActionReducerMap } from '@ngrx/store';
import { createSelector } from '@ngrx/store';
// Setup generic state so we can use multiple states for numerous reducers later on
export interface State {
orderhead: fromOrderHead.State;
orderline: fromOrderLine.State;
}
export const reducers: ActionReducerMap<State> = {
orderhead: fromOrderHead.OHreducer,
orderline: fromOrderLine.OLreducer
};
// get state from Orderhead reducer, we use this inside createSelector so we can
// create a 'query' to run against state
export const getOHState = (state: State) => state.orderhead;
// This function wants to return the selected orderHead
export const getOHEntities = createSelector(getOHState, fromOrderHead.getEntities);
export const getOrderIds = createSelector(getOHState, fromOrderHead.getIds);
export const getSelectedOH = createSelector(getOHState, fromOrderHead.getSelected);
And then the my reducers file has:
import * as orderhead_imp from '../_actions/orderhead';
import { OrderHead } from '../_models/index';
import { createSelector } from 'reselect';
// Set state to mimic that of imported model
export interface State {
orderids: string[];
entities: { [orderID: string]: OrderHead };
selectedOhID: string | null;
};
// Set initial state to empty
const initialState: State = {
orderids : [],
entities: {},
selectedOhID: null,
};
// REMOVED EACH REDUCER CASE EVENT
// functions to return values inside components
export const getEntities = (state: State) => state.entities;
export const getIds = (state: State) => state.orderids;
export const getSelectedId = (state: State) => state.selectedOhID;
// take orderID as input, return State that has matching orderID
export const getSelected = createSelector(getEntities, getSelectedId, (entities, selectedId) => {
return entities[selectedId];
How can I debug this further? As the console doesn't give much idea of where to go..
This does not seem to be a ngrx (at least to me). Probably you are passing somewhere Object.keys(null) or Object.assign(null). Why doesn't your console shows the line in which the error occurs?
My guess: Some Component or Reducer that consumes the store gets a null value and passes it to sth like Object.assign
So when upgrading, I made changes to my tsconfig to fix other things, which broke this, I had set my tsconfig to es6 as opposed to es5, reverting back and removing and adding in "lib": [ "es2015", "dom" ], fixed the issue. Thanks for your time @Renader
Most helpful comment
So when upgrading, I made changes to my tsconfig to fix other things, which broke this, I had set my tsconfig to es6 as opposed to es5, reverting back and removing and adding in "lib": [ "es2015", "dom" ], fixed the issue. Thanks for your time @Renader