Angular Build - Uncaught TypeError: Cannot read property 'id' of undefined

Question

I have managed to build my angular app out as a dev build. I haven't done it as a production build yet as it gives me a few errors and i just need to test the dev build.

The dev build process goes fine, no errors or anything. I then use the files from the dist folder in a nginx docker container to host the files.

The problem is nothing is displayed but a white page and in the console i get an error saying 'Uncaught TypeError: Cannot read property 'id' of undefined'. The full message below doesn't seem to point to anything i have written and i've spent several hours searching online but can't find anything on this problem.

I've tried a few different things such as running 'npx ivy-ngcc' which i read manually compiles some stuff. Is there anyway i can get more details on the error to see if it's something i have done?

UPDATE So i have restored the line that i commented out in main.ts as mentioned in the comments below. I have also tried 'ng build --aot' as suggested which presents me with a series of errors that all seem to relate to devextreme components that are used. I find this strange as i started the project with the devextreme angular starter project from github.

i get messages such as:

'dx-scroll-view is not a valid HTML element'
'node_modules/devextreme-angular/ui/drawer.d.ts - error: appears in the NgModule.imports of SideNavOuterToolbarModule, but could not be resolved to an NgModule class'

Ok, so i think i might have solved it. I commented out "platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.error(err));" from line 14 of my main.ts file. Now i just get a white screen but that could be docker related, not sure — user7856951, Sep 10 '19 at 16:27
You cannot comment out that line of code, that line of code launches your application. See [Angular - Bootstraping](https://angular.io/guide/bootstrapping) — terahertz, Sep 10 '19 at 16:36
Have you tried clicking on "core.js:34425", perhaps it might show you a line of code that's written in your angular app that isn't working or perhaps it might be caused by a 3rd party lib — terahertz, Sep 10 '19 at 16:38
Just try your build version (ng build) to nginx not the production version. and try to get the error again. — Shohel, Sep 10 '19 at 16:45
i've posted an update above based on the suggestions you all have made — user7856951, Sep 11 '19 at 17:52

score 16 · Answer 1 · answered Mar 16 '20 at 17:03

16

If you go in the devtools and click on Sources, "Don't pause on exceptions" and check "Pause on caught expecptions" and continue until you get the "id error" you will find what module the error is thrown. In my case was a third party library called 'ngx-card/ngx-card' and it's module was the cause of the error (CardModule). Hope this will help find at least the cause of the error

answered Mar 16 '20 at 17:03

Rodrigo Búrigo Esmeraldino

181
1
3

1

Was useful for me. Thanks! – Morfinismo Apr 03 '20 at 00:16
I could solve my problem because of your answer. Thanks. – Nelson Teixeira Feb 22 '22 at 17:00

score 5 · Accepted Answer · answered Sep 12 '19 at 07:32

5

I managed to solve the problem by disabling ivy in the angular compilation options. As soon as i did that it worked building both dev and production versions and is now working perfectly within Nginx.

Thanks to everyone who offered help :)

answered Sep 12 '19 at 07:32

user7856951

503
1
4
15

1

this worked for me.. after disabling it showed me the error on my code to fix – mariomol Dec 10 '19 at 16:11
3

is there a way to use Ivy and get rid of this error? – Shaul Naim Mar 08 '20 at 13:37
How did you dsiable the ivy? – On the way to success Apr 19 '20 at 12:59
https://stackoverflow.com/questions/60290309/error-ng6002-appears-in-the-ngmodule-imports-of-appmodule-but-could-not-be-res answer from @MarcinG helped me solving this issue. I had added a component in the import instead of declarations of app.module.ts – TechEnthusiast Jun 28 '20 at 15:27
This is no longer an answer because Ivy is the only compiler left. You'll need to dig in and figure out the actual root cause of your error. – Coderer Sep 29 '20 at 10:13

tom10271 · Answer 3 · 2020-06-11T01:41:08.540

3

In tsconfig.json of your Angular project, put this to disable Ivy, the new Angular template engine

{
  ...
  "angularCompilerOptions": {
    "enableIvy": false
  }
}

edited Jun 11 '20 at 01:41

answered Apr 21 '20 at 04:03

tom10271

4,222
5
33
62

score 0 · Answer 4 · answered Sep 10 '19 at 16:30

Typically, if it's not something that you've written, it tends to be an issue w/ your implementation - i.e. "Visiting a food vendor and ordering a food item they don't provide".

I know it's not a specific answer, but ensuring that you have appropriately configured things in your app.module would be a good first step. Perhaps attempting to build w/ AOT will also give you some more verbose failures that stem from attempting to build out.

score 0 · Answer 5 · answered Mar 04 '20 at 20:21

Hopefully this helps another poor soul.

To anyone using devextreme, make sure you update your version to at least 19.2.5

https://github.com/DevExpress/devextreme-angular/issues/975#issuecomment-580172291

Starting with version 19.2.5 we support the IVY compiler.

score 0 · Answer 6 · answered Mar 30 '20 at 08:51

0

I had the same issue and fixed it by changing from

loadChildren: './app/page/account/account.module#AccountModule'

to

loadChildren: () =>
  import('./app/page/account/account.module').then(
    (m) => m.AccountModule
  )

in app-router.module.ts

answered Mar 30 '20 at 08:51

Thomas

225
5
13

score 0 · Answer 7 · answered Sep 29 '20 at 10:20

The root cause of your error is very likely to be a module that you needed to load explicitly but didn't, or a circular reference in your own modules. Rodrigo has a good answer but to be more specific, you need to find the registerNgModuleType function in Angular's core.js and set a conditional breakpoint on the first line. The condition should be !ngModuleType || !ngModuleType.ɵmod. (You can set a conditional breakpoint in most modern browsers by right-clicking the line number.)

Once you've paused execution just before the exception happens, you can look at the value of ngModuleType if it's not undefined, or walk up a frame or two in the scope and see what the value of imports was.

score 0 · Answer 8 · answered Oct 16 '20 at 09:23

For me, this issue occurred while using Storybook.

The reason it happened was because of the way I was precompiling the node modules. I was doing:

Incorrect

ngcc --properties es2015 browser module main --first-only

Correct

ngcc

Using this approach fixed it

Angular Build - Uncaught TypeError: Cannot read property 'id' of undefined

8 Answers8

Linked