Uncaught TypeError: Cannot read property 'xyz' of undefined

If you saw this error when serving up an angular project, what would it mean?

core.js:36228 Uncaught TypeError: Cannot read property 'id' of undefined
    at registerNgModuleType (core.js:36228)
    at core.js:36246
    at Array.forEach (<anonymous>)
    at registerNgModuleType (core.js:36242)
    at core.js:36246
    at Array.forEach (<anonymous>)
    at registerNgModuleType (core.js:36242)
    at new NgModuleFactory$1 (core.js:36407)
    at compileNgModuleFactory__POST_R3__ (core.js:42296)
    at PlatformRef.bootstrapModule (core.js:42663)

We can see this is very early in the bootstrap, and it's doing something with the ngModule attempting to register an NGModuleType of which it cannot read a property.

So Now What?

We are forced to go on an Angular module loading safari. A veritable rabbit hole; which no sprint knows the duration. 🍋🍋

We set a break here, in Angular.core.js land

function registerNgModuleType(ngModuleType) {
    if (ngModuleType.ɵmod.id !== null) {
        /** @type {?} */
        const id = ngModuleType.ɵmod.id;
        /** @type {?} */
        const existing = (/** @type {?} */ (modules.get(id)));
        assertSameOrNotExisting(id, existing, ngModuleType);
        modules.set(id, ngModuleType);

We found that the error was thrown on the MatPaginator ngModuleType.

We were able to set a conditional breakpoint which allowed us to recreate the error with only one breakpoint each time.

This MatPaginator moduletype did not have an id, thus the error.

But Why?

Get back after the safari ends.

Comments

[Efron]

Hi John,
Thanks for this. Do you have a workaround for this issue?

[John Peters]

No workaround, just follow the advice of the article by setting a break point on the line before the failure. Then look at which module is having problems. From there make sure your package.json has that module loaded. What module do you see?

[Yu-Jin]

how do you make sure that package.json has app.module loaded?

dev-to-uploads.s3.amazonaws.com/i/...

[John Peters]

In the breakpoint there should be a value for id and it's container object.

[John Peters]

App module is a part of bootstrap. Very early in run. I'm not sure why it wouldn't be first thing loaded.

[Yu-Jin]

ok this is pretty much a failing on my behalf but I think you didnt make clear that you can step over to the next function call from that breakpoint, i just assumed that the breakpoint would show the culprit from the start.

which I never, hence it stops at the very beginning, app.module.

[Yu-Jin]

this is a lifesaver. seriously! It confuses me to think I didn't try to step over from the breakpoint. was not thinking straight!

so my culprit module was: angular2-toaster, and in turn shall need to update it to: ngx-toastr

Thank you so much! :)

[John Peters]

Yes, I even created a bug with Angular team because they force the user to set breakpoints in their code to determine root cause. They should at least bubble the module name upward. But I'm finding that the Angular team, in general has no standards on error messaging throughout their code. This causes great pain down the road...

[Hank Chiu]

Try executing npx ngcc manually.

[John Peters]

The next time I have this issue, I'll definitely try this. I think you are recommending this because it will show more information, right? Does NGCC use a different loader than this one? registerNgModuleType (core.js:36228)

[Hank Chiu]

ngcc would compile your node_modules to be Ivy-compatible. In my case, I just add "postinstall": "ngcc" in package.json scripts to get rid of such errors.

[John Peters]

This is not a solution to problem described. Ng build uses ngcc

[linehammer]

In JavaScript almost everything is an object, null and undefined are exceptions. This error occurs when a property is read or a function is called on an undefined variable. Undefined means that a variable has been declared but has not been assigned a value. In JavaScript, properties and functions can only belong to objects. Since undefined is not an object type, calling a function or a property on such a variable causes the TypeError: Cannot read property of undefined.

If you are not sure a variable that will always have some value, the best practice is to check the value of variables for null or undefined before using them. To avoid getting these types of errors, you need to make sure that the variables you are trying to read do have the correct value. This can be done in various ways. You can do if checks before dealing with objects whose values are bound to change:

if (myVar !== undefined) {
...
}

Or

if (typeof(myVar) !== 'undefined') {
...
}

net-informations.com/js/iq/unerror...

[John Peters]

Not specifically helpful for the article. The problem was that an incomplete error message forced us to set breakpoints in Angular to find out why.

[Alvaro Felipe García Méndez]

Thanks to this I've found that a translation library was having issues, then I've deleted the node_modules folder and run npm i and worked as before. Now... Did your safari end? xD

[John Peters]

Yes safari ended but have been on many others since then. :)