6

Is the file src\environments\environment.ts typically committed, or added to the .gitignore file?

In a new Angular project (8.x) I see that this file is not added to the .gitignore file, and I assume that it's like this because the project imports this file (or a replaced version of it, depending on the specified configuration).

The real question is this: If a developer wishes to make local, developer-specific changes to this file (f.e. a different apiUrl setting), should they:

  1. Keep this file committed with shared defaults, ignore the file locally only when needed (not affecting other developers), and then make local changes.
  2. Initially commit this file with shared defaults, add it to .gitignore for all users, and then make local changes.
  3. Never commit the file (developers would have to create the file when first checking out the code).
glen-84
  • 1,778
  • 2
  • 18
  • 30
  • 3
    This file is important and is part of the project and therefore should be committed. – Ploppy Sep 18 '19 at 18:02
  • `environment` files are generally used during build. i.e when we do `ng build` or `ng build --prod`. If your build is prepared by some tool like `Jenkins` which is on the server, it will require the environment files. So ideally environment files are committed. – Amit Chigadani Sep 18 '19 at 18:07
  • @Ploppy Your comment eliminates option #3, but doesn't specify which of options 1, 2 (or something else like `--assume-unchanged`) is the common/best practice. :-) – glen-84 Sep 18 '19 at 18:16
  • @Amit Chigadani I'm asking specifically about `environment.ts`, and not about other files like `environment.prod.ts`, although I'm not sure whether or not the former has to be present in order to do the "file replacement" (perhaps it does). Again, that doesn't answer the question about how best to make local changes. :-) – glen-84 Sep 18 '19 at 18:17

2 Answers2

7

The real question is this: If a developer wishes to make local, developer-specific changes to this file (f.e. a different apiUrl setting)

The environment.ts file is required by the project, but the other files are not required unless they are part of the current build.

So you can add a new file and name it environment.localhost_default.ts to your project. Inside that file you can put something like this:

/** Copy this file to environment.localhost.ts **/
export const environment = {
    apiUrl: '/** REPLACE WITH LOCALHOST URL **/',
    production: false
};

Now you can add environment.localhost.ts to your .gitignore file.

Inside your angular.json under the project structure. You'll see a section labelled "architect" and you can add new "configurations" for "localhost". This tells Angular that it should use the environment.localhost.ts file instead.

"configurations": {
    "localhost": {
        "fileReplacements": [
            {
                "replace": "src/environments/environment.ts",
                "with": "src/environments/environment.localhost.ts"
            }
        ],
        ...
    }
}

You can now build or server your project using this environment.

ng serve --configuration=localhost

Since the file is excluded from Git changes will not get added to the repository, but having a default file environment.localhost_default.ts helps other developers get started. If you make a change to that file it will be shared with others.

Reactgular
  • 52,335
  • 19
  • 158
  • 208
2

Not enough reputation at the moment to comment on Reactgular answer.

With their solution I kept getting the error :

An unhandled exception occurred: Configuration 'localhost' is not set in the workspace.

I was able to get their solution working by adding the following under the serve object:

Underneath production / development in the serve object:

"localhost": {"browserTarget": "recipe-project:build:localhost"}

Adam Falk
  • 21
  • 2