Chapter 18: Deployment

1. Production Build and Optimization

Before deploying your Angular application, you must generate an optimized production build using Angular CLI:

ng build --configuration production

This command will:

• Minify and compress your code
• Remove development-only code
• Create a dist/ folder with your ready-to-deploy files

Optional Optimizations

• Enable serviceWorker for PWA support
• Use budget and sourceMap: false in angular.json
• Lazy load modules to reduce initial bundle size

2. Environment Configuration

Angular supports multiple environments such as development and production. You can manage API URLs and flags via:

// environment.ts (for development)
export const environment = {
  production: false,
  apiUrl: 'http://localhost:3000'
};
  

// environment.prod.ts (for production)
export const environment = {
  production: true,
  apiUrl: 'https://your-live-api.com'
};
  

Angular will automatically pick the correct file when you run the build command with --configuration production.

3. Deploying to Firebase

Firebase Hosting is a popular option for Angular apps. To deploy:

npm install -g firebase-tools
firebase login
firebase init
# Choose: Hosting, then select dist/[project-name] as public dir
firebase deploy
  

Once deployed, you will receive a live Firebase URL.

4. Deploying to Vercel

Vercel offers instant Angular deployments with Git integration.

• Create a GitHub repo and push your Angular project
• Go to vercel.com and sign in with GitHub
• Import your repo and set the build output directory to dist/[project-name]
• Vercel will auto-detect and deploy

5. Deploying to Netlify

Netlify is another fast and easy host for Angular:

• Install CLI: npm install -g netlify-cli
• Login: netlify login
• Build Angular project
• Deploy: netlify deploy --dir=dist/[project-name]
• Use --prod flag for production deployment

6. Setting up Base Href

If you’re deploying to a subdirectory (e.g., GitHub Pages), you must set baseHref:

ng build --configuration production --base-href "/your-subdir/"

7. Summary

• Use ng build --configuration production to create optimized builds
• Deploy your app to Firebase, Vercel, or Netlify for free
• Configure environment files for API switching
• Set baseHref for subdirectory deployments

🎯 Your app is now live and production-ready!

Next Chapter Preview

Coming up next are Bonus Modules covering PWA, SSR, Internationalization, and Accessibility enhancements to take your Angular skills to the next level.