Imported service is undefined on abstract class

I have abstracted class Collection, which utilizes a service Database to initialize collections on a database. I have several subclass instances of Collection, that all need to do the same database initialization. So Collection is some kind of base class.

Suprisingly, the imported service Database is undefined on the constructor of the subclass FooCollection. The constructor of the Database service is definitely called before the Foobar constructor.

Why is the imported service undefined on FooCollection?

Is this a reason of misconception or related to the loading order of classes?

Collection.ts:

import { Database } from '../providers/database';
import {Injectable} from "@angular/core";

@Injectable()
export abstract class Collection {

public name : string;

constructor(public db : Database) {
// db is undefined here -> crash
db.doSomething();
}
}


Database.ts:

import {Injectable} from '@angular/core';
import 'rxjs/add/operator/map';

@Injectable()
export class Database {

private _db: any = null;

constructor() {
console.log('Hello Database Provider');
}

public doSomething(): void {
console.log("doSomething");
}
}


FooCollection.ts:

import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';
import { Collection} from '../classes/collection';


@Injectable()
export class FooCollection extends Collection{
}


app.module.ts:

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { Start } from '../pages/page/start';
import { Database } from '../providers/database';
import { FooCollection } from "../providers/foocollection";

@NgModule({
declarations: [
MyApp,
Start
],
imports: [
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
Start
],
providers: [
{provide: ErrorHandler, useClass: IonicErrorHandler},
Database,
FooCollection
]
})
export class AppModule {}


Start.ts:

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

import { FooCollection } from '../../providers/foocollection';

@Component({
selector: 'page-start',
templateUrl: 'start.html'
})
export class Start{
constructor(public navCtrl: NavController, public f: FooCollection ) {
}
}


EDIT:

I noticed that explicitly importing Database again on FooCollection works fine:

import { Injectable } from '@angular/core';
import { Database } from './database';
import 'rxjs/add/operator/map';
import { Store } from '../classes/store';

@Injectable()
export class Calls extends Store {
constructor(public db : Database) {
super(db);
}
}


This raises the question how imports are handled on subclasses of abstract classes.

Continue reading...