Implementing Standalone Components in Angular 15

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, which tries to represent a real-world app. If you are …

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, which tries to represent a real-world app. If you are learning Angular, give it a try, and give me your thoughts!

image of angular logo

1 – 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:

platformBrowserDynamic().bootstrapModule(AppModule);

After:

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.

2 – 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:

@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:

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

3 – Lazy loading routes

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

{
  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:

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.

Remember, you have a complete real world app in this repo.

Thanks for reading, and I hope you’ve learnt something new! Please share it if you liked it!

More here! ismaelramos.dev


Print Share Comment Cite Upload Translate
APA
Ismael Ramos | Sciencx (2024-03-29T12:08:37+00:00) » Implementing Standalone Components in Angular 15. Retrieved from https://www.scien.cx/2023/01/16/implementing-standalone-components-in-angular-15/.
MLA
" » Implementing Standalone Components in Angular 15." Ismael Ramos | Sciencx - Monday January 16, 2023, https://www.scien.cx/2023/01/16/implementing-standalone-components-in-angular-15/
HARVARD
Ismael Ramos | Sciencx Monday January 16, 2023 » Implementing Standalone Components in Angular 15., viewed 2024-03-29T12:08:37+00:00,<https://www.scien.cx/2023/01/16/implementing-standalone-components-in-angular-15/>
VANCOUVER
Ismael Ramos | Sciencx - » Implementing Standalone Components in Angular 15. [Internet]. [Accessed 2024-03-29T12:08:37+00:00]. Available from: https://www.scien.cx/2023/01/16/implementing-standalone-components-in-angular-15/
CHICAGO
" » Implementing Standalone Components in Angular 15." Ismael Ramos | Sciencx - Accessed 2024-03-29T12:08:37+00:00. https://www.scien.cx/2023/01/16/implementing-standalone-components-in-angular-15/
IEEE
" » Implementing Standalone Components in Angular 15." Ismael Ramos | Sciencx [Online]. Available: https://www.scien.cx/2023/01/16/implementing-standalone-components-in-angular-15/. [Accessed: 2024-03-29T12:08:37+00:00]
rf:citation
» Implementing Standalone Components in Angular 15 | Ismael Ramos | Sciencx | https://www.scien.cx/2023/01/16/implementing-standalone-components-in-angular-15/ | 2024-03-29T12:08:37+00:00
https://github.com/addpipe/simple-recorderjs-demo