MatToolbar 与 Angular 9 一起使用时抛出错误答案

【问题标题】：MatToolbar throws error when using it with Angular 9MatToolbar 与 Angular 9 一起使用时抛出错误
【发布时间】：2020-07-19 14:12:25
【问题描述】：

Angular 9.2.0 版

当我在模块中导入 MatToolbarModule 并在 html 模板中使用它时，我收到以下错误消息：

这可能意味着声明 MatToolbarModule 的库 (@angular/material/toolbar) 没有被 ngcc 正确处理，或者与 Angular Ivy 不兼容。检查是否有更新版本的库可用，如果有则更新。还可以考虑与图书馆的作者核实，看看图书馆是否应该与 Ivy 兼容。
8 export declare class MatToolbarModule {
                       ~~~~~~~~~~~~~~~~
src/app/angular-material.module.ts:53:14 - error NG6002: Appears in the NgModule.imports of ComponentsModule, but itself has errors

有人遇到同样的问题吗？

【问题讨论】：

标签： angular angular-material

【解决方案1】：

在package.json和npm install下面添加具体配置。

{
  "scripts": {
    "postinstall": "ngcc"
  }
}

参考：https://angular.io/guide/ivy#speeding-up-ngcc-compilation

【讨论】：

我已经在没有 ngcc 的情况下修复了它。我正在使用 Angular 9，在 npm i 材料期间，他采用了 Angular/材料的版本 10。我已经从 npm i 更改为 ng add angular/material 然后它起作用了。
对我来说它有效，只需关闭正在运行的实例，npm install 并完成...
感谢添加到文档的链接，这样我们就不会盲目地更改项目配置！
另一种可能性是将 Angular 9 更新到 11：update.angular.io/?v=9.1-11.0 它运行良好：只需考虑此升级的第一步：更新之前如果您依赖许多 Angular 库，您可能会考虑通过在 npm 安装后脚本中调用 ngcc（Angular Compatibility Compiler）来加快构建速度，方法是对 package.json 进行少量更改。

【解决方案2】：

我之前也遇到过同样的问题，这是因为您在服务器运行时修改了app.module.ts 文件。尝试停止它，然后使用ng servecommand 再次运行它。

【讨论】：

我在使用 MatListModule 时遇到了同样的问题，解决方案是停止/重启服务器
有人知道为什么这有必要吗？它对我有用，但我讨厌“你试过把它关掉再打开吗？”在没有洞察真正问题的情况下解决问题。顺便说一句，答案没有错（我赞成），但只是好奇。
恭喜！你拯救了我的一天 :) 确实非常简单。
单独做这件事对我来说是不够的。我还必须删除node_modules，然后再次运行yarn

【解决方案3】：

每当我导入“MatToolbar”“MatDialog”而不是“MatToolbarModule”或“MatDialogModule”时，我都会遇到这种情况。

【讨论】：

是的，我们必须直接导入包含组件而不是组件的模块。
谢谢。你救了我。
伙计，我可能会因为那个愚蠢的错误而浪费很多时间！
救生建议 :) 谢谢！
就是这样。我已经导入了 MatSnackBar 而不是 MatSnackBarModule

【解决方案4】：

我在使用 MatDatePicker 时遇到了类似的问题。问题是我在app.module.ts 文件中导入了MatDatepicker，而不是导入MatDatepickerModule。

因此，请检查您是否在模块文件中导入了 MODULE 而不是 Component。

【讨论】：

【解决方案5】：

所以我只是遇到了一个类似的问题，我可以通过重新排列我的导入模块来解决它。

就我而言，我在主模块LoadingBarModule 之前调用了LoadingBarRouterModule。检查您是否在另一个所需模块之前加载了MatToolbarModule 模块并将其移到该模块下方。

【讨论】：

我将我的材料模块导入移动到所有导入 in-app.module.ts 文件的顶部并且它起作用了。

【解决方案6】：

我在导入部分发现错误，我添加了不存在的项目。

import { MatMenuItem } from '@angular/material/menu';

MatMenut 项目不存在，我在 MatMenuModule 和工作后进行了更改

【讨论】：

【解决方案7】：

可能选择的答案可能不是正确的答案，因为您可能希望在构建应用程序时捆绑依赖项。

来自https://angular.io/guide/ivy#speeding-up-ngcc-compilation

在版本 9 中，用于 App shell 和 Angular Universal 启用了 bundleDependencies 选项默认。如果您选择退出捆绑依赖项，您将需要运行独立的 Angular 兼容性编译器 (ngcc)。

每次我将材料组件添加到 AppModule 中时，我都会选择重新启动服务器。但如果我错了，请告诉我。

【讨论】：

【解决方案8】：

我通过删除 node_modules 并重新安装它来解决它。

在这里完成讨论： https://github.com/angular/components/issues/18637

【讨论】：

【解决方案9】：

我在 app.module.ts 中导入了一些不是模块的类（FormControl、FormGroup、Validators）
我删除了这些类，它解决了我的问题。

【讨论】：

【解决方案10】：

对我有用的是为 MatToolbar 导入整个模块。

import {MatToolbarModule} from '@angular/material/toolbar';

然后将 MatToolbarModule 添加到我的 app.module.ts 中的 imports[] 数组中。

【讨论】：

【解决方案11】：

停止您的角度服务（如果您使用命令提示符或 powershell ctrl + c）并再次运行（ng serve）

【讨论】：

如果你仔细阅读，你会发现已经有相同的答案了。

【解决方案12】：

对我来说，这是由于 ValueAccessors 未使用（或者更确切地说是损坏）导致的 - 删除它们修复了这个问题。

【讨论】：