bug: environment.prod doesn't override capacitor.congif

[ludonoel1]

Bug Report

Capacitor Version

  @capacitor/cli: 4.2.0    
  @capacitor/core: 4.2.0   
  @capacitor/android: 4.2.0
  @capacitor/ios: 4.2.0    

Installed Dependencies:    

  @capacitor/cli: 4.1.0    
  @capacitor/core: 4.1.0   
  @capacitor/ios: 4.1.0    
  @capacitor/android: 4.1.0

[success] Android looking great! 👌
[error] Xcode is not installed

Platform(s)

Android + ios

Current Behavior

I launch ionic capacitor build --prod or ionic capacitor build --configuration=production and capacitor.config.ts has values of environment.ts

Expected Behavior

capacitor.config.ts has environment.prod.ts values

npm --version output: 6.14.11

node --version output: 14.16.0

pod --version output (iOS issues only): none

Additional Context

angular.json

{ "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "defaultProject": "app", "newProjectRoot": "projects", "projects": { "app": { "root": "", "sourceRoot": "src", "projectType": "application", "prefix": "app", "schematics": {}, "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { "outputPath": "www", "index": "src/index.html", "main": "src/main.ts", "polyfills": "src/polyfills.ts", "tsConfig": "tsconfig.app.json", "assets": [ { "glob": "/*", "input": "src/assets", "output": "assets" }, { "glob": "*/.svg", "input": "node_modules/ionicons/dist/ionicons/svg", "output": "./svg" } ], "styles": [ "src/theme/variables.scss", "src/global.scss" ], "scripts": [], "aot": false, "vendorChunk": true, "extractLicenses": false, "buildOptimizer": false, "sourceMap": true, "optimization": false, "namedChunks": true }, "configurations": { "production": { "fileReplacements": [ { "replace": "./src/environments/environment.ts", "with": "./src/environments/environment.prod.ts" } ], "optimization": true, "outputHashing": "all", "sourceMap": false, "namedChunks": false, "aot": true, "extractLicenses": true, "vendorChunk": false, "buildOptimizer": true, "budgets": [ { "type": "initial", "maximumWarning": "2mb", "maximumError": "5mb" } ] }, "ci": { "progress": false } }, "defaultConfiguration": "" }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { "browserTarget": "app:build" }, "configurations": { "production": { "browserTarget": "app:build:production" }, "ci": { "progress": false } } }, "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n", "options": { "browserTarget": "app:build" } }, "test": { "builder": "@angular-devkit/build-angular:karma", "options": { "main": "src/test.ts", "polyfills": "src/polyfills.ts", "tsConfig": "tsconfig.spec.json", "karmaConfig": "karma.conf.js", "codeCoverage": true, "styles": [], "scripts": [], "assets": [ { "glob": "favicon.ico", "input": "src/", "output": "/" }, { "glob": "/*", "input": "src/assets", "output": "/assets" } ] }, "configurations": { "ci": { "progress": false, "watch": false } } }, "lint": { "builder": "@angular-eslint/builder:lint", "options": { "lintFilePatterns": [ "src/*/.ts", "src/*/.html" ] } }, "e2e": { "builder": "@angular-devkit/build-angular:protractor", "options": { "protractorConfig": "e2e/protractor.conf.js", "devServerTarget": "app:serve" }, "configurations": { "production": { "devServerTarget": "app:serve:production" }, "ci": { "devServerTarget": "app:serve:ci" } } }, "ionic-cordova-build": { "builder": "@ionic/angular-toolkit:cordova-build", "options": { "browserTarget": "app:build" }, "configurations": { "production": { "browserTarget": "app:build:production", "fileReplacements": [ { "replace": "./src/environments/environment.ts", "with": "./src/environments/environment.prod.ts" } ] } } }, "ionic-cordova-serve": { "builder": "@ionic/angular-toolkit:cordova-serve", "options": { "cordovaBuildTarget": "app:ionic-cordova-build", "devServerTarget": "app:serve" }, "configurations": { "production": { "cordovaBuildTarget": "app:ionic-cordova-build:production", "devServerTarget": "app:serve:production", "fileReplacements": [ { "replace": "./src/environments/environment.ts", "with": "./src/environments/environment.prod.ts" } ] } } } } } }, "cli": { "defaultCollection": "@ionic/angular-toolkit" }, "schematics": { "@ionic/angular-toolkit:component": { "styleext": "scss" }, "@ionic/angular-toolkit:page": { "styleext": "scss" } } }

[Ionitron]

This issue may need more information before it can be addressed. In particular, it will need a reliable Code Reproduction that demonstrates the issue.

Please see the Contributing Guide for how to create a Code Reproduction.

Thanks! Ionitron 💙

[ludonoel1]

Okay! So, this is my environment.ts file: export const environment = { production: false, appName: 'app Dev', appId: 'com.app.dev', flavor: "dev" };

this is my environment.prod.ts file: export const environment = { production: false, appName: 'app Prod', appId: 'com.app.prod', flavor: "prod" };

My package.json 👍:

{ "name": "app", "version": "0.1.0-SNAPSHOT", "author": "team", "scripts": { "ng": "ng", "start": "ng serve --port=8100", "build": "ng build", "test": "ng test", "test:ci": "ng test --no-watch --no-progress --browsers=ChromeHeadlessCI", "test:coverage": "ng test --no-watch --code-coverage", "e2e": "ng e2e", "lint": "npx eslint --fix .", "format": "npx prettier --write .", "cypress:open": "cypress open", "build:android": "npx cap run android --production" }, "private": true, "dependencies": { "@angular/animations": "^14.2.0", "@angular/common": "^14.2.0", "@angular/core": "^14.2.0", "@angular/forms": "^14.2.0", "@angular/platform-browser": "~14.2.0", "@angular/platform-browser-dynamic": "~14.2.0", "@angular/router": "~14.2.0", "@auth0/auth0-angular": "^1.10.1", "@bugsnag/js": "^7.16.2", "@bugsnag/plugin-angular": "^7.16.2", "@capacitor/android": "^4.0.0", "@capacitor/app": "^4.0.0", "@capacitor/browser": "^4.0.0", "@capacitor/camera": "^4.0.0", "@capacitor/core": "^4.0.0", "@capacitor/filesystem": "^4.0.0", "@capacitor/haptics": "^4.0.0", "@capacitor/ios": "^4.0.0", "@capacitor/push-notifications": "^4.0.1", "@capacitor/share": "^4.0.0", "@capacitor/splash-screen": "^4.0.0", "@capacitor/status-bar": "^4.0.0", "@ionic-native/core": "^5.36.0", "@ionic-native/photo-viewer": "^5.36.0", "@ionic/angular": "^6.2.4", "@ionic/pwa-elements": "^3.1.1", "@ngx-translate/core": "^14.0.0", "@ngx-translate/http-loader": "^7.0.0", "angular-mydatepicker": "^0.11.5", "date-fns": "^2.29.2", "hammerjs": "^2.0.8", "ionic-selectable": "^4.9.0", "ngx-image-cropper": "^6.2.1", "ngx-spinner": "^14.0.0", "rxjs": "^7.5.6", "tslib": "^2.4.0", "zone.js": "^0.11.8" }, "devDependencies": { "@angular-devkit/build-angular": "~14.2.1", "@angular-eslint/builder": "^14.0.3", "@angular-eslint/eslint-plugin": "^14.0.3", "@angular-eslint/eslint-plugin-template": "^14.0.3", "@angular-eslint/template-parser": "^14.0.3", "@angular/cli": "^14.2.1", "@angular/compiler": "~14.2.0", "@angular/compiler-cli": "~14.2.0", "@angular/language-service": "~14.2.0", "@capacitor/cli": "^4.0.0", "@ionic/angular-toolkit": "^7.0.0", "@types/jasmine": "^4.3.0", "@types/jasminewd2": "^2.0.10", "@types/node": "^18.7.18", "@typescript-eslint/eslint-plugin": "^5.36.1", "@typescript-eslint/parser": "^5.36.1", "cross-env": "^7.0.3", "cypress": "^10.6.0", "cypress-file-upload": "^5.0.8", "eslint": "^7.6.0", "eslint-config-prettier": "^8.5.0", "eslint-plugin-import": "2.22.1", "eslint-plugin-jsdoc": "30.7.6", "eslint-plugin-prefer-arrow": "1.2.2", "eslint-plugin-prettier": "^4.2.1", "eslint-plugin-unused-imports": "^2.0.0", "jasmine-core": "^4.3.0", "jasmine-spec-reporter": "^7.0.0", "karma": "^6.3.19", "karma-chrome-launcher": "~3.1.0", "karma-coverage": "~2.0.3", "karma-coverage-istanbul-reporter": "~3.0.2", "karma-jasmine": "^5.1.0", "karma-jasmine-html-reporter": "^2.0.0", "prettier": "^2.7.1", "ts-node": "~8.3.0", "typescript": "^4.8.2" }, "description": "project" }

You have my angular.json just above.

When I launch ionic capacitor build android --prod, I get this capacitor.config.ts file: (android/app/src/main/assets)

{ "appId": "com.app.dev", "appName": "App Dev", "android": { "flavor": "dev" }, "webDir": "www", "plugins": { "SplashScreen": { "launchShowDuration": 3000, "launchAutoHide": false, "backgroundColor": "#ffde59", "androidScaleType": "CENTER", "showSpinner": true, "androidSpinnerStyle": "small", "iosSpinnerStyle": "small", "spinnerColor": "#000000", "splashFullScreen": true, "splashImmersive": true, "layoutName": "launch_screen", "useDialog": false }, "PushNotifications": { "presentationOptions": [ "badge", "sound", "alert" ] } } }

Do you have enough informaiton ?

[jcesarmobile]

No, it's not enough information, we need a full sample app we can run, and the commands you are running to reproduce the issue.

[ludonoel1]

@jcesarmobile please find my sample project just there: https://github.com/ludonoel1/ionic-capacitor-prod

Where I use: ionic capacitor build android --prod

[jcesarmobile]

Sadly the environments file replacement is an angular thing and only replaces the file in the code inside the src folder.

Capacitor is framework agnostic and knows nothing about that replacement and angular is not replacing the file for source code outside the src folder (like capacitor.config.ts).

So you'll have to use a different approach that doesn't involves the angular replacement, in example you can do something like this:

import { environment as devEnvironment } from './src/environments/environment';
import { environment as prodEnvironment } from './src/environments/environment.prod';

const environment = process.env.NODE_ENV === 'production' ? prodEnvironment : devEnvironment;

and run the build command like this NODE_ENV=production ionic capacitor build android --prod

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Capacitor, please create a new issue and ensure the template is fully filled out.