Running and serving an Angular app - Performance & Optimization

Performance: Running and serving an Angular app

HIGH IMPACT

This affects how quickly the Angular app loads and becomes interactive for users.

Serving an Angular app for users to load quickly

Angular

ng build --configuration production && npx http-server ./dist/app-name

Builds optimized, minified bundles and serves static files for fast loading.

📈 Performance GainReduces bundle size by 50-70%, speeds up LCP by seconds

Serving an Angular app for users to load quickly

Angular

ng serve --open

This runs a development server with unoptimized code and no bundling or minification.

📉 Performance CostBlocks rendering longer due to large unminified bundles; slower LCP

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
ng serve (dev mode)	Low (simple DOM initially)	Multiple reflows during app bootstrap	High paint cost due to large scripts	[X] Bad
ng build production + static server	Low (same DOM)	Single reflow after bootstrap	Lower paint cost due to smaller bundles	[OK] Good

Rendering Pipeline

The Angular app code is bundled and optimized during build, then served as static files. The browser downloads, parses, and executes the scripts, then renders the app UI.

→Network

→Parse & Compile

→Style Calculation

→Layout

→Paint

⚠️ BottleneckNetwork and Parse & Compile stages due to large unoptimized bundles

Core Web Vital Affected

LCP

This affects how quickly the Angular app loads and becomes interactive for users.

Optimization Tips

1Always use 'ng build --configuration production' for serving Angular apps in production.

2Avoid using 'ng serve' for production as it serves unoptimized code.

3Serve the built files via a static file server or CDN to improve load speed.

Performance Quiz - 3 Questions

What is the main performance drawback of using 'ng serve' to run an Angular app in production?

A It serves unoptimized, large bundles that slow down loading.

B It minifies code too aggressively causing errors.

C It disables browser caching completely.

D It automatically reloads the page too often.

DevTools: Performance

How to check: Open DevTools, go to Performance tab, record page load while serving app, then analyze Main thread and Network waterfall.

What to look for: Look for long scripting tasks and large network payloads indicating unoptimized bundles slowing LCP.

Practice

1. What does the ng serve command do in an Angular project?

easy

A. It runs a local development server and reloads the app on code changes.

B. It builds the app for production deployment.

C. It installs Angular dependencies.

D. It creates a new Angular component.

Solution

1. Step 1: Understand the purpose of ng serve

   ng serve starts a local server to run the Angular app for development.

2. Step 2: Recognize live reload feature

   The server reloads the app automatically when you save changes, making development easier.

3. Final Answer:

   It runs a local development server and reloads the app on code changes. -> Option A

4. Quick Check:

   ng serve = local dev server [OK]

Hint: Remember: ng serve runs and reloads your app locally [OK]

Common Mistakes:

• Confusing ng serve with build commands
• Thinking it installs packages
• Assuming it creates components

2. Which of the following is the correct command using short flags to serve an Angular app on port 4201 and open the browser automatically?

easy

A. ng serve --port 4201 --open

B. ng build --port 4201 --open

C. ng serve -p 4201 -o

D. ng start --port 4201 --open

Solution

1. Step 1: Identify correct flags for port and open

   The short flags for port and open are -p and -o respectively.

2. Step 2: Confirm command syntax

   ng serve -p 4201 -o correctly sets port 4201 and opens the browser automatically.

3. Final Answer:

   ng serve -p 4201 -o -> Option C

4. Quick Check:

   Short flags -p and -o = ng serve -p 4201 -o [OK]

Hint: Use short flags: -p for port, -o to open browser [OK]

Common Mistakes:

• Using ng build instead of ng serve
• Using incorrect command ng start
• Using long flags incorrectly

3. Given the command ng serve --port 4300, what will happen when you save changes to your Angular app files?

medium

A. The app will reload but only on the default port 4200.

B. The app will not reload; you must restart the server manually.

C. The app will build but not serve on any port.

D. The app will reload automatically on http://localhost:4300.

Solution

1. Step 1: Understand ng serve with custom port

   The --port 4300 option runs the server on port 4300 instead of default 4200.

2. Step 2: Recognize live reload behavior

   When saving files, the server reloads the app automatically on the specified port.

3. Final Answer:

   The app will reload automatically on http://localhost:4300. -> Option D

4. Quick Check:

   Custom port + live reload = The app will reload automatically on http://localhost:4300. [OK]

Hint: Custom port still reloads app automatically on that port [OK]

Common Mistakes:

• Assuming reload only works on default port
• Thinking manual restart is needed
• Confusing build and serve commands

4. You run ng serve --port 4200 --open but the browser does not open automatically. What is the most likely cause?

medium

A. The --open flag is misspelled or missing.

B. Another process is already using port 4200.

C. The Angular CLI version is outdated and does not support --open.

D. The app has syntax errors preventing it from serving.

Solution

1. Step 1: Check port availability

   If port 4200 is busy, the server cannot start properly, so the browser won't open.

2. Step 2: Rule out other causes

   Misspelling --open or syntax errors usually cause errors or no serve, but here the issue is port conflict.

3. Final Answer:

   Another process is already using port 4200. -> Option B

4. Quick Check:

   Port conflict blocks server start and browser open [OK]

Hint: Check if port is busy before blaming flags or code [OK]

Common Mistakes:

• Ignoring port conflicts
• Assuming flag typo without checking
• Confusing syntax errors with serve issues

5. You want to run your Angular app on port 4500, open the browser automatically, and ensure the app reloads live on code changes. Which command achieves all this correctly?

hard

A. ng serve -p 4500 -o

B. ng serve -p 4500 -o --live-reload=false

C. ng serve --port=4500 --open --live-reload=false

D. ng serve --port 4500 --open --live-reload=false

Solution

1. Step 1: Understand default live reload behavior

   ng serve enables live reload by default, so no extra flag is needed.

2. Step 2: Choose correct syntax for port and open

   Short flags -p 4500 and -o correctly set port and open browser.

3. Step 3: Eliminate options that disable live reload

   Options B, C, and D include --live-reload=false which disables automatic reloading on code changes. Only A relies on the default behavior to ensure live reloads.

4. Final Answer:

   ng serve -p 4500 -o -> Option A

5. Quick Check:

   Live reload default + short flags = ng serve -p 4500 -o [OK]

Hint: Live reload is on by default; just set port and open flags [OK]

Common Mistakes:

• Adding --live-reload=false which disables live reload
• Using incorrect flag syntax
• Assuming live reload needs explicit enabling