Angular 错误 NG6002 : Appears in the NgModule. 导入 AppModule，但无法解析为 NgModule 类

Question

ERROR in node_modules/@angular/material/dialog/dialog.d.ts:142:22 - error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class.

This likely means that the library (@angular/material/dialog) which declares MatDialog has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

142 export declare class MatDialog extends _MatDialogBase {

我已经试过了:

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

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

app.module.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 { }

package.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

改变这一行:

从'@angular/material/dialog'导入{MatDialog}；

与:

从'@angular/material/dialog'导入{MatDialogModule}；

也在你的进口中改变它:)