Angular DevTools extension shows Uncaught TypeError: Cannot read properties of undefined...

I have this issue when I open Angular tab in Inspect menu in my browser (doesn't matter if it's Google Chrome 131.0.6778.140 or Microsoft Edge 131.0.2903.99) the Angular DevTools extension (ver. 1.0.18) starts to throw an Uncaught TypeError: Cannot read properties of undefined (reading 'ngModule') in console.



I have this same issue in my other projects that are Angular based but for the purposes of this question I will base on current project:

• Angular 18.0.5
• Based on Angular Material 18.05 and Tailwind 3.4.1

I tried to see what is causing this exception, here is part of core.mjs that throws this error:

deepForEach(containerDef.imports, moduleImport => {
if (isNextStepInPath) {
return;
}
isNextStepInPath = moduleImport.ngModule === lastContainerAddedToPath || moduleImport === lastContainerAddedToPath;
if (isNextStepInPath) {
providerToPath.get(prov)?.unshift(container);
}
});


When exception is thrown the whole moduleImport object is undefined. lastContainerAddedToPath is _MaterialModule

I found that in containerDef.imports there is case when one of it's array values is undefined:



I will be gladfull for any idea how to resolve this issue co I could debug using proper tools.

Continue reading...