Implementing Standalone Components in Angular 15
Tags: angular, webdev, beginners, javascript
Published: 2023-01-16 20:57:48

**Table of content**
- [Bootstrap](#bootstrap)
- [App Component, but standalone](#app-component-but-standalone)
- [Lazy loading routes](#lazy-loading-routes)
- [Conclusion](#conclusion)

---

In this article, I'm going to show you the most important parts to create an angular app using only standalone components. Yes, **no ngmodule is needed**.

You have all the code available in [this repo](https://github.com/Ismaestro/angular-example-app), which tries to represent **a real-world app**. If you are learning Angular, give it a try, and give me your thoughts!

DEMO HERE: https://angular-example-app.netlify.app/

![image of angular logo](https://res.cloudinary.com/ismaestro/image/upload/v1673822678/ismaelramos/posts/implementing-standalone-components-in-angular-15/angular4_v1nfsn.png "Angular logo")

## Bootstrap

The most important change is inside the **src/main.ts** file. First of all, we need to bootstrap the application in a different way:

Before:
```typescript
platformBrowserDynamic().bootstrapModule(AppModule);
```

After:
```typescript
import { importProvidersFrom } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter } from '@angular/router';
...

bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(HttpClientModule),
    provideRouter([
      {
        path: '',
        component: HomePageComponent,
        pathMatch: 'full',
      },
      { path: '404', component: Error404PageComponent },
      { path: '**', redirectTo: '404' },
    ]),
    ...
  ],
});
```

Now, we are using *provideRouter* and *importProvidersFrom*. These methods allow us to provide routes and extract providers from some modules without importing them.

## App Component, but standalone

Following the bootstrap configuration, we need to create components and enable the **standalone flag**. The *app.component.ts* looks like this:

```typescript
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  imports: [RouterOutlet, NgIf, ...],
  standalone: true,
})
export class AppComponent implements OnInit {}
```

Notice how can we import other standalone components directly, and even other ngmodules, like for example *ReactiveFormsModule*. Other than that, everything inside the component works as before.
Here another example of component using other standalone components and modules:

```typescript
@Component({
  selector: 'app-edit-profile',
  templateUrl: './edit-profile.component.html',
  standalone: true,
  imports: [ReactiveFormsModule, TrimDirective, FormErrorsComponent, LowercaseDirective, NgIf],
})
export class EditProfileComponent implements OnInit {}
```

## Lazy loading routes

Lastly, I'm going to show you how to lazy loading routes. You have to do it while defining the bootstrap:

```typescript
{
  path: 'auth',
    loadChildren: () => import('./app/modules/auth/auth.routes').then(mod => mod.AUTH_ROUTES),
}
```

Here I'm using a constant called AUTH_ROUTES to hold my auth routes:

```typescript
export const authPaths = {
  base: 'auth',
  logIn: 'log-in',
  register: 'register',
  logout: 'logout',
};

export const authRoutes = {
  logIn: `/${authPaths.base}/${authPaths.logIn}`,
  register: `/${authPaths.base}/${authPaths.register}`,
  logout: `/${authPaths.base}/${authPaths.logout}`,
};

export const AUTH_ROUTES: Route[] = [
  { path: authPaths.logIn, component: LogInPageComponent, canActivate: [NoAuthGuard] },
  { path: authPaths.register, component: RegisterPageComponent, canActivate: [NoAuthGuard] },
  {
    path: authPaths.logout,
    component: LogoutPageComponent,
  },
  { path: '**', redirectTo: appPaths.error404 },
];
```

By doing this, I can refactor route names easily.

## Conclusion

**Remember**, you have a complete real world app in [this repo](https://github.com/Ismaestro/angular-example-app).

DEMO HERE: https://angular-example-app.netlify.app/

I hope you have learned something new. If you think this might help other people, please hit the like button so that others can read it. ❤️

If you have any thoughts or questions, feel free to leave a comment!