Rob Ferguson’s textbook has three things. Depending on your file structure, which is completely interchangeable ( ./ denotes the root directory of your application).
./tsconfig.json
{ "compilerOptions": { "baseUrl": "./src", "paths": { "@env": [ "env/env" ] }, ... } ... }
./package.json
{ "config": { "ionic_source_map_type": "source-map", "ionic_webpack": "./config/webpack.config.js" }, ... }
./config/webpack.config.js (depending on ionic_webpack in package.json )
/* * The webpack config exports an object that has a valid webpack configuration * For each environment name. By default, there are two Ionic environments: * "dev" and "prod". As such, the webpack.config.js exports a dictionary object * with "keys" for "dev" and "prod", where the value is a valid webpack configuration * For details on configuring webpack, see their documentation here * https://webpack.js.org/configuration/ */ const path = require('path'); // If you start your building process with the flag --prod this will equal "prod" otherwise "dev" const ENV = process.env.IONIC_ENV; const devConfig = { entry: ..., output: {...}, devtool: ..., resolve: { extensions: [...], modules: [...], alias: { // this distincts your specific environment "dev" and "prod" "@env": path.resolve(`./src/env/env.ts`), } }, module: {...}, plugins: [...], node: {...} }; const prodConfig = { entry: ..., output: {...}, devtool: ..., resolve: { extensions: [...], modules: [...], alias: { // this distincts your specific environment "dev" and "prod" "@env": path.resolve(`./src/env/env.prod.ts`), } }, module: {...}, plugins: [...], node: {...} }; module.exports = { dev: devConfig, prod: prodConfig }
Description
The magic comes with devConfig.resolve.alias and prodConfig.resolve.alias . This line of code creates an imported alias, such as your own modules or node modules. Now it will be possible to enter through import { ENV } from '@env' any module, component, service, pipe or whatever.
Note
Remember to create files specific to your environment. In this example, you will need a file structure like this:
./ | package.json │ tsconfig.json │ └── config │ webpack.config.js │ └── src │ └── env env.ts (dev environment variables) env.prod.ts (prod environment variables)
Sample file
./src/env/env.ts (by default it will be development)
export const ENV = { production: false, isDebugMode: true };
./SRC/ENV/env.prod.ts
export const ENV = { production: true, isDebugMode: false };