Angular RouteReuseStrategy with LazyLoadedModule. After routing to another module, MainLayout doesn't disappear and [routerLinks] don't work.
app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouteReuseStrategy, RouterModule, Routes } from '@angular/router';
import { MainLayoutComponent } from './layout/main-layout/main-layout.component';
import { AngularFireAuthGuard, hasCustomClaim, redirectUnauthorizedTo, redirectLoggedInTo } from '@angular/fire/compat/auth-guard';
import { MainLayoutResolver } from './layout/main-layout/main-layout.resolver';
import { ProjectReuseStrategy } from './core/strategies/project-reuse-strategy';
import { AppComponent } from './app.component';
const redirectLoggedInToProject = () => redirectLoggedInTo(['project']);
const redirectUnauthorizedToAuth = () => redirectUnauthorizedTo(['auth']);
const routes: Routes = [
{ path: '', redirectTo: 'project', pathMatch: 'full' },
{ path: 'auth', component: AppComponent, canActivate: [AngularFireAuthGuard], data: { authGuardPipe: redirectLoggedInToProject }, loadChildren: () => import('./pages/auth/auth.module').then(m => m.AuthModule) },
{ path: 'project', component: MainLayoutComponent, resolve: [MainLayoutResolver], runGuardsAndResolvers: 'always', canActivate: [AngularFireAuthGuard], data: { authGuardPipe: redirectUnauthorizedToAuth }, loadChildren: () => import('./pages/project/project.module').then(m => m.ProjectModule) },
];
@NgModule({
imports: [RouterModule.forRoot(routes, { onSameUrlNavigation: 'reload' })],
providers: [{
provide: RouteReuseStrategy,
useClass: ProjectReuseStrategy
}],
exports: [RouterModule]
})
export class AppRoutingModule { }
project-reuse-strategy.ts
import { ActivatedRouteSnapshot, DetachedRouteHandle, RouteReuseStrategy } from "@angular/router";
import { ProjectComponentComponent } from "src/app/pages/project/project-component/project-component.component";
export class ProjectReuseStrategy implements RouteReuseStrategy {
public shouldDetach(route: ActivatedRouteSnapshot): boolean { return false; }
public store(route: ActivatedRouteSnapshot, detachedTree: DetachedRouteHandle): void {}
public shouldAttach(route: ActivatedRouteSnapshot): boolean { return false; }
public retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null { return null; }
public shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
return (curr.component !== ProjectComponentComponent) || future.data["reuse"];
}
}