Build and Deployment

Level: Beginner

ℹ️ What You'll Learn

• Production build
• Environment configuration
• Optimization techniques
• Deployment to servers
• Monitoring production app

Environment Configuration

// src/environments/environment.ts (dev)
export const environment = {
  production: false,
  apiUrl: 'http://localhost:5000/api'
};

// src/environments/environment.prod.ts (prod)
export const environment = {
  production: true,
  apiUrl: 'https://api.sms.school/api'
};

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

@Injectable()
export class StudentService {
  private apiUrl = environment.apiUrl;
}

Production Build

# Development build (ng serve)
ng serve

# Production build (optimized)
ng build --configuration production

# Output in dist/my-sms-app/

Production build:

• Minification
• Tree-shaking (remove unused code)
• AOT compilation
• Smaller bundle

Build Options

# Specific configuration
ng build --configuration production

# Custom environment
ng build --configuration staging

# Watch mode
ng build --watch

Define configurations in angular.json.

Optimization

// Use OnPush change detection
@Component({
  selector: 'app-student',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class StudentComponent {
}

// Lazy load routes
{
  path: 'students',
  loadChildren: () => import('./students').then(m => m.ROUTES)
}

// Use async pipe
students$ = this.service.getStudents();

<tr *ngFor="let student of students$ | async">

Deployment

Firebase Hosting

npm install -g firebase-tools
firebase init
firebase deploy

Vercel

npm install -g vercel
vercel

Connect GitHub, auto-deploys on push.

Docker

# Dockerfile
FROM node:18 as build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM nginx:latest
COPY --from=build /app/dist /usr/share/nginx/html
EXPOSE 80

docker build -t sms-app .
docker run -p 80:80 sms-app

Environment Variables

# .env
NG_APP_API_URL=https://api.sms.school
NG_APP_VERSION=1.0.0

apiUrl = import.meta.env.NG_APP_API_URL;

Performance Monitoring

import { provideRouter } from '@angular/router';
import { withInMemoryScrolling, withDebugTracing } from '@angular/router';

// Enable tracing (dev only)
export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes, 
      withDebugTracing(),
      withInMemoryScrolling({ scrollPositionRestoration: 'enabled' })
    )
  ]
};

SMS Deployment Checklist

• Environment configs set
• API endpoints correct
• Auth token handling
• Error pages configured
• Analytics setup
• Build optimized
• Tests passing
• HTTPS enabled
• CORS configured
• Cache headers set

Key Takeaways

• Production build = optimized
• Environment configs = dev vs prod
• Lazy loading = smaller bundles
• Deployment = Firebase, Vercel, Docker, etc
• Monitoring = track production issues

💡 Backend Developer Tip

Angular build similar to Visual Studio publish. Minification, optimization, configuration management same concepts.

⚠️ Deployment Issues

1. Wrong API URL — Points to dev instead of prod
2. Missing environment vars — Secrets exposed
3. No HTTPS — Security risk
4. No error handling — Users see crashes
5. No monitoring — Can't debug issues

🤖Use AI to Learn Faster

Use ChatGPT, Claude, or Copilot to go deeper on Angular Deployment. Try these prompts:

• "Why optimize for production?"
• "How do you manage secrets in deployment?"
• "When use Docker vs Firebase?"
• "Quiz me on deployment"

💡 Tip: After reading this article, paste your own code into AI and ask "What could go wrong here and why?" — fastest way to find edge cases and deepen understanding.