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!'

Need a 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

Need a 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

Need a 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

Need a hint?

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