Skip to main content

​
Quick Build

Create a production build with: 
npm run build
This runs ng build with the production configuration by default.

​
Build Output

Builds are output to the www/ directory as configured in angular.json: 
www/
├── index.html
├── main.[hash].js
├── polyfills.[hash].js
├── runtime.[hash].js
├── styles.[hash].css
└── assets/
The www directory is used as the webDir in Capacitor configuration for native builds.

​
Build Configurations

​
Production Build (Default)

The production build includes:

Optimization

Minification and tree-shaking enabled

Output Hashing

Cache-busting filenames

File Replacement

Uses environment.prod.ts

Build Budgets

Enforced size limits

​
Build Budgets

The production build enforces the following size limits:
angular.json (excerpt)
{
  "budgets": [
    {
      "type": "initial",
      "maximumWarning": "2mb",
      "maximumError": "5mb"
    },
    {
      "type": "anyComponentStyle",
      "maximumWarning": "2kb",
      "maximumError": "4kb"
    }
  ]
}
If your build exceeds the error budget, the build will fail. Optimize your bundle size or adjust budgets in angular.json.

​
Development Build

For a development build without optimizations: 
ng build --configuration development
Development builds:
  • Include source maps for debugging
  • Skip optimization for faster builds
  • Use separate vendor chunks
  • Include named chunks for easier debugging
  • Do not use output hashing

​
CI Build

For continuous integration environments: 
ng build --configuration ci
The CI configuration disables progress output for cleaner logs.

​
Building for Native Platforms

​
Capacitor Configuration

The app uses Capacitor 8 for native functionality:
capacitor.config.ts
import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'io.ionic.starter',
  appName: 'Restaurant',
  webDir: 'www'
};

export default config;

​
Building for iOS

1

Build Web Assets

npm run build
2

Add iOS Platform (First Time Only)

npx cap add ios
3

Sync Changes

Copy web assets and sync native configuration:
npx cap sync ios
4

Open in Xcode

npx cap open ios
In Xcode:
  1. Select your development team
  2. Choose a target device or simulator
  3. Click “Run” to build and install
You need macOS with Xcode installed to build for iOS. Xcode is free from the Mac App Store.

​
Building for Android

1

Build Web Assets

npm run build
2

Add Android Platform (First Time Only)

npx cap add android
3

Sync Changes

Copy web assets and sync native configuration:
npx cap sync android
4

Open in Android Studio

npx cap open android
In Android Studio:
  1. Wait for Gradle sync to complete
  2. Select a device or emulator
  3. Click “Run” to build and install

​
Creating Release Builds

​
iOS Release Build

1

Build and Sync

npm run build
npx cap sync ios
npx cap open ios
2

Configure in Xcode

  1. Select “Any iOS Device” as the target
  2. Go to Product > Archive
  3. Once archived, click “Distribute App”
  4. Choose your distribution method (App Store, Ad Hoc, etc.)

​
Android Release Build

1

Build and Sync

npm run build
npx cap sync android
npx cap open android
2

Generate Signed APK/Bundle

In Android Studio:
  1. Go to Build > Generate Signed Bundle / APK
  2. Select “Android App Bundle” (recommended) or “APK”
  3. Create or select your keystore
  4. Choose the “release” build variant

​
Environment Configuration

The build system automatically replaces environment files: 
// Development environment (default)
export const environment = {
  production: false
};
In production builds, environment.ts is replaced with environment.prod.ts.

​
Advanced Build Options

​
Custom Output Path

ng build --output-path=dist/custom

​
Base Href

For deploying to a subdirectory: 
ng build --base-href /restaurant/

​
Source Maps

Include source maps in production for debugging: 
ng build --source-map

​
Stats JSON

Generate bundle statistics: 
ng build --stats-json
Analyze with webpack-bundle-analyzer: 
npx webpack-bundle-analyzer www/stats.json

​
Optimization Tips

  1. Lazy load routes: Use Angular’s lazy loading for feature modules
  2. Tree-shake unused code: Ensure imports are specific
  3. Optimize images: Compress assets in src/assets/
  4. Analyze bundle: Use --stats-json to identify large dependencies
  1. Use incremental builds: ng build --watch for development
  2. Increase Node memory: NODE_OPTIONS=--max_old_space_size=8192 npm run build
  3. Disable source maps: Faster production builds (not recommended for debugging)
  4. Use build cache: The .angular/cache directory speeds up rebuilds
TailwindCSS is configured to purge unused styles in production:
tailwind.config.js
module.exports = {
  content: ["./src/**/*.{html,ts}"],
  theme: {
    extend: {},
  },
  plugins: [],
};
Ensure all template files are included in the content array.

​
Troubleshooting

Clear build cache and retry:
rm -rf .angular www node_modules/.cache
npm run build
Ensure web assets are built first:
npm run build
npx cap sync --force
Increase Node.js memory limit:
NODE_OPTIONS=--max_old_space_size=8192 npm run build

​
Next Steps

Testing

Run tests before deploying

Styling

Customize the app’s appearance

Build docs developers (and LLMs) love

Get started for freeTalk to us