Environment.ts file is not replaced with environment.prod.ts even after ionic build --prod command in Capacitor V3.
I tried several times but it’s always taking Environment.ts as reference.Anyboday else has faced this issue?
Your angular.json should have something like
"configurations": {
"production": {
"fileReplacements": [{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}],
in the part that tells the ng engine what to do when using build flag
"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"
},
"src/manifest.webmanifest",
"src/manifest.webmanifest",
"src/manifest.webmanifest",
"src/manifest.webmanifest"
],
"styles": [
"src/theme/variables.scss",
"src/global.scss"
],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}],
If it exists, maybe check file paths and names?
Before putting the query i double checked whatever you mentioned above.
I have done.
ionic build --prod
ionic cap copy android
Ionic cap sync android
ionic cap run android
but the environment file is always pointing default one not the prod one.
plse post your angular.json here
{
“$schema”: “./node_modules/@angular-devkit/core/src/workspace/workspace-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": { "aot": true, "outputPath": "dist/app/browser", "index": "src/index.html", "main": "src/main.ts", "polyfills": "src/polyfills.ts", "tsConfig": "src/tsconfig.app.json", "assets": [ { "glob": "**/*", "input": "src/assets", "output": "assets" }, { "glob": "**/*.svg", "input": "node_modules/ionicons/dist/ionicons/svg", "output": "./svg" }, "src/manifest.webmanifest" ], "stylePreprocessorOptions": { "includePaths": [ "src" ] }, "styles": [ { "input": "src/theme/variables.scss", "inject": true }, { "input": "src/global.scss", "inject": true }, { "input": "node_modules/@videogular/ngx-videogular/fonts/videogular.css", "inject": true } ], "scripts": [] }, "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, "serviceWorker": true, "budgets": [ { "type": "initial", "maximumWarning": "2mb", "maximumError": "5mb" }, { "type": "anyComponentStyle", "maximumWarning": "50kb" } ], "ngswConfigPath": "ngsw-config.json" }, "ci": { "budgets": [ { "type": "anyComponentStyle", "maximumWarning": "50kb" } ], "progress": false } } }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { "disableHostCheck": true, "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" } }, "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { "tsConfig": ["src/tsconfig.app.json","src/tsconfig.server.json"], "exclude": ["**/node_modules/**"] } }, "ionic-cordova-build": { "builder": "@ionic/angular-toolkit:cordova-build", "options": { "browserTarget": "app:build" }, "configurations": { "production": { "browserTarget": "app:build:production" } } }, "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" } } }, "server": { "builder": "@angular-devkit/build-angular:server", "options": { "outputPath": "dist/app/server", "main": "server.ts", "tsConfig": "src/tsconfig.server.json", "externalDependencies": [ "@firebase/firestore" ] }, "configurations": { "production": { "outputHashing": "media", "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" } ], "sourceMap": false, "optimization": true } } }, "serve-ssr": { "builder": "@nguniversal/builders:ssr-dev-server", "options": { "browserTarget": "app:build", "serverTarget": "app:server" }, "configurations": { "production": { "browserTarget": "app:build:production", "serverTarget": "app:server:production" } } }, "prerender": { "builder": "@nguniversal/builders:prerender", "options": { "browserTarget": "app:build:production", "serverTarget": "app:server:production", "routes": [ "/" ] }, "configurations": { "production": {} } } } },},
“cli”: {
"defaultCollection": "@ionic/angular-toolkit"},
“schematics”: {
"@ionic/angular-toolkit:component": { "styleext": "scss" }, "@ionic/angular-toolkit:page": { "styleext": "scss" }}
}
Hi
so the filereplacement seems to be there. There are two things I would check from this point onwards:
does the environment.prod.ts really exists at the designated location as written in the configuration?
and next, I would start a full new project using ionic start and see if the problem still is there on a starter template.
If the latter is the case, then I’d think there is something awfully wrong with your setup. If not, then it is project related and you may want to consider even copying the angular.json from the new project to the other one (don’t forget to backup) - assuming angular versions are the same
In my case the problem was a direct reference to the wrong environment file:
File system:
- environment.ts
- environment.dev.ts
- environment.prod.ts
In the component:
import * from ./src/environment/environment.dev.ts
so the replace worked, but never took affect because of the wrong reference
1 Like