Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

angular-cli: Conditional Imports using an environment variable

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

like image 489
Daren Keck Avatar asked Oct 13 '16 17:10

Daren Keck


People also ask

Can angular read environment variables?

Angular provides build-in support to configure and manage Environment Variables. It keeps the environment configuration under the folder src/environments folder.

Can I use process ENV in angular?

process. env is available to Node applications, which an Angular application is not. You have several options: Make a task of some sort in your build pipeline to update the environment file with the correct value if it truly needs to be dynamic.

Does angular support dynamic imports?

TypeScript 2.4 added support for dynamic import() expressions, which allow us to asynchronously load and execute ECMAScript modules on demand. This means that we can conditionally and lazily import other modules and libraries.

What is the use of environment TS in angular?

A project's src/environments/ folder contains the base configuration file, environment.ts , which provides a default environment. You can add override defaults for additional environments, such as production and staging, in target-specific configuration files.


1 Answers

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
like image 174
Paul Samsotha Avatar answered Oct 22 '22 19:10

Paul Samsotha