CODEWITHSUNDEEP
angularangular-material
lou habert
lou habert

Reputation: 196

Angular error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class

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 {

I already tried :

Please help me I tried many things and i'm deseperate

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"
  }
}

Upvotes: 2

Views: 37055

Answers (2)

ksenija
ksenija

Reputation: 33

For me this problem was solved by installing npm packages trough Docker, command is:

docker exec -it [name of your container] bash

if bash doesn't work, you can use just sh. After that I installed them just by running standard

npm i [name of package]

trough command prompt.

Upvotes: 0

mike
mike

Reputation: 1863

Change this line :

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

with:

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

also change it in your imports :)

Upvotes: 15

Related Questions