Add variable prefix to angular routing not working

Viewed 121

I added prefix using providers in my app-routing.module.ts. This prefix is a variable string value

app-routing.module.ts.

const routes: Routes = [
  { path: '404',
    component: NotFoundComponent
  },
  {
    path: '',
    loadChildren: () => PosClientModule,
    canActivate: [AuthGuard],
    data: {acl: 'pos:view'}
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes,{ onSameUrlNavigation: "ignore" })],
  exports: [RouterModule],
  providers: [{ provide: APP_BASE_HREF, useValue: `${version ? '/' + version : ''}/pos-clients` }]
})
export class AppRoutingModule {}

pos-client-routing.module.ts

const routes: Routes = [
  {
    path: 'open',
    component: OpeningComponent
  },
  {
    path: 'close',
    component: CloseComponent
  },
  {
    path: 'quotes',
    loadChildren: () => QuotesModule,
    canActivate: [AuthGuard],
    data: {acl: 'pos:view'},
  },
  {
    path: 'payment',
    loadChildren: () => PaymentModule,
    canActivate: [AuthGuard],
    data: {acl: 'pos:view'}
  },
  {
    path: '',
    component: ListComponent
  }
];

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

But when try redirect a quote path using this.route.navigate(['quotes']) the app doesn't recognize the url, I have this error

"instrument.js:109 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'unstable/pos-clients/quotes'"

Screenshot

1 Answers
const routes: Routes = [
      {
        path: 'quotes',
        loadChildren: () => 
         import('path of the module example./quotes/quotes.module').then(m => m.QuotesModule),
        canActivate: [AuthGuard],
        data: {acl: 'pos:view'},
      }
    ];
Related