What not to commit in Angular| Ignore files in git example

What not to commit in Angular| Ignore files in git example

In this blog post, We are going to learn the files not to commit for the angular project. It includes a step-by-step angular gitignore example.

what is the .gitignore file?

.gitignore is a plain text file that contains a list of file/folder paths that will never be committed to repositories whenever a project is committed.

.gitignore is stored in the application’s root directory. You can, however, define it in any of your application’s subfolders.

Any editor, including vscode, sublime, atom, and plain text editors, can be used to modify or create this.

How to add a gitignore file for the angular project?

The gitignore file is used to keep track of untracked files that can be ignored during the git commit process.

gitignore file is used to maintain untracked files which will be useful during the git commitprocess to ignore the files.

if each line in the gitignore file specifies the path to an application’s files or folders that can’t be committed during the git commit

gitignore files are created when using the angular ng tool to create an application. You can manually add the file if the application was created manually.

The angular project makes use of Typescript. For example, Typescript compiler or transpiler the components into JavaScript during running angular application. At this phase, the js and js.map files are created. This can be ignored by adding it to the gitignore file. We will see the gitignore file for the angular CLI project

gitignore file is created by default while creating an angular project using the ng CLI tool

what not to commit for git in an angular CLI project

  • The node_module dependencies folder, which is local to the project and environment, is not required to commit to the repository
  • Build package log files like npm and yarn as well as webpack
  • temporary folders like tmp
  • typing folder
  • Output folder of npm command execution like dist/output folder
  • output files of typescript compiler files
  • include mapping JavaScript files if any
  • environment-specific files
  • exclude the package-lock.json file
  • bower_components if the package manager used is a bower
  • Editor or IDE-specific files like the .vscode folder for the Visual Studio code editor
  • *.sublime-workspace files for Sublime text editor
  • .project and classpath files for eclipse
  • typescript generated files
  • grunt specific lock files

Angular gitignore file template example

We have to add the following things to gitignore file to ignore the files

Here is a code for the Angular gitignore sample file example.

# See http://help.github.com/ignore-files/ for more about ignoring files.

# compiled output
/dist
/tmp
/out-tsc

# dependencies
/node_modules

# IDEs and editors
/.idea
.project
.classpath
.c9/
*.launch
.settings/
*.sublime-workspace

# IDE - VSCode
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json

# misc
/.sass-cache
/connect.lock
/coverage
/libpeerconnection.log
npm-debug.log
yarn-error.log
testem.log
/typings

# System Files
.DS_Store
Thumbs.db

Important points to remember

  • Don’t add confidential information to files to commit, Even if it adds to the gitignore file
  • In Windows, these files will not be visible by default, As these files are treated as hidden files
  • The file should be presented in any folder of a project, But a file in the root is recommended.

Based on project needs, You can add/remove any directory or files in these files. You have to use the regular expression ** to ignore subdirectories inside a directory.