using injectable service to set configuration of APP_BASE_HREF
<p>I'm writing an angular 2.1.0 project with typescript 2.0.3.</p>

<p>I created an <code>app-config</code> service with the following code:</p>

<pre><code>import { Injectable } from '@angular/core';

@Injectable()
export class AppConfigService {
  public config: any = {
    auth0ApiKey: '&lt;API_KEY&gt;',
    auth0Domain: '&lt;DOMAIN&gt;',
    auth0CallbackUrl: '&lt;CALLBACK_URL&gt;',
    appBaseHref: '/'
  }

  constructor() {}

  /* Allows you to update any of the values dynamically */
  set(k: string, v: any): void {
    this.config[k] = v;
  }

  /* Returns the entire config object or just one value if key is provided */
  get(k: string): any {
    return k ? this.config[k] : this.config;
  }
}
</code></pre>

<p>now I want to use that injectable service on my <code>app-module.ts</code> in order to set the <code>APP_BASE_HREF</code> provider.</p>

<pre><code>import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { AppComponent } from './app/app.component';
import { HelpComponent } from './help/help.component';
import { WelcomeComponent } from './welcome/welcome.component';
import {APP_BASE_HREF} from "@angular/common";
import { MaterialModule } from "@angular/material";
import { AUTH_PROVIDERS }      from "angular2-jwt";
import { RouterModule }  from "@angular/router";
import {AppConfigService} from "app-config.service";

const appConfigService = new AppConfigService();    

@NgModule({
  declarations: [
    AppComponent,
    HelpComponent,
    WelcomeComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    MaterialModule.forRoot(),
    RouterModule.forRoot([
      { path: "",redirectTo:"welcome",pathMatch:"full"},
      { path: "welcome", component: WelcomeComponent },
      { path: "help",component: HelpComponent},
      { path: "**",redirectTo:"welcome"}
    ])
  ],
  providers: [AUTH_PROVIDERS,{provide: APP_BASE_HREF, useValue:appConfigService.get('appBaseHref')}],bootstrap: [AppComponent]
})
export class AppModule {
}
</code></pre>

<p>so here I initiate the class to a const and use it. is there a way to inject is in a cool and sexy way? </p>

<p>for example for my auth service I defined it in the constructor</p>

<pre><code>constructor(@Inject(AppConfigService) appConfigService:AppConfigService)
</code></pre>

<p>is there a way to do a sexy thing here too? or just to leave it as is?</p>

<p>thanks</p>