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

Question

我已经设法将我的 angular 应用构建为开发版本。我还没有将其作为生产版本完成，因为它给了我一些错误，我只需要测试开发版本。

开发构建过程很顺利，没有任何错误。然后我使用 nginx docker 容器中的 dist 文件夹中的文件来托管文件。

问题是除了一个白页什么都没有显示，在控制台中我收到一条错误消息“未捕获的类型错误：无法读取未定义的属性 'id'”。下面的完整消息似乎没有指向我写的任何内容，我花了几个小时在网上搜索但找不到任何关于这个问题的信息。

我已经尝试了一些不同的东西，例如运行 'npx ivy-ngcc'，我读到它可以手动编译一些东西。无论如何，我是否可以获得有关错误的更多详细信息，以查看它是否是我所做的？

更新所以我恢复了我在 main.ts 中注释掉的行，如下面的评论所述。我还按照建议尝试了 'ng build --aot'，这给我带来了一系列错误，这些错误似乎都与所使用的 devextreme 组件有关。当我从 github.

的 devextreme angular 启动项目开始这个项目时，我发现这很奇怪

我收到如下消息：

'dx-scroll-view is not a valid HTML element'
'node_modules/devextreme-angular/ui/drawer.d.ts - 错误：出现在 SideNavOuterToolbarModule 的 NgModule.imports，但无法解析为 NgModule class'

Answer 1

通常情况下，如果它不是您编写的内容，则它往往是您的实施问题 - 即 "Visiting a food vendor and ordering a food item they don't provide"。

我知道这不是一个具体的答案，但确保您在 app.module 中进行了适当的配置将是很好的第一步。也许尝试使用 AOT 构建也会给您带来一些更详细的失败，这些失败源于尝试构建。

Answer 2

我设法通过在 angular 编译选项中禁用 ivy 来解决问题。一旦我这样做，它就可以同时构建开发和生产版本，并且现在在 Nginx 中完美运行。

感谢所有提供帮助的人:)

Answer 3

希望这能帮助到另一个可怜的人。

对于任何使用 devextreme 的人，请确保将您的版本至少更新到 19.2.5

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

Starting with version 19.2.5 we support the IVY compiler.

Answer 4

如果你进入 devtools 并点击 Sources，"Don't pause on exceptions" 并检查 "Pause on caught expecptions" 并继续直到你得到 "id error" 你会发现哪个模块抛出了错误。在我的例子中是一个名为 'ngx-card/ngx-card' 的第三方库，它的模块是错误的原因 (CardModule)。希望这至少有助于找到错误的原因

Answer 5

我遇到了同样的问题并通过从

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

至

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

在app-router.module.ts

Answer 6

在您的 Angular 项目的 tsconfig.json 中，将其禁用新的 Angular 模板引擎

Ivy

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

Answer 7

错误的根本原因很可能是您需要显式加载但没有加载的模块，或者您自己的模块中的循环引用。 Rodrigo 有一个很好的答案，但更具体地说，你需要在 Angular 的 core.js 中找到 registerNgModuleType 函数并设置一个 条件断点 在第一行。条件应该是!ngModuleType || !ngModuleType.ɵmod。（您可以在大多数现代浏览器中通过 right-clicking 行号设置条件断点。）

在异常发生之前暂停执行后，您可以查看 ngModuleType 的值（如果它不是未定义的），或者在范围内向上移动一两帧并查看imports 是。

Answer 8

对我来说，这个问题是在使用 Storybook 时发生的。

它发生的原因是因为我预编译节点模块的方式。我在做：

不正确

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

正确

ngcc

使用此方法修复它

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

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

node.js

webpack

angular-cli

angular