title: How to lazy load module based on some condition using useFactory in angular?
body: <p>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 i.e. lazy loading which will allow me to make my application lite.</p>
  <h2>What I want to Do :</h2>
  <p>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 <code>reader's role</code>. if reader's role is admin or staff then they can access all the feature and components. if reader's role is <code>normal</code> then they can view only some component.</p>
  <p>For that, I make this kind of structure :</p>
  <p><a href="https://i.stack.imgur.com/wGMxP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wGMxP.png" alt="enter image description here" /></a></p>
  <p>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 <code>InjectionToken(ROUTES)</code> which is already used by angular itself for compile and load module.</p>
  <p>My module flow is like this :</p>
  <p><a href="https://i.stack.imgur.com/ylExr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ylExr.png" alt="enter image description here" /></a></p>
  <p>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.</p>
  <p>Here is my code :</p>
  <pre><code>providers: [{
      provide: ROUTES,
      useFactory: decideWhichModuleToLoad,
      deps: [ReaderService],
      multi: true,
    }]
  
  export function decideWhichModuleToLoad(readerService: ReaderService) {
     readerService.getReaderType().subscribe((result) =&gt; {
      let routes: Routes = [];
      if (result &amp;&amp; result?.Role) {
  
        if (result.Role == 'admin') {
          routes = [{
            path: '',
            loadChildren: () =&gt;
              import('../admin/read.module').then((m) =&gt; m.ReadModule)
          }]
        }
        else {
          routes = [{
            path: '',
            loadChildren: () =&gt; import('../user/read.module').then((m) =&gt; m.ReadModule)
          }]
        }
      }
      else {
        routes = [{
            path: '',
            loadChildren: () =&gt; import('../user/read.module').then((m) =&gt; m.ReadModule)
          }]
      }
      return routes;
    });
  }
  </code></pre>
  <p>I wrote this code in <code>read-handler</code> module So. when this module load, it's <code>useFactory</code> will execute and update <code>ROUTES</code> variable which is already used by angular.</p>
  <p>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 <code>ROUTES</code> before we update it.
  Error is look like this :</p>
  <p><a href="https://i.stack.imgur.com/dKBuC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dKBuC.png" alt="enter image description here" /></a></p>
  <p>I am following this Tutorial for dynamic Routing : <a href="https://medium.com/@german.quinteros/angular-use-the-same-route-path-for-different-modules-or-components-11db75cac455" rel="nofollow noreferrer">How to load different module on same route</a>
  And Angular say that it's angular's bug that before useFactory resolve, angular compile <code>ROUTES</code> injectionToken. (<a href="https://github.com/angular/angular/issues/22700" rel="nofollow noreferrer">Cannot read property 'loadChildren' of undefined&quot; error</a>)</p>
  <p>Anyone guys know how can I resolve this error... and keep angular waiting for resolve <code>usefactory</code>.
  Any small suggestion would be helpful for me.</p>