Working with Standalone Components in Angular

Welcome coders! This short tutorial will show you how to create and work with standalone components in Angular.

Let’s get started right away!

Creating The Angular Project

ng new new-angular-features --minimal --standalone --routing

After the project has been generated, we can start by looking at the structure.

As you can see, there are no modules in our project. The regular routing module in Angular (app.module.ts) has also been replaced by the app.routes.ts file:

Creating Our First Standalone Component

Let’s continue by generating a new standalone component and adding a route to it:

ng g c hello-world --standalone --flat

Since this is just a basic example we don’t have to put any effort into the project structure, so we can place our new component directly in the app folder by using the flat parameter in our command.

Let’s now add a route to our newly generated component. We do that by updating the app.routes.ts file:

import { Routes } from "@angular/router";
import { HelloWorldComponent } from "./hello-world.component";

export const routes: Routes = [
  { path: "hello-world", component: HelloWorldComponent },
];

If you now start your application and visit localhost:4200/hello-world in your browser, you should see this:

Lazy Loading Standalone Components in Angular

A great thing about standalone components in Angular is that they support being lazy-loaded. To mark a standalone component to be lazily loaded, you can define it in the app.routes.ts file like this:

import { Routes } from "@angular/router";

export const routes: Routes = [
  {
    path: "hello-world",
    loadComponent: () =>
      import("./hello-world.component").then((mod) => mod.HelloWorldComponent),
  },
];

Note that you can now remove the import statement you had on line 2 and the example will still work.

This will improve the performance of your Angular application if you utilize it for components that aren’t commonly used. Just remember, this only works for components that are loaded as standalone components.

By the way, did you know it’s also possible to lazy load a bunch of routes at once? That’s right and that’s what we’ll do next!

Angular Lazy Load Multiple Standalone Components at Once

Let’s create a new Typescript file where we store some sub-routes to the path profile:

import { Route } from "@angular/router";
import { FriendsComponent } from "./friends.component";
import { SettingsComponent } from "./settings.component";

export const PROFILE_ROUTES: Route[] = [
  {path: 'friends', component: FriendsComponent},
  {path: 'settings', component: SettingsComponent},
  // ...
];

Note: I created two standalone components earlier which I use here (FriendsComponent, SettingsComponent). For the sake of the example, you can just create two standalone components.

You can then add the loadChildren operation to your route in app.routes.ts, like this:

//.
{
    path: "profile",
    loadChildren: () =>
      import("./profile.routes").then((mod) => mod.PROFILE_ROUTES),
  },

Now, you should be able to access the routes, localhost:4200/profile/friends and localhost:4200/profile/settings, and they will be lazily loaded.

Angular Standalone Components vs Angular Modules

Now, after following the example above, you may be wondering; Why should I use Standalone components instead of Modules? That’s a totally valid question and here’s our answer to that.

Standalone components should ALWAYS be used over modules when creating components in Angular. That’s due to the fact they are more easily tree-shaken and use less boilerplate code.

Another great benefit of using standalone components, as compared to Angular modules, is that standalone components can more easily be lazy-loaded.

Conclusion

In this tutorial, you have become familiar with standalone components in Angular and how they work. You have a good sense of the benefits of using standalone components, as opposed to Angular modules.

We could have made this tutorial much longer but since we wanted to keep it short, we felt this was a perfect length for a short tutorial. If you’re interested in digging deeper and learning more about standalone components in Angular, you can check out Angular’s own guide here.

Hope you enjoyed following this tutorial about Standalone Components in Angular. Wanna continue learning more about Angular stuff? Check out this article about Control Flow Blocks in the Angular Template.