gshigeto / ionic-environment-variables Goto Github PK

View Code? Open in Web Editor NEW

276.0 11.0 36.0 1.64 MB

Easy to use environment variables for Ionic3!

License: MIT License

TypeScript 26.18% HTML 20.58% CSS 33.89% JavaScript 19.34%

ionic ionic-framework ionic3 ionic3-examples environment-variables environments angular4

ionic-environment-variables's Issues

Cannot find module '@app/env'.

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

The Angular AoT build failed. typescript error

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

Building Ionic for Browser --

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.

Production build without --prod does not work

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.

Custom environment other than IONIC_ENV, is not recognized as an internal or external command

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?

No example in how to write the enviroment variable itself

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.

Cannot find @app/env

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.

npm run build fails:

[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)

When I build with params MY_ENV=dev and --prod, ionic builds with the prod environment.

Command MY_ENV=dev ionic cordova run android --device --prod

I need to build with AOT in the dev environment.

Does not work with: ionic cordova run android --livereload

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!

About install/update Ionic App Scripts

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?

Environment folder outside Angular

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.

Cannot find module "@app/env" when trying to do unit tests

How is this supposed to resolve when testing?

using environment variables with live deploy

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...

Can not find '@app/env' when running 'ionic cordova build ios'

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

don't work [email protected] env.

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

Error: Cannot find module "@app/env"

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;

Everytime its load the last environment file

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?

Suggestion: prevent environment from being stored in repo

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:

Add src/environments/environment.* to ./.gitignore
Added a file 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.

Error: The Angular AoT build failed

[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?

Production env doesn't work with run livereload

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

How to use with Unit testing with Karma

I want to create unit testing but, always get "Uncaught Error: Cannot find module "@app/env""

Adding a License of this repository

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?

Using Karmatest with webpack.config.js fails

It seems the problem occurs here: var useDefaultConfig = require('@ionic/app-scripts/config/webpack.config.js');

Cannot find module "@app/env"

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?

Custom environments command

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?

How to run the app with custom environments?

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!

How to ionic serve --prod?

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?

Ionic Pro build error

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.

Cannot find module ''@app/env" only at first run

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?

TypeError: Cannot read property 'resolve' of undefined

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

Error when set MY_ENV=prod

I got an error Module not found: Error: Can't resolve '@app/env'.

Not working

Cannot find module '@app/env' error is preventing the build

Loading environment variables when no `environment.XXX.ts` present

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

Does this script load existing environment variables into the ENV object?
Can it work when there is no environment.ts present?

Updating env file with new attribute is not picked up by build or serve

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

gshigeto / ionic-environment-variables Goto Github PK

ionic-environment-variables's Issues

Recommend Projects

Recommend Topics

Recommend Org