gshigeto / ionic-environment-variables Goto Github PK
View Code? Open in Web Editor NEWEasy to use environment variables for Ionic3!
License: MIT License
Easy to use environment variables for Ionic3!
License: MIT License
Hello! Thank you for this demo.
While I was trying to use this demo it was not obvious to me that the @ionic/app-scripts package was needed. What do you think of updating your tutorial recommending the update/installation of this one?
[10:41:41] transpile started ...
There was an error in config file "D:\Dropbox\I2\shareweb3\config\webpack.config.js". Using defaults instead.
TypeError: Cannot set property 'alias' of undefined
at module.exports (D:\Dropbox\I2\shareweb3\config\webpack.config.js:5:34)
Trying to put my app in Ionic Pro after implementing this config I get the following error:
> [email protected] build /usr/src/app
> MY_ENV=stag ionic-app-scripts build --prod
[06:24:05] ionic-app-scripts 3.1.4
[06:24:05] build prod started ...
[06:24:06] clean started ...
[06:24:06] clean finished in 1 ms
[06:24:06] copy started ...
[06:24:06] deeplinks started ...
[06:24:06] deeplinks finished in 119 ms
[06:24:06] ngc started ...
[06:24:14] typescript: src/providers/api/api.ts, line: 3
Cannot find module '@app/env'.
L2: import { Injectable } from '@angular/core';
L3: import { ENV } from '@app/env';
[06:24:14] ionic-app-script task: "build"
[06:24:14] Error: The Angular AoT build failed. See the issues above
Error: The Angular AoT build failed. See the issues above
at /usr/src/app/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:232:55
at step (/usr/src/app/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:32:23)
at Object.next (/usr/src/app/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:13:53)
at fulfilled (/usr/src/app/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:4:58)
at
npm info lifecycle [email protected]~build: Failed to exec build script
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `MY_ENV=stag ionic-app-scripts build --prod`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/gitlab-runner/.npm/_logs/2017-12-01T06_24_14_284Z-debug.log
npm run build failed
Make sure your project has a build script in the package.json
Running after script...
$ clean-up
Cleaning up files...
Successful clean up
ERROR: Job failed: exit status 1
In my computer if I execute npm run build
(which is what Ionic Pro runs) it works properly.
Thank you.
When following the readme file and running:
"serve:testing": "MY_ENV=testing ionic-app-scripts serve"
The following error is shown:
'MY_ENV' is not recognized as an internal or external command
How is the command supposed to be run?
First time implemented this approach it worked, now it seems like the env file with old properties is cached and no matter what i change is not updating the files. How does update the build with new env file changes? I have tries ionic serve
, ionic build
but not success. Appreciated any help please. Thanks
Command MY_ENV=dev ionic cordova run android --device --prod
I need to build with AOT in the dev environment.
Hi
I have an ionic application where I cannot use the ngo optimizer tool.
Instead of
npm run build --prod
or ionic build --prod
I have to run the production build with these flags
npm run build --aot --minifyjs --minifycss
https://github.com/ionic-team/ionic-app-scripts/releases/tag/v3.0.0
Unfortunately this throws an error during the build process when I use the webpack configuration from this repository. To solve that I changed the webpack.config.js to this.
var chalk = require("chalk");
var fs = require('fs');
var path = require('path');
var useDefaultConfig = require('@ionic/app-scripts/config/webpack.config.js');
useDefaultConfig.prod.resolve.alias = {
"@app/env": path.resolve(environmentPath('prod'))
};
useDefaultConfig.dev.resolve.alias = {
"@app/env": path.resolve(environmentPath('dev'))
};
function environmentPath(env) {
var filePath = './src/environments/environment' + (env === 'prod' ? '' : '.' + env) + '.ts';
if (!fs.existsSync(filePath)) {
console.log(chalk.red('\n' + filePath + ' does not exist!'));
} else {
return filePath;
}
}
module.exports = function () {
return useDefaultConfig;
};
Ionic CLI automatically selects the prod config when the flags --aot --minifyjs --minifycss
are used.
Cannot find module '@app/env' error is preventing the build
On ionic build --dev
, I get this error message:
There was an error in config file "/home/kper/Work/Toni/toni-webviews-ionic/config/webpack.config.js". Using defaults instead.
TypeError: Cannot read property 'resolve' of undefined
at Object.<anonymous> (/home/kper/Work/Toni/toni-webviews-ionic/config/webpack.config.js:11:22)
...
In webpack.config.js
Line 11:
useDefaultConfig.prod.resolve.alias = {
"@app/env": path.resolve(environmentPath('prod'))
};
This is the output of useDefaultConfig
:
{ entry: '/home/kper/Work/Toni/toni-webviews-ionic/src/app/main.ts',
output:
{ path: '{{BUILD}}',
publicPath: 'build/',
filename: 'main.js',
devtoolModuleFilenameTemplate: [Function: provideCorrectSourcePath] },
devtool: 'source-map',
resolve:
{ extensions: [ '.ts', '.js', '.json' ],
modules: [ '/home/kper/Work/Toni/toni-webviews-ionic/node_modules' ] },
module: { loaders: [ [Object], [Object], [Object] ] },
plugins: [ IonicEnvironmentPlugin { context: [Object] } ],
node: { fs: 'empty', net: 'empty', tls: 'empty' } }
ionic info
cli packages: (/usr/local/lib/node_modules)
@ionic/cli-utils : 1.19.0
ionic (Ionic CLI) : 3.19.0
global packages:
cordova (Cordova CLI) : 7.1.0
local packages:
@ionic/app-scripts : 1.3.7
Cordova Platforms : none
Ionic Framework : ionic-angular 3.5.0
System:
Node : v6.10.3
npm : 5.6.0
OS : Linux 4.13
Environment Variables:
ANDROID_HOME : not set
Misc:
backend : pro
Ionic fails to build ios application stating that it can not locate the @app/env module. Reluctant to create what is almost a duplicate ticket, I have yet to be able to get to the bottom of this.
Command
ionic serve -l
works without exception.
Command
ionic cordova build ios
fails with following log & error
[13:12:15] typescript: src/app/app.module.ts, line: 7
Cannot find module '@app/env'.
L6: import { QRScanner, QRScannerStatus } from '@ionic-native/qr-scanner';
L7: import { ENV } from '@app/env';
[13:12:15] typescript: src/pages/scanner/scanner.ts, line: 5
Cannot find module '@app/env'.
L4: import { AuthenticationService } from '../../services/authentication/authentication-service';
L5: import { ENV } from '@app/env';
[13:12:15] typescript: src/services/authentication/authentication-api.ts, line: 5
Cannot find module '@app/env'.
L4: import { Response } from '@angular/http';
L5: import { ENV } from '@app/env';
[13:12:15] typescript: src/services/customers/customers-service.ts, line: 6
Cannot find module '@app/env'.
L5: import { Customer } from '../../models/customer';
L6: import { ENV } from '@app/env';
Error: Failed to transpile program
at new BuildError (/Users/swaskey/Sites/dev/dashboard.com/node_modules/@ionic/app-scripts/dist/util/errors.js:16:28)
at /Users/swaskey/Sites/dev/dashboard.com/node_modules/@ionic/app-scripts/dist/transpile.js:159:20
at new Promise (<anonymous>)
at transpileWorker (/Users/swaskey/Sites/dev/dashboard.com/node_modules/@ionic/app-scripts/dist/transpile.js:107:12)
at Object.transpile (/Users/swaskey/Sites/dev/dashboard.com/node_modules/@ionic/app-scripts/dist/transpile.js:64:12)
at /Users/swaskey/Sites/dev/dashboard.com/node_modules/@ionic/app-scripts/dist/build.js:109:82
at <anonymous>
Attempted:
Two different path settings.
...
"baseUrl": "./src",
"paths": {
"@app/env": [
"environments/environment"
]
}
...
"baseUrl": "./src",
"paths": {
"@app/env": [
"config"
]
}
Ionic Info
cli packages: (/Users/swaskey/.npm-global/lib/node_modules)
@ionic/cli-utils : 1.19.1
ionic (Ionic CLI) : 3.19.1
global packages:
cordova (Cordova CLI) : 8.0.0
local packages:
@ionic/app-scripts : 3.1.6
Cordova Platforms : browser 5.0.3 ios 4.5.4
Ionic Framework : ionic-angular 3.9.2
System:
Node : v8.9.3
npm : 5.5.1
OS : macOS High Sierra
Xcode : Xcode 9.2 Build version 9C40b
Environment Variables:
ANDROID_HOME : not set
Misc:
backend : pro
I want to create unit testing but, always get "Uncaught Error: Cannot find module "@app/env""
Hi!
As the title says,, I'm trying to serve my environment locally with the prod settings; Doesn't work out of the box. After following the instructions on your root .md file, I've done this:
package.json
Add an npm run script:
"serve:prod:win": "set MY_ENV=prod && ionic-app-scripts serve"
config/webpack.config.js
Update:
var env = process.env.MY_ENV;
// Set default environment to "dev"
env = env.trim();
console.log('>>>> chosen environment: "' + env + '"');
Doesn't seem quite right, even though the variable "prod" is shown to be properly selected via the console.log as I npm run serve:prod:win
, it's still the dev file that's in use.
N.B. I don't quite understand webpack, so don't consider this an educated guess :-)
How would you approach this?
Any way to make this work with ionic cordova run android --livereload?
I can get the dev configs but for production I can't. Any ideias?
Thank you!
there is no example in how or where to put the enviroment variable irself, i must put inside the env object or outside? it must have export const if is outside? and then how i used in the code, it just say how to import it. maybe this is too obvios to most people or i don't read someting in the documentation to understand it but i think it must be self explanatory.
It seems the problem occurs here: var useDefaultConfig = require('@ionic/app-scripts/config/webpack.config.js');
package.json
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve",
"debug:ios": "SENTRY_SKIP_AUTO_RELEASE=true ionic cordova prepare",
"build:ios": "SENTRY_SKIP_AUTO_RELEASE=true ionic cordova build ios",
"serve:prod": "LLI_ENV=prod ionic-app-scripts serve"
},
"config": {
"ionic_webpack": "./config/webpack.config.js",
"ionic_generate_source_map": "true"
},
weback.config.js
var chalk = require("chalk");
var fs = require('fs');
var path = require('path');
var useDefaultConfig = require('@ionic/app-scripts/config/webpack.config.js');
var env = process.env.LLi_ENV;
useDefaultConfig.prod.resolve.alias = {
"@app/env": path.resolve(environmentPath('prod'))
};
useDefaultConfig.dev.resolve.alias = {
"@app/env": path.resolve(environmentPath('dev'))
};
if (env !== 'prod' && env !== 'dev') {
// Default to dev config
useDefaultConfig[env] = useDefaultConfig.dev;
useDefaultConfig[env].resolve.alias = {
"@app/env": path.resolve(__dirname + 'config/config.' + process.env.LLi_ENV + '.ts'),
};
}
function environmentPath(env) {
var filePath = './src/environments/environment' + (env === 'prod' ? '' : '.' + env) + '.ts';
if (!fs.existsSync(filePath)) {
console.log(chalk.red('\n' + filePath + ' does not exist!'));
} else {
return filePath;
}
}
module.exports = function () {
return useDefaultConfig;
};
tsconfig.JSON
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [
"dom",
"es2015"
],
"module": "es2015",
"moduleResolution": "node",
"sourceMap": true,
"target": "es5",
"baseUrl": "./src",
"paths": {
"@app/env": [
"environments/environment"
]
}
},
"include": [
"src/**/*.ts"
],
"exclude": [
"node_modules",
"src/**/*.spec.ts",
"src/**/__tests__/*.ts"
],
"compileOnSave": false,
"atom": {
"rewriteTsconfig": false
}
}
USE in my code
import { ENV } from '@app/env'; //error
SERVER_URL: string = ENV.mode;
Hi, thank you for this approach. It worked perfectly.
However, It isn't clear to me how to run the app with a custom environment. Let´s suppose I have a custom configuration file called "environment.testing.ts
", how would you start / build the app from command line with that configuration?
Thanks!
Thanks for this!
I frequently use .env
files to keep API keys and other "secret stuff" from getting checked into my repo. I made a couple of minor modifications to your setup to make this work for me:
src/environments/environment.*
to ./.gitignore
src/environments/sample.environment.ts
that contains a basic template and instructions for what to put in environment[.dev].ts
Now I can put secret stuff in my ENV
and not worry that it will show up in my repo. Secret keys will get compiled into native apps and be mostly secure. Some other solution would have to be used for PWA's.
[07:57:04] ionic-app-scripts 3.2.4
[07:57:04] build prod started ...
[07:57:05] clean started ...
[07:57:05] clean finished in 2 ms
[07:57:05] copy started ...
[07:57:05] deeplinks started ...
[07:57:05] deeplinks finished in 393 ms
[07:57:05] ngc started ...
Cannot find name 'RaygunStatic'.
L19: this.raygun = raygun;
Cannot find name 'RaygunStatic'.
L22: //Add user detail take it from meta provider
L23: this.raygun.setVersion( Config.APP_VERSION );
L24: this.raygun.init( Config.RAYGUN_API_KEY );
[07:57:16] [07:57:16] typescript: src/services/raygun.ts, line: 19
[07:57:16] typescript: src/services/raygun.ts, line: 23
[07:57:16] ionic-app-script task: "build"
[07:57:16] Error: The Angular AoT build failed. See the issues above
Error: The Angular AoT build failed. See the issues above
at /home/shanmuk5209/Capillary/acuity/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:232:55
at step (/home/shanmuk5209/Capillary/acuity/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:32:23)
at Object.next (/home/shanmuk5209/Capillary/acuity/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:13:53)
at fulfilled (/home/shanmuk5209/Capillary/acuity/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:4:58)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: ionic-app-scripts build
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above
My env : Now using node v10.16.0 (npm v6.9.0)
My package.json
"dependencies": {
"@angular/animations": "5.0.0",
"@angular/common": "5.0.0",
"@angular/compiler": "5.0.0",
"@angular/compiler-cli": "5.0.0",
"@angular/core": "5.0.0",
"@angular/forms": "5.0.0",
"@angular/http": "5.0.0",
"@angular/platform-browser": "5.0.0",
"@angular/platform-browser-dynamic": "5.0.0",
"@ionic-native/app-version": "4.3.0",
"@ionic-native/core": "4.3.0",
"@ionic-native/fcm": "^4.4.2",
"@ionic-native/mixpanel": "4.3.0",
"@ionic-native/network": "4.3.0",
"@ionic-native/push": "4.3.0",
"@ionic-native/splash-screen": "4.3.0",
"@ionic-native/status-bar": "4.3.0",
"@ionic/storage": "2.1.3",
"@ngx-translate/core": "^9.1.1",
"@ngx-translate/http-loader": "^2.0.1",
"@types/highcharts": "^4.2.45",
"@types/raygun4js": "^2.4.0",
"angular2-highcharts": "^0.4.1",
"bower": "^1.8.8",
"cordova": "^7.1.0",
"cordova-android": "~6.3.0",
"cordova-plugin-app-version": "^0.1.9",
"cordova-plugin-backbutton": "^0.3.0",
"cordova-plugin-device": "^1.1.7",
"cordova-plugin-ionic-webview": "^1.1.16",
"cordova-plugin-network-information": "^1.3.4",
"cordova-plugin-overview": "^0.1.2",
"cordova-plugin-splashscreen": "^4.1.0",
"cordova-plugin-statusbar": "^2.3.0",
"cordova-plugin-whitelist": "^1.3.3",
"cordova-sqlite-storage": "^1.5.3",
"highcharts": "^4.2.7",
"ionic-angular": "^3.9.2",
"ionic-plugin-deploy": "^0.6.7",
"ionic-plugin-keyboard": "^2.2.1",
"ionicons": "3.0.0",
"lodash": "^4.17.2",
"mixpanel-browser": "^2.9.17",
"moment": "^2.17.0",
"phonegap-plugin-push": "^2.0.0",
"raygun4js": "^2.4.3",
"rxjs": "5.5.2",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.18"
},
"devDependencies": {
"@ionic/app-scripts": "3.2.4",
"gulp": "^3.9.1",
"gulp-bump": "2.8.0",
"gulp-prompt": "0.4.1",
"gulp-rename": "1.2.2",
"gulp-run": "1.7.1",
"ionic": "^3.20.1",
"merge-stream": "1.0.1",
"request-promise": "4.2.2",
"run-sequence": "2.2.0",
"typescript": "2.4.2",
"yargs": "13.1.0"
},
can anyone help with this?
when trying to change IONIC_ENV to BV_ENV, throws error
BV_ENV is not recognized as an internal or external command
is there any other place where I have to declare this variable?
Hello,
I have 5 environments in my project and what I want like
IC_ENV=stage ionic cordova emulate ios -l //environment.stage.ts should used
IC_ENV=dev ionic cordova emulate ios -l //environment.dev.ts should used
IC_ENV=prod ionic cordova emulate ios -l //environment.prod.ts should used
IC_ENV=local ionic cordova emulate ios -l //environment.local.ts should used
IC_ENV=demo ionic cordova emulate ios -l //environment.demo.ts should used
useDefaultConfig.prod.resolve.alias = {
"@app/env": path.resolve(environmentPath('prod'))
};
useDefaultConfig.dev.resolve.alias = {
"@app/env": path.resolve(environmentPath('dev'))
};
useDefaultConfig.demo.resolve.alias = {
"@app/env": path.resolve(environmentPath('demo'))
};
useDefaultConfig.local.resolve.alias = {
"@app/env": path.resolve(environmentPath('local'))
};
useDefaultConfig.stage.resolve.alias = {
"@app/env": path.resolve(environmentPath('stage'))
};
But every time my "environment.stage.ts" file is used as it's last. Can anyone explain to me what I am doing wrong?
I've followed your steps but got the error can't find a module
.
I've kept the config.dev.ts and config.prod.ts under ./config.
tsconfig.json
"baseUrl": "./config",
"paths": {
"@app/env": ["config"]
},
webpack.config.js
var path = require('path');
var useDefaultConfig = require('@ionic/app-scripts/config/webpack.config.js');
module.exports = function () {
useDefaultConfig[process.env.IONIC_ENV].resolve.alias = {
"@app/env": path.resolve(__dirname + '/config.' + process.env.IONIC_ENV + '.ts'),
};
return useDefaultConfig;
};
These are the same as you mentioned in README but still can't find a module.
Ionic v3.9.3
When run the command
ionic build --prod
cause the following error
Running app-scripts build: --prod
[11:23:37] build prod started ...
[11:23:38] clean started ...
[11:23:38] clean finished in 206 ms
[11:23:38] copy started ...
[11:23:44] deeplinks started ...
[11:23:45] deeplinks finished in 595 ms
[11:23:45] ngc started ...
[11:24:11] typescript error
Error encountered resolving symbol values statically. Could not resolve @app/env relative to
/Users/sme_academy10/Documents/hybrid/deployment/GERewards/src/pages/shared/reducers/index.ts., resolving
symbol metaReducers in
/Users/sme_academy10/Documents/hybrid/deployment/GERewards/src/pages/shared/reducers/index.ts, resolving
symbol AppModule in /Users/sme_academy10/Documents/hybrid/deployment/GERewards/src/app/app.module.ts,
resolving symbol AppModule in
/Users/sme_academy10/Documents/hybrid/deployment/GERewards/src/app/app.module.ts, resolving symbol AppModule
in /Users/sme_academy10/Documents/hybrid/deployment/GERewards/src/app/app.module.ts
Error: The Angular AoT build failed. See the issues above
at /Users/sme_academy10/Documents/hybrid/deployment/GERewards/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:237:55
at step (/Users/sme_academy10/Documents/hybrid/deployment/GERewards/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:32:23)
at Object.next (/Users/sme_academy10/Documents/hybrid/deployment/GERewards/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:13:53)
at fulfilled (/Users/sme_academy10/Documents/hybrid/deployment/GERewards/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:4:58)
at <anonymous>
ionic info
cli packages: (/Users/sme_academy10/.npm-packages/lib/node_modules)
@ionic/cli-utils : 1.19.0
ionic (Ionic CLI) : 3.19.0
global packages:
cordova (Cordova CLI) : 7.1.0
Gulp CLI : CLI version 3.9.1 Local version 3.9.1
local packages:
@ionic/app-scripts : 3.1.6
Cordova Platforms : android 6.2.3 ios 4.3.1
Ionic Framework : ionic-angular 3.9.2
System:
ios-deploy : 1.9.2
Node : v9.3.0
npm : 2.15.12
OS : macOS High Sierra
Xcode : Xcode 9.2 Build version 9C40b
Environment Variables:
ANDROID_HOME : not set
Misc:
backend : pro
How is this supposed to resolve when testing?
Hello,
I'm facing a probleme when I run this command:
ionic cordova run android --prod --livereload
It always use the development env and never use prod.
It works correctly with ionic cordova build android --prod
Can we do something about that ?
Thanks
We have multiple apps and trying to not have duplicated code everything.
Trying to move as much in some higher folder and then include it in multiple apps.
Apps
--Enviroments
--Components
--App1
tsconfig.json
-- -- src/app
config/webpack.config.js
I just need the webpack to see the Environments.
I changed the environment Path function to find the correct file.
var filePath = '../environments/environment' + (env === 'prod' ? '' : '.' + env) + '.ts';
I don't know if I need to change tsConfig.json file.
"paths": {
"@app/env": [
"environments/environment"
]
}
I'm unclear if this path is an actually path or something else?
Anytime I build I just get
Cannot find module '@app/env'. in all my component files.
The component files are outside the normal Angular /src/app/pages location.
The approach in this repo works fine when building an app from my local machine, when I have an src/environments/environment.ts
file.
In a CI environment though (Circle CI for example), there is no src/environments/environment.ts
file as they are not committed to my repo. Instead, all environment variables are configured in the CircleCI interface and passed into the build container as OS environment variables.
When I try to build my app on the CI server instance:
ionic build --prod
I get an error:
Cannot find module '@app/env'.
ENV
object?environment.ts
present?I got an error Module not found: Error: Can't resolve '@app/env'
.
I hope somebody is out there that can still help with this.
Out of the blue I'm not able to build an Ionic 3 app for browser. Can build fine for local (npm server) and can build ios and Android just fine. But when building for browser
MY_ENV=no ionic cordova build browser --prod --verbose
ENV no is set up. This just tells the code that there is no URL to hit. The code and the URL live on the same server.
Getting this error.
Error: ..filePage.ts
Module not found: Error: Can't resolve '@app/env' in '/filePage'
resolve '@app/env' in '/filePage'
Parsed request is a module
No description file found
resolve as module
looking for modules in /appRoot/node_modules
using description file: /appRoot/package.json (relative path: ./node_modules)
Field 'browser' doesn't contain a valid alias configuration
after using description file: /appRoot/package.json (relative path: ./node_modules)
using description file: /appRoot/package.json (relative path: ./node_modules/@app/env)
no extension
Some reason it can't figure out what @app/env is. Code then tries to find it in node_modules goes down the wrong path.
Most of what is set up in this git hub is being used.
tsconfig.json
"paths": {
"@angular/*": ["../node_modules/@angular/*"],
"@app/env": [
"environments/environment"
]
}
In the custom /config/webpack.config.js setting up the @app/env for each environment
if(env == 'dev' || env == 'no')
{
useDefaultConfig.dev.resolve.alias = {
"@app/env": path.resolve(envPath)
};
}
else
{
useDefaultConfig.prod.resolve.alias = {
"@app/env": path.resolve(envPath)
};
}
I suspect maybe something with this isn't working anymore. app/env is empty ? Why only browser would be effected?
I don't know how to verify this is getting set up correctly.
I don't even know what to debug to get the browser version working.
I added and removed the browser "app". No change.
I have even uninstall node_modules and set them back up again. (maybe that did more harm).
Any ideas would be appreciated.
hey guys, got the following error after introducing env variables in my proj.
Actually deploying the application with ionic live deploy the deploy console returns an error:
$ npm run build
npm info it worked if it ends with ok
npm info using [email protected]
npm info using [email protected]
npm info lifecycle [email protected]~prebuild: [email protected]
npm info lifecycle [email protected]~build: [email protected]
> [email protected] build /usr/src/app
> ionic-app-scripts build
[17:02:03] ionic-app-scripts 3.1.8
[17:02:03] build dev started ...
[17:02:03] clean started ...
[17:02:03] clean finished in 1 ms
[17:02:03] copy started ...
[17:02:03] deeplinks started ...
[17:02:03] deeplinks finished in 99 ms
[17:02:03] transpile started ...
./src/environments/environment.ts does not exist!
There was an error in config file "/usr/src/app/config/webpack.config.js". Using defaults instead.
TypeError: Path must be a string. Received undefined
I think this is because of webpack.config.js uses the filesystem...
Hi, @gshigeto.
This information is what I wanted.
But I couldn't find the license information of this repository.
Why don't you do adding a LICENSE file?
Can I use this information for my project?
I do.
git clone https://github.com/rdlabo/ionic-environment-variables.git
cd ionic-environment-variables
npm i
npm install [email protected] @ionic/[email protected] @angular/[email protected] @angular/[email protected] @angular/[email protected] @angular/[email protected] @angular/[email protected] @angular/[email protected] @angular/[email protected] @angular/[email protected] [email protected] [email protected] --save
ionic serve
and, this is error log.
There was an error in config file "/Users/sakakibara/dev/ionic-environment-variables/config/webpack.config.js". Using defaults instead.
TypeError: Cannot set property 'alias' of undefined
at module.exports (/Users/sakakibara/dev/ionic-environment-variables/config/webpack.config.js:5:34)
at Object.fillConfigDefaults (/Users/sakakibara/dev/ionic-environment-variables/node_modules/@ionic/app-scripts/dist/util/config.js:322:30)
at Object.getWebpackConfig (/Users/sakakibara/dev/ionic-environment-variables/node_modules/@ionic/app-scripts/dist/webpack.js:194:44)
at Object.buildJsSourceMaps (/Users/sakakibara/dev/ionic-environment-variables/node_modules/@ionic/app-scripts/dist/bundle.js:26:35)
at /Users/sakakibara/dev/ionic-environment-variables/node_modules/@ionic/app-scripts/dist/transpile.js:117:51
at transpileWorker (/Users/sakakibara/dev/ionic-environment-variables/node_modules/@ionic/app-scripts/dist/transpile.js:107:12)
at Object.transpile (/Users/sakakibara/dev/ionic-environment-variables/node_modules/@ionic/app-scripts/dist/transpile.js:64:12)
at /Users/sakakibara/dev/ionic-environment-variables/node_modules/@ionic/app-scripts/dist/build.js:106:82
Hi
I'm using this repo with the very latest version of Ionic i.e 3.8.0 (which runs on Angular 4.4.4)
I can run the app in dev mode ok but if I run
npm run ionic:serve --prod
I get the error:
Error: Cannot find module "@app/env"
at Object.639 (http://localhost:8100/build/main.js:9289:7)
at __webpack_require__ (http://localhost:8100/build/vendor.js:55:30)
at Object.577 (http://localhost:8100/build/main.js:9196:70)
at __webpack_require__ (http://localhost:8100/build/vendor.js:55:30)
at webpackJsonpCallback (http://localhost:8100/build/vendor.js:26:23)
at http://localhost:8100/build/main.js:1:1
Ionic CLI version is 3.15.2
app-scripts version is 3.0.1
Am I doing something wrong?
The import only works after a recompile, ever first compilation gives an import error, but if I retry with any change on file (new line, on this example) it works fine. I have no guess why
Here is a compilation log:
$ MY_ENV=dev ionic-app-scripts serve
[19:45:14] ionic-app-scripts 3.1.10
[19:45:14] watch started ...
[19:45:14] build dev started ...
[19:45:14] clean started ...
[19:45:14] clean finished in 5 ms
[19:45:14] copy started ...
[19:45:14] deeplinks started ...
[19:45:14] deeplinks finished in 34 ms
[19:45:14] transpile started ...
[19:45:17] typescript: src/providers/authentication/authentication.ts, line: 5
Cannot find module '@app/env'.
L4: import 'rxjs/add/operator/map';
L5: import { API } from '@app/env';
[19:45:17] dev server running: http://localhost:8100/
[19:45:17] copy finished in 2.65 s
[19:45:17] watch ready in 2.69 s
[19:45:22] build started ...
[19:45:22] deeplinks update started ...
[19:45:22] deeplinks update finished in 24 ms
[19:45:22] transpile update started ...
[19:45:22] transpile update finished in 41 ms
[19:45:22] webpack started ...
[19:45:34] webpack finished in 12.61 s
[19:45:34] sass started ...
Without `from` option PostCSS could generate wrong source map and will not find Browserslist config. Set it to CSS file path or to `undefined` to prevent this warning.
[19:45:35] sass finished in 819 ms
[19:45:35] build finished in 13.56 s
Here is my tsconfig
file:
{
"compilerOptions": {
"typeRoots": ["node_modules/@types"],
"allowSyntheticDefaultImports": true,
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [
"dom",
"es2015"
],
"module": "es2015",
"moduleResolution": "node",
"sourceMap": true,
"target": "es5"
},
"include": [
"src/**/*.ts"
],
"exclude": [
"node_modules",
"src/**/*.spec.ts",
"src/**/__tests__/*.ts"
],
"compileOnSave": false,
"atom": {
"rewriteTsconfig": false
},
"baseUrl": "./src",
"paths": {
"@app/env": [
"environments/dev.ts", "environments/test.ts", "environments/prod.ts"
]
}
}
And here the webpack
file:
/*
* 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/
*/
var webpack = require('webpack');
var chalk = require("chalk");
var fs = require('fs');
var path = require('path');
var ionicWebpackFactory = require(process.env.IONIC_WEBPACK_FACTORY);
var ModuleConcatPlugin = require('webpack/lib/optimize/ModuleConcatenationPlugin');
var PurifyPlugin = require('@angular-devkit/build-optimizer').PurifyPlugin;
var useDefaultConfig = require('@ionic/app-scripts/config/webpack.config.js');
var env = process.env.MY_ENV;
useDefaultConfig.prod.resolve.alias = {
"@app/env": path.resolve(environmentPath('prod'))
};
useDefaultConfig.dev.resolve.alias = {
"@app/env": path.resolve(environmentPath('dev'))
};
useDefaultConfig.dev.plugins = [
ionicWebpackFactory.getIonicEnvironmentPlugin(),
ionicWebpackFactory.getCommonChunksPlugin(),
new webpack.NormalModuleReplacementPlugin(/typeorm$/, function (result) {
result.request = result.request.replace(/typeorm/, "typeorm/browser");
}),
new webpack.ProvidePlugin({
'window.SQL': 'sql.js/js/sql.js'
})
]
useDefaultConfig.prod.plugins = [
ionicWebpackFactory.getIonicEnvironmentPlugin(),
ionicWebpackFactory.getCommonChunksPlugin(),
new ModuleConcatPlugin(),
new PurifyPlugin(),
new webpack.NormalModuleReplacementPlugin(/typeorm$/, function (result) {
result.request = result.request.replace(/typeorm/, "typeorm/browser");
})
]
function environmentPath(env) {
var filePath = './src/environments/'+ env + '.ts';
if (!fs.existsSync(filePath)) {
console.log(chalk.red('\n' + filePath + ' does not exist!'));
} else {
return filePath;
}
}
module.exports = function () {
return useDefaultConfig;
};
I had some changes to run with typeorm and to find the file on a simpler path (environments/dev.ts
...).
But I don't see how they have to lead to this bug, anyone can help me to identify the problem here?
Not sure what I'm doing wrong. I think I have everything setup as the instructions say.
In a service I have
import { ENV } from '@app/env';
Get the error
Cannot find module '@app/env'.
I put in the value in the constructor
constructor(private http: HttpClient,
private env: ENV) {
this.baseUrl = env.wsUrl + this.baseUrl;
}
Trying to build the android app.
[16:28:00] typescript: src/services/user.service.ts, line: 18
Cannot find name 'ENV'.
L17: constructor(private http: HttpClient,
L18: private env: ENV) {
L19: this.baseUrl = env.wsUrl + this.baseUrl;
Not sure why it doesn't know what app/env is.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.