angular-cli: Conditional Imports using an environment variable

10
votes

Is there a way to conditionally change imports based on an environment variable in [email protected]? 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'.

2
angulartypescriptwebpackangular-cli

2 Answers

12
votes

You're going about it completely wrong. Angular can handle 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 production you will get the real service.

See Also:

0
votes

Change your MyService import to:

import { MyService } from './myservice/index';

The surrounding {} will tell the compiler to import a single export from the file. If you want to be able to import like:

import MyService from './myservice/index';

Then you must have a default export in index.ts e.g:

export default MyService; .

More information on TypeScript modules can be found here: https://www.typescriptlang.org/docs/handbook/modules.html