Ionic Modals - Modal not showing (it used to though) and popovers presenting @ top left of screen :(


#1

Hi, I have a general question regarding modals: I followed all the instructions for creating and presenting a modal, and I got it to work; but, after a while–I don’t know why–my modals do not present themselves despite the fact that no errors are thrown. What are your suggestions?

I had recently transferred from ionic v3 which took a long time, and nearly everything works now, except for the modals and positioning of the popovers, which always shows up on the top left of the screen. If anyone might know what causes that, that is a separate question.

{
  "name": "puf",
  "version": "0.6.1",
  "author": "Daniel A. Apatiga @ puf LLC",
  "homepage": "http://-redacted.com",
  "scripts": {
    "ng": "ng",
    "standardize": "prettier **/*.ts --write",
    "start": "npm run standardize && ng serve --port 5000",
    "build": "npm run standardize && ng build --minifyjs --optimizejs --minifycss",
    "test": "npm run standardize && ng test",
    "lint": "npm run standardize && ng lint",
    "e2e": "ng e2e"
  },
  "prettier": {
    "printWidth" : 90,
    "semi": false,
    "singleQuote" : true,
    "trailingComma" : "es5",
    "parser": "typescript"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.1.10",
    "@angular/common": "^6.1.1",
    "@angular/core": "^6.1.1",
    "@angular/forms": "^6.1.1",
    "@angular/http": "^6.1.1",
    "@angular/platform-browser": "^6.1.1",
    "@angular/platform-browser-dynamic": "^6.1.1",
    "@angular/router": "^6.1.1",
    "@capacitor/android": "^1.0.0-beta.8",
    "@capacitor/core": "^1.0.0-beta.8",
    "@ionic-native/facebook": "^5.0.0-beta.21",
    "@ionic-native/file": "^5.0.0-beta.21",
    "@ionic-native/geolocation": "^5.0.0-beta.21",
    "@ionic-native/google-maps": "^5.0.0-beta.23",
    "@ionic-native/image-picker": "^5.0.0-beta.21",
    "@ionic-native/image-resizer": "^5.0.0-beta.21",
    "@ionic-native/linkedin": "^5.0.0-beta.21",
    "@ionic-native/onesignal": "^5.0.0-beta.21",
    "@ionic-native/secure-storage": "^5.0.0-beta.21",
    "@ionic-native/splash-screen": "^5.0.0-beta.21",
    "@ionic-native/status-bar": "^5.0.0-beta.21",
    "@ionic/angular": "^4.0.0-beta.13",
    "@ionic/pro": "^2.0.3",
    "bootstrap": "^4.1.3",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-facebook4": "^3.1.0",
    "cordova-plugin-file": "^6.0.1",
    "cordova-plugin-file-transfer": "^1.7.1",
    "cordova-plugin-geolocation": "^4.0.1",
    "cordova-plugin-googlemaps": "git+https://github.com/mapsplugin/cordova-plugin-googlemaps.git#multiple_maps",
    "cordova-plugin-image-picker": "^1.1.3",
    "cordova-plugin-image-resizer": "^1.0.0",
    "cordova-plugin-ionic": "^5.2.5",
    "cordova-plugin-ionic-keyboard": "^2.1.3",
    "cordova-plugin-ionic-webview": "^2.2.0",
    "cordova-plugin-secure-storage": "^2.6.8",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "core-js": "^2.5.7",
    "onesignal-cordova-plugin": "^2.4.4",
    "popper.js": "^1.14.4",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/architect": "^0.8.6",
    "@angular-devkit/build-angular": "^0.8.6",
    "@angular-devkit/core": "^0.8.6",
    "@angular-devkit/schematics": "^7.0.1",
    "@angular/cli": "^6.2.6",
    "@angular/compiler": "^6.1.1",
    "@angular/compiler-cli": "^6.1.10",
    "@angular/language-service": "^6.1.10",
    "@capacitor/cli": "1.0.0-beta.8",
    "@ionic-native/core": "^5.0.0-beta.21",
    "@ionic/angular-toolkit": "^1.0.0",
    "@ionic/ng-toolkit": "^1.1.0",
    "@ionic/schematics-angular": "^1.0.7",
    "@types/jasmine": "^2.8.9",
    "@types/jasminewd2": "^2.0.5",
    "@types/node": "^10.12.0",
    "codelyzer": "^4.5.0",
    "cordova-android": "^7.1.1",
    "cordova-browser": "^5.0.4",
    "cordova-fetch": "^1.3.1",
    "cordova-windows": "^6.0.1",
    "jasmine-core": "^3.2.1",
    "jasmine-spec-reporter": "^4.2.1",
    "karma": "^3.0.0",
    "karma-chrome-launcher": "^2.2.0",
    "karma-coverage-istanbul-reporter": "^2.0.4",
    "karma-jasmine": "^1.1.2",
    "karma-jasmine-html-reporter": "^1.3.1",
    "prettier": "^1.14.3",
    "protractor": "^5.4.1",
    "rxjs": "^6.3.3",
    "rxjs-compat": "^6.3.3",
    "ts-node": "^7.0.1",
    "tslint": "^5.11.0",
    "typescript": "2.9.2"
  },
  "description": "Puf",
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-secure-storage": {},
      "cordova-plugin-image-picker": {},
      "cordova-plugin-file": {},
      "cordova-plugin-image-resizer": {},
      "onesignal-cordova-plugin": {},
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-ionic-webview": {
        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
      },
      "cordova-plugin-googlemaps": {
        "API_KEY_FOR_ANDROID": "redactedkey",
        "API_KEY_FOR_IOS": "redactedkey",
        "PLAY_SERVICES_VERSION": "15.0.1",
        "ANDROID_SUPPORT_V4_VERSION": "27.+"
      },
      "cordova-plugin-geolocation": {
        "GEOLOCATION_USAGE_DESCRIPTION": "For determining map location and other in-app variables."
      },
      "cordova-plugin-statusbar": {}
    },
    "platforms": [
      "browser",
      "windows"
    ]
  }
}

Without changing anything, when I click on a button to present the modal, it no longer shows. Does anyone know what might cause this?

in a page/component, I have for registering users this function for presenting the modal:

async openEmployeeHelpModal() {
    const modal = await this.modalCtrl.create({
      component: TipsForEmployeesModalPage,
      animated: true,
      backdropDismiss: true,
    })
    modal
      .present()
      .then(() => console.log('No error with presenting modal'))
      .catch(err => console.log('error modal', err))
  }

And, in the corresponding module, I have it declared and in entry components like so:

@NgModule({
  entryComponents: [TipsForEmployeesModalPage],
  imports: [
    PipesModule,
    IonicModule,
    CommonModule,
    FormsModule,
    RouterModule.forChild([{ path: '', pathMatch: 'full', component: RegisterPage }]),
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  declarations: [RegisterPage, TipsForEmployeesModalPage],
})

Why isn’t working?! :frowning:

For the popover issue, I pass an $event variable on a button click event and call the function, showAddP($event) like to. Here i the .ts file that opens the popover.

async showAddP(ev) {
    if (this.add_marker_enabled) {
      this.showToast(
        'Make sure you have finished setting up the last marker you \
      have added to our database!  Hint: you must drag it to the best desired spot\
      , then select this is it!'
      )
      return
    }
    const popover = await this.popoverCtrl.create({
      component: AddPopoverPage,
      translucent: true,
      event: ev,
    })
    popover
      .present()
      .then(() => {})
      .catch(err => console.log('error creating popover', err))
}

#2

I figured it out–I had installed bootstrap by accident, via npm, in order to fix an error. So, I hadn’t actually solved the underlying issue: in the angular.json file, should have removed the bootstrap path under project -> app -> architect -> build -> options -> styles.