ufk ufk - 1 year ago 203
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

service with the following code:

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

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
in order to set the

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();

declarations: [
imports: [
{ 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?


Answer Source

You could use a factory for the APP_BASE_REF

providers: [
    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:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download