Angular 错误 NG6002：出现在 AppModule 的 NgModule.imports 中，但无法解析为 NgModule 类

Question

node_modules/@angular/material/dialog/dialog.d.ts:142:22 中出现错误 - 错误 NG6002：出现在 AppModule 的 NgModule.imports 中，但无法解析为 NgModule 类。

这可能意味着声明 MatDialog 的库 (@angular/material/dialog) 尚未被 ngcc 正确处理，或者与 Angular Ivy 不兼容。检查该库是否有新版本可用，如果有则更新。还可以考虑与库的作者联系，看看该库是否与 Ivy 兼容。

142 导出声明类MatDialog扩展_MatDialogBase {

我已经尝试过了：

• 更新/重新安装-->没有效果
• 重新启动服务器/清空缓存-->没有效果
• 禁用 Ivy --> 其他错误
• 禁用 aoc --> 没有错误，但出现白页
• "postinstall": "ngcc" --> 没有效果
• 运行 sudo --> 没有效果

请帮助我，我尝试了很多事情，但我很绝望

应用程序模块.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { SharedModule } from './shared/shared.module';
import { HomePageComponent } from './home-page/home-page.component';

import { environment } from 'src/environments/environment';

// Firebase imports
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { AngularFireStorage } from '@angular/fire/storage';
import { CommonModule } from '@angular/common';
//import { SearchBarComponent } from './shared/navbar/search-bar/search-bar.component';
import { AngularFireAuthGuard } from '@angular/fire/auth-guard';
import { NewCommentComponent } from './comments/new-comment/new-comment.component';
import { NewDocumentComponent } from './documents/new-document/new-document.component';
import { QuestionComponent } from './documents/question/question.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { SingleDocumentComponent } from './documents/single-document/single-document.component';
import { EditDocumentComponent } from './documents/edit-document/edit-document.component';
import { TemplateComponent } from './documents/template/template.component';

import { HttpClientModule} from '@angular/common/http';
import { AngularFireFunctions, FUNCTIONS_REGION } from '@angular/fire/functions';
import { EditorModule } from '@tinymce/tinymce-angular';

import { CategoryDialogComponent } from './home-page/category-dialog/category-dialog.component';
import { DocumentCheckoutComponent } from './documents/document-checkout/document-checkout.component';

import { CarouselComponent } from './home-page/carousel/carousel.component';
import { ProPageComponent } from './pro-page/pro-page.component';
import { MarkdownEditorModule } from './markdown-editor/markdown-editor.module';
import { MarkdownEditorOptions } from './markdown-editor/markdownEditorOptions';
// import { CheckoutComponent } from './checkout/checkout.component';
import { MatDialog } from '@angular/material/dialog';

    

const editorConfig = new MarkdownEditorOptions();
editorConfig.autoDownloadFontAwesome = true;
editorConfig.initialValue = 'Hello Editor...write something amazing.';

@NgModule({
  declarations: [
    AppComponent,
    HomePageComponent,
   
    NewCommentComponent,
    NewDocumentComponent,
    QuestionComponent,
    SingleDocumentComponent,
    EditDocumentComponent,
    TemplateComponent,
    CategoryDialogComponent,
    DocumentCheckoutComponent,
    CarouselComponent,
    ProPageComponent,
    // CheckoutComponent,
    
  ],
  imports: [
    BrowserModule,
    CommonModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    SharedModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule,
    AngularFireAuthModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    EditorModule,
    MarkdownEditorModule.forRoot(editorConfig),
    MatDialog,
  ],
  providers: [
    AngularFireAuthGuard,
    AngularFireStorage,
    AngularFireFunctions,
    { provide: FUNCTIONS_REGION, useValue: 'europe-west1'}
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

包.json

{
  "name": "XXXX",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^10.2.1",
    "@angular/cdk": "^10.2.7",
    "@angular/common": "^10.2.1",
    "@angular/compiler": "^10.2.1",
    "@angular/core": "^10.2.1",
    "@angular/fire": "^5.4.2",
    "@angular/forms": "^10.2.1",
    "@angular/material": "^10.2.7",
    "@angular/platform-browser": "^10.2.1",
    "@angular/platform-browser-dynamic": "^10.2.1",
    "@angular/router": "^10.2.1",
    "@ngtools/webpack": "^10.2.0",
    "@stripe/stripe-js": "^1.11.0",
    "@tinymce/tinymce-angular": "^4.2.0",
    "algoliasearch": "^4.6.0",
    "angular-instantsearch": "^2.3.0",
    "bootstrap": "^4.5.3",
    "firebase": "^7.24.0",
    "firebase-functions": "^3.13.0",
    "html-to-pdfmake": "^2.1.0",
    "html2canvas": "^1.0.0-rc.7",
    "jspdf": "^2.1.1",
    "ng-image-slider": "^2.6.4",
    "ng2-pdf-viewer": "^6.3.2",
    "ngx-bootstrap": "^5.6.2",
    "ngx-clipboard": "^13.0.1",
    "ngx-owl-carousel-o": "^3.1.1",
    "nodemailer": "^6.4.14",
    "npm": "^6.14.8",
    "pdfmake": "^0.1.68",
    "stripe": "^8.119.0",
    "tinymce": "^5.7.1",
    "tslib": "^1.14.1",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/architect": "^0.900.7",
    "@angular-devkit/build-angular": "^0.1002.0",
    "@angular/cli": "^10.2.0",
    "@angular/compiler-cli": "^10.2.1",
    "@angular/language-service": "^10.2.1",
    "@types/jasmine": "^3.6.1",
    "@types/jasminewd2": "^2.0.8",
    "@types/node": "^12.19.3",
    "@types/stripe-checkout": "^1.0.3",
    "@types/stripe-v3": "^3.1.21",
    "codelyzer": "^5.2.2",
    "firebase-tools": "^7.16.2",
    "fuzzy": "^0.1.3",
    "inquirer": "^6.2.2",
    "inquirer-autocomplete-prompt": "^1.3.0",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.5.4",
    "protractor": "^5.4.4",
    "ts-node": "~8.3.0",
    "tslint": "~5.18.0",
    "typescript": "~4.0.5"
  }
}

Answer 1

更改这一行：

import { MatDialog } from '@angular/material/dialog';

和：

import { MatDialogModule } from '@angular/material/dialog';

也在你的导入中改变它:)