Daren Keck Daren Keck - 1 month ago 28
TypeScript Question

angular-cli: Conditional Imports using an environment variable

Is there a way to conditionally change imports based on an environment variable in angular-cli@1.0.0-beta.16? I'm trying to do it in a way that doesn't require code changes in how services are imported in client code, but when needed I can specify a build flag to swap in mock services.

There is a pattern I tried using from this post:


File structure:

MyService
MyServiceMock.ts
MyServiceReal.ts
index.ts


And in your index.ts, you can have the following:

import { environment} from '../environments/environment';

export const MyService = environment.mock ?
require('./MyServiceMock').MyServiceMock:
require('./MyServiceReal').MyServiceReal;


And in your client code, import MyService:

import MyService from './myservice/index';



The page loads, and I can see the dependency getting injected when stepping through the code, however there are compilation errors (which I believe are TypeScript errors) along the lines of
Cannot find name 'MyService'
.

Answer

You're going about it completely wrong. Angular candle this use case with the use of factories when you configure the providers

providers: [
  Any,
  Dependencies
  {
    provide: MyService, 
    useFactory: (any: Any, dependencies: Dependencies) => {
      if (environment.production) {
        return new MyService(any, dependencies);
      } else {
        return new MockMyService(any, dependencies);
      }
    },
    deps: [ Any, Dependencies ]
]

Now you can just inject MyService everywhere because of the provide: MyService, but in development, you will get the mock, and in development you will get the real service.

See Also: