I setup the LoadingController as public in app.components.ts:
import { Platform, LoadingController } from '@ionic/angular';
...
constructor(
public platform: Platform,
private splashScreen: SplashScreen,
private statusBar: StatusBar,
public loadingController: LoadingController
)
...
Now I attempt to use it in tab2.page.ts:
constructor() {
this.platform.ready().then(()=>{
this.loadingController.create({
message:"loading..."
}).then((loadingElement)=>{
loadingElement.present();
//hide loading in 5 seconds next
var ref = this;
setTimeout(function()
{
ref.loadingController.dismiss();
},5000)
})
})
Then I attempt to build and am getting these errors:
ERROR in src/app/tab2/tab2.page.ts:14:10 - error TS2339: Property ‘platform’ does not exist on type ‘Tab2Page’.
error TS2339: Property ‘loadingController’ does not exist on type ‘Tab2Page’.
Any help would be appreciated. I would like it to be a globally available component (declared once) and be able to use it in all my tabs. Thank you.
I think it might help you to go through some of the core Angular documentation, especially (on this topic) the services overview and how DI works.
Imagine you have a social circle, and you know that if you invite Alice over, she will always bring her friend Bob, who makes awesome desserts. Therefore if Alice is coming to a dinner party, you don’t need to worry about dessert. However, if next Saturday you’re only inviting Claire and Dennis, but not Alice, you can’t expect Bob to show up with a berry pie
That’s basically the situation you’re in here. You’ve injected the LoadingController into AppComponent but are expecting it to be in Tab2Page.
I can sympathize with this sentiment, but the closest you’re going to get to that is making a service (as described in the Angular docs linked above), and I’m also going to caution you that you will rearchitect this whole thing at least three times before you end up with something that really fits your style. I at least have decided that it’s harder to figure out a balance between reusability and customization than one would initially think.
Thank you Rapropos. I went ahead and maintained use of the loadingcontroller only from app.component.ts:
import { NavigationCancel,
Event,
NavigationEnd,
NavigationError,
NavigationStart,
Router } from '@angular/router';
import { Platform, LoadingController } from '@ionic/angular';
...
constructor(
public platform: Platform,
private splashScreen: SplashScreen,
private statusBar: StatusBar,
public loadingController: LoadingController,
private router: Router
)
{
this.initializeApp();
// Router
this.router.events.subscribe((event: Event) => {
this.navigationInterceptor(event);
});
}
initializeApp() {
this.platform.ready().then(() => {
this.statusBar.styleDefault();
this.splashScreen.hide();
});
}
private navigationInterceptor(event: Event): void {
if (event instanceof NavigationStart)
{
// Create Loader
var loaderToShow = this.loadingController.create({
message: 'Please wait...'
}).then((res) => {
res.present();
});
//alert("start");
}
if (event instanceof NavigationEnd) {
setTimeout(() => {
this.loadingController.dismiss();
}, 1000);
//alert("end");
}
if (event instanceof NavigationCancel) {
setTimeout(() => {
this.loadingController.dismiss();
}, 1000);
//alert("cancel");
}
if (event instanceof NavigationError) {
setTimeout(() => {
this.loadingController.dismiss();
}, 1000);
//alert("error");
}
}
Not sure how reliable this is going to be but that is what worked for me for now.