ConfigGenerator

Angular Config Generator

Generate angular.json architect build targets. Configure performance budgets, SSR hydration, and development proxy routes.

The name of your Angular project (matches angular.json key).

- Minifies HTML, CSS, and JS. CRITICAL for production.
- WARNING: Enabling this in production exposes your raw TypeScript source code to the public.

Angular CLI will warn you if the initial bundle exceeds this size.

Angular CLI will fail the build if the initial bundle exceeds this size.

- Extracts all licenses of third-party libraries into a separate file.
- Include SSR configuration blocks for SEO optimization.

e.g., /api=http://localhost:8080 (Bypasses CORS in dev mode)

angular.json
1

Overview

How to configure Angular for Production

The angular.json file is the command center for the Angular CLI. It defines how your application is compiled, tested, and served. Understanding its intricacies is crucial for deploying performant enterprise applications without bloated bundle sizes or broken environment variables.

Best Practices

  • Performance Budgets: Angular allows you to set strict file size budgets for your compiled bundles. If the initial bundle exceeds the warning budget, the CLI will warn you. If it exceeds the error budget, the build will fail entirely. This is a powerful feature to enforce performance standards and prevent regressions.
  • Server-Side Rendering (SSR): Angular Universal (now integrated into core Angular as SSR) allows you to pre-render pages on the server. This is critical for SEO and initial load performance. Enabling SSR adds the `server` and `prerender` targets to your `angular.json` architect options.

Security Recommendations

  • Environment Replacements: Unlike Vite or Next.js which rely heavily on `.env` files, Angular uses file replacements during the build process. When building for production, the CLI physically swaps `environment.ts` with `environment.production.ts`. Never hardcode sensitive API keys or database passwords in these files, as they are fully bundled into the public client code.

Frequently Asked Questions

What does optimization: true actually do?
It tells the Angular CLI to run Terser for JavaScript minification, clean-css for CSS minification, and performs aggressive dead-code elimination (tree-shaking) on your application and its dependencies.
How do I fix an initial bundle budget error?
If you exceed your budget, you must analyze your bundle. Usually, this means you need to implement lazy loading (using `loadChildren` in your router) to split your application into smaller chunks, rather than loading everything upfront.
Why does my proxy config only work locally?
The `proxy.conf.json` file is exclusively used by the webpack dev server (`ng serve`). When you build your application for production (`ng build`), the proxy configuration is completely ignored. You must configure CORS on your actual backend server or reverse proxy for production.