Running and serving an Angular app - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when you run ng serve in an Angular project?

You run ng serve in your Angular project folder. What is the main behavior you observe?

A The Angular CLI installs all dependencies and updates the <code>package.json</code> file.

B The Angular app is packaged into a production-ready bundle and deployed to a remote server.

C The Angular CLI runs unit tests and outputs test results in the console.

D The Angular app compiles and starts a local development server with live reload.

💡 Hint

Think about what ng serve is used for during development.

ng serve compiles your Angular app and starts a local server that watches for file changes. It reloads the app automatically in the browser when you save changes.

📝 Syntax

intermediate

Which command correctly builds an Angular app for production?

You want to create an optimized build of your Angular app for deployment. Which command should you run?

A ng build --configuration production

B ng serve --prod

C ng build --prod

D ng start --prod

💡 Hint

The --prod flag is deprecated in newer Angular versions.

In Angular 12+, ng build --configuration production is the correct way to build a production-ready app. The --prod flag is an alias but may be deprecated.

🔧 Debug

advanced

Why does ng serve fail with 'Port 4200 is already in use' error?

You run ng serve but get an error saying port 4200 is already in use. What is the most likely cause?

A Another process is already running on port 4200, blocking the Angular dev server.

B The Angular CLI version is outdated and incompatible with your project.

C Your Angular app has a syntax error preventing the server from starting.

D The <code>package.json</code> file is missing the <code>start</code> script.

💡 Hint

Ports can only be used by one program at a time.

The error means some other program or previous Angular server is already using port 4200. You can stop that process or run ng serve --port 4300 to use a different port.

❓ state_output

advanced

What is the output URL shown after running ng serve successfully?

After running ng serve, what URL does the Angular CLI display for accessing the app in the browser?

A http://0.0.0.0:8080/

B http://127.0.0.1:3000/

C http://localhost:4200/

D https://localhost:4200/

💡 Hint

The default port for Angular dev server is 4200 and it uses HTTP.

The Angular CLI by default serves the app at http://localhost:4200/. This is the URL to open in your browser to see the running app.

🧠 Conceptual

expert

How does Angular's ng serve differ from a production server?

Which statement best describes the difference between ng serve and serving a production Angular app?

A <code>ng serve</code> builds optimized files and serves them with caching; production servers rebuild on every request.

B <code>ng serve</code> runs a development server with live reload and unoptimized code; production servers serve pre-built optimized files without live reload.

C <code>ng serve</code> deploys the app to a cloud server automatically; production servers run locally only.

D <code>ng serve</code> only runs unit tests; production servers run the app in the browser.

💡 Hint

Think about development convenience versus production performance.

ng serve is for development: it compiles quickly, serves unoptimized code, and reloads on file changes. Production servers serve static optimized files built by ng build --configuration production without live reload.

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