APP_BASE_HREF factory called before APP_INITIALIZER is done

<!DOCTYPE html>
<html>

  <head>
    <base href="." />
    <title>angular playground</title>
    <link rel="stylesheet" href="style.css" />
    <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
    <script src="https://unpkg.com/zone.js/dist/zone.js"></script>
    <script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
    <script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
    <script src="config.js"></script>
    <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
  </head>

  <body>
    <my-app>
    loading...
  </my-app>
  </body>

</html>

/* Styles go here */

### Angular Starter Plunker - Typescript

System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  paths: {
    'npm:': 'https://unpkg.com/'
  },
  //map tells the System loader where to look for things
  map: {
    
    'app': './src',
    
    '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
    '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
    '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
    '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
    '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
    '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
    '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
    '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
    '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
    '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
    
    '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
    '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
    '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
    '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
    '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
    '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
    '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
    
    'rxjs': 'npm:rxjs',
    'typescript': 'npm:typescript@2.2.1/lib/typescript.js'
  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    },
    rxjs: {
      defaultExtension: 'js'
    }
  }
});

//main entry point
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule)

import {NgModule, ErrorHandler, APP_INITIALIZER } from '@angular/core'
import { APP_BASE_HREF } from '@angular/common';
import { HttpModule, Http } from '@angular/http';
import { RouterModule } from '@angular/router';

import {BrowserModule} from '@angular/platform-browser'
import {AppComponent} from './app.component';
import { ChildComponent } from './app-child-component';
import { ConfigService, ConfigServiceBase } from './config.service';
import { AppRoutingModule }from './app.routing';

export function BaseHrefFactory(config: ConfigServiceBase) {
    console.log('BaseHrefFactory called');
    console.log('BaseHref: ' + config.baseHref);
    return config.baseHref;
}

export function AppInitializerFactory(config: ConfigServiceBase) {
    console.log('App Init')
    return () => config.load();
}
 
export class RavenErrorHandler implements ErrorHandler {

    private ravenInstalled: boolean = false;

    constructor(private config: ConfigServiceBase) {
      console.log('ErrorHandler Ctor: ' + config.submitToSentry);
    }

    handleError(err: any): void {
        if (this.config.submitToSentry) {
            if (!this.ravenInstalled) {
                this.installRaven();
            }
            console.log('Error has been submitted to Sentry');
        }
        console.error(err); // Console.error here is on purpose, to ensure we see errors in log
    }

    installRaven() {
        console.log('InstallRaven');
        this.ravenInstalled = true;
    }
}

@NgModule({
  imports: [ 
    BrowserModule, 
    HttpModule, 
    RouterModule, 
    AppRoutingModule, //Disabling this import and baseHref is called later in chain
],
  declarations: [ AppComponent, ChildComponent ],
  providers: [
        { provide: ConfigServiceBase, useClass: ConfigService },
        { provide: APP_INITIALIZER, useFactory: AppInitializerFactory, deps: [ConfigServiceBase], multi: true },
        { provide: ErrorHandler, useClass: RavenErrorHandler, deps: [ConfigServiceBase] },
        { provide: APP_BASE_HREF, useFactory: BaseHrefFactory, deps: [ConfigServiceBase] },
    ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

import {Component} from '@angular/core'

@Component({
  selector: 'app-child-component',
  template: `
    <div>
      <h3>I'm the Child component</h3>
    </div>
  `,
})
export class ChildComponent {}



//our root app component
import {Component, VERSION, Inject} from '@angular/core';
import { APP_BASE_HREF } from '@angular/common';

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
    </div>
    <app-child-component></app-child-component>
    <button (click)="doClick($event)">Click me for an error!</button>
  `,
})
export class AppComponent {
  name:string;
  constructor( @Inject(APP_BASE_HREF)baseHref: string) {
    this.name = `Angular! v${VERSION.full}` + ' - baseHref: ' + baseHref;
  }
  
    doClick(e: MouseEvent) {
        throw 'Darn - Im broke';
    }
}

import { Injectable, Inject } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Rx';

@Injectable()
export abstract class ConfigServiceBase {

    public baseHref: string = '/';
    public submitToSentry: boolean = false;

    abstract load();
}

@Injectable()
export class ConfigService implements ConfigServiceBase {

  public baseHref: string;
  public submitToSentry: boolean = false;
  
  constructor(@Inject(Http) private http: Http) { }

  public load() {
    
    console.log('ConfigService.load called');
       return new Promise((resolve, reject) => {
            this.http.get('config.json')
                .map(res => res.json())
                .catch((error: any): any => {
                    console.log('Failed to read config.json');
                    resolve(true);
                    return Observable.throw(error.json().error || 'Server error');
                })
                .subscribe((config) => {
                    this.baseHref = config.baseHref;
                    this.submitToSentry = config.submitToSentry;

                  console.log('config returned { baseHref: ' + this.baseHref + ', submitToSentry:' + this.submitToSentry +'}');

                    resolve(true);
                });
        });
  
}
  }
}

{ 
  "baseHref": "mybaseHref",
  "submitToSentry": true
}

import { VirtualPageComponent } from '@inx/shared/page/virtual-page.component';
import { AuthGuard } from '@inx/shared/authentication/shared/auth.guard';
import { ModuleWithProviders, NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { AppComponent } from './app.component';

const appRoutes: Routes = [

    { path: 'test', component: AppComponent },
    

    { path: '**', component: AppComponent },
];

const appRoutingProviders: any[] = [
];

const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

@NgModule({
    imports: [
        routing
    ],
    providers: [
        appRoutingProviders
    ],
    exports: [
        RouterModule
    ]
})
export class AppRoutingModule { }