Angular Routes :Multiple Outlets with path as string array
In my angular9 application hundards of routes path are configured so Is there any way to use multiple outlets with single array of string path.
current code:
const routes: Routes = [ { path: 'Data/:EntityID/:Date', component: MyFormComponent,children:[ { path: '', loadChildren: () => import('../data-entry/data-entry.module').then(m => m.DataEntryModule) } ], } , { path: 'Settings/:EntityID/:Date', component: MyFormComponent,children:[ { path: '', loadChildren: () => import('../data-entry/data-entry.module').then(m => m.DataEntryModule) } ] } ... ]; export const routing = RouterModule.forChild(routes);
so is there any way to use same path as string array. Because in case of above way script is getting increase for same component for multiple path.
something like:
const routes: Routes = [ { path: ['Data/:EntityID/:Date','Settings/:EntityID/:Date',...], component: MyFormComponent,children:[ { path: '', loadChildren: () => import('../data-entry/data-entry.module').then(m => m.DataEntryModule) } ], } ]; export const routing = RouterModule.forChild(routes);
Please suggest to me possible ways.
Thanks.
Take a look to the Route interface:
interface Route { path?: string pathMatch?: string matcher?: UrlMatcher component?: Type<any> redirectTo?: string outlet?: string canActivate?: any[] canActivateChild?: any[] canDeactivate?: any[] canLoad?: any[] data?: Data resolve?: ResolveData children?: Routes loadChildren?: LoadChildren runGuardsAndResolvers?: RunGuardsAndResolvers }
The path is declared as of type string, so you cannot change that to an array of string. If you do so you will get this error:
Type 'string[]' is not assignable to type 'string'.ts(2322)
Instead, try something like:
const routes: Routes = [ { path: 'Data/:EntityID/:Date', component: MyFormComponent,`children`:[ { path: '', loadChildren: () => import('../data-entry/data-entry.module').then(m => m.DataEntryModule) } ], } , { path: 'Settings/:EntityID/:Date', redirectTo: 'Data/:EntityID/:Date', pathMatch: 'full' } ... ];
This way you will not repeat at least the component and children part.