Angular: How to route different modules on the same path depending on service

Issue

Imagine a service ABService with a method isAResponsible: () => boolean and two modules: AModule and BModule.

The question is: Is it possible to switch between AModule and BModule depending on what isAResponsible returns? And how do we 'reroute' and rerender if the value of isAResponsible changes? ABService may have several dependencies to other services so it would be preferable to make use of the DI system somehow.

Example: If the route of interest is /aorb and ABService.isAResponsible returns true, than we would like to route AModule. If ABService.isAResponsible returns false however we want BModule to manage further routing. Note that everything should happen on a shared route.

I tried it with guards and canActivate/canLoad but didn't succeed:

app.module.ts

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { AorBActivateGuard } from './aorb-activate.guard';
import { ABService } from './ab.service';

@NgModule({
  imports: [
    BrowserModule,
    RouterModule.forRoot([
      {
        path: 'aorb',
        canActivate: [AorBActivateGuard],
        loadChildren: () => import('./a/a.module').then((m) => m.AModule),
      },
      {
        path: 'aorb',
        loadChildren: () => import('./b/b.module').then((m) => m.BModule),
      },
    ]),
  ],
  providers: [AorBActivateGuard, ABService],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

ab.service.ts

import { Injectable } from '@angular/core';

@Injectable()
export class ABService {
  private aIsResponsible = true;

  constructor() {}

  switch() {
    this.aIsResponsible = !this.aIsResponsible;
  }

  isAResponsible() {
    return this.aIsResponsible;
  }
}

aorb-activate.guard.ts

import { Injectable } from '@angular/core';
import {
  CanActivate,
  ActivatedRouteSnapshot,
  RouterStateSnapshot,
} from '@angular/router';
import { Observable } from 'rxjs';
import { ABService } from './ab.service';

@Injectable()
export class AorBActivateGuard implements CanActivate {
  constructor(private abService: ABService) {}

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> | Promise<boolean> | boolean {
    return this.abService.isAResponsible();
  }
}

Solution

One can inject ABService in AppModule and listen for changes from ABService. Every time a change occurs we then can reconfigure (= switch modules) the router and let it navigate the same route. In this way we always have the responsible module loaded.

[...]
@NgModule({
  imports: [
    BrowserModule,
    RouterModule.forRoot([], {
      initialNavigation: 'disabled',
    }),
  ],
  providers: [ABService, BooleanStorageService],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {
  constructor(private router: Router, private abService: ABService) {
    abService.onABChange.subscribe(this.resetRouterConfig(true).bind(this));
    this.resetRouterConfig(false)();
    this.router.initialNavigation();
  }

  reloadCurrentRoute() {
    const currentUrl = this.router.url;
    this.router.navigateByUrl('/', { skipLocationChange: true }).then(() => {
      this.router.navigate([currentUrl]);
    });
  }

  resetRouterConfig(refresh: boolean) {
    return () => {
      const constructedConfig = [
        {
          path: '',
          pathMatch: 'full',
          redirectTo: 'aorb',
        },
        {
          path: 'aorb',
          loadChildren: () => {
            if (this.abService.isAResponsible()) {
              return import('./a/a.module').then((m) => m.AModule);
            } else {
              return import('./b/b.module').then((m) => m.BModule);
            }
          },
        },
      ];

      this.router.resetConfig(constructedConfig);

      if (refresh) this.reloadCurrentRoute();
    };
  }
}

You can find a working example here.

Answered By - Szymon