I would like to configure my Webpack build such that I can declare import { environment } from './environments/environment'
in my Angular 2 components and have the import load environment.ts
during development, but environment.prod.ts
in production. How would I tell Webpack to replace the import during a build?
I'm looking for something very similar to the way projects created with Angular CLI are handling environment configurations. Unfortunately, I'd rather not use the CLI yet as it is still in beta, and I also haven't wrapped my head around how the project works and how to extend its build pipe.
I also want to avoid scattering conditional statements throughout my source code, so no using process.env.NODE_ENV
in an if-statement everywhere that I want to import the environment file.
To enable custom webpack configurations, open the angular. json configuration file. Locate the line "builder": "@angular-devkit/build-angular:browser" inside the architect.
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.
env at compile-time of the Angular code. 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.
Okay, I finally figured out a way to do this. First, the environment files:
environment.interface.ts:
export interface Environment {
apiRoot: string,
target: string
}
environment.dev.ts:
import { Environment } from './environment.interface';
export const environment: Environment = {
target: 'dev',
apiRoot: 'http://www.dev.api.com'
}
environment.prod.ts:
import { Environment } from './environment.interface';
export const environment: Environment = {
target: 'prod',
apiRoot: 'http://www.api.com'
}
environment.ts:
export { environment } from './environment.dev';
Then, import into the Angular components as normal:
import { environment } from './environments/environment';
Finally, using the NormalModuleReplacementPlugin in the webpack configuration:
webpack.prod.js:
module.exports = webpackMerge(commonConfig, {
...
plugins: [
...
new webpack.NormalModuleReplacementPlugin(/\.\/environment\.dev/, './environment.prod')
]
});
The first parameter in the NormalModuleReplacementPlugin is a Regex that matches environment.dev
in environment.ts
. The second parameter is the configuration module that you want to use in the build.
I'm sure that this could be made a bit more elegant by using some environment variables, but it's a good starting point.
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