Build, Environments & Deployment
5 questions found
How do you create a production build of an Angular app?
Beginner
Running ng build with the production configuration creates an optimized version of your app, with smaller file sizes and development warnings removed, ready to be uploaded to a real web server for actual visitors to use.
ng build --configuration production
// creates a dist folder containing optimized HTML, CSS, and JavaScript files
// ready to be uploaded to a hosting service
Real-world example
A small business finishes testing their new website locally, runs the production build command, and uploads the resulting files to their hosting provider so real customers can visit the live site.
Common follow-ups: Why should you never deploy the development version of an Angular app to real users?;What specific optimizations does the production configuration apply?
Angular CLI & Project Structure;Performance & Lazy Loading
How do environment files work in Angular, and how do you use different values for development and production?
Intermediate
Angular projects typically include separate environment files, such as environment.ts for development and environment.prod.ts for production, each exporting the same variable names but with different values, like a different API address. The build process automatically swaps in the correct file based on the configuration you specify.
// environment.ts
export const environment = { production: false, apiUrl: 'http://localhost:3000' };
// environment.prod.ts
export const environment = { production: true, apiUrl: 'https://api.myrealsite.com' };
Real-world example
A team uses one API address while developing locally and a different, real API address in production, simply by having two separate environment files without changing any actual component code.
Common follow-ups: How does Angular know which environment file to actually use during a build?;Is it safe to put secret keys, like a database password, into an Angular environment file?
Angular CLI & Project Structure;HTTP Client & Interceptors
What are some popular hosting options for deploying an Angular app, and how do they differ?
Intermediate
Firebase Hosting and Netlify are popular choices that make deploying a built Angular app quick and simple, often connecting directly to your code repository and automatically deploying new changes. Traditional hosting, like a plain server, requires manually uploading the built dist folder yourself each time.
# A typical Firebase Hosting deployment
ng build --configuration production
firebase deploy
// Firebase automatically serves the contents of the dist folder to visitors
Real-world example
A freelance developer deploys their client's Angular app to Firebase Hosting, getting a fast, globally distributed website live within minutes after running just two simple commands.
Common follow-ups: What is the difference between a preview deployment and a production deployment?;How would you set up automatic deployment every time new code is pushed to the main branch?
Angular CLI & Project Structure;Server-Side Rendering with Angular Universal
How would you set up a continuous deployment pipeline for an Angular project?
Advanced
A continuous deployment pipeline automatically runs your tests, builds your app, and deploys it to a live server every time new code is pushed to your repository, without anyone needing to do it manually. This catches mistakes early through automated tests and makes shipping new features fast and reliable.
# A simplified GitHub Actions workflow for an Angular app
name: Deploy
on: [push]
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- run: npm install
- run: npm test -- --watch=false
- run: npm run build -- --configuration production
- run: firebase deploy
Real-world example
A team sets up a pipeline so that every time a developer merges new code, the tests run automatically, and if everything passes, the site deploys to production within a few minutes without anyone touching a keyboard.
Common follow-ups: What should happen automatically if the tests fail during this pipeline?;How would you add a manual approval step before deploying to production?
Testing with Jasmine & Karma;Angular CLI & Project Structure
Why is it important to set a bundle size budget in an Angular project's configuration?
Beginner
A bundle size budget warns or fails the build if your app's JavaScript files grow beyond a specified size, helping the team catch accidental bloat, such as an unnecessarily large library being added, before it slows down the app for real users on slower connections.
// angular.json
"budgets": [
{ "type": "initial", "maximumWarning": "500kb", "maximumError": "1mb" }
]
Real-world example
A team catches an accidental increase in their app's bundle size right during a pull request, since the build fails with a clear budget warning before the change is ever merged and deployed to real users.
Common follow-ups: What is the difference between the initial bundle and lazy loaded bundles when it comes to budgets?;How do you decide on an appropriate budget size for a specific app?
Performance & Lazy Loading;Angular CLI & Project Structure