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'
.
Angular provides build-in support to configure and manage Environment Variables. It keeps the environment configuration under the folder src/environments folder.
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.
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.
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.
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:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With