angular - routing url changed after lazy loading implementation

Question

I'm developing an Angular 10 app. I have two different HTML layouts, so I created two components for that- layout1 & layout2. I have four components- component1, component2, component3, component4.

component1 & component2 uses layout1

component3 & component4 uses layout2

So before implementing lazy loading, my routing URL looked like the following

http://localhost:4200/#/component1

http://localhost:4200/#/component2

http://localhost:4200/#/component3

http://localhost:4200/#/component4

After implementing lazy loading, my routes look like this-

http://localhost:4200/#/layout1/component1

http://localhost:4200/#/layout1/component2

http://localhost:4200/#/layout2/component3

http://localhost:4200/#/layout2/component4

Below given is a rough sketch of how my app.routing.ts looks like

    export const AppRoutes: Routes = [
        {
          path: '',
          redirectTo: 'layout1',
          pathMatch: 'full',
        }, 
        {
          path: 'layout1',
          component: Layout1Component,
          children: [
            //to load layout 1 template
            {
              path: '',
              loadChildren: () => import("./layouts/layout1.module").then((m) => m.Layout1Module)
            },
            //to load component1 inside layout1 template
            {
                path: 'component1',
                loadChildren: () => import("./components/component1.module").then((m) => m.Component1Module)
            },
            //to load component2 inside layout1 template
            {
                path: 'component2',
                loadChildren: () => import("./components/component2.module").then((m) => m.Component2Module)
            }
        ]
        },
        {
          path: 'layout2',
          component: Layout2Component,
          children: [
            //to load layout 2 template
            {
              path: '',
              loadChildren: () => import("./layouts/layout2.module").then((m) => m.Layout2Module)
            },
            //to load component3 inside layout2 template
            {
                path: 'component3',
                loadChildren: () => import("./components/component3.module").then((m) => m.Component3Module)
            },
            //to load component4 inside layout2 template
            {
                path: 'component4',
                loadChildren: () => import("./components/component4.module").then((m) => m.Component4Module)
            }
        ]
        },
        {
          path: '**',
          redirectTo: 'layout1'
        }
      ];

I want the URL to look and work like they were before I implemented lazy loading Is there a way to achieve the result I'm looking for? Thanks!

Owen Kelvin Owen Kelvin · Accepted Answer · 2020-10-22T14:05:55

Consider Below approach

Have a folder structure in the form

Now we need to lazy load the components. We simply use path: '' app-routing-module

const routes: Routes = [
  {
    path: "",
    loadChildren: () =>
      import("./layout-1/layout-1.module").then(m => m.Layout1Module)
  },
  {
    path: "",
    loadChildren: () =>
      import("./layout-2/layout-2.module").then(m => m.Layout2Module)
  }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

Same applies to the layout-routing modules

const routes = [
  {
    path: "",
    component: Layout1Component,
    children: [
      {
        path: "component1",

        loadChildren: () =>
          import("./component-1/component-1.module").then(
            m => m.Component1Module
          )
      },
      {
        path: "component2",
        loadChildren: () =>
          import("./component-2/component-2.module").then(
            m => m.Component2Module
          )
      }
    ]
  }
];
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class Layout1RoutingModule {}

Finally component-module

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild([
      {
        path: "",
        component: Component1Component
      }
    ])
  ],
  declarations: [Component1Component]
})
export class Component1Module {}

DONT FORGET TO ADD <router-outlet></router-outlet>

See Sample on Stackblitz

angular - routing url changed after lazy loading implementation

1 Answers