Running and serving an Angular app - Deep Dive

Overview - Running and serving an Angular app

What is it?

Running and serving an Angular app means starting the app on your computer so you can see and interact with it in a web browser. It involves building the app's code and then using a server to deliver it to your browser. This process lets you test and develop your app live before sharing it with others.

Why it matters

Without running and serving your Angular app, you cannot see how your code works in real life. It would be like writing a recipe but never cooking the food to taste it. This step helps catch mistakes early and ensures your app behaves as expected before users see it.

Where it fits

Before this, you should know basic Angular concepts like components and modules. After learning to run and serve, you can explore deploying your app to the internet or optimizing its performance.

Mental Model

Core Idea

Running and serving an Angular app is like turning your written instructions into a live, interactive webpage that you can open and test in a browser.

Think of it like...

Imagine writing a play script (your Angular code). Running and serving the app is like putting on a rehearsal where actors perform the play on stage so you can see how it looks and fix any problems.

┌───────────────┐      ┌───────────────┐      ┌───────────────┐
│ Angular Code  │─────▶│ Build Process │─────▶│ Local Server  │
└───────────────┘      └───────────────┘      └───────────────┘
                                      │
                                      ▼
                             ┌─────────────────┐
                             │ Browser Display  │
                             └─────────────────┘

Build-Up - 7 Steps

1

Foundation

What is Angular CLI

Concept: Introducing the Angular Command Line Interface (CLI) tool that helps run and serve apps easily.

Angular CLI is a tool you install on your computer that understands Angular projects. It lets you run simple commands to build, serve, and test your app without manually handling complex steps.

Result

You have a tool ready to start your Angular app with simple commands.

Knowing Angular CLI is key because it automates many tasks, making running and serving your app straightforward and error-free.

2

Foundation

Starting the development server

Concept: How to use Angular CLI to start a local server that shows your app in the browser.

You run the command 'ng serve' in your project folder. This builds your app and starts a local web server. Then you open your browser at 'http://localhost:4200' to see your app live.

Result

Your Angular app appears in the browser and updates automatically when you change code.

Understanding that 'ng serve' both builds and serves your app helps you quickly test changes without extra steps.

3

Intermediate

How live reload works

🤔Before reading on: Do you think the browser refreshes automatically because the server restarts or because the CLI watches your files? Commit to your answer.

Concept: Explaining how Angular CLI watches your code files and reloads the browser automatically on changes.

When you run 'ng serve', the CLI watches your source files. If you save a change, it rebuilds the app in the background and tells the browser to refresh the page automatically. This is called live reload.

Result

You see your changes instantly in the browser without manually refreshing.

Knowing live reload saves time and keeps your focus on coding, making development smoother and faster.

4

Intermediate

Serving with custom ports and hosts

🤔Before reading on: Can you guess how to change the port number when serving your app? Commit to your answer.

Concept: How to customize the server's port and host to avoid conflicts or allow access from other devices.

You can run 'ng serve --port 4300' to change the port from 4200 to 4300. To allow other devices on your network to access your app, use 'ng serve --host 0.0.0.0'. This flexibility helps when ports are busy or testing on phones.

Result

Your app runs on the specified port and can be accessed from other devices if configured.

Customizing ports and hosts is essential for real-world testing and avoiding common network conflicts.

5

Intermediate

Building for production serving

🤔Before reading on: Do you think 'ng serve' is suitable for production use? Commit to your answer.

Concept: Understanding the difference between development serving and production builds for deployment.

'ng serve' is for development only. For production, you run 'ng build --prod' which creates optimized files in the 'dist' folder. These files are then served by a real web server like Nginx or Apache, not by Angular CLI.

Result

You get a fast, optimized version of your app ready for real users.

Knowing the difference prevents mistakes like using development servers in production, which can cause slow loading and security issues.

6

Advanced

How Angular CLI serves files internally

🤔Before reading on: Do you think Angular CLI uses a full web server or a lightweight one internally? Commit to your answer.

Concept: Explaining the internal mechanism of Angular CLI's development server.

Angular CLI uses Webpack Dev Server under the hood. It bundles your app in memory and serves it without writing files to disk. This makes serving fast and efficient. It also handles live reload and error overlays in the browser.

Result

You understand why serving is fast and how errors show up instantly in your browser.

Knowing the internal server helps debug issues and explains why files don't appear on disk during development.

7

Expert

Serving Angular apps with server-side rendering

🤔Before reading on: Can Angular CLI serve server-side rendered apps by default? Commit to your answer.

Concept: Introducing Angular Universal for server-side rendering and how serving differs from client-only apps.

Angular Universal lets you render your app on the server before sending it to the browser. This improves performance and SEO. Serving such apps requires a Node.js server running your Angular Universal code, not just 'ng serve'. This is a more complex setup for production.

Result

You know when and how to serve Angular apps with server-side rendering for better user experience.

Understanding server-side rendering serving expands your ability to build fast, SEO-friendly Angular apps beyond basic client-side serving.

Under the Hood

When you run 'ng serve', Angular CLI uses Webpack Dev Server to bundle your app in memory and start a lightweight HTTP server. It watches your source files for changes and rebuilds the app automatically. The server pushes updates to the browser using WebSocket connections, triggering live reload without full page refreshes. This process avoids writing files to disk, speeding up development cycles.

Why designed this way?

This design was chosen to maximize developer productivity by minimizing wait times and manual steps. Writing files to disk slows down builds, so in-memory bundling is faster. Using Webpack Dev Server leverages existing tooling optimized for modern JavaScript apps. Alternatives like manual builds and static servers were too slow and error-prone for active development.

┌─────────────────────┐
│ Angular CLI Command  │
└──────────┬──────────┘
           │ runs 'ng serve'
           ▼
┌─────────────────────┐
│ Webpack Dev Server   │
│ - Bundles in memory  │
│ - Watches files      │
│ - Starts HTTP server │
└──────────┬──────────┘
           │ serves app files
           ▼
┌─────────────────────┐
│ Browser (localhost)  │
│ - Connects via HTTP  │
│ - Receives live reload │
└─────────────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Is 'ng serve' suitable for deploying your app to real users? Commit yes or no.

Common Belief: Many believe 'ng serve' can be used to deploy Angular apps to production servers.

Reality: 'ng serve' is only for development. It is not optimized or secure for production use. Production apps must be built with 'ng build --prod' and served by a dedicated web server.

Why it matters: Using 'ng serve' in production causes slow performance, security risks, and unstable behavior for users.

Quick: Does Angular CLI write built files to disk when running 'ng serve'? Commit yes or no.

Common Belief: Some think 'ng serve' writes the compiled app files to the disk like a normal build.

Reality: 'ng serve' keeps the build in memory and does not write files to disk, which speeds up rebuilds and serving.

Why it matters: Expecting files on disk can confuse developers when they look for output files during development.

Quick: Does changing your code always require restarting 'ng serve'? Commit yes or no.

Common Belief: Many believe you must stop and restart 'ng serve' to see code changes.

Reality: Angular CLI watches files and reloads the app automatically without restarting the server.

Why it matters: Restarting unnecessarily wastes time and interrupts development flow.

Quick: Can you access your 'ng serve' app from other devices on your network by default? Commit yes or no.

Common Belief: Some assume the app is accessible from any device on the same network by default.

Reality: By default, 'ng serve' binds to localhost, so only your computer can access it. You must specify '--host 0.0.0.0' to allow other devices.

Why it matters: Not knowing this blocks testing on phones or other devices, causing confusion.

Expert Zone

1

Angular CLI's in-memory build means source maps are served dynamically, enabling precise debugging without extra files.

2

Live reload uses WebSocket connections, but you can configure it to use polling for environments where WebSockets are blocked.

3

Custom webpack configurations can be merged with Angular CLI's build process to extend serving capabilities without ejecting.

When NOT to use

Do not use 'ng serve' for production deployment or performance testing. Instead, build with 'ng build --prod' and serve with a dedicated web server like Nginx or Apache. For server-side rendering, use Angular Universal with a Node.js server.

Production Patterns

In production, teams build optimized static files and deploy them to CDN-backed web servers. Development uses 'ng serve' for fast iteration. Some advanced setups integrate Angular Universal for SEO and performance, requiring custom Node.js servers to serve pre-rendered pages.

Connections

Webpack Dev Server

Angular CLI's serving is built on top of Webpack Dev Server technology.

Understanding Webpack Dev Server helps grasp how Angular CLI achieves fast rebuilds and live reload.

Continuous Integration (CI) Pipelines

Building and serving Angular apps locally connects to automated builds and deployments in CI pipelines.

Knowing local serving prepares you to understand how automated systems build and deploy Angular apps in production.

Theatre Rehearsals

Both involve practicing and refining a performance before the final show.

Seeing running and serving as a rehearsal helps appreciate the iterative nature of development before public release.

Common Pitfalls

#1 Trying to deploy the app by running 'ng serve' on a production server.

Wrong approach:

ng serve --port 80

Correct approach:

ng build --prod
Serve the files in 'dist/' folder using a web server like Nginx or Apache.

Root cause:

Misunderstanding that 'ng serve' is only a development server, not a production server.

#2 Expecting code changes to appear without saving files or restarting the server.

Wrong approach:

Make code changes but do not save, then refresh browser expecting updates.

Correct approach:

Save your code changes; Angular CLI watches saved files and reloads automatically.

Root cause:

Not realizing live reload depends on saved file changes.

#3 Trying to access the app from another device without setting the host properly.

Wrong approach:

ng serve (default, binds to localhost only)
Access from phone fails.

Correct approach:

ng serve --host 0.0.0.0
Access from phone on same network succeeds.

Root cause:

Not knowing the default host binding restricts access to local machine.

Key Takeaways

Running and serving an Angular app means building it and showing it live in a browser for testing.

'ng serve' is a development tool that builds your app in memory and serves it with live reload for fast feedback.

For production, you must build optimized files and serve them with a real web server, not 'ng serve'.

Customizing ports and hosts helps test your app in different environments and devices.

Understanding the internal use of Webpack Dev Server explains why serving is fast and how live reload works.