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