Lazy load same module from different paths

Question

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

partial fix - in platform-routing.module.ts replace UserProfileComponent with DiscoverPageComponent and DiscoverPageComponent with UserProfileComponent . now /discover with open DiscoverPageComponent — Piyush Jain
– Piyush Jain, Commented Apr 27, 2020 at 13:55
I would suggest u use something like a platform-container.component.ts with a router-outlet. then u define at the ' ' path your container and define also children: [ { path: ' ', component: UserProfileComponent }, { path: 'DiscoverPageComponent ', component: DiscoverPageComponent }, ] this setup will work. — sagat
– sagat, Commented Apr 27, 2020 at 13:57
@piyushjain now anything opens the DiscoverPageComponent but nothing opens the UserPageComponent :) — isADon
– isADon, Commented Apr 27, 2020 at 13:57

Wai Ha Lee · Accepted Answer · 2020-04-28 10:27:30Z

1

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"
  }
];

edited Apr 28, 2020 at 10:27

Wai Ha Lee

8,856102 gold badges61 silver badges100 bronze badges

answered Apr 27, 2020 at 20:42

Iam Coder

1,0059 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user13258211 Over a year ago

I also suggest naming the user route something like user/:user instead of just :user.

isADon Over a year ago

I can not change the user route. instagram.com/example just looks better than instagram.com/user/example

Collectives™ on Stack Overflow

Lazy load same module from different paths

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related