Daren Keck Daren Keck - 1 year ago 250
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:


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

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

export const MyService = environment.mock ?

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 Source

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

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

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