Call platformBrowserDynamic().bootstrapModule(@NgModule) returns ASSERTION ERROR Type passed in is not NgModuleType, it does not have 'ɵmod' property

Question

I have an issue with "platformBrowserDynamic().bootstrapModule(app.app_module)" call, the error message is "Uncaught Error: ASSERTION ERROR: Type passed in is not NgModuleType, it does not have 'ɵmod' property". However I can see this property during debug precess: AppModule NgModule proto emod property

app.app_module is a new @NgModule instance bootstrapping my custom app component. I used TypeScript. Does anybody have any ideas why such case can happen?

Also additionally here is source JS code https://gist.github.com/sunnygleason/74e84acd0a03a925ec901594723ce876 I'm converting it into Typescript Angular CLI project. Here it is https://github.com/AnatoliYatskevich/WIA

Particular files I changed are: https://github.com/AnatoliYatskevich/WIA/blob/master/src/main.ts https://github.com/AnatoliYatskevich/WIA/blob/master/src/index.html https://github.com/AnatoliYatskevich/WIA/blob/master/src/app/app.component.ts https://github.com/AnatoliYatskevich/WIA/blob/master/src/app/app.module.ts

Tool WebStorm, sample formatting from there https://www.pubnub.com/docs/angular2-javascript/pubnub-javascript-sdk.

Thanks

Answer 1

The error happens due to erroneous Module importing (sometimes it is thrown as "Cannot read property 'ngModule' of undefined" which is also on a deeper level set as "Type passed in is not NgModuleType, it does not have 'ɵmod' property"). So the following procedure (a bit adjusted work for both cases)

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.