AlertController error: Cannot read property '_getPortal' of undefined


#1

Hi
I’m using Ionic v3.20.0. AlertController gives me the following error:

Runtime Error
Cannot read property '_getPortal' of undefined
Stack
TypeError: Cannot read property '_getPortal' of undefined
    at App.present (http://localhost:8100/build/vendor.js:22543:36)
    at Alert.present (http://localhost:8100/build/vendor.js:58761:26)
    at TermsAndConditionsPage.webpackJsonp.360.TermsAndConditionsPage.showBasicAlert (http://localhost:8100/build/1.js:333:20)
    at Object.eval [as handleEvent] (ng:///TermsAndConditionsPageModule/TermsAndConditionsPage.ngfactory.js:43:31)
    at handleEvent (http://localhost:8100/build/vendor.js:13963:155)
    at callWithDebugContext (http://localhost:8100/build/vendor.js:15472:42)
    at Object.debugHandleEvent [as handleEvent] (http://localhost:8100/build/vendor.js:15059:12)
    at dispatchEvent (http://localhost:8100/build/vendor.js:10378:25)
    at http://localhost:8100/build/vendor.js:11003:38
    at HTMLButtonElement.<anonymous> (http://localhost:8100/build/vendor.js:39492:53)
Ionic Framework: 3.9.2
Ionic App Scripts: 3.1.10
Angular Core: 5.2.11
Angular Compiler CLI: 5.2.11
Node: 8.11.1
OS Platform: Windows 7
Navigator Platform: Win32
User Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36

Here is my code:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, MenuController, AlertController } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-terms-and-conditions',
  templateUrl: 'terms-and-conditions.html',
})
export class TermsAndConditionsPage {

  constructor(public navCtrl: NavController,
              public navParams: NavParams,
              public menu: MenuController,
              private alertController: AlertController) {
  }

      showBasicAlert() {
        let basicAlert = this.alertController.create({
          title: 'Ionic alert',
          subTitle: 'ionic alert details',
          buttons: ['OK']
        });
        basicAlert.present();      
  }
}

And:

<ion-header>
    <ion-navbar>
      <ion-title>Alert Controller</ion-title>
    </ion-navbar>
</ion-header>
  
  <ion-content padding>
    <ion-item-group>
      <ion-item-divider color="light">Basic Alerts</ion-item-divider>
         <button ion-button full (click)="showBasicAlert()">Basic</button>    
    </ion-item-group>
  </ion-content>

And its module is:

import { NgModule } from '@angular/core';
import { IonicPageModule, IonicModule } from 'ionic-angular';
import { TermsAndConditionsPage } from './terms-and-conditions';

@NgModule({
  declarations: [
    TermsAndConditionsPage,
  ],
  imports: [
    IonicPageModule.forChild(TermsAndConditionsPage),
    IonicModule
  ],
  exports: [
    TermsAndConditionsPage
  ]
})
export class TermsAndConditionsPageModule {}

#2

Does the corresponding module for the TermsAndConditionsPage import IonicModule?


#3

Yes it does. I added its code to the description of the question above.


#4

If we look through Ionic’s issue tracker, the people with this error seem to be attempting to shoehorn Ionic into projects that are built using angular-cli instead of ionic-app-scripts. Might this apply to you as well?


#5

It didn’t help. So I raised the issue in Ionic Issue Tracker but so far no one commented on it.
My biggest worry is that I spend so much to develop my app on ionic and one day they just close the shop altogether.


#6

I’m now so desperate for this. I tried StackOverflow and asked this question there. But ionic seems to be deserted by people. So far no answers!


#7

Hello,
I have not really an idea what happens.
Maybe it helps removing things you do not need. Is import of IonicModule necessary on a page?
Best regards, anna-liebt


#8

I removed it and it didn’t help. Same error even without importing IonicModule. Thanks anyway.


#9

@HassanKhademi Have you updated some package in package.json and installed with npm install, withou removing the node_modules folder? You could try to delete the node_modules folder and run npm i in your project folder, maybe some file is wrong in there.

If this doesn’t solve, what is in your package.json file? It might be some version collision. I’m assuming you are using angular@5.X with ionic@3.9.2 (this should work)

If these don’t work, it will be better to make a github repo (just a very simple demo, just to simulate the error) and post the link here.


#10

Hello,
your code seems working properly. If have copied it into contact tab. No nasty typo inside. https://stackblitz.com/edit/ionic-w7hiug

So can you answer the question of rapropos, if that project is an original ionic project or came from a other project?

Best regards, anna-liebt


#11

I just deleted node_module folder and ran npm i but again get same error.

Here is my package.json:

{
  "name": "CashEx",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "start": "ionic-app-scripts serve",
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint"
  },
  "dependencies": {
    "@angular/animations": "5.2.11",
    "@angular/common": "5.2.11",
    "@angular/compiler": "5.2.11",
    "@angular/compiler-cli": "5.2.11",
    "@angular/core": "5.2.11",
    "@angular/forms": "5.2.11",
    "@angular/http": "5.2.11",
    "@angular/platform-browser": "5.2.11",
    "@angular/platform-browser-dynamic": "5.2.11",
    "@ionic-native/app-preferences": "^4.9.2",
    "@ionic-native/camera": "4.3.3",
    "@ionic-native/core": "~4.9.2",
    "@ionic-native/splash-screen": "~4.9.2",
    "@ionic-native/status-bar": "~4.9.2",
    "@ionic/storage": "2.1.3",
    "@ngx-translate/core": "8.0.0",
    "@ngx-translate/http-loader": "^2.0.0",
    "cordova-android": "7.0.0",
    "cordova-browser": "5.0.3",
    "cordova-plugin-app-preferences": "^0.99.3",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-ionic-keyboard": "^2.0.5",
    "cordova-plugin-ionic-webview": "^1.1.19",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "rxjs": "5.5.11",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.1.11",
    "typescript": "~2.6.2"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-app-preferences": {},
      "cordova-plugin-whitelist": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-statusbar": {}
    }
  }
}

#12

my project is purely ionic. I used super template to create it. And then I just added my own pages and components. I haven’t even copied any code from other places.


#13

Hello,

hmmm, the code from you is working. Maybe you should try wghat lucasbasqueretto wrote or maybe imho set up a completly new app. If you have again problems try blank, tab or sidemenu instead of super.

Best regards, anna-liebt


#14

You’re right. I just created a blank app and it worked :frowning:
It seems that my only option is to do everything from scratch. Thanks


#15

Phewww, I found the cause of this problem. In my project there was components.module.ts file somewhere, which had the following imports within NgModule:

import { NgModule } from '@angular/core';
import { IonicModule } from 'ionic-angular';
import { TermsAndConditionsComponent } from './terms-and-conditions/terms-and-conditions';

@NgModule({
	declarations: [
        TermsAndConditionsComponent,
    ],
	imports: [
        // IonicModule.forRoot(TermsAndConditionsComponent), <= THIS LINE CAUSED ALL THE ISSUES. THE FOLLOWING LINE SHOULD BE USED INSTEAD
        IonicModule
    ],
    exports: [
        TermsAndConditionsComponent
    ]
})

export class ComponentsModule {}

When I replaced the line IonicModule.forRoot(TermsAndConditionsComponent), with IonicModule instead then the AlertController started working just fine.

I’m not sure whether it’s purely my mistake or if it’s a bug though.