Lazy Loaded/DeepLinked page is loading before providers are ready


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?

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

export class TasksPage {
    tasks: Observable<{}>;

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

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

    declarations: [
    imports: [
export class TasksPageModule {}


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

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) =>
        ).valueChanges().pipe(takeUntil(this.afAuth.authState.filter(user => !user)));