Angular - Using the same module for multiple paths

Question

A bit of a code structure question for Angular. I’m trying to achieve a split screen design, where the left and right show different data, based on different queries. The left will usually dictate which data on the right is display.

For example: The left will have a list of Artists. When clicking on an artist, a list of their albums will appear on the right. One approach that worked, but doesn’t feel quite right is the following:

A “screen one” component that has access to the URL params. Inside this component / module we import the Artists component and the Projects component. The screen one component handles the queries to Firestore and hands them down to these components:

<div>
    <app-artists [artistsArray]="artistsArray"></app-artists>
    <app-albums [albumsArray]="albumsArray"></app-albums>
</div>

This works pretty well. However, this will appear at the route /artists . When clicking on an artists, the route would then be /artists/:artistID. The tricky part here, is that in my routing module, i now have two routes that load the exact same module. Is that an issue? Routing

const routes: Routes = [
  {
    path: 'artists',
    loadChildren: () => import('./screens/screen-one/screen-one.module').then(mod => mod.ScreenOneModule),
  },
  {
    path: 'artists/:artistID',
    loadChildren: () => import('./screens/screen-one/screen-one.module').then(mod => mod.ScreenOneModule),
  },
];

remove artists/:artistID, create artists.routes.ts, import it from your screenOneModule, and put your children in the create routes — Pedro Bezanilla, Nov 06 '20 at 10:45
Thanks! - Are you able to demonstrate that in an answer please? — Que, Nov 06 '20 at 10:49

Pedro Bezanilla · Answer 1 · 2020-11-06T12:33:17.430

It's not an issue but it's recommended to split your app routes. Let's say you have an AppModule that contains 3 big modules. It's better having the main app-routing.module and a route module for each big module then having it in the same app-routing.module.

remove artists/:artistID, create artists.routes.ts, import it from your screenOneModule, and put your children in the created route

app-routing.module.ts

...
const routes: Routes = [
  {
    path: 'artists',
    loadChildren: () => import('./screens/screen-one/screen-one.module').then(mod => mod.ScreenOneModule),
  }
];
...

artists.routes.ts

...
export const routes: Routes = [
    path: 'artists',
    children: [
        {
            path: ':artistID',
            pathMatch: 'full',
            component: ArtistsComponent
        }
];
@NgModule({
    imports: [RouterModule.forChild(routes)],
    declarations: [],
    exports: [RouterModule],
    providers: []
})
export class ArtistRoutes{}

screen-one.module.ts

...
imports: [
    ...
    ArtistRoutes,
    ...
]
...

score 0 · Answer 2 · answered Nov 06 '20 at 10:51

Hey, what you suggested isn't an issue. You could also map an array of routes:

const artistPaths: string[] = ['artist', 'artists/:artistID'];
const artistRoutes: Route[] = artistPaths.map((path) => ({path, loadChildren: () => null}));

Then either:

Push this into the routes array:

routes.push(artistRoutes);

Add it in the array definition directly:

const routes: Routes = [
  artistRoutes  
];

Angular - Using the same module for multiple paths

2 Answers2