multiple path for load same module - lazy loading

I have multiple components in one module. I want to show the components based on routing path. for http://localhost:4200/account I want to show account component. for http://localhost:4200/setting I want to show settings component ..etc

app.routing.module.ts

{
    path: 'account',
    loadChildren: './modules/settings/settings.module#SettingsModule',
},
{
    path: 'settings',
    loadChildren:'./modules/settings/settings.module#SettingsModule', 
},

settings.routing.module.ts

export const routes: Routes = [
    {
        path: 'account',
        component: accountComponent
    },
    {
        path: 'account/edit',
        component: accountEditComponent
    },
    {
        path: 'settings',
        component: settingsComponent
    },
    {
        path: 'settings/edit',
        component: settingsEditComponent
    }
];

what changes I do in settings.routing.module.ts to show those components.

If you really want to do this you can use UrlMatcher to find the correct component.

SIDE NOTE:I wouldn't recommend you to do this. instead go with my other answer. I think it's a better approach. BUT of-course it's your decision.

Simple demo

app.routing.module.ts (not changed)

{
    path: 'settings/account',
    loadChildren: './modules/settings/settings.module#SettingsModule',
},
{
    path: 'settings',
    loadChildren:'./modules/settings/settings.module#SettingsModule', 
}

settings.routing.module.ts

export function isAccount(url: UrlSegment[], group: UrlSegmentGroup) {
  return group.segments.length === 1 && group.segments[0].path.endsWith('account') ? ({consumed: url}) : null;
}

export function isSettings(url: UrlSegment[], group: UrlSegmentGroup) {
  return group.segments.length === 1 && group.segments[0].path.endsWith('settings') ? ({consumed: url}) : null;
}

export const routes: Routes = [
    {
        path: 'account',
        component: accountComponent,
        matcher: isAccount
    },
    {
        path: 'account/edit',
        component: accountEditComponent
    },
    {
        path: 'settings',
        component: settingsComponent,
        matcher: isSettings
    },
    {
        path: 'settings/edit',
        component: settingsEditComponent
    }
];

Result is exactly what you're looking for:

http://localhost:4200/settings will show settings component.

http://localhost:4200/account will show account component.

Lazy-loading feature modules, To lazy load Angular modules, use loadchildren (instead of component ) in your In the lazy-loaded module's routing module, add a route for the component. Use the same command to create a second lazy-loaded feature module with routing, along with its stub component. You can use forChild() in multiple modules. Angular provides the loadChildren property of a route's path to specify the module that needs to be lazy loaded when it's first navigated to. Open the src/app/app-routing.module.ts file and update it as follows:

One way is to have settings as the default path (component) for this module, and all other components as a child route.

Simple DEMO

app.routing.module.ts

{
    path: 'settings/account',
    loadChildren: './modules/settings/settings.module#SettingsModule',
},
{
    path: 'settings',
    loadChildren:'./modules/settings/settings.module#SettingsModule', 
},

settings.routing.module.ts

export const routes: Routes = [
    {
        path: '',
        component: settingsComponent
    },
    {
        path: 'edit',
        component: settingsEditComponent
    },
    {
        path: 'account',
        component: accountComponent
    },
    {
        path: 'account/edit',
        component: accountEditComponent
    }
];

http://localhost:4200/setting will show settings component.

http://localhost:4200/settings/account will show account component.

..etc

Angular reuse same lazy load module for multiple root paths, As far as I know Angular lazy load only works with one root route, and the routes configured in the lazy loaded module are set as children of that route. { path:� The first step in introducing lazy modules in your application is to break it down into modules that can be loaded lazily. The current best practice is to have one module per page in your application.

You can do something like this

settings-routing.module.ts

const routes: Routes = [
    {
        path: '',
        component: PubliclistsComponent,
        children: [
          {path: '', redirectTo: 'all', pathMatch: 'full'},
          {path: 'all', component: ChallengelistComponent},
          {path: 'me', component: ChallengelistComponent}
        ]
    }
];

const settingsRoutes: Routes = [
    {
        path: '',
        component: SettingsComponent,
        children: [
          {path: '', redirectTo: 'participants', pathMatch: 'full'},
          {path: 'bleh', component: TeamlistComponent},
          {path: 'bleh-bleh', component: TeamlistComponent}
        ]
    },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class AccountsRoutingModule { }


@NgModule({
  imports: [RouterModule.forChild(settingsRoutes)],
  exports: [RouterModule]
})
export class SettingsRoutingModule { }

settings.module.ts

@NgModule({
  declarations: [],
  imports: [
    ...
  ]
})
export class AccountModule { }


@NgModule({
  declarations: [],
  imports: [
    ...
  ]
})
export class SettingsModule { }

app-routing.ts

{
    path: 'account',
    loadChildren: './modules/settings/settings.module#AccountsModule',
},
{
    path: 'settings',
    loadChildren:'./modules/settings/settings.module#SettingsModule', 
},

Lazy Loading Angular Modules and Preloading Strategies, It loads all the components registered in the app module for the first time. Lazy loading has many benefits over eager loading. Define the path in the path field of the route's object and module path in the loadChildren field. Lazy loading can be applied to multiple resources and through multiple strategies. General. Code splitting JavaScript, CSS and HTML can be split into smaller chunks. This enables sending the minimal code required to provide value upfront, improving page-load times. The rest can be loaded on demand.

Angular 10|9|8 Nested Routing with Multiple RouterOutlet using , In all Routing Module files, one parent and nested Routing Module files will CSS # Navigate to app directory $ cd AngularNestedRouting # Open in Visual Application without lazy-loading loads all components at once on� We just want to load multiple components from another module into a component view without depending on router and lazy loading. @dherges By using ViewContainerRef and ComponentFactoryResolver sort of APIs, you can add components dynamically in a view. But the component must also be declared as a entryComponent in the same module. There are no

Angular - Lazy Loading Feature Module, Lazy loading modules in Angular allows applications to load the route(s) corresponding to component(s) belonging to the lazy loaded module. This has many benefits on your Angular application such as the performance and size. generates a file called app-routing.module.ts, which is one of the files� Lazy loading modules helps us decrease the startup time. With lazy loading our application does not need to load everything at once, it only needs to load what the user expects to see when the app first loads. Modules that are lazily loaded will only be loaded when the user navigates to their routes.

Manually Lazy Load Modules And Components In Angular, In Angular enterprise applications, it is often a requirement to load a multiple modules and/or components need to be lazy-loaded and its A lazy-loaded module can be defined in the routing configuration our new configuration that includes the lazy-loaded module route. We use the same import(. It turns out that switching to lazy loading is really simple and just requires a few small changes. We want the sum modules only to be loaded when needed so the main routes need to be defined in AppModule instead. In both Mod1Module and Mod2Module we need to change the route path to an empty string. The only change is on line 8 here.

Comments
  • There is no sense in what you're trying to do. Why are your not making each route as a different lazy loaded module?