Im building an app with Ionic 4. I have a Storage promise in my app.component constructor. It works fine when hard-reloading the app (in the browser), but when the app live reloads on changes, the promise in the constructor is not resolved before the “checklist” page is rendered and then it fails because the user isn’t set yet.
app.component.ts
import { Component } from '@angular/core';
import { Platform} from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { Router } from "@angular/router";
import { Storage } from '@ionic/storage';
import { UserService } from "./services/user.service";
@Component({
selector: 'app-root',
templateUrl: 'app.component.html'
})
export class AppComponent {
constructor(
private platform: Platform,
private splashScreen: SplashScreen,
private statusBar: StatusBar,
private router: Router,
private storage: Storage,
private userService: UserService,
) {
this.storage.get('user').then((user) => {
if(user) {
this.userService.user = user;
this.router.navigateByUrl('checklist');
} else {
this.router.navigateByUrl('login');
}
});
this.initializeApp();
}
initializeApp() {
this.platform.ready().then(() => {
this.statusBar.styleDefault();
this.splashScreen.hide();
});
}
}
checklist.page.ts
import { Component, OnInit } from '@angular/core';
import {UserService} from "../services/user.service";
import {User} from "../models/user";
@Component({
selector: 'app-checklist',
templateUrl: './checklist.page.html',
styleUrls: ['./checklist.page.scss'],
})
export class ChecklistPage implements OnInit {
user: User;
constructor(
private userService: UserService,
) {
this.user = this.userService.user;
}
ngOnInit() {
console.log(this.user);
}
}
I know that I might can use the Guard-concept, but what if I also need other stuff from Storage before loading a page?
