Production Build

Learning objectives#

• Create a production build and know its output
• Use environment files for configuration
• Set base href and budgets
• Deploy to static hosting with route fallback

Explanation#

ng build uses the production configuration by default: ahead-of-time compilation, tree-shaking, minification, hashed file names. Output: dist/<project>/browser.

Environment files: generate with ng g environments; angular.json fileReplacements swaps environment.ts for environment.development.ts in dev builds. Put the API URL and feature flags there — never secrets.

Serving from a sub-folder? Build with ng build --base-href /shop/ so asset and route URLs are correct.

Budgets in angular.json warn or fail the build when the initial bundle grows past a limit — a guard against accidental huge dependencies.

Any static host works (Hostinger, Azure Static Web Apps, Netlify, S3 + CloudFront). Configure a fallback so every unknown path serves index.html, or deep links like /products/7 return 404.

Need SEO-friendly HTML or faster first paint? Angular SSR/prerendering (ng add @angular/ssr) renders pages on the server.

Syntax#

1ng build                         # production by default → dist/shop-app/browser
2ng build --base-href /shop/      # when hosted in a sub-folder
3npx http-server dist/shop-app/browser -p 8080   # quick local check

Code example: Environments and a production-safe API URL#

1// src/environments/environment.ts            (used by ng build — production)
2export const environment = {
3  production: true,
4  apiUrl: 'https://api.shop.example.com',
5  featureNewCheckout: false,
6};
7

8// src/environments/environment.development.ts (swapped in by angular.json for ng serve)
9// export const environment = { production: false, apiUrl: '/api', featureNewCheckout: true };
10

11// src/app/app.config.ts
12import { ApplicationConfig, InjectionToken } from '@angular/core';
13import { provideHttpClient, withFetch } from '@angular/common/http';
14

15export const API_URL = new InjectionToken<string>('API_URL');
16

17export const appConfig: ApplicationConfig = {
18  providers: [
19    provideHttpClient(withFetch()),
20    { provide: API_URL, useValue: environment.apiUrl },
21  ],
22};
23

24/* angular.json (excerpt)
25"budgets": [
26  { "type": "initial", "maximumWarning": "500kB", "maximumError": "1MB" },
27  { "type": "anyComponentStyle", "maximumWarning": "4kB", "maximumError": "8kB" }
28]
29

30public_html/.htaccess (Apache / Hostinger) — route fallback
31RewriteEngine On
32RewriteCond %{REQUEST_FILENAME} !-f
33RewriteCond %{REQUEST_FILENAME} !-d
34RewriteRule ^ index.html [L]
35*/

ng build prints the initial and lazy chunks with sizes, e.g. “main-AB12CD.js 210 kB | Estimated transfer 62 kB” and “Lazy chunk files: chunk-EF34.js (products) 34 kB”, and fails if a budget’s error limit is exceeded. Uploading dist/shop-app/browser plus the .htaccess file makes deep links like /products/7 work.

This example is illustrative. Copy or download it and run it in your own environment; the expected output is shown above.

Step-by-step explanation#

1. environment.ts holds production settings; the development file replaces it for ng serve.
2. The API URL is provided through an InjectionToken, so services do not hard-code it.
3. Budgets stop the build when bundles grow beyond agreed limits.
4. The output to deploy is the browser folder inside dist.
5. The .htaccess rules send unknown paths to index.html so the router can handle them.

Real-world use case#

Common mistakes#

Best practices#

• Build once, configure per environment
• Keep budgets tight
• Set base href for sub-folders
• Configure route fallback on the host

Remember this#

Practice exercise#

1ng build --base-href /portal/
2

3# public_html/portal/.htaccess
4# RewriteEngine On
5# RewriteBase /portal/
6# RewriteCond %{REQUEST_FILENAME} !-f
7# RewriteCond %{REQUEST_FILENAME} !-d
8# RewriteRule ^ /portal/index.html [L]

Mini quiz#

Want more? Practise all Angular MCQs · Angular interview questions

Related topics#

My notes#

Saved in this browser.