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.