Alert, loading,select etc not working in lazy loaded page

Ionic Framework ionic-v3
1

Here is the scenario
I have a lazy loaded page, say page1 which loads a components from angular module. the component tries to open a ion-select and encounters this error
undefined is not an object (evaluating ‘this._appRoot._getPortal’)

I’m new to ionic so it is possible that I’m missing something very basic. I tried to search but could not find this problem except a passing mention in GitHub issue (https://github.com/driftyco/ionic/issues/8102).

any help would be appreciated.
pages/page1/page1.html
…

app/module1/component1.html
<ion-select …>

the same exception was there if I try to use a simple loading,alert controller in page1, error is thrown at .present.

Thanks in advance,

2

This is a quasi-known issue in that I know how to handwave it away, but not actually fix it.

Inject a parameter of type AlertController and LoadingController in the constructor of your application component. This will prevent the relevant component classes from being dead-stripped and should make them accessible to all lazily-loaded pages.

3

More clearly, here is my code for alert not working. I Have alert controller injected in component, added it in page to, but same error when I try it with empty name or key.
Component: html is just input boxes n a button which calls login.

export class PasswordLogin {
constructor(public alertCtrl: AlertController) { }
login() {
if (this.accessInfo.accessName && this.accessInfo.accessKey) {
this.accessInfoEmitter.emit(this.accessInfo);
} else {
let alert = this.alertCtrl.create({
title: ‘Login Error’,
subTitle: ‘Username password required’,
buttons: [‘OK’]
});
alert.present();
return;
}
}
}

lazy loaded page

export class Login {
constructor(private navCtrl: NavController, public toastCtrl: ToastController, public authTracker: AuthTracker,
private apiService: APIService, public alrtCtrl: AlertController) {
}

html:
< password-login >< / password-login>

4

Actually, that makes it less clear. Did you actually follow my previous advice or not?

5

I’m sorry, I have alert controller injected in both component and page in constructor, thats what I was trying to show case. and still Alert.present gives the error, – TypeError: undefined is not an object (evaluating ‘this._appRoot._getPortal’) — main.js:1

6

That’s not what I suggested. Reread my original post:

7

Sorry for the delay, got involved in something else…
if this is what you meant, than it didn’t help. Lazy loaded pages still have the same error.

export class MyApp {
   rootPage: any;
  constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen,
    public authTracker: AuthTracker, public alrtCtrl: AlertController, public loadingCtrl: LoadingController) {
...
}
8

@jhavinay Please edit your post and use the </> button above the post input field to format your code or error message or wrap it in ``` (“code fences”) manually. This will make sure your text is readable and if it recognizes the programming language it also automatically adds code syntax highlighting. Thanks.

9

To narrow down the issues here, can you confirm whether normal loading indicators and normal alerts work once you modify the constructor of the app component to inject AlertController and LoadingController? That in particular is the behavior I have experience with here.

EDIT: You may also want to check out the nightly version of app-scripts. See #936.

10

appscripts update didn’t work, neither putting alert controller and loading controller in app component.

I started from basic and here is the problem.
I have src/app/login storing some components like pwdLogin, fbLogin, etc
in src/pages/login/login.module ,as soon as I include LoginComponentsModule from /src/app/login/login.module, I start getting the error.

How can I include components from app/< < modules > > in pages?

11

There are just too many things going on here and it’s hard to focus on any of them. Can you provide public access to a complete minimal repo that people can use to try to reproduce your environment?

12

working on it, please wait

13

Hi, first to prevent that you can use the .? operator that will avoid your page to crash if the variable/data has not not been async called yet.

Second, make sure your code is calling the right object, it doesn’t seem so.

If AlertController is still bugging, this is because it’s not loaded in app.component.ts, or you’re trying to call a page that is not referenced in this page of code you’re showing.

For example
pages/page1/page1.html must be referenced in app.component.ts both twice. plus on the page you’re showing us the code, otherwise it will crash.

14

I’ve been using alerts and lazyloads without issue. Does the problem arise when page A imports a method from page B, and AlertController is available on page B but not page A? If so, is there something special about AlertController, or would that be an issue with any library? Library L is imported from a file that is otherwise an island, maybe gets loaded only once in 100 executions. So there’s no way to get to lazily get to library L. Is that the gist, or is it something different?

15

First I came across it was trying to help somebody in framework #11476, and pretty much the sum total of my knowledge on the subject is in the comments there.

1 Like
16

Hello Aaron, maybe i didn’t get the issue, but normally it’s not rocket science with simple use cases in AngularFire2. Any data and i just did it simple to push between pages with navparams(some key). I saw your reading Aaron about minimal js and it’s probably and very clever technique, but i guess on a simple level i and others don’t need that yet.

17

Anyways technically, if you use a 2 way data binding like angularfire2 it’s a bit complex, but you can use snapshot, just found a solution for my app.

18

From the link @rapropos just posted, it looks as though there is a hole in app-scripts that is getting fixed in the next version.

19

@AaronSterling hi aaron, talking about Ionic 3 or a next fix for Ionic 2 ?

20

https://github.com/jhavinay/myApp
as soon as I import LoginComponentModule in pages/login/login.module.ts the error surfaces,
currently in repo it is commented, so no error,

And a question along with, are the components supposed to be ionic module.forroot or ionicpagemodule.forchild?
Answer: can’t have ionic page as it requires a separate module, and I have multiple angular components in one module