DEV Community

Cover image for Implementing Standalone Components in Angular 15
Ismael Ramos 🚀
Ismael Ramos 🚀

Posted on • Updated on • Originally published at ismaelramos.dev

Implementing Standalone Components in Angular 15

Table of content


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!

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

image of 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:

platformBrowserDynamic().bootstrapModule(AppModule);
Enter fullscreen mode Exit fullscreen mode

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' },
    ]),
    ...
  ],
});
Enter fullscreen mode Exit fullscreen mode

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:

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

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 {}
Enter fullscreen mode Exit fullscreen mode

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),
}
Enter fullscreen mode Exit fullscreen mode

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 },
];
Enter fullscreen mode Exit fullscreen mode

By doing this, I can refactor route names easily.

Conclusion

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

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!

Top comments (2)

Collapse
 
mikhailkurakhtanov profile image
Mikhail Kurakhtanov

Great guide for beginners, thanks!

Collapse
 
ismaestro profile image
Ismael Ramos 🚀

Thanks!