Angular 101: Why Does Angular 18 Not Have app.module.ts?

In Angular 18, the framework introduced significant changes to its module system to simplify and modernize the development experience. One of these changes is the removal of the app.module.ts file, which traditionally served as the root module configuration for the Angular application.

1. What Changed in Angular 18?

Angular 18 and later versions now use a new feature called Standalone Components to streamline the module system. This change makes it possible to create Angular applications without using NgModules (e.g., app.module.ts). The goal is to simplify the setup process and reduce the boilerplate code associated with managing modules.

Standalone Components Overview

• Standalone Components allow developers to define Angular components, directives, and pipes without declaring them inside a module (@NgModule).
• The new standalone: true property in the component decorator (@Component) indicates that the component is self-contained and does not need to be part of any NgModule.

2. Why Was app.module.ts Removed?

The removal of the app.module.ts file is part of a broader initiative to adopt Standalone Components and make Angular more modular and less reliant on NgModules. This change provides the following benefits:

• Simplifies Project Structure: Eliminates the need for separate NgModule files, reducing complexity for smaller projects and new developers.
• Faster Development: Standalone components allow faster bootstrapping of applications and minimize the initial configuration.
• Improved Tree Shaking: Angular’s bundling and tree-shaking capabilities are enhanced with standalone components, leading to smaller application sizes.

3. How to Bootstrap an Angular Application Without app.module.ts

In Angular 18 and later, you can directly bootstrap the root component using the new standalone API. Here’s how you can do it:

Example: Bootstrapping a Standalone Angular Application

1. Create a Standalone Component:
In your root component file (app.component.ts), define the component with the standalone: true property:

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  standalone: true, // Enable standalone mode for the component
  template: `
    <h1>Welcome to Standalone Angular App</h1>
    <p>This is a standalone component without an NgModule.</p>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {}

2. Modify main.ts to Bootstrap the Standalone Component:
In the main.ts file, use the bootstrapApplication function instead of platformBrowserDynamic:

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent)
  .catch(err => console.error(err));

4. How to Enable Standalone Components in Angular

Standalone components are enabled by default in Angular 18 and later. However, you can also migrate existing Angular applications to use standalone components:

1. Create a new Angular component using the CLI:

   ng generate component my-standalone-component --standalone

2. Update the Angular CLI configuration:
   You can update your angular.json file to set standalone components as the default configuration for new components:

   "schematics": {
    "@schematics/angular:component": {
      "standalone": true
    }
   }

5. Comparison: Traditional vs. Standalone Angular Application

6. Interview Question Example

• Q: What are standalone components in Angular, and how do they differ from traditional NgModules?
• A: Standalone components in Angular eliminate the need for NgModules by using the standalone: true property in the component decorator. This feature allows components to be directly bootstrapped, simplifying the project structure and improving tree-shaking capabilities for better optimization.

7. Summary

The removal of app.module.ts in Angular 18 is a result of the introduction of standalone components, which offer a more streamlined and simplified approach to building Angular applications. This change reduces boilerplate code and improves the efficiency of development, making Angular more accessible and performant.

If you have any further questions or need guidance on how to migrate an existing Angular project to use standalone components, feel free to ask!