Angular Build - Uncaught TypeError：无法读取未定义的属性“id”答案

【问题标题】：Angular Build - Uncaught TypeError: Cannot read property 'id' of undefinedAngular Build - Uncaught TypeError：无法读取未定义的属性“id”
【发布时间】：2020-01-12 10:31:32
【问题描述】：

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

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

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

我尝试了一些不同的方法，例如运行“npx ivy-ngcc”，我手动阅读它会编译一些东西。无论如何我可以获取有关错误的更多详细信息，以查看它是否是我所做的事情？

更新所以我已经恢复了我在 main.ts 中注释掉的行，如下面的 cmets 中所述。我还按照建议尝试了“ng build --aot”，这给我带来了一系列错误，这些错误似乎都与使用的 devextreme 组件有关。当我从 github 使用 devextreme angular starter 项目启动项目时，我觉得这很奇怪。

我收到如下消息：

'dx-scroll-view 不是有效的 HTML 元素'
'node_modules/devextreme-angular/ui/drawer.d.ts - 错误：出现在 SideNavOuterToolbarModule 的 NgModule.imports，但无法解析为 NgModule 类'

【问题讨论】：

好的，我想我可能已经解决了。我注释掉了“platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.error(err));”从我的 main.ts 文件的第 14 行开始。现在我只是得到一个白屏，但这可能与 docker 相关，不确定
你不能注释掉那行代码，那行代码会启动你的应用程序。见Angular - Bootstraping
您是否尝试过单击“core.js:34425”，它可能会显示您的 Angular 应用程序中编写的一行代码不起作用，或者可能是由第三个代码引起的党库
只需尝试将您的构建版本（ng build）转换为 nginx 而不是生产版本。并尝试再次获取错误。
我根据大家提出的建议在上面发布了更新

标签： node.js angular webpack angular-cli

【解决方案1】：

如果你进入 devtools 并点击 Sources，“Don't pause on exceptions”并选中“Pause on catched execptions”并继续，直到你得到“id error”，你会发现抛出错误的模块。就我而言，是一个名为“ngx-card/ngx-card”的第三方库，它的模块是错误的原因（CardModule）。希望这将有助于至少找到错误的原因

【讨论】：

对我很有用。谢谢！

【解决方案2】：

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

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

【讨论】：

这对我有用..禁用它后显示我要修复的代码错误
有没有办法使用 Ivy 并摆脱这个错误？
你是怎么弄到常春藤的？
stackoverflow.com/questions/60290309/…@MarcinG 的回答帮助我解决了这个问题。我在导入中添加了一个组件，而不是 app.module.ts 的声明
这不再是一个答案，因为 Ivy 是唯一剩下的编译器。您需要深入挖掘并找出错误的实际根本原因。

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

通常，如果不是您编写的内容，则往往是您的实施问题 - 即“拜访食品供应商并订购他们不提供的食品”。

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

【讨论】：

【解决方案5】：

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

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

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

从版本 19.2.5 开始，我们支持 IVY 编译器。

【讨论】：

【解决方案6】：

我遇到了同样的问题并通过更改解决了它

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

到

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

在app-router.module.ts

【讨论】：

【解决方案7】：

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

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

【讨论】：

【解决方案8】：

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

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

不正确

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

正确

ngcc

使用这种方法修复它

【讨论】：