Mat Dialog in Angular 2 suddenly stopped working

Question

Mat Dialog in my website suddenly stopped working, there is no error so I did not notice when it stopped working, I never edit that page after completing it so I was confused why it suddenly not worked. Can it be caused by update in angular? Heroku updates? Software? Or if not, is it my code? But I'm sure its working before because I have an old copy of my code dated 2021 (not the updated code in my github), compared it with may latest code, but its the same, So i would like to hear other opinion if an update in angular or heroku can cause this.

Here is .ts file of my main page:

    import { Component, OnInit } from '@angular/core';
    import { ShipAssetsDialogComponent } from './ship-assets-dialog/ship-assets-dialog.component';
    import { Router } from '@angular/router';
    import { MatDialog } from '@angular/material/dialog';

    @Component({
      selector: 'app-ship-assets',
      templateUrl: './ship-assets.component.html',
      styleUrls: ['./ship-assets.component.css']
    })
    export class ShipAssetsComponent implements OnInit {


       ship1 = [
        {name: 'Capt. ', label1: 'Master'},

      ];


      constructor(public dialog: MatDialog, private router:Router) { }

      ngOnInit(): void {
      }

       scrollUp(event){
        setTimeout(() => {
          this.scroll(event.path[3].attributes[1].nodeValue);
        }, 200);
      }

      scroll(id) {
        let el = document.getElementById(id);
el.scrollIntoView(true);
      }

      openDialog(imgSrc){
        this.dialog.open(ShipAssetsDialogComponent, {
          height: 'auto',
          width: 'auto',
          data: {
            imgSrc: imgSrc
          }
        });
      }

    }

Here's code of the .ts file for my Mat Dialog

    import { ShipAssetsComponent } from './../ship-assets.component';
    import { Component, Inject, OnInit } from '@angular/core';
    import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';

    @Component({
      selector: 'app-ship-assets-dialog',
      templateUrl: './ship-assets-dialog.component.html',
      styleUrls: ['./ship-assets-dialog.component.css']
    })
    export class ShipAssetsDialogComponent implements OnInit {
      imgSrc:string;

    {image: 'https://ship.jpg', name: 'CAPTAIN SQUID',  title1: 'CAPTAIN',
publication:[
]},

     ];
      myArr = [];

      publi:boolean = false;

      constructor(public dialogRef: MatDialogRef<ShipAssetsComponent>,
        @Inject(MAT_DIALOG_DATA) public data: any) { }

      ngOnInit(): void {
        this.myArr = this.professors.filter(res => res.name === this.data.imgSrc);
        console.log(this.data.imgSrc);
      }


    }

Here is my app.module.ts

    import { SafePipe } from './shared/SafePipe';
    import { AuthGuard } from './shared/auth.guard';
    import { MaterialModule } from './material/material.module';
    import {IvyCarouselModule} from 'angular-responsive-carousel';
    import { FormsModule,ReactiveFormsModule } from '@angular/forms';
    import { AngularFireStorageModule } from '@angular/fire/storage';
    import { AngularFireModule } from '@angular/fire';
    import { HttpClientModule } from '@angular/common/http';
    import { CarouselModule } from 'ngx-owl-carousel-o';
    import { NgImageSliderModule } from 'ng-image-slider';
    import {MatDialogModule} from '@angular/material/dialog';
    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';

    @NgModule({
      declarations: [
        AppComponent,
        SafePipe,
    ],


      imports: [
        BrowserModule,
        AppRoutingModule,
        MatDialogModule,
        BrowserAnimationsModule,
        MaterialModule,
        IvyCarouselModule,
        CarouselModule,
        FormsModule,
        ReactiveFormsModule,
        HttpClientModule,
        AngularFireStorageModule,
        AngularFireModule,
        NgImageSliderModule,
        AngularFireModule.initializeApp({
          apiKey: "abc",
          authDomain: "abc.com",
          databaseURL: "https:abc.com",
          projectId: "abc",
          storageBucket: "abc.com",
          messagingSenderId: "123",
          appId: "1:123:web:123abc"
        }),
      ],
      providers: [AuthGuard],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

Note: I also tried adding subscribe, but still doesnt work

You have an `openDialog()` function but it isn't called anywhere. — Robby Cornelissen, Mar 08 '23 at 05:06
I vaguely recall seeing a question with a similar title recently. Did you ask this earlier, then delete and re-post it? — ChrisGPT was on strike, Mar 08 '23 at 13:20

score 0 · Answer 1 · answered Mar 09 '23 at 06:12

I found the solution. I read somewhere that entry component is no longer necessary, but I tried to add it on my app.module.ts and it worked!

    entryComponent: [abcComponent, defComponent, ghiComponent],
    providers: [AuthGuard]

I have 3 pages where I used this mat dialog, all of them suddenly stopped working. When I tried adding this it worked (i never added this last time (2021) but still worked)

Mat Dialog in Angular 2 suddenly stopped working

1 Answers1