MatCheckbox未被ngcc正确处理，或者与Angular Ivy不兼容。

Question

我正在尝试在Angular 9中使用最新的Angular Material，但遇到了以下问题:

这是我的app.modul.ts文件:

import { NgModule } from '@angular/core';
import { CommonModule, CurrencyPipe } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientJsonpModule } from '@angular/common/http';
import { HttpClientModule } from '@angular/common/http';
import { ModalModule } from 'ngx-bootstrap/modal';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { CollapseModule } from 'ngx-bootstrap/collapse';
import { TabsModule } from 'ngx-bootstrap/tabs';
import { NgxPaginationModule } from 'ngx-pagination';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ServiceProxyModule } from '@shared/service-proxies/service-proxy.module';
import { SharedModule } from '@shared/shared.module';
import { HomeComponent } from '@app/home/home.component';
import { AboutComponent } from '@app/about/about.component';
// tenants
import { TenantsComponent } from '@app/tenants/tenants.component';
import { CreateTenantDialogComponent } from './tenants/create-tenant/create-tenant-dialog.component';
import { EditTenantDialogComponent } from './tenants/edit-tenant/edit-tenant-dialog.component';
// roles
import { RolesComponent } from '@app/roles/roles.component';
import { CreateRoleDialogComponent } from './roles/create-role/create-role-dialog.component';
import { EditRoleDialogComponent } from './roles/edit-role/edit-role-dialog.component';
// users
import { UsersComponent } from '@app/users/users.component';
import { CreateUserDialogComponent } from '@app/users/create-user/create-user-dialog.component';
import { EditUserDialogComponent } from '@app/users/edit-user/edit-user-dialog.component';
import { ChangePasswordComponent } from './users/change-password/change-password.component';
import { ResetPasswordDialogComponent } from './users/reset-password/reset-password.component';
// layout
import { HeaderComponent } from './layout/header.component';
import { HeaderLeftNavbarComponent } from './layout/header-left-navbar.component';
import { HeaderLanguageMenuComponent } from './layout/header-language-menu.component';
import { HeaderUserMenuComponent } from './layout/header-user-menu.component';
import { FooterComponent } from './layout/footer.component';
import { SidebarComponent } from './layout/sidebar.component';
import { SidebarLogoComponent } from './layout/sidebar-logo.component';
import { SidebarUserPanelComponent } from './layout/sidebar-user-panel.component';
import { SidebarMenuComponent } from './layout/sidebar-menu.component';
import { ChatComponent } from './chat/chat.component';
import { Chat2Component } from './chat2/chat2.component';
import { CitizenInterestsComponent } from './citizen-interests/citizen-interests.component';

import {MAT_CHECKBOX_CLICK_ACTION, MatCheckbox} from '@angular/material/checkbox';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AboutComponent,
    // tenants
    TenantsComponent,
    CreateTenantDialogComponent,
    EditTenantDialogComponent,
    // roles
    RolesComponent,
    CreateRoleDialogComponent,
    EditRoleDialogComponent,
    // users
    UsersComponent,
    CreateUserDialogComponent,
    EditUserDialogComponent,
    ChangePasswordComponent,
    ResetPasswordDialogComponent,
    // layout
    HeaderComponent,
    HeaderLeftNavbarComponent,
    HeaderLanguageMenuComponent,
    HeaderUserMenuComponent,
    FooterComponent,
    SidebarComponent,
    SidebarLogoComponent,
    SidebarUserPanelComponent,
    SidebarMenuComponent,
    ChatComponent,
    Chat2Component,
    CitizenInterestsComponent
  ],
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    HttpClientJsonpModule,
    ModalModule.forChild(),
    BsDropdownModule,
    CollapseModule,
    TabsModule,
    AppRoutingModule,
    ServiceProxyModule,
    SharedModule,
    NgxPaginationModule,
    MatCheckbox




  ],
  providers: [],
  entryComponents: [
    // tenants
    CreateTenantDialogComponent,
    EditTenantDialogComponent,
    // roles
    CreateRoleDialogComponent,
    EditRoleDialogComponent,
    // users
    CreateUserDialogComponent,
    EditUserDialogComponent,
    ResetPasswordDialogComponent
  ],
})
export class AppModule {}

错误：在node_modules/@angular/material/checkbox/checkbox.d.ts文件的第56行22列出现NG6002错误 - 在AppModule的NgModule.imports中出现，但无法解析为NgModule类。 这很可能意味着声明MatCheckbox的库(@angular/material/checkbox)没有被ngcc正确处理，或者与Angular Ivy不兼容。请检查该库是否有更新版本，并进行更新。还要考虑与库作者联系，以了解该库是否预期与Ivy兼容。

- Abdulaziz

Answer 1

我在这里找到了解决方案。

我导入了Matcheckbox而不是MatCheckboxModule。

在那之前，我运行了这个命令 npm ci，我不知道这是否有影响，但这就是我做的。

- Abdulaziz

---

这对我有用：import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule } from '@angular/material/dialog'; @NgModule({ imports: [MatDialogModule], *此处不需要MatDialogRef** exports: [MatDialogModule], providers: [ { provide: MAT_DIALOG_DATA, useValue: {} }, { provide: MatDialogRef, useValue: {} } ], - BeatriceThalo

Answer 2

在 scripts 部分中添加文件 package.json，具体如下：

"postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points"

运行npm install或yarn install

- Eldari

---

"postinstall": "ngcc" 和 "npm install" 解决了我的问题。 :) - Naveen Kumar V

我在构建代理上遇到了这个错误（但在我的机器上没有），因此使用上面的 postinstall npm 脚本以及 npm ci 为我解决了问题。谢谢！ - porcus

Answer 3

请确保您的导入类以 **Module 结尾。在我的情况下，我只是导入了 MatFormField，并且遇到了与堆栈子项相同的错误。因为我添加了 MatFormFieldModule，它现在可以工作了。

- Seeschon

Answer 4

要解决这个问题，您需要清理本地节点模块缓存。 运行以下命令以解决此问题：

npm cache clean --force

然后重新安装您的npm模块：

npm install

- Himanshu kukreja