This was a really hard problem to search for, and the best I could find related was here:
Basically, I have a lazy loaded IonicPage. In the page is a method that pulls up a Loader. I’ve made a cut down example below.
With lazy loading I get an exception:
LazyTestPage.html:18 ERROR TypeError: Cannot read property '_getPortal' of undefined
at App.present (app.js:241)
at Loading.present (loading.js:88)
at LazyTestPage.webpackJsonp.721.LazyTestPage.testLoadPopup (lazy-test.ts:48)
at Object.eval [as handleEvent] (LazyTestPage.html:18)
at handleEvent (core.js:13254)
at callWithDebugContext (core.js:14739)
at Object.debugHandleEvent [as handleEvent] (core.js:14326)
at dispatchEvent (core.js:9703)
at core.js:12027
at SafeSubscriber.schedulerFn [as _next] (core.js:4232)
Here’s the lazy-test.module.ts:
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { LazyTestPage } from './lazy-test';
import {ComponentsModule} from "../../../components/components.module";
@NgModule({
declarations: [
LazyTestPage,
],
imports: [
ComponentsModule,
IonicPageModule.forChild(LazyTestPage),
],
})
export class LazyTestPageModule {}
And here’s the IonicPage:
lazy-test.ts
import {Component} from '@angular/core';
import {IonicPage, LoadingController, NavController, NavParams} from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-lazy-test',
templateUrl: 'lazy-test-page.html',
})
export class LazyTestPage {
constructor(public navCtrl: NavController, public navParams: NavParams, public loadingCtrl: LoadingController) {}
ionViewDidLoad() {
console.log('ionViewDidLoad LazyTestPage');
}
testLoadPopup() {
let loader = this.loadingCtrl.create({
content: "Loading. Please wait..."
});
loader.present();
}
And for completeness the template lazy-test-page.html:
<ion-content padding>
<a href='#' (click)="testLoadPopup()">Test</a>
</ion-content>
Can anyone help me identify what I’m doing wrong? In the other thread I saw the suggestion to replace IonicModule.forChild(LazyTestPage) with simply IonicModule, however that opens a completely different can of worms. It seems to be related to some injection in nav controller that even prevents the parent page from navigating to LazyTestPage? So doing the swap and then clicking the [navPush]='LazyTestPage' from the parent gives me:
ERROR Error: Uncaught (in promise): Error: StaticInjectorError[InjectionToken LZYCMP]:
StaticInjectorError[InjectionToken LZYCMP]:
NullInjectorError: No provider for InjectionToken LZYCMP!
Error: StaticInjectorError[InjectionToken LZYCMP]:
StaticInjectorError[InjectionToken LZYCMP]:
NullInjectorError: No provider for InjectionToken LZYCMP!
at _NullInjector.get (core.js:923)
at resolveToken (core.js:1211)
at tryResolveToken (core.js:1153)
at StaticInjector.get (core.js:1024)
at resolveToken (core.js:1211)
at tryResolveToken (core.js:1153)
at StaticInjector.get (core.js:1024)
at resolveNgModuleDep (core.js:10584)
at NgModuleRef_.get (core.js:11805)
at resolveNgModuleDep (core.js:10584)
at _NullInjector.get (core.js:923)
at resolveToken (core.js:1211)
at tryResolveToken (core.js:1153)
at StaticInjector.get (core.js:1024)
at resolveToken (core.js:1211)
at tryResolveToken (core.js:1153)
at StaticInjector.get (core.js:1024)
at resolveNgModuleDep (core.js:10584)
at NgModuleRef_.get (core.js:11805)
at resolveNgModuleDep (core.js:10584)
at c (polyfills.js:3)
at Object.reject (polyfills.js:3)
at NavControllerBase._fireError (nav-controller-base.js:223)
at NavControllerBase._failed (nav-controller-base.js:216)
at nav-controller-base.js:263
at t.invoke (polyfills.js:3)
at Object.onInvoke (core.js:4626)
at t.invoke (polyfills.js:3)
at r.run (polyfills.js:3)
at polyfills.js:3
Incidentally, this error also seems to persist when a form ionic popup also tries to be loaded (e.g. ionic-select)
My suspicion is that these components aren’t wrapped in pages like Modals which are ok with the lazy loading. Other than that I’m not sure how to approach this.
Then I went on holiday before realizing I never replied! )