Angular Environment file not seen in the distribution folder

user_4607841 0
Viewed 4100

I have an angular 8 application and testing the timeout set in the enviornment.ts file. I have currently set the timeout to 6 minutes I have two enviornment files that is enviornment.ts and enviornment.prod.ts. I believe that enviornment.prod.ts is used when the ng build --prod is executed.

After running the ng build command , I am unable to locate the enviornment file in the distribution folder.Could somebody tell me where can i find it. Is it in some binary etc

This is what my environment file looks like

// The file contents for the current environment will overwrite these during build.
// The build system defaults to the dev environment which uses `environment.ts`, but if you do
// `ng build --env=prod` then `environment.prod.ts` will be used instead.
// The list of which env maps to which file can be found in `.angular-cli.json`.

export const environment = {
    production: false,
    baseUrl: "http://localhost:57973",
    loginUrl: "/Login",
    adminUrl: "/Admin",
    userIdleMinutes: 10
};
angular environment
3 Answers

First, you need to actually use your environment.ts file in your code. For example:

import { Component } from '@angular/core';

import { environment } from '../environments/environment';

@Component({})
export class AppComponent {
  env = environment;
  constructor() {
    console.log(this.env.baseUrl);
  }
}

Otherwise, unused code will be tree-shaked.

Then, your code from the environment.ts file will be bundled to the main-XXXXX.js file.

user_42720850

There are two key files for all things environment.

angular.json - which should have something like the following:

      "architect": {
        "build": {
          ...
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],

In other words if the configuration is production any reference to environment.ts will be overwritten and environment.prod.ts will be used instead.

So yes, you are correct ...I believe that enviornment.prod.ts is used when the ng build --prod is executed.

main.ts - which should have

if (environment.production) {
  enableProdMode()
}

This removes development checks in change detection for example. You'll see console message Angular is running in the development mode. Call enableProdMode() to enable the production mode. if enableProdMode() has not been run.

user_47117540

environment.ts is used while developing. the content of its variables, is replaced when compiling.

that said, the whole concept of an environment file the way angular team implemented it has major flaws in its basics. biggest one, in my opinion, is the need to compile per environment. in practice, having different compiled files for testing and different ones for production is a BAD IDEA.

you should deploy exactly, not similar, but exactly, what you test.

davembush suggested a workaround using a config file, or so, similar to .net's web.config that fills in your configs on the fly. this requires a bit of hack&slash, but gets you a compile-once-deploy-wherever app.

worth noting.

user_39339270
Related