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

Question

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();
  }
}

Deepak Jha · Accepted Answer · 2021-12-17 16:50:22Z

1

You can you try this instead, I have just checked locally it works, just think it in a different way and you have your solution :)

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',
        loadChildren: () => {
          if ((new ABService()).isAResponsible()){
            return import('./a/a.module').then((m) => m.AModule)
          } else {
            return import('./b/b.module').then((m) => m.BModule)
          }
        },
      },
    ]),
  ],
  providers: [AorBActivateGuard, ABService],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

edited Dec 17, 2021 at 16:50

answered Dec 17, 2021 at 16:39

Deepak Jha

1,61913 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Szymon Over a year ago

Thanks for the answer! I think my scenario in the question was a bit oversimplified since ABService may have several dependencies we don't want to manage. I have updated the question asking for DI. Maybe we can tweak this solution to make Angular inject ABService? I only know DI on the class level.

Deepak Jha Over a year ago

Your service is also a class, you can easily create an instance of it and then call its specific methods, may be you can check how angular create an instance of any service and use a same mechanism in the ngmodule? No sure but this is just a thought

Szymon · Accepted Answer · 2021-12-20 21:23:49Z

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.

Collectives™ on Stack Overflow

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

app.module.ts

ab.service.ts

aorb-activate.guard.ts

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

app.module.ts

ab.service.ts

aorb-activate.guard.ts

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related