Create 2 configuration files with environment variables in folder src/config: config.dev.ts and config.prod.ts
|
1 2 3 |
export const ENV = { API_ENDPOINT: 'https://dev.example.com/api' }; |
|
1 2 3 |
export const ENV = { API_ENDPOINT: 'https://prod.example.com/api' }; |
Update: For Ionic < 3.7
Override 2 configuration files provided by @ionic/app-scripts package: optimization.config.js and webpack.config.js
|
1 2 3 4 5 6 7 8 9 |
var path = require('path'); var useDefaultConfig = require('@ionic/app-scripts/config/optimization.config.js'); module.exports = function () { useDefaultConfig.resolve.alias = { "@environment": path.resolve(__dirname + '/../../src/config/config.' + process.env.IONIC_ENV + '.ts'), }; return useDefaultConfig; }; |
|
1 2 3 4 5 6 7 8 9 |
var path = require('path'); var useDefaultConfig = require('@ionic/app-scripts/config/webpack.config.js'); module.exports = function () { useDefaultConfig.resolve.alias = { "@environment": path.resolve(__dirname + '/../../src/config/config.' + process.env.IONIC_ENV + '.ts'), }; return useDefaultConfig; }; |
Notify ionic to use these overridden files by adding links to them to package.json
|
1 2 3 4 |
"config": { "ionic_optimization": "./src/config/optimization.config.js", "ionic_webpack": "./src/config/webpack.config.js" } |
Update: For Ionic >= 3.7
Override webpack.config.js, provided by @ionic/app-scripts package.
|
1 2 3 4 5 6 7 8 9 |
var path = require('path'); var useDefaultConfig = require('@ionic/app-scripts/config/webpack.config.js'); module.exports = function () { useDefaultConfig[process.env.IONIC_ENV].resolve.alias = { "@environment": path.resolve(__dirname + '/../../src/config/config.' + process.env.IONIC_ENV + '.ts'), }; return useDefaultConfig; }; |
Notify ionic to use overridden file by adding link to package.json
|
1 2 3 |
"config": { "ionic_webpack": "./src/config/webpack.config.js" } |
Instruct TypeScript to use custom alias for a module by editing tsconfig.json
|
1 2 3 4 5 6 7 8 9 10 |
{ "compilerOptions": { //... "baseUrl": "./src", "paths": { "@environment": ["config/config.prod"] } }, //... } |
Finally, use your environment variables
|
1 |
import { ENV } from '@environment'; |
Thanks a lot for sharing this. Was really helpful to make my setup work.
The only downside I found is when I have an environement that is prod-like, meaning using the –prod flag to build but some other env vars than prod, the ones from prod would get inline instead of the prod-like one.
I guess in the early stages of the prod build that is something replacing the paths based on the tsconfig which defaults to the prod env file and is not based on the build env.
Not sure if this makes sense to you.
TL;DR: if you base your env on something else than the IONIC_ENV to have more than 2 envs, this won’t work for the prod builds.
Let me know if can think of a solution for that or know which build step is replacing the files based on the tsconfig.
did not work for me..
I always got the dev environment when I use “ionic cordova run android” or “ionic cordova run android -prod”
any helps ?
Thanks
You have to use double dash for command-line options.
ionic cordova run android --proddidn’t work for me either. ionic cordova run android -prod
or cordova build android -prod
You have to use double dash for command-line options.
ionic cordova run android --prodThanks a lot for this article, it works perfectly.
For previous comments, try this:
ionic cordova run android –prod
It’s important use double “-” with prod configuration.
Hi, I am getting this error when I run –prod: Error: Uncaught (in promise): Error: Cannot find module “@environment”.
But I don’t get this error in dev. I have checked that the path correctly resolves in the webpack.config, and that the @environment is added to the typescript config. Any suggestions. I was using the example for ionic > 3.7
Same error here! Any solution?
Please share your tsconfig.json on https://gist.github.com
I get the same error, please find my tsconfig.json: https://gist.github.com/baipi/ad9a8bffa9abe945b87029d35e3945ce
It says 404 Not Found.
Please share your tsconfig.json on https://gist.github.com
Won’t the below line in tsconfig.json force the environment to prod always?
“@environment”: [“config/config.prod”]
This is getting overriden in modified webpack.config.js.
How to ad more than two environments?
I need to add another environment for testing.
For those having TS errors. I had to add a wildcard to
includesto ensure TSC compiled all config files (otherwise only.prodseems to be compiled). Then webpack doesn’t seem to be able to find the missing ones (like `.dev).“compilerOptions”: {
“paths” :{
“@environment”: [“config/config.prod”]
}
},
“include”: [
“config/config.*”
],
Hi,
@Zachary M, I got it working without
“include”: [
“config/config.*”
],
seems like process.env.IONIC_ENV is not updating when –prod or –env=prod is called.
https://github.com/jtushar53/ionic-sample-environment.git
Note: check out process.env.IONIC_ENV console in webpack.config.js
BRW, Thanks @Artyom for sharing.
thx bro