1

I'm trying to use dialog between two components, but the console keeps giving me this error. I've already tried to npm install again, but it didn't work. I've also tried to do what other questions suggest, but nothing worked. What I don't understand is that I've already done a dialog before on the same app and it does work, but by doing naother which is basically the same does seem to have trouble.

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, LOCALE_ID } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CalendarModule, DateAdapter } from 'angular-calendar';
import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
import { CommonModule } from '@angular/common';
import { NgbModalModule, NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { FlatpickrModule } from 'angularx-flatpickr';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { registerLocaleData } from '@angular/common';
import localeIt from '@angular/common/locales/it';
import localeItExtra from '@angular/common/locales/extra/it';
import { NgQrScannerModule } from 'ngx-qr';
import { MatDialogModule, MatDialogRef} from '@angular/material/dialog';
import { EventCardComponent } from './components/event-card/event-card.component';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule, MAT_DATE_LOCALE } from '@angular/material/core';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { AppSettingsService } from './services/app-setting-service.service';
import { HttpClientModule } from '@angular/common/http';
import { ViewTogglerComponent } from './components/view-toggler/view-toggler.component';
import { TimeTogglerComponent } from './components/time-toggler/time-toggler.component';
import { MatSelectModule } from '@angular/material/select';
import { ITA } from './shared/constants';
import { SettingsCardComponent } from './components/settings-card/settings-card.component';
import { ToastrModule } from 'ngx-toastr';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { HomeComponent } from './components/home/home.component';
import { SmallPraticaCardComponent } from './components/small-pratica-card/small-pratica-card.component';
import { MatCardModule } from '@angular/material/card';
import { ConfirmDialogComponent } from './components/confirm-dialog/confirm-dialog.component';
import { PendingEventComponent } from './components/pending-event/pending-event.component';
import { EventTypeCardComponent } from './components/event-type-card/event-type-card.component';
import { OwlDateTimeModule, OwlNativeDateTimeModule, OwlDateTimeIntl } from 'ng-pick-datetime';
import { EventFilterComponent } from './components/event-filter/event-filter.component';
import { DatepickerFilterComponent } from './components/datepicker-filter/datepicker-filter.component';
import { EventSearchComponent } from './components/event-search/event-search.component';
import { CalendarFilterComponent } from './components/calendar-filter/calendar-filter.component';
import { UserFilterComponent } from './components/user-filter/user-filter.component';
import { SediFilterComponent } from './components/sedi-filter/sedi-filter.component';
import { PeritiFilterComponent } from './components/periti-filter/periti-filter.component';
import { CollabFilterComponent } from './components/collab-filter/collab-filter.component';
import { AmmFilterComponent } from './components/amm-filter/amm-filter.component';
import { QRCodeModule } from 'angularx-qrcode';
import { ZXingScannerModule } from '@zxing/ngx-scanner';
import { QrCodeDialogComponent } from './components/qr-code-dialog/qr-code-dialog.component';
import { EventTypeFilterComponent } from './components/event-type-filter/event-type-filter.component';
import { FilterPopupComponent } from './components/filter-popup/filter-popup.component';
import { ListaEventiComponent } from './components/lista-eventi/lista-eventi.component';
import {MatListModule} from '@angular/material/list';

export class DefaultIntl extends OwlDateTimeIntl {
  cancelBtnLabel= 'Annulla';
  setBtnLabel= 'Imposta';
  rangeFromLabel= 'Da';
  rangeToLabel= 'a';
};

registerLocaleData(localeIt, ITA, localeItExtra);

@NgModule({
  declarations: [
    AppComponent,
    EventCardComponent,
    ViewTogglerComponent,
    TimeTogglerComponent,
    SettingsCardComponent,
    HomeComponent,
    SmallPraticaCardComponent,
    ConfirmDialogComponent,
    PendingEventComponent,
    EventTypeCardComponent,
    EventFilterComponent,
    DatepickerFilterComponent,
    EventSearchComponent,
    CalendarFilterComponent,
    UserFilterComponent,
    SediFilterComponent,
    PeritiFilterComponent,
    CollabFilterComponent,
    AmmFilterComponent,
    QrCodeDialogComponent,
    EventTypeFilterComponent,
    FilterPopupComponent,
    ListaEventiComponent,
  ],
  imports: [
    FormsModule,
    ZXingScannerModule,
    MatListModule,
    NgQrScannerModule,
    BrowserModule,
    NgQrScannerModule,
    CommonModule,
    HttpClientModule,
    MatNativeDateModule,
    NgbModule,
    MatDialogRef,
    NgbModalModule,
    BrowserAnimationsModule,
    MatDialogModule,
    MatProgressSpinnerModule,
    MatSelectModule,
    MatCheckboxModule,
    MatCardModule,
    MatDatepickerModule,
    QRCodeModule,
    MatTooltipModule,
    AppRoutingModule,
    OwlDateTimeModule,
    OwlNativeDateTimeModule,
    ToastrModule.forRoot(),
    FlatpickrModule.forRoot(),
    CalendarModule.forRoot({
      provide: DateAdapter, useFactory: adapterFactory
    })
  ],
  providers: [
    { provide: MAT_DATE_LOCALE, useValue: ITA },
    { provide: OwlDateTimeIntl, useClass: DefaultIntl },
    { provide: LOCALE_ID, useValue: ITA },
    AppSettingsService,
    HomeComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

package.json:

{
  "name": "sd-agenda",
  "version": "2021.10.08.1",
  "main": "main-process.js",
  "author": {
    "name": "Andrea Della Maggiora",
    "email": "andrea.dellamaggiora@system-data.it"
  },
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "compodoc": "compodoc -p tsconfig.json",
    "compodoc-serve": "compodoc -s tsconfig.json",
    "build-prod": "node version.js && ng build --prod",
    "build-test": "node version.js && ng build",
    "deploy-test": "node version.js && ng build && firebase login && firebase use sds-agenda-test && firebase deploy",
    "deploy-prod": "node version.js && ng build --prod && firebase login && firebase use sds-agenda && firebase deploy"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~9.1.1",
    "@angular/cdk": "^9.2.1",
    "@angular/common": "~9.1.1",
    "@angular/compiler": "~9.1.1",
    "@angular/core": "~9.1.1",
    "@angular/forms": "~9.1.1",
    "@angular/localize": "^9.1.1",
    "@angular/material": "^9.2.1",
    "@angular/platform-browser": "~9.1.1",
    "@angular/platform-browser-dynamic": "~9.1.1",
    "@angular/router": "~9.1.1",
    "@ng-bootstrap/ng-bootstrap": "^6.0.2",
    "@zxing/browser": "0.0.9",
    "@zxing/library": "^0.18.6",
    "@zxing/ngx-scanner": "^3.2.0",
    "angular-calendar": "^0.28.20",
    "angular-draggable-droppable": "4.3.12",
    "angular-resizable-element": "3.3.0",
    "angular-weblineindia-qrcode-scanner": "^1.0.0",
    "angular2-qrscanner": "^1.0.7",
    "angularx-flatpickr": "^6.3.1",
    "angularx-qrcode": "^11.0.0",
    "bootstrap": "^4.4.1",
    "calendar-utils": "0.7.1",
    "core-js": "3.6.4",
    "date-fns": "^2.12.0",
    "flatpickr": "^4.6.3",
    "font-awesome": "^4.7.0",
    "jquery": "^3.5.1",
    "lodash": "^4.17.21",
    "ng-pick-datetime": "^7.0.0",
    "ngx-electron": "^2.2.0",
    "ngx-qr": "^1.1.13",
    "ngx-toastr": "^12.0.1",
    "rrule": "2.6.4",
    "rxjs": "~6.5.4",
    "signalr": "^2.4.1",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.901.15",
    "@angular/cli": "~9.1.1",
    "@angular/compiler-cli": "~9.1.1",
    "@angular/language-service": "~9.1.1",
    "@compodoc/compodoc": "^1.1.13",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.20.17",
    "@types/uuid": "^7.0.2",
    "codelyzer": "^5.1.2",
    "electron-packager": "^15.1.0",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.4.1",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~3.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "~5.4.3",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.8.3"
  }
}
Lorenzo Bertolaccini
  • 43
  • 1
  • 8
  • Remove the MatDialogRef import from your AppModule. – Yannick Beauchamp-H Oct 14 '21 at 16:12
  • The only you "import" are modules, the components are in "declarations", and the services usually you use the declaration of the service to indicate where should be "provide" -else you put in "provides"-. Remember that if your component belongs to a Module, and use mat-dialog, you need import also in the module the MatDialogModule. BTW. I feel strange that you import material and also ng-bootstrap. They has an apparence absolute diferent, choose only one of them – Eliseo Oct 14 '21 at 18:25

0 Answers0