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.