Angular .gitignore Template & Complete Guide
Perfect .gitignore template for Angular projects. Covers Angular CLI, Nx workspace, and all Angular project types. Ignore node_modules, dist/, and Angular cache properly.
🅰️ Angular .gitignore Template (2025)
# Angular .gitignore Template - Updated 2025 # Dependencies node_modules/ npm-debug.log* yarn-debug.log* yarn-error.log* pnpm-debug.log* # Angular compiled output dist/ tmp/ out-tsc/ bazel-out/ # Angular cache .angular/ .sass-cache/ # IDEs and editors .idea/ .project .classpath .c9/ *.launch .settings/ *.sublime-workspace .vscode/* !.vscode/settings.json !.vscode/tasks.json !.vscode/launch.json !.vscode/extensions.json .history/* # OS specific files .DS_Store Thumbs.db # Angular profiling files chrome-profiler-events*.json # Node npm-debug.log yarn-error.log # Runtime data pids *.pid *.seed *.pid.lock # Coverage directory used by tools like istanbul coverage/ *.lcov .nyc_output/ # ESLint cache .eslintcache # Optional npm cache directory .npm # Optional REPL history .node_repl_history # Output of 'npm pack' *.tgz # Yarn Integrity file .yarn-integrity # Environment variables .env .env.local .env.development.local .env.test.local .env.production.local # Firebase .firebase/ firebase-debug.log # E2E test reports e2e-results/ # Cypress cypress/videos/ cypress/screenshots/ cypress/downloads/ # Protractor e2e/*.js e2e/*.map # System Files .DS_Store Thumbs.db # Angular Universal # Server rendered app (Angular Universal) ssr/ # Angular CLI cache .angular/cache/ # Webpack bundle analyzer stats.json # TypeScript cache *.tsbuildinfo # Optional stylelint cache .stylelintcache # Storybook build outputs storybook-static/ # Temporary folders tmp/ temp/ # Log files logs/ *.log # Dependency directories jspm_packages/ # Optional REPL history .node_repl_history # Output of 'npm pack' *.tgz # Yarn v2 .yarn/cache .yarn/unplugged .yarn/build-state.yml .yarn/install-state.gz .pnp.* # Nx .nx/cache .nx/workspace-data # Angular DevKit .angular-devkit/
📁 Angular-Specific Files to Ignore
🅰️ Angular Core Files
dist/- Build output.angular/- Angular cacheout-tsc/- TypeScript compiled outputbazel-out/- Bazel build outputstmp/- Temporary files
🧪 Testing & E2E
coverage/- Test coveragee2e-results/- E2E test resultscypress/videos/- Cypress recordingscypress/screenshots/- Test screenshots*.spec.js- Compiled test files
🎯 Project-Type Specific Additions
Nx Workspace
# Additional for Nx .nx/cache .nx/workspace-data dist/ tmp/ # Nx cloud cache .nxcache/
Angular Universal
# Additional for Universal ssr/ dist-server/ prerender/ # Server build server.js
Ionic Angular
# Additional for Ionic platforms/ plugins/ www/ # Capacitor ios/ android/
Angular Elements
# Additional for Elements elements/ custom-elements/ # Bundled elements *.ngfactory.js *.ngstyle.js
⚡ Angular CLI Cache & Performance
Understanding .angular/ Directory
The .angular/ directory contains Angular CLI's cache files. This significantly speeds up builds but should never be committed.
✅ Benefits of Caching
- • Faster incremental builds
- • Improved development experience
- • Reduced compilation time
- • Better watch mode performance
❌ Why Ignore Cache
- • Machine-specific optimizations
- • Large file sizes (100MB+)
- • Binary cache files
- • Constantly changing content
🔧 Common Angular .gitignore Issues
Problem: dist/ folder constantly changing
Make sure your build output is properly ignored:
# Remove already tracked dist folder git rm -r --cached dist/ # Add to .gitignore echo "dist/" >> .gitignore # Clean Angular cache if needed ng cache clean
Problem: Angular cache growing too large
Clean Angular cache and ensure it's ignored:
# Clean Angular cache ng cache clean # Or manually remove rm -rf .angular/ # Verify .angular/ is in .gitignore
Problem: E2E test files being tracked
E2E test outputs should be ignored. Add patterns for your testing framework:
- • Cypress:
cypress/videos/,cypress/screenshots/ - • Protractor:
e2e/*.js,e2e/*.map - • Playwright:
test-results/,playwright-report/
📋 Angular Version Considerations
Angular 17+
- • New .angular/cache structure
- • Enhanced build caching
- • SSR improvements
- • Standalone components
Angular 15-16
- • Optional injectors
- • Standalone APIs
- • MDC-based Angular Material
- • Image optimization
Angular 12-14
- • Ivy renderer default
- • Strict mode
- • Angular Universal
- • Webpack 5 support
🛠️ Use Our Angular Tools
❓ Angular .gitignore FAQ
Should I ignore angular.json file?
No! The angular.json file is crucial for your Angular project configuration. It defines build configurations, project structure, and CLI commands. Always commit this file.
What about TypeScript compiled files?
Always ignore compiled TypeScript files (*.js, *.js.map) in your src/ directory, but keep configuration files like karma.conf.js. The out-tsc/ and dist/ directories should be completely ignored.
Can I ignore package-lock.json in Angular projects?
No, always commit package-lock.json. Angular projects have many dependencies and exact versions are crucial for consistent builds across team members and CI/CD environments.
Should I ignore the .angular/ directory?
Yes, always ignore the .angular/ directory. It contains Angular CLI's cache files that are machine-specific and can be several hundred MB in size. They're rebuilt automatically when needed.