Day 5: Build and Deploy | Angular in 5 Days

Production Builds

Terminal

# Development build (fast, not optimized)
ng serve

# Production build (optimized, minified, AOT compiled)
ng build

# Output goes to dist/my-app/
# Ahead-of-Time (AOT) compilation catches template errors at build time
# Smaller bundles, faster startup

Environment Configuration

src/environments/environment.ts

// Development
export const environment = {
  production: false,
  apiUrl: 'http://localhost:3000'
};

src/environments/environment.prod.ts

// Production
export const environment = {
  production: true,
  apiUrl: 'https://api.myapp.com'
};

Using in code

import { environment } from '../environments/environment';

const res = await fetch(environment.apiUrl + '/users');
// Angular CLI automatically swaps the file at build time

Deploy to Netlify

netlify.toml

[build]
  command = "ng build"
  publish = "dist/my-app"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

Deploy to Firebase Hosting

Terminal

npm install -g firebase-tools
firebase login
firebase init hosting
# Set public directory to: dist/my-app
# Configure as single-page app: Yes
firebase deploy

ℹ️

The [[redirects]] rule in Netlify (and the equivalent in Firebase) is required for Angular Router's PathLocationStrategy. Without it, refreshing on any route other than / returns a 404.

📝 Day 5 Exercise

Deploy Your Angular App

Run ng build and inspect the dist/ folder. Note the file sizes.
Add an environment variable for your API URL. Use it in a service instead of a hardcoded string.
Add the redirect rule to netlify.toml or firebase.json.
Push to GitHub and connect to Netlify or Firebase Hosting for auto-deploys.
Verify: navigate to a non-root route, refresh the page, confirm it works.

Day 5 Summary

ng build runs AOT compilation — catches template errors that dev mode misses.
Use environment files for API URLs — never hardcode environment-specific values.
The catch-all redirect is not optional for Angular apps using PathLocationStrategy.
Firebase Hosting has a generous free tier and zero-config CDN — good default choice for Angular.

→

← Previous

Day 4: Reactive Forms

Course Complete

Back to Angular in 5 Days

→