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

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

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

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

Hope it works for you.