Running and serving an Angular app - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to run the Angular development server.

Angular

ng [1]

Drag options to blanks, or click blank then click option'

Aserve

Bbuild

Ctest

Dlint

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'ng build' instead of 'ng serve' to run the app

Trying 'ng test' which runs tests, not the server

The ng serve command starts the Angular development server and serves your app locally.

2fill in blank

medium

Complete the command to serve the Angular app on a specific port 4201.

Angular

ng serve --port=[1]

Drag options to blanks, or click blank then click option'

A80

B8080

C3000

D4201

Attempts:

3 left

💡 Hint

Common Mistakes

Using port 80 which often requires admin rights

Using unrelated port numbers like 3000 or 8080 without reason

The --port option sets the port number for the Angular development server. Here, port 4201 is used.

3fill in blank

hard

Fix the error in the command to build the Angular app for production.

Angular

ng [1] --prod

Drag options to blanks, or click blank then click option'

Abuild

Btest

Cserve

Dlint

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'ng serve --prod' which is invalid

Confusing 'build' with 'serve' or 'test'

The ng build --prod command builds the app optimized for production deployment.

4fill in blank

hard

Fill both blanks to serve the Angular app with live reload disabled and on host 0.0.0.0.

Angular

ng serve --host=[1] --live-reload=[2]

Drag options to blanks, or click blank then click option'

A0.0.0.0

Btrue

Cfalse

Dlocalhost

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'localhost' instead of '0.0.0.0' for host

Setting live reload to true when asked to disable it

Setting --host=0.0.0.0 allows access from any network interface. Disabling live reload uses --live-reload=false.

5fill in blank

hard

Fill all three blanks to build the Angular app with output path 'dist/app', base href '/myapp/', and optimization enabled.

Angular

ng build --output-path=[1] --base-href=[2] --optimization=[3]

Drag options to blanks, or click blank then click option'

Adist/app

B/myapp/

Ctrue

Dfalse

Attempts:

3 left

💡 Hint

Common Mistakes

Using default output path instead of 'dist/app'

Forgetting to add trailing slash in base href

Disabling optimization when it should be enabled

This command builds the app placing files in dist/app, sets the base URL to /myapp/, and enables optimization for smaller bundles.

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