The addition of Standalone Components has been one of the most significant advancements in Angular's evolution over the years. By decreasing boilerplate and increasing the self-containedness and reusability of components, this feature streamlines application architecture.

Using a real-time shop application sample that I created locally, I will describe independent components, how they differ from ordinary (module-based) components, and when not to use them.

What is a Standalone Component?
A Standalone Component is an Angular component that does not need to be declared inside an NgModule.

Instead of relying on modules for declarations and imports, a standalone component directly manages its own dependencies.

In traditional Angular applications:

1. Every component must be declared in an NgModule
2. Routing, directives, and pipes are imported via modules

With standalone components:

• Components are self-contained
• Dependencies like CommonModule, RouterLink, or other components are imported directly in the component decorator
• Applications become simpler, more readable, and easier to maintain

Angular now recommends standalone components for new applications, making them the future-proof approach.

Real-Time Scenario: Store Application Using Standalone Components
To understand standalone components in practice, I created a simple store application with the following pages:

• Landing Page
• Products Page
• Product Details Page
• Services Page
• About Us Page
• Contact Us Page

Almost all components in this application are standalone, including routing and navigation.

Routing Without Modules (app.routes.ts)
Instead of defining routes inside a routing module, routes are configured directly using standalone components:
export const routes: Routes = [
  { path: '', component: LandingComponent },
  { path: 'about', component: AboutComponent },
  { path: 'products', component: ProductListComponent },
  { path: 'products/:id', component: ProductDetailComponent },
  { path: 'services', component: ServicesComponent },
  {
    path: 'contact',
    loadComponent: () =>
      import('./contact/contact.component').then(m => m.ContactComponent)
  },
];

Why this matters

• No routing module required
• Supports lazy loading at component level
• Cleaner and more readable route definitions

Root Component as a Standalone Component
The root component (AppComponent) itself is standalone and imports only what it needs:
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, NavbarComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent {
  title = 'Standalone_Component_POC';
}

Key Takeaways
RouterOutlet and NavbarComponent are imported directly
No AppModule is required
The root component controls its own dependencies

Navbar as a Reusable Standalone Component
The navigation bar is a perfect example of a reusable standalone component:
@Component({
  selector: 'app-navbar',
  standalone: true,
  imports: [RouterLink, RouterLinkActive],
  templateUrl: './navbar.component.html',
})
export class NavbarComponent {}

Benefits

• Can be reused across multiple pages
• No shared module needed
• Easy to move or refactor

Product Listing Page Using Standalone Component
The products page displays a list of products and uses routing for navigation:
@Component({
  selector: 'app-product-list',
  standalone: true,
  imports: [CommonModule, RouterLink],
  templateUrl: './product-list.component.html'
})
export class ProductListComponent {
  products = [
    { id: 1, name: 'Red T-Shirt', price: 19.99 },
    { id: 2, name: 'Blue Jeans', price: 49.99 },
    { id: 3, name: 'Sneakers', price: 89.99 },
  ];
}

What this demonstrates
CommonModule is imported directly for structural directives
RouterLink is imported at component level
The component is fully independent and reusable

Lazy-Loaded Contact Page
The Contact page is lazy-loaded using loadComponent, which avoids loading it upfront:
@Component({
  selector: 'app-contact',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './contact.component.html',
})
export class ContactComponent {}

Why this is powerful

• Reduces initial bundle size
• Improves application performance
• No feature module required for lazy loading

UI Screenshots of the Store Application Built Using Standalone Components
Landing Page – Standalone Component Entry Point

Key Highlights

• Loaded directly via router configuration
• No module dependency
• Clean and lightweight setup

Products Page – Standalone Component with Routing

Key Highlights:

• Uses *ngFor from CommonModule
• Navigates using RouterLink
• Demonstrates data display in a standalone component

Contact Us Page – Lazy Loaded Standalone Component

Key Highlights:

• Lazy-loaded at component level

• No feature module required

• Improves performance and scalability

Regular Component vs Standalone Component

When NOT to Use Standalone Components

Although standalone components are highly recommended, there are a few scenarios where they might not be ideal:

• Large legacy applications heavily dependent on modules
• Applications running on older Angular versions
• Complex shared module patterns that are expensive to refactor
• Teams not ready to migrate existing module-based architecture

For new projects and modern Angular versions, standalone components should be the default choice.

One of the most sought-after abilities in contemporary web development is creating a REST API with Node.js and Express. REST APIs enable HTTP communication between various applications (such as web apps, mobile apps, and services). While Express is a lightweight framework that makes API development easy and effective, Node.js offers a quick and scalable runtime. They are frequently utilized in backend development together. Using real-world examples and best practices, this step-by-step tutorial will teach you how to create a REST API with Node.js and Express.

What is a REST API?
A REST API (Representational State Transfer API) is a way to communicate between client and server using standard HTTP methods.

Common HTTP Methods

• GET: Fetch data
• POST: Create new data
• PUT: Update existing data
• DELETE: Remove data

Example
A simple API for users:

• GET /users → Get all users
• POST /users → Create a user
• PUT /users/1 → Update user
• DELETE /users/1 → Delete user

Step 1: Install Node.js and Setup Project
First, install Node.js from the official website.

Then create a new project:
mkdir rest-api
cd rest-api
npm init -y

This creates a package.json file.

Step 2: Install Express
Install Express framework:
npm install express

Express helps in routing and handling HTTP requests easily.

Step 3: Create Basic Server
Create a file named server.js:
const express = require('express');
const app = express();

const PORT = 3000;

app.get('/', (req, res) => {
  res.send('API is running');
});

app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

Run the server:
node server.js

Open browser: http://localhost:3000

Step 4: Use Middleware (JSON Parsing)
To handle JSON data, use built-in middleware:
app.use(express.json());

This allows your API to read JSON from request body.

Step 5: Create Routes
Now create basic CRUD routes.
let users = [];

// GET users
app.get('/users', (req, res) => {
  res.json(users);
});

// POST user
app.post('/users', (req, res) => {
  const user = req.body;
  users.push(user);
  res.status(201).json(user);
});

Step 6: Add PUT and DELETE Routes
// PUT update user
app.put('/users/:id', (req, res) => {
  const id = parseInt(req.params.id);
  users[id] = req.body;
  res.json(users[id]);
});

// DELETE user
app.delete('/users/:id', (req, res) => {
  const id = parseInt(req.params.id);
  users.splice(id, 1);
  res.send('User deleted');
});

Step 7: Use Express Router (Better Structure)
Create a routes file:
const express = require('express');
const router = express.Router();

router.get('/', (req, res) => {
  res.send('Users route');
});

module.exports = router;

Use it in server:
const userRoutes = require('./routes/users');
app.use('/users', userRoutes);

Step 8: Connect to Database (Optional)
In real projects, data is stored in databases like MongoDB or MySQL.

Example with MongoDB (conceptual):
// connect to database and store users

Step 9: Error Handling
Handle errors properly:
app.use((err, req, res, next) => {
  res.status(500).json({ message: err.message });
});

Step 10: Test API
You can test APIs using:

• Postman
• Thunder Client
• Browser (for GET)

Example request:
POST /users
{
  "name": "John",
  "age": 25
}

Best Practices for REST API Development

• Use proper HTTP methods
• Keep routes clean and meaningful
• Validate user input
• Use status codes correctly
• Structure project properly

Common Mistakes Developers Make

• Not validating input
• Mixing business logic in routes
• Ignoring error handling
• Poor route naming

Real-World Use Cases

• Backend for web applications
• Mobile app APIs
• E-commerce platforms
• Authentication systems

Summary
Express and Node.js make it easy and effective to create a REST API. You may develop scalable and maintainable APIs for contemporary apps by taking a methodical approach. Express simplifies backend development with features like JSON handling, middleware, and routing. Building effective and production-ready APIs requires an understanding of REST principles and best practices.