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"];
    }
}

0

There are 0 best solutions below