Lazy Loaded/DeepLinked page is loading before providers are ready

Ionic Framework ionic-v3
1

I’ve split out each page/component/pipe into it’s own module and it’s mostly working ok; if I navigate to the general URL http://localhost:8080 it all works as expected.

The main issue I’m having is when I type in a page URL directly - for example http://localhost:8080/tasks. When accessed like this, the TasksPage constructor seems to be being called before the app.component.ts constructor, and all my services, such as AngularFireAuth, or pre-setup providers, are all undefined as they haven’t had the chance to load yet.

Why does going straight to a page URL have this behaviour, and how can I fix it so that it waits for app.component.ts like it should do?

tasks.page.ts

import { TasksService } from '../../providers/tasks/tasks';

@IonicPage()
...
export class TasksPage {
    tasks: Observable<{}>;

    constructor(public tasksService: TasksService) {
        this.tasks = this.tasksService.tasks;
    }
}

tasks.page.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { TasksPage } from './tasks;

@NgModule({
    declarations: [
        RequestsHistoryPage,
    ],
    imports: [
        IonicPageModule.forChild(RequestsHistoryPage),
    ],
})
export class TasksPageModule {}

tasks.service.ts

import { AngularFireAuth } from 'angularfire2/auth';
import { AngularFireDatabase } from 'angularfire2/database';
import { AuthService } from '../auth/auth';
import { FirebaseRootService } from '../firebase/root';

@Injectable()
export class TasksService {

    constructor(public afAuth: AngularFireAuth, public afDb: AngularFireDatabase, public rootService: rootService, public authService: AuthService) {
    }

    get tasks(): Observable<{}> {
        // rootService and authService.user are undefined if I go to the page URL directly, otherwise they work fine
        return this.afDb.list<{}>(`${this.rootService.afdbRoot}tasks/`, (ref) =>
            ref.orderByChild('createdBy').equalTo(this.authService.user.uid)
        ).valueChanges().pipe(takeUntil(this.afAuth.authState.filter(user => !user)));
    }

}