AlertController displaying on multiple pages despite being in a separate submodule

Ionic Framework ionic-v3
1

Hi,

I am using the AlertController in the app I’m building. This app is being migrated from v3 to v4 (using Angular) carefully with the hope of going to ionic 5 straight away after completion.

So I have a series of pages that is working as intended in ionic 3. I have migrated them as separate modules in ionic 4:

Let’s say I am using the tab layout and I have a home page.

The home page has links to 5 pages.

  • page 1
  • page 2
  • page 3
  • page 4
  • page 5

Let’s say page 1 uses the alert controller on NgInit because I need to show it when they navigate to the page.
After I dismiss the alert modal and navigate back to home and then onto page 2 the alert modal shown. I don’t have the AlertController available in any parent modules.

Am I am missing something?

Thanks

2

Here is some code, sorry for the large dump.

Home Page Module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { HomePageRoutingModule } from './home-routing.module';
import { HomePage } from './home.page';
@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    HomePageRoutingModule
  ],
  declarations: [HomePage]
})
export class HomePageModule {}

Home page Routing module.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { HomePage } from './home.page';

const routes: Routes = [
  {
    path: '',
    component: HomePage
  },
  {
    path: 'page1',
    loadChildren: () => import('./page1/page1.module').then( m => m.Page1PageModule)
  },
  {
    path: 'page2',
    loadChildren: () => import('./page2/page2.module').then( m => m.Page2PageModule)
  },
  {
    path: 'page3',
    loadChildren: () => import('./page3/page3.module').then( m => m.Page3PageModule)
  },
  {
    path: 'page4',
    loadChildren: () => import('./page4/page4.module').then( m => m.Page4PageModule)
  },
  {
    path: 'page5',
    loadChildren: () => import('./page5/page5.module').then( m => m.Page5PageModule)
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class HomePageRoutingModule {}

Home.page.ts

import { Component, OnInit, NgZone } from '@angular/core';
import { Router } from '@angular/router';
import { CustomViewInfo, CustomViewButtons } from '../../models/customViewInfo';
import { NGXLogger } from 'ngx-logger';
import { FirebaseService } from 'src/providers/firebase/firebase.service';
import { Storage } from '@ionic/storage';

@Component({
  selector: 'app-home',
  templateUrl: './home.page.html',
  styleUrls: ['./home.page.scss'],
})
export class HomePage implements OnInit {
 
  constructor(
    private zone: NgZone,
    private router: Router,
    private storage: Storage,
    private logger: NGXLogger,
    private firebaseService: FirebaseService,
    ) {
  }

Page1 Module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { Page1PageRoutingModule } from './page1-routing.module';
import { Page1Page } from './page1.page';
import { UtilityModule } from 'src/app/utility/utility.module';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    Page1PageRoutingModule,
    UtilityModule
  ],
  declarations: [Page1Page]
})
export class Page1PageModule {}

Submodule Page1.page.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { FirebaseService } from 'src/providers/firebase/firebase.service';
import { NGXLogger } from 'ngx-logger';
import { AlertController } from '@ionic/angular';
import { DomSanitizer } from '@angular/platform-browser';
  @Component({
  selector: 'app-page1',
  templateUrl: './page1.page.html',
  styleUrls: ['./page1.page.scss'],
})
export class Page1Page implements OnInit, OnDestroy {

  constructor(
    private firebaseService: FirebaseService,
    private logger: NGXLogger,
    private alertCtrl: AlertController,
    private sanitizer: DomSanitizer,
    private platform: Platform
    ) { }

  async showAlertOnStart() {
    console.log('alert control showing');
    const alert = await this.alertCtrl.create({
      header: 'Warning',
      subHeader: 'You must be a member of a group to send a message',
      buttons: [{
        text: 'Dismiss',
        role: 'cancel',
        cssClass: 'secondary',
        handler: () => {
          console.log('Confirmed Dismiss');
        }
      }],
      backdropDismiss: false,
    });
    await alert.present();
  }

Ionic Info

Ionic:

   Ionic CLI                     : 5.2.5 (/Users/Mohammad/.nvm/versions/node/v8.12.0/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.11.10
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.1.2

Capacitor:

   Capacitor CLI   : not installed
   @capacitor/core : not installed

Cordova:

   Cordova CLI       : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms : none
   Cordova Plugins   : no whitelisted plugins (10 plugins total)

Utility:

   cordova-res : not installed
   native-run  : 0.2.3 (update available: 0.3.0)

System:

   Android SDK Tools : 26.1.1 (/Users/Mohammad/Library/Android/sdk)
   ios-deploy        : 1.9.4
   NodeJS            : v10.19.0 (/Users/Mohammad/.nvm/versions/node/v10.19.0/bin/node)
   npm               : 6.13.4
   OS                : macOS Catalina
   Xcode             : Xcode 11.3.1 Build version 11C504


  ────────────────────────────────────────────────
3

I figured it out this was error on my part. I was triggering this based on some observable stream which was the issue. What end up happening is since the subject it used in multiple places was being trigger in other pages. After I moved it out of there it work fine.

1 Like