Initial Reducer is causing error in production build with angular-cli

[fokusferit]

Environment:

npm 4.4.4
node v6.10.1

Dependancies:

  "dependencies": {
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "@ngrx/core": "1.2.0",
    "@ngrx/store": "2.2.1",
    "core-js": "^2.4.1",
    "rxjs": "^5.1.0",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "1.0.0",
    "@angular/compiler-cli": "^4.0.0",
    "@types/jasmine": "2.5.38",
    "@types/node": "~6.0.60",
    "@types/whatwg-fetch": "0.0.33",
    "codelyzer": "~2.0.0",
    "copyfiles": "1.2.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.0.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-mocha-reporter": "^2.2.3",
    "karma-nyan-reporter": "^0.2.5",
    "protractor": "~5.1.0",
    "ts-node": "~2.0.0",
    "tslint": "~4.5.0",
    "typescript": "~2.2.0"
  }

I've updated to the final angular-cli v1 version and also updated ngrx/store to 2.2.2 so everything is supporting ng4.

The current issue is that when I do ng build the development build is created and the application is up and running.

When I do ng build --prod and open my application I get the following errors:

main.2736e1d….bundle.js:1 ERROR TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at n (vendor.2326f7c….bundle.js:522)
    at Object.n [as a] (vendor.2326f7c….bundle.js:522)
    at t.get [as _INITIAL_REDUCER_56] (main.2736e1d….bundle.js:1)
    at t.get [as _Reducer_57] (main.2736e1d….bundle.js:1)
    at t.get [as _Store_61] (main.2736e1d….bundle.js:1)
    at t.getInternal (main.2736e1d….bundle.js:1)
    at t.get (vendor.2326f7c….bundle.js:295)
    at Je (vendor.2326f7c….bundle.js:232)
    at Ye (vendor.2326f7c….bundle.js:232)
    at ze (vendor.2326f7c….bundle.js:232)
    at Tr (vendor.2326f7c….bundle.js:253)
    at Cr (vendor.2326f7c….bundle.js:253)
    at yn (vendor.2326f7c….bundle.js:253)
    at Object.Gr [as createRootView] (vendor.2326f7c….bundle.js:253)

I've already updated how reducers are created and solved a lot of issues. The store initialization is currently looking this way:

// imports...
export const reducers = {
	auth,
	orgh,
	unit,
	agas,
	brands,
	addAgas: addAgas,
	suppliers: suppliers,
	cgs: cgs,
	modal: modal,
	agasSearch: agasSearch,
	csv: csv,
	config: config
};
export const developmentReducer = compose(combineReducers)(reducers);
export const productionReducer = combineReducers(reducers);

export default function reducer(state: any, action: any) {
  if (environment.production) {
    return productionReducer(state, action);
  } else {
    return developmentReducer(state, action);
  }
}

I've tried to debug the production bundle and discovered that there is the following check:

            Object.defineProperty(t.prototype, "_INITIAL_REDUCER_56", {
                get: function() {
                    return null == this.__INITIAL_REDUCER_56 && (this.__INITIAL_REDUCER_56 = c.a(this.__INITIAL_REDUCER_55)),
                    this.__INITIAL_REDUCER_56
                },
                enumerable: !0,
                configurable: !0
            }),

Here the function call c.a(this.__INITIAL_REDUCER_55) is returning the error because this.this.__INITIAL_REDUCER_55 is null.

It looks like some checks expect an object / function but instead a null is floating around which breaks the initialization.

[brandonroberts]

You need to update to version 2.2.2 of ngrx/store

[jjw99]

I am having the same issue, even in the non-aot build. I am at 2.2.2 of ngrx/store.

[hakonamatata]

Also having the same issue, actions and payloads are registered with Redux devtools, but nothing is stored it seems. State is just empty always. It works in Dev mode, but not in --prod or --aot

[jjw99]

Non-minified stack trace:

ERROR Error: Uncaught (in promise): TypeError: Cannot convert undefined or null to object
TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at combineReducers (http://dev:5555/node_modules/@ngrx/store/bundles/store.umd.js:130:30)
    at _initialReducerFactory (http://dev:5555/node_modules/@ngrx/store/bundles/store.umd.js:169:12)
    at AppModuleInjector.get (ng:///AppModule/module.ngfactory.js:306:105)
    at AppModuleInjector.get (ng:///AppModule/module.ngfactory.js:311:105)
    at AppModuleInjector.get (ng:///AppModule/module.ngfactory.js:326:101)
    at AppModuleInjector.getInternal (ng:///AppModule/module.ngfactory.js:675:46)
    at AppModuleInjector.NgModuleInjector.get (http://dev:5555/node_modules/@angular/core/bundles/core.umd.js:3563:44)
    at resolveDep (http://dev:5555/node_modules/@angular/core/bundles/core.umd.js:10958:45)

[jjw99]

I found a basic ngrx example at https://github.com/JimTheMan/Jims-Ngrx-Example/tree/master/jims-ngrx-eg/src/app and tried that to eliminate my code as being the cause, and I receive the same error.
Has anyone else gotten past this issue? I've spent a week trying various things and I'm completely stuck.

[franciscotln]

If you call Object.keys() on Chrome you'll get exactly this error

VM187:1 Uncaught TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at <anonymous>:1:8

I see these calls inside combineReducers function.

I'm not sure if your problem is this, but do not use export default when using AoT because it's not supported yet (same for fat arrow function). Same for the function combineReducers, it didn't work for me using AoT even if I tried with compose(). I needed a different workaround

[fokusferit]

@franciscotln I will try it out. Does it mean export default is causing the issue here with AoT ? If yes, this is definitely a big issue for me because this is never said anywhere.

[franciscotln]

@fokusferit export default doesn't work with aot yet (for sure). Perhaps that will be useful for you: https://github.com/rangle/angular-2-aot-sandbox#current-status

[fokusferit]

Thank you a lot ! This was something I needed back when I updated from beta angular-cli to final.

[fokusferit]

Updated: Yes all my issues are related to things which are basically not supported in AoT like default exports, func-expressions as const export etc.

For me it is now working as I changed

export default function reducer(){}
to
export function reducer(){}

I can only recommend everyone to check this table -> https://github.com/rangle/angular-2-aot-sandbox#current-status

[robwormald]

Please check this against NgRx v4, and if it’s still an issue, please reopen on https://github.com/ngrx/platform. Thanks!