Bootstrapping Standalone Components

A Glimpse of Life Without NgModules

This article is a brief overview of what it means to bootstrap your app, defining NgModules and a guide of how to initiate your apps without NgModules.

Bootstrapping Meaning and What are Ng Modules?

To "bootstrap" an application typically means to set up the initial configuration and dependencies required for the application to run.
Depending on the specifics of the application and the environment in which it is being developed or deployed determines what's needed to get your app up and running. It might involve installing necessary software libraries or frameworks, configuring database connections, setting up initial user accounts or permissions, and establishing default settings or configurations.
Overall, bootstrapping an application is an important step in the development process that lays the groundwork for development and deployment efforts.

NgModules

It is a Typescript class decorated with an "@NgModule" decorator. A NgModule can be thought of as a container and a way to organize related code such as components, directives, services, and pipes into a cohesive block of functionality.

Here’s an example of what a basic module might look like:

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

@NgModule({
  imports: [BrowserModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})

export class AppModule { }

In this example, the @NgModule decorator is used to define a module called AppModule. This module imports the BrowserModule, which provides essential services for browser applications, declares the AppComponent, which is the root component of the application, and specifies that the AppComponent should be used as the bootstrap component.

Introduction to The Root Module and The Bootstrapping Process.

The root module is typically the starting point for bootstrapping the application and sets up the initial state of the application by creating the root component and injecting any necessary services. Imports any additional modules that the application requires and exports the components, directives, and pipes that should be available to other parts of the application.

Compilation Context

Explaining NgModules as just an organizing functionality is a bit of an understatement. Prior to Angular 9 one of the most important jobs of NgModules was the Handling of the Compilation Context.

What is the Compilation Context

Compilation context in Angular refers to the process of converting an Angular template into executable JavaScript code. It's a step in the Angular application's bootstrapping process that prepares the component templates for rendering by binding expressions and resolving dependencies. It involves three main tasks: template parsing, creating metadata, and generating a factory function.

The Bootstrapping Process in Detail

Angular uses a module system and requires that the AppModule be defined and imported in the application's entry point file in main.ts.

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));
In this example, the platformBrowserDynamic(

In the example above, the platformBrowserDynamic() function is used to bootstrap the AppModule module, which loads the AppComponent and any other components, directives, services, and pipes that are defined in the module.

• Step 1: Create the root component -- This is typically done in the root NgModule, using the @Component decorator
• Step 2: Inject necessary services --This is done by declaring the services in the providers array of the NgModule
• Step 3: Import necessary modules_ -- This is done using the imports array of the NgModule_
• Step 4: Attach the root component to the DOM -- This is done using the bootstrap array of the NgModule and passing in the root component

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { MyService } from './my.service';

@NgModule({
  imports: [BrowserModule], // 2. Importing of other Modules
  declarations: [AppComponent],// 1. Create the Root Component
  providers: [MyService] // 3. Import of Services and other dependencies
  bootstrap: [AppComponent] // 4. Attaching the root Component to the Dom
})
export class AppModule { }

Why Would You Want to Replace NgModules?

• NgModule concepts are more difficult to teach and learn for beginners.

• Unnecessary complexity, it can be hard to debug and maintain, as they require a lot of boilerplate code.

• Angular 9+ has the Ivy Compiler that provides Components with its own compilation context therefore application works without modules at runtime.

Life without NgModules using Standalone Components.

Now that we have some understanding of What NgModules are and why we don't need them at the start of our projects anymore, we can now go over Standalone Components and how you can begin using them at the beginning of your Angular Projects.

Lets Bootstrap our Root Standalone Component

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

bootstrapApplication(AppComponent);

In the example above you can already see how much simpler the code is. Here we remove the platformBrowserDynamic() and import the bootstrapApplication() instead and inject the App Component inside the function. Along with Components, Directives and Pipes can also be declared as Standalone. Standalone Component's, Directives and Pipes cannot be used in NgModules. Remember the compilation context let's see what that process looks like in a Component.

Here’s an example of what a basic Standalone Root Component might look like:

@Component({
  selector: 'app-standalone',
  standalone: true,//  1. instantiate standalone flag
  imports: [CommonModule, StandaloneComponent, ChangeSizePipe, 
            ColorDirective], // 3. Import Dependencies 
  templateUrl: './standalone.component.html' // 2.Render the Dom,
  providers:[MyService] // 4. Import of Services and other dependencies 


})
export class StandaloneComponent {
}

As you can see we have our standalone flag set to true, In the imports we have an array with a Directive and a Pipe. We also have the Common Module from '@angular/common' that provides us with the non standalone Directives ngIf, ngSwitch and a few others but we can only import Standalone Directives therefore we have to import the entire Module. That's it! this is all that is needed to get your Angular Application up and running
NgModule free.
There is alot more to learn about the new Standalone API that I didn't get to cover in this post but in the next article I can go over how to use importProvidersFrom(), provideRouter() and provideHttpClient() methods and the changes made with Routing. If you have any questions or feedback, please don't hesitate to drop them in the comments below. Until next time!