Angular 2: Import service based on environment

Question

What is the best/proper way to import a service based on the current environment within an angular-cli project?

I have setup up a new environment called dev-mock which I can call with ...

ng serve --environment=mock

I then set up the provider in the module with useClass

app/app.module.ts ...

import {environment} from '../environments/environment';
import {ApiService} from './api/api.service';
import {MockApiService} from './api/mock/mock-api.service';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [
    {
      provide: ApiService,
      useClass: (environment.name === 'dev-mock') ? MockApiService : ApiService
    }
  ],
  bootstrap: [AppComponent]
})

This works fine, the problem then is what do I do when I want to inject that into another service or component, for example ...

app/ticket/ticket.service.ts

import {ApiService} from '../api/api.service'; // *** WHAT AM I TO DO HERE? ***

@Injectable()
export class TicketService {

  constructor(private api: ApiService, private http: Http) {
  }

}

Obviously my approach is wrong. What is the correct approach?

kit · Accepted Answer · 2017-04-11 18:08:30Z

3

Create interface for MockApiService and ApiService eg. IApiService. If you want to interchange them there has to be one.

Create a file with token and export it:

import { OpaqueToken } from '@angular/core';
export let API_SERVICE = new OpaqueToken('api.service');

Then register your service somewhere using the token:

const apiServiceClass = (environment.name === 'dev-mock') ? MockApiService : ApiService;

providers: [{ provide: API_SERVICE, useClass: apiServiceClass }]

Finally you can use it in any place using Inject() decorator applied in constructor, eg.

import {IApiService} from '../api/iapi.service';
import { Inject, Injectable } from '@angular/core';

@Injectable()
export class TicketService {

  constructor(@Inject(API_SERVICE) private api: IApiService) {}
}

The trick is to gice interface as type of property and use Inject() with OpaqueToken to tell dependency injector what it should put.

edited Apr 11, 2017 at 18:08

answered Apr 10, 2017 at 16:56

kit

4,9203 gold badges26 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

pashioz Over a year ago

Can you provide an example where it will inject one or the other service based on the environment? I've tried several things, but still need import one or the other api class in the service I want to use it in, it doesn't occur automatically based on my provide object.

San Jaisy · Accepted Answer · 2020-05-04 06:45:45Z

In my libs, I am using an abstract Environment class that defines common environment variables.

export abstract class Environment {
  abstract readonly production: boolean;
  abstract readonly appUrls: {
    readonly public: string;
    readonly portal: string;
    readonly admin: string;
  };
}

Then I changed the environment.ts files to be as follows.

import { Environment } from '@my-lib-prefix/common';

class EnvironmentImpl implements Environment {
  production = false;
  appUrls = {
    public: 'http://localhost:4200',
    portal: 'http://localhost:4201',
    admin: 'http://localhost:4202'
  };
}

export const environment = new EnvironmentImpl();

The environment.prod.ts would of course be symmetric to the dev environment.ts. Then I provide the respective environment dependency, in the root app.module.ts for each of the Angular apps.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { Environment } from '@my-lib-prefix/common';
import { environment } from '../environments/environment';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [{ provide: Environment, useValue: environment }],
  bootstrap: [AppComponent]
})
export class AppModule {}

Now any component can inject environment dependencies in a clean, and common manner.

import { Component } from '@angular/core';
import { Environment } from '@my-lib-prefix/common';

    @Component({
      selector: 'my-login',
      templateUrl: './my-login.component.html'
    })
    export class MyLoginComponent {
      constructor(private env: Environment) {}
    }

It enforces each environment.ts to implement the "common" environment variables defined in the abstract class. Also, each respective EnvironmentImpl can be extended with their own specific environment variables specific to the app. This approach seems very flexible and clean. Cheers!

Collectives™ on Stack Overflow

Angular 2: Import service based on environment

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related