Angular Microfrontend - Route noMatch when redirect by Guard

I have an application using microfrontends with native federation and Angular v18.

One of my remotes has route guards to restrict access, but for some reason, the redirects are not working as expected.

Here is my routes of shell app:

{
path: '',
loadComponent: () => import('./layout/layout.component').then(c => c.LayoutComponent),
data: {
layout: 'empty'
},
children: [
{
path: 'sign-up',
loadChildren: () =>
loadRemoteModule(REMOTE_SIGNUP.name, REMOTE_SIGNUP.exposedArtefact)
.then(c => c.ROUTES)
}
]
},


The routes from SIGNUP application (REMOTE)

export const ROUTES: Routes = [
{
path: '',
loadComponent: () => import('./app.component').then(c => c.AppComponent), // router-outlet inside
loadChildren: () => import('./modules/signup/signup.routes').then(c => c.SIGN_UP_ROUTES)
}
];


The SIGN_UP_ROUTES routes:

export const SIGN_UP_ROUTES: Routes = [
{
path: '',
loadComponent: () => import('./templates/main-template/main-template.component').then(c => c.MainTemplateComponent),
canActivate: [(): any => {
return inject(Router).parseUrl('company')
}],
children: [
{
path: '',
redirectTo: 'company',
pathMatch: 'full',
},
{
path: 'company',
loadComponent: () => import('./steps/step-your-company/step-your-company.component').then(c => c.StepYourCompanyComponent),
loadChildren: () => import('./steps/step-your-company/your-company.routes').then(c => c.YOUR_COMPANY_ROUTES),
data: {
step: SignUpSteps.YOUR_COMPANY
}
},
{
path: 'details',
loadComponent: () => import('./steps/step-your-details/step-your-details.component').then(c => c.StepYourDetailsComponent),
data: {
step: SignUpSteps.YOUR_DETAILS
}
},
];


Here is the guard responsible for handling the redirects: (only for tests for a while)

(): any => {
return inject(Router).parseUrl('company')
}


I encountered a "noMatchError" when trying to implement redirects in my microfrontend. I attempted various route combinations like /company, /details, and without the prefix, but nothing worked. When I use the path /sign-up/company, the guard creates an infinite redirection loop.

It seems like the remote app may not recognize the /sign-up base path in the route context. However, when I try to use the full URL, including the /sign-up path, to handle the redirection, it triggers an infinite loop.

I tried setting APP_BASE_HREF in the remote SIGNUP project to '/sign-up' within the app.config in the standalone bootstrap, but it throws a "no provider for APP_BASE_HREF" error. Like that:

export const appConfig: ApplicationConfig = {
providers: [
provideZoneChangeDetection({ eventCoalescing: true }),
provideRouter(ROUTES),
provideAnimations(),
{
provide: APP_BASE_HREF,
useValue: '/sign-up'
}
]
};


Has anyone experienced this issue or knows how to resolve it? Any help would be appreciated!

Continue reading...