angular-cli: Conditional Imports using an environment variable

Question

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 change

Answer 1

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

Answer 2

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