Handling API Keys in Angular

Question

I want to push all of my source code to my Git repository, but I don't want to include my API key.

In the environment.ts file, I have the API key, and in the movies.services.ts file, I make the call to add 100 movies to my project.code structure

I've already tried using a .gitignore file and dotenv, but it doesn't seem to be working.

Answer 1

You can have something like environment.example.ts, environment.development.ts, environment.production.ts, etc.(see more on how to configure different environments at https://angular.io/guide/build#configure-target-specific-file-replacements)

and gitignore all but environment.example.ts, like

File src/environments/.gitignore

# Ignoring all files in current directory(`src/environments`)
# to not occasionally commit production environment
*

# But not example environment, so that developer could copy
# and fill it on his machine
!environment.example.ts

If you already committed your API key, you may need to do one of the following

• You may need to make git remove already committed files, using approach from https://stackoverflow.com/a/1274447/9566462 , but your API key will stay in git history and you will need to change your API key or give up and let it leak
• If you can't change API key or give up on leaking it, you need to remove sensitive data from history instead, using approach from https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/removing-sensitive-data-from-a-repository