angular-cli: Conditional Imports using an environment variable

Question

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'.

monty · Accepted Answer · 2018-02-12 22:57:48Z

14

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:

How to inject different service based on certain build environment in Angular2

edited Feb 12, 2018 at 22:57

monty

1,59015 silver badges34 bronze badges

answered Oct 13, 2016 at 23:26

Paul Samsotha

210k39 gold badges503 silver badges756 bronze badges

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

5 Comments

ENargit Over a year ago

This approach works well, but has a drawback, that mock services are included into production package

Valevalorin Over a year ago

How exactly do I inject the provider when it's created this way? Normally I would import from the file the service lives in, but in this case it could one of two files. How do I tell Angular I want the provider from the provided factory function?

Paul Samsotha Over a year ago

@Valevalorin by the token (the provide), which is MyService. That's what you inject.

Valevalorin Over a year ago

I need to know specifically what the line beginning with import looks like.

David Zwart Over a year ago

@Enargit list the mock and the real service in a module and then conditionally load that module in the imports section. Also look at, where I got this answer from: stackoverflow.com/a/51772549/2733437

shusson · Accepted Answer · 2016-10-13 23:12:48Z

0

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

edited Oct 13, 2016 at 23:12

answered Oct 13, 2016 at 23:07

shusson

5,79237 silver badges40 bronze badges

1 Comment

Daren Keck Over a year ago

Thank you for the idea. I am still running into the same error though, with Cannot find name 'MyService'. Also potentially of note: the static analysis of the typescript in VS Code echos the same error, indicating that the import is resolving, but when attempting to do dependency injection in the constructor it is not resolving the name.

Collectives™ on Stack Overflow

angular-cli: Conditional Imports using an environment variable

2 Answers 2

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related