Running and serving an Angular app - Mini Project: Build & Apply

Running and serving an Angular app

📖 Scenario: You are creating a simple Angular app to display a welcome message. Before you can see it in the browser, you need to run and serve the app using Angular's development server.

🎯 Goal: Learn how to set up the Angular app's basic structure, configure the serve command, run the app locally, and verify it is working in the browser.

📋 What You'll Learn

Create a basic Angular app structure with a root component

Add a configuration variable for the port number to serve the app

Use Angular CLI commands to serve the app on the specified port

Verify the app runs and displays the welcome message in the browser

💡 Why This Matters

🌍 Real World

Developers often need to run and serve Angular apps locally to test and develop features before deploying them.

💼 Career

Knowing how to serve Angular apps is essential for frontend developers working with Angular to build and test web applications.

1

Create the Angular app root component

Create a standalone Angular component called AppComponent with a template that displays the text Welcome to Angular App!. Use the @Component decorator with selector set to app-root and standalone: true.

Angular

# Your code here to create AppComponent with selector 'app-root' and template 'Welcome to Angular App!'

Hint

Use @Component decorator with selector, standalone, and template properties.

2

Add a port configuration variable

Create a constant variable called port and set its value to 4200. This will be the port number where the Angular app will be served.

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `Welcome to Angular App!`
})
export class AppComponent {}

// Your code here to create constant port = 4200

Hint

Use const port = 4200; to define the port variable.

3

Serve the Angular app using Angular CLI

Write the Angular CLI command to serve the app on the port stored in the port variable. Use the command ng serve --port 4200 but replace 4200 with the port variable value.

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `Welcome to Angular App!`
})
export class AppComponent {}

const port = 4200;

// Your code here to write the command 'ng serve --port 4200' using the port variable

Hint

Use the Angular CLI command ng serve --port 4200 to run the app on port 4200.

4

Verify the app runs and displays the welcome message

Open a browser and navigate to http://localhost:4200. Confirm that the page shows the text Welcome to Angular App!. This verifies the app is running and serving correctly.

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `Welcome to Angular App!`
})
export class AppComponent {}

const port = 4200;

// Open browser at http://localhost:4200 to verify the app
// Your code here to confirm the app runs and shows the welcome message

Hint

Use your browser to open http://localhost:4200 and check the displayed text.

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