ufk ufk - 1 month ago 20
TypeScript Question

using injectable service to set configuration of APP_BASE_HREF

I'm writing an angular 2.1.0 project with typescript 2.0.3.

I created an

app-config
service with the following code:

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

@Injectable()
export class AppConfigService {
public config: any = {
auth0ApiKey: '<API_KEY>',
auth0Domain: '<DOMAIN>',
auth0CallbackUrl: '<CALLBACK_URL>',
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;
}
}


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

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 {
}


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?

for example for my auth service I defined it in the constructor

constructor(@Inject(AppConfigService) appConfigService:AppConfigService)


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

thanks

Answer

You could use a factory for the APP_BASE_REF

providers: [
  AppConfigService,
  {
    provide: APP_BASE_HREF,
    useFactory: (config: AppConfigService) => {
      return config.get('appBaseHref')
    },
    deps: [ AppConfigService ]
  }
]

Once you add the AppConfigService to the providers, it makes it injectable to both the factory and the auth service. This is generally how it should be done anyway. Later if say the AppConfigService needs some dependencies maybe, it will be handled through the injection system.

See Also: