Running and serving an Angular app - Cheat Sheet & Quick Revision

Recall & Review

beginner

What command do you use to start a development server for an Angular app?

You use ng serve to start a development server that watches your files and reloads the app automatically when you make changes.

beginner

What is the default port Angular uses when you run ng serve?

The default port is 4200. You can access your app in the browser at http://localhost:4200.

intermediate

How can you change the port when running ng serve?

Add the --port option like this: ng serve --port 4300. This will start the server on port 4300 instead of 4200.

intermediate

What does the ng serve command do behind the scenes?

It compiles your Angular app, starts a local web server, watches your files for changes, and reloads the app in the browser automatically.

beginner

How do you stop the Angular development server once it is running?

Press Ctrl + C in the terminal where ng serve is running. This stops the server.

Which command starts the Angular development server?

A ng start

B ng build

C ng run

D ng serve

ng serve starts the development server with live reload.

What URL do you open in your browser to see the app after running ng serve with default settings?

A http://localhost:4200

B http://localhost:5000

C http://localhost:8080

D http://localhost:3000

The default port is 4200, so the URL is http://localhost:4200.

How do you change the port when running the Angular server?

A ng serve --port 4300

B ng serve -p 4300

C ng serve --port=4300

D ng serve port=4300

The correct syntax includes ng serve --port 4300, ng serve -p 4300, or ng serve --port=4300. All are valid ways to specify the port.

What happens if you change your code while ng serve is running?

A The app reloads automatically in the browser.

B You must restart the server manually.

C Nothing happens until you refresh the browser.

D The server crashes.

ng serve watches files and reloads the app automatically on changes.

How do you stop the Angular development server?

A Run ng stop.

B Close the browser tab.

C Press Ctrl + C in the terminal.

D Restart your computer.

Pressing Ctrl + C in the terminal stops the running server.

Explain the steps and command to run and serve an Angular app locally for development.

Think about how you start, view, and stop the app during development.

Describe how you can customize the Angular development server when running it.

Focus on command options and server behavior.

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