CODEWITHSUNDEEP
angularangular-router
isADon
isADon

Reputation: 3673

Lazy load same module from different paths

I have following app-routing.module.ts:

  {
    path: 'discover',
    loadChildren: () => import('./components/platform/user-profile/platform.module').then(m => m.PlatformModule)
  },
  {
    path: ':userRoute',
    loadChildren: () => import('./components/platform/user-profile/platform.module').then(m => m.PlatformModule)
  },

My goal is that /discover should open DiscoverPageComponent from PlatformModule

/userName1 should open UserPageComponent from PlatformModule

My platform-routing.module.ts contains following:

  {
    path: '',
    component: UserProfileComponent,
  },
  {
    path: 'discover',
    component: DiscoverPageComponent,
  },

This doesn't work as /discover will always open the UserProfileComponent instead of the DiscoverPageComponent. I can only open the DiscoverPageComponent from /userName1/discover

How can I have those two different routes open their specific component from the same lazy loaded module?

Stackblitz: https://stackblitz.com/edit/angular-w3rc5g Please see /discover and /anyUserName1

Upvotes: 1

Views: 1694

Answers (1)

Iam Coder
Iam Coder

Reputation: 1003

Try the below sample code, do changes in your routing modules

In app-routing.moudle.ts:

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./platform/platform.module').then(m => m.PlatformModule)
  },
];

In platform-routing.module.ts:

const routes: Routes = [
  {
    path: "user",
    children: [
      {
        path: ":user",
        component: UserProfileComponent
      }
    ]
  },
  {
    path: "discover",
    component: DiscoverComponent
  },
  {
    path: "",
    redirectTo: "discover",
    pathMatch: "full"
  }
];
  1. http://localhost:4200/discover
  2. http://localhost:4200/user/1

Upvotes: 1

Related Questions