Bootstrapping Standalone Components
Tags: angular, standalonecomponents, beginners, typescript
Published: 2023-03-14 02:33:23

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