How to lazy load module after api response in angular?

Question

I want to lazy load a module after API response

below are my routes

const routes: Routes = [
  { path: "", component: LandingComponent },
  { path: 'student', loadChildren: () => import('./student.module').then(m => m.StudentModule) },
  { path: 'school', loadChildren: () => import('./school.module').then(m => m.SchoolModule) },
  { path: "**", component: PagenotfoundComponent }
];

What I want is something like Facebook doing for profile handling for example

facebook.com/ABCD is my profile (A Different Module)

facebook.com/EFGH is my page (Another Different Module)

In angular, I want something like when I access a URL like site.com/abcd it will first check if route param abcd is a user profile or an institution page and then based on the response it will lazy load the student or school module

I have a couple of ideas for this like make a common component and then in that component make API calls and check if route param is student profile or school profile then load their components accordingly something like below

const routes: Routes = [
  { path: "", component: LandingComponent },
  { path: ':profile_token', component : CommonComponent },
  { path: "**", component: PagenotfoundComponent }
];

then in CommonComponent

<ng-container *ngIf="isProfileRoute">
         <app-user-profile></app-user-profile>
</ng-container>

<ng-container *ngIf="isSchoolRoute">
         <app-school-profile></app-school-profile>
</ng-container>

But here in the method as you can see both components are loading and I feel its not a good way to handle it so if is there any way to lazy load a whole module containing routes and components based on API call it will be really great and helpful.

Seryoga Seryoga · Accepted Answer · 2020-02-07T08:29:04

Maybe dynamic loading in the routing could help you?

app-routing.module.ts:

           {
                path: ':profile_token',
                loadChildren: async () => {
                    const service = AppInjector.get(YourService);
                    if (service.isStudent()) {
                        const a = await import('./modules/student/student.module');
                        return a['StudentModule'];
                    }
                    const b = await import('./modules/school/school.module');
                    return b['SchoolModule'];
                }
            }

And in the AppRoutingModule:

export class AppRoutingModule {
    constructor(private injector: Injector) {
        AppInjector = this.injector;
    }
}

And before the routes array:

export let AppInjector: Injector;

How to lazy load module after api response in angular?

2 Answers