如何在 angular 中使用 useFactory 根据某些条件延迟加载模块？

Question

I have an angular project with large amount of modules and components in which, I want to show module's component based on some business logic. I want using angular's powerful feature ie lazy loading which will allow me to make my application lite.

What I want to Do:

Suppose, I have one bookStore site on which lot's of readers spent time with reading online articles. I want to show different module based on reader's role . if reader's role is admin or staff then they can access all the feature and components. if reader's role is normal then they can view only some component.

For that, I make this kind of structure:

For achive this feature. we must keep our route same for both the module and for that, I have to use useFactory method of angular that will allow me to run custom function for update InjectionToken(ROUTES) which is already used by angular itself for compile and load module.

My module flow is like this:

All three modules (reader-handler, admin/reader and user/reader) are lazy loaded modules. reader-handler module's path is defined in route file but other two module's path will append in ROUTES dynamically using useFactory function.

Here is my code:

providers: [{
    provide: ROUTES,
    useFactory: decideWhichModuleToLoad,
    deps: [ReaderService],
    multi: true,
  }]

export function decideWhichModuleToLoad(readerService: ReaderService) {
   readerService.getReaderType().subscribe((result) => {
    let routes: Routes = [];
    if (result && result?.Role) {

      if (result.Role == 'admin') {
        routes = [{
          path: '',
          loadChildren: () =>
            import('../admin/read.module').then((m) => m.ReadModule)
        }]
      }
      else {
        routes = [{
          path: '',
          loadChildren: () => import('../user/read.module').then((m) => m.ReadModule)
        }]
      }
    }
    else {
      routes = [{
          path: '',
          loadChildren: () => import('../user/read.module').then((m) => m.ReadModule)
        }]
    }
    return routes;
  });
}

I wrote this code in read-handler module So. when this module load, it's useFactory will execute and update ROUTES variable which is already used by angular.

It works and load module if I return route directly without wait for condition and subscription response from service. If I run above code then My child component and module that is load dynamically will be undefined. because angular already compile ROUTES before we update it. Error is look like this:

I am following this Tutorial for dynamic Routing: How to load different module on same route And Angular say that it's angular's bug that before useFactory resolve, angular compile ROUTES injectionToken. ( Cannot read property 'loadChildren' of undefined" error )

Anyone guys know how can I resolve this error... and keep angular waiting for resolve usefactory . Any small suggestion would be helpful for me.

Answer 1

After Lot's of research and @OLO's answer, Total Solution that I applied is like this:

1. Made one handler module (ReaderHandlerModule - module that decide what should load)
2. Load this handler module on regular route array on path like: '/reader'

[ ..., {
  path: '/reader', 
  loadChildren: () =>
            import('../../../shared/reader-handler.module').then((m) => m.ReaderHandlerModule)
}, ... ]

3. Made one service that can get some data from API for check that what is the role of reader

4. Call service's function into service's constructor and store result in service's one behaviorSubject variable so that it can subscribe anywhere to get data.

ReaderHandlerModule.ts

import { NgModule } from "@angular/core";
import { Routes, ROUTES } from "@angular/router";
import { ReaderService} from "app/_services";
import { SharedModule } from "./shared.module";

export function configReaderRoutes(readerService: ReaderService) {
  let routes: Routes = [];
  if (readerService.readerRole) {
    if (readerService.readerRole == 'User') {
      routes = [{
        path: '',
        loadChildren: () =>
          import('../user/userReader.module').then(
            (m) => m.ReaderModule
          )
      }]
    } else if (readerService.readerRole == 'Admin') {
      routes = [{
        path: '',
        loadChildren: () =>
          import('../admin/adminReader.module').then(
            (m) => m.ReaderModule
          )
      }]
    }
    else {
      routes = [{
        path: '',
        loadChildren: () =>
          import('../user/userReader.module').then(
            (m) => m.ReaderModule
          )
      }]
    }
  }
  else {
    routes = [{
      path: '',
      loadChildren: () =>
          import('../user/userReader.module').then(
            (m) => m.ReaderModule
          )
    }]
  }
  return routes;
}

@NgModule({
  declarations: [],
  imports: [
    SharedModule
  ],
  providers: [{
    provide: ROUTES,
    useFactory: configReaderRoutes,
    deps: [ReaderService],
    multi: true,
  }]
})
export class ReaderHandlerModule { }

ReaderService.ts

export class ReaderService implements OnDestroy {
    public readerRole: 'User' | 'Admin' = 'User';
    private readerTypeSubject: BehaviorSubject<any>;
    public readerTypeObservable: Observable<any>;

    constructor(public router: Router) {
        this.readerTypeSubject = new BehaviorSubject<any>('User');
        this.readerTypeObservable = this.readerTypeSubject .asObservable();

        this.getReaderType().subscribe(result => {
            this.readerRole = result.readerType
        })
    }

    getReaderType() {
       return this.readerTypeSubject.asObservable();
    }

    fetchReaderType() {
        .... Fetch data from API and store in readerTypeSubject.
        // So getReaderType().subscribe() will fire and readerRole variable from this service will update.
        // FetchReaderType is called before load this handler Module (/reader). 
    }

If you want to reload handler Module to refetch and reload module based on again condition check. then use this function:

refreshRoutes() {
        const i = this.router.config[1].children.findIndex(route => route.path === 'reader');
        this.router.config[1].children.splice(i, 1);
        this.router.config[1].children.push({
            path: 'reader',
            import('../../../shared/reader-handler.module').then((m) => m.ReaderHandlerModule),
        })
    }

Answer 2

You're setting routes inside a subscribe and it's asynchronous. You can try to call getReaderType before entering in decideWhichModuleToLoad function and store it somewhere so you can use it directly from your useFactory .