The main routes that contains route to the product component

main.routes.ts

import { Routes } from "@angular/router";
import { MainComponent } from "./main.component";
import { ProductEffects } from "../store/product";
import { provideEffects } from "@ngrx/effects";

export const mainRoutes: Routes = [
    {
      path: '',
      component: MainComponent,
      children: [
        {
          path: 'products',
          providers: [
            provideEffects(ProductEffects)
          ],
          data: { title: 'Products' },
          loadChildren: () =>
            import('./products/products.routes').then((m) => m.productRoutes),
        }
      ]
    }
]