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

问题

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:

1. 'dx-scroll-view is not a valid HTML element'

2. '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'

回答1:

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

回答2:

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 :)

回答3:

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

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

回答4:

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.

回答5:

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.

回答6:

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

来源：https://stackoverflow.com/questions/57874644/angular-build-uncaught-typeerror-cannot-read-property-id-of-undefined