Cannot read property 'ngModule' of undefined

Question

I have three module on app and one of them is main and is used in other two modules. When I start app and go straight to one of these modules who imports main module than this error show up in browser console:

core.js:4117 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'ngModule' of 

undefined
TypeError: Cannot read property 'ngModule' of undefined
    at isModuleWithProviders (core.js:26882)
    at expandModuleWithProviders (core.js:26876)
    at Array.map (<anonymous>)
    at Function.get (core.js:26534)
    at registerNgModuleType (core.js:24758)
    at core.js:24769
    at Array.forEach (<anonymous>)
    at registerNgModuleType (core.js:24769)
    at new NgModuleFactory (core.js:24872)
    at Compiler_compileModuleSync__POST_R3__ (core.js:27732)
    at resolvePromise (zone.js:832)
    at resolvePromise (zone.js:784)
    at zone.js:894
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:28122)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:601)

But when I start app again and directly go to main module (he works and everything is okay), and after that I go to one of module who import main module than they are work.

I think problem is about loading main module in these two modules. But i don't have clue what caused this reaction.

If someone has advice what to try to resolve this solution just suggest in answer.

Answer 1

As being indicated, the error is caused by Module importing.

How to find the precise place of the error? (especially in complex projects with multiple interdepending modules, like in projects of our team)

core.js:26131 Uncaught TypeError: Cannot read property 'ngModule' of undefined at isModuleWithProviders (core.js:26131) at expandModuleWithProviders (core.js:26125) at Array.map () at Function.get (core.js:25781) at registerNgModuleType (core.js:24103) at core.js:24114 at Array.forEach () at registerNgModuleType (core.js:24114) at new NgModuleFactory$1 (core.js:24211) at compileNgModuleFactory__POST_R3__ (core.js:27755)

In browser's Dev tools, put a Debug breakpoint at the line where the error occurs (in this case on core.js:26131). The code being there will not help us to much, because it is error logging function (probably defaultErrorLogger). Nevertheless, when the breakpoint gets triggered, we can go on our Dev Tools Call Stack back till the following code (or similar to it) where the error really occurred:

function isModuleWithProviders(value) {
    return value.ngModule !== undefined;
}

The error occurs when the value is undefined, so we can put here a conditional breakpoint with the condition !value, what will significally speed up the error-chasing process (being triggered only for the erranous module import).

When the conditional breakpoint is triggered, we can go up the Call Stack again up till the get method where we can access moduleType.name to find name of the module that causes the error.

In the second part, we open the module with that name where we can use divide-and-conquere approach, by commenting module imports, until the error is gone.