how to load angular modules based on condition

Question

I have three modules in my application home, moduleA, and moduleB In my app component I'm calling an API called session and getting a response value called mode. if mode is moduleA then I have to lazy load moduleA module from the home module and if the mode is moduleB then moduleB module is load from the home module. the home module is loaded from the app module.

can anyone please suggest how to achieve this.

Answer 1

Assuming this is how your routes array built like:

const routes: Routes = [
  {
    path: 'app', component: AppComponent
  },
  {
    path: 'home', loadChildren: () => import('../features/home/home.module').then(x => x.Home)
  },
  {
    path: 'moduleA', loadChildren: () => import('../features/moduleA/moduleA.module').then(x => x.ModuleA)
  },
  {
    path: 'moduleB', loadChildren: () => import('../features/moduleB/moduleB.module').then(x => x.ModuleB)
  },
  {
    path: 'moduleC', loadChildren: () => import('../features/moduleC/moduleC.module').then(x => x.ModuleC)
  }
];

And your Mode enum:

enum Mode {
  ModuleA = "moduleA",
  ModuleB = "moduleB",
  ModuleC = "moduleC"
}

Simply make an API call your server, then navigate according to the response:

  constructor(private http: HttpClient,private router: Router) { }

 public navigate(internalRoute: string): void {
   this.http.get<Mode>('/loadModule').subscribe(x => {
       switch (x)
       {
         case Mode.ModuleA: this.router.navigateByUrl(`/${x}/${internalRoute}`); break
         case Mode.ModuleB: this.router.navigateByUrl(`/${x}/${internalRoute}`); break
         case Mode.ModuleC: this.router.navigateByUrl(`/${x}/${internalRoute}`); break
       }
     })
 }