CODEWITHSUNDEEP
angularenvironment
Tom
Tom

Reputation: 8681

Angular Environment file not seen in the distribution folder

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
};

Upvotes: 6

Views: 9123

Answers (3)

Gosha_Fighten
Gosha_Fighten

Reputation: 3858

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.

Upvotes: 5

Stavm
Stavm

Reputation: 8131

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.

Upvotes: 1

Andrew Allen
Andrew Allen

Reputation: 8002

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.

Upvotes: 1

Related Questions