DEV Community

Henri de la Hoz
Henri de la Hoz

Posted on • Updated on

Including standalone components in your module based Angular application routes.

As you know, one of the new features from Angular 15 is the concept of standalone components.

Basically what the Angular team is doing by introducing this feature is making components the basic foundation to develop in Angular.

Before, the basic foundation to develop in Angular was NgModules, in other words you needed to understand how NgModules work in order to develop apps in Angular correctly.
On the other hand, React, Vue and others frameworks / libraries are based mainly on components, so moving from one of them to Angular required some extra effort because of the differences in the basic concepts I just mentioned.

Standalone components reduces that friction and helps in the transition from developing in React, Vue or others to develop in Angular.

But what if you are already workin in Angular and you already have a module-based application? How can I render SaC (standalone component) in my module-based Angular app routes?

Create your standalone component

Imagine you need to create a new form page in your web app and you want to implement it using an standalone component, you can create this new component using the command

ng g c new-form-page --standalone
Enter fullscreen mode Exit fullscreen mode

We are telling Angular to generate a new component named new-fprm-page and using the flag standalone we are making it standalone (obviously).

This is going to create the component and is not going to modify any other file from our project.

Add your new standalone component page in your routes

Rendering only your component without lazy loading


const routes: Routes = [
    {
        path: 'my-new-standaline-form-page',
        pathMatch: 'full',
        component: NewFormPageComponent,
    }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule],
})
export class AppRoutingModule {}
Enter fullscreen mode Exit fullscreen mode

Rendering only your component with lazy loading


const routes: Routes = [
    {
        path: 'my-new-standaline-form-page',
        pathMatch: 'full',
        loadComponent: () => import('path/to/new-fprm-page.component').then(com => com.NewFormPageComponent)
    }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule],
})
export class AppRoutingModule {}
Enter fullscreen mode Exit fullscreen mode

Rendering your component inside a layout component with lazy loading


const routes: Routes = [
    {
        path: 'my-new-standaline-form-page',
        pathMatch: 'full',
        component: LayoutComponent,
        children: [
            {
                path: '',
                loadComponent: () =>
                    import('path/to/new-fprm-page.component').then((c) => c.NewFormPageComponent),
            },
        ],
    }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule],
})
export class AppRoutingModule {}
Enter fullscreen mode Exit fullscreen mode

Hope it works for you.

Top comments (0)