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.

Add Comment
1 Answer(s)

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.

Answered on July 16, 2020.
Add Comment

Your Answer

By posting your answer, you agree to the privacy policy and terms of service.