Standalone vs module-based decision in Angular - Hands-On Comparison

Standalone vs Module-Based Decision in Angular

📖 Scenario: You are building a simple Angular app that shows a welcome message. You want to decide whether to use a standalone component or a module-based component.

🎯 Goal: Create an Angular component that displays the text Welcome to Angular!. First, set up the data. Then, add a configuration variable to choose standalone or module-based. Next, implement the component accordingly. Finally, complete the setup to run the app.

📋 What You'll Learn

Create a variable called message with the value 'Welcome to Angular!'

Create a boolean variable called useStandalone set to true or false

Create an Angular component named WelcomeComponent that uses the message variable in its template

If useStandalone is true, make WelcomeComponent standalone

If useStandalone is false, create an Angular module named WelcomeModule that declares WelcomeComponent

Bootstrap the Angular app with WelcomeComponent if standalone, or with WelcomeModule if module-based

💡 Why This Matters

🌍 Real World

Angular developers often decide between using standalone components or modules to organize their apps. This project shows how to set up both approaches simply.

💼 Career

Understanding standalone vs module-based components is important for Angular developers to write modern, maintainable code and follow best practices.

1

Data Setup: Create the message variable

Create a variable called message and set it to the string 'Welcome to Angular!'

Angular

# Create a variable called message with the value 'Welcome to Angular!'
# Your code here

Need a hint?

Use const to create a variable named message and assign the exact string.

2

Configuration: Add the useStandalone variable

Create a boolean variable called useStandalone and set it to true

Angular

const message = 'Welcome to Angular!';
# Create a boolean variable called useStandalone and set it to true
# Your code here

Need a hint?

Use const useStandalone = true; to create the variable.

3

Core Logic: Create the WelcomeComponent

Create an Angular component named WelcomeComponent that displays the message variable in its template. If useStandalone is true, make the component standalone by adding standalone: true in the decorator. If useStandalone is false, do not make it standalone.

Angular

const message = 'Welcome to Angular!';
const useStandalone = true;

// Create WelcomeComponent here
# Your code here

Need a hint?

Use the @Component decorator with standalone: useStandalone and bind message in the template.

4

Completion: Setup module and bootstrap

If useStandalone is false, create an Angular module named WelcomeModule that declares WelcomeComponent. Then bootstrap the Angular app with WelcomeComponent if useStandalone is true, or with WelcomeModule if false. Use bootstrapApplication for standalone and platformBrowserDynamic().bootstrapModule for module-based.

Angular

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

const message = 'Welcome to Angular!';
const useStandalone = true;

@Component({
  selector: 'app-welcome',
  template: `{{ message }}`,
  standalone: useStandalone
})
export class WelcomeComponent {
  message = message;
}

// Add module and bootstrap code here
# Your code here

Need a hint?

Use @NgModule to declare WelcomeComponent and bootstrap it. Use bootstrapApplication for standalone or platformBrowserDynamic().bootstrapModule for module-based bootstrap.