8

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.

savke
  • 268
  • 1
  • 3
  • 11
  • The problem might be coming from the way you import your modules. Can we see the three files you're talking about ? – Mambo Sep 18 '20 at 10:03
  • @Mambo I thought it was that, but than I try to shuffle my imports for module and there is no any progress about that. The problem is same. – savke Sep 18 '20 at 10:13
  • We're lacking information, but maybe this link can help : https://www.thetopsites.net/article/50538843.shtml – Mambo Sep 18 '20 at 10:16
  • 1
    I had this error in Ionic. It solved by stoping the live building and restarting again. I don't know why that happens :/ – A. Khaled Oct 19 '20 at 23:59

4 Answers4

19

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.

Sinisa Rudan
  • 561
  • 8
  • 10
  • 2
    Do you know how this can be done when doing `ng test`? The console outputs `at isModuleWithProviders (../../../packages/core/src/render3/jit/module.ts:560:38)` but I am not sure which file I can edit with console.log() to trace the issue. – user2268244 Mar 14 '22 at 17:49
  • Your tip is indeed very helpful. Just makes me wonder where does `As being indicated, the error is caused by Module importing.` it say so? – a p Oct 06 '22 at 12:57
  • 1
    @infinite, a long time has passed since writing the answer :) yet I'm probably referring to comments already added to the question. – Sinisa Rudan Nov 05 '22 at 18:39
1

Have bumped into this issue today and just in case some has similar issue as mine.

This is actually due to Circular Dependencies.

If you have index barrels index.ts which contains files you export to which is then shared to various directories then this issue will likely surface.

In order to FIX it:

  1. Go to your tsconfig.json > paths

    • Instead of declaring your path as this:
      • "@app/users": ["src/app/users/index.ts"],
    • Use this instead:
      • "@app/users/*": ["src/app/users/*"],

  2. So when your users directory has this kind of folder structure

       /users
      /models
         ...
      /services
         ...
      /components

    And you want to use the UserService under /services in a separate directory,

    • Then instead of this:

      • import { UserService } from '@app/users';

    • Use this:

      • import { UserService } from '@app/users/services';

This way you will be freed from circular dependency issues as you only import such service inside the users directory (limited to services exports) instead of calling the index barrel or index.ts that contains all of your exports under the users directory.

KShewengger
  • 7,853
  • 3
  • 24
  • 36
0

Can also go to correct place using Pause on exception option in dev tools and checking the checkbox "Pause on exception". It will pause at the undefined error line and then you back trace from Call stack.

Sushil Adokar
  • 370
  • 5
  • 9
0

Occasionally, experience this error while testing new standalone components with Jest. The real help is to import the module, which includes the target component. I assume (in version 15.2.5) that standalone components are not yet fully supported and require a classic module to reside.

Maxime Lyakhov
  • 140
  • 1
  • 11