Facebook API Question posted in
The official documentation for the Facebook APIs can be found here.

How to lazy load module after api response in angular?

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.

Tags:

2

Answers


  1. 0

    The problem is that you are calling app-user-profile and app-school-profile in your common component. If you want Angular to lazy load your module as soon as the route is called you have to use the Angular Router (https://angular.io/guide/router).

    You have to specify a where the router should create the content.
    In your common component you have to create a router redirect to either the profile or the school route:

    this.router.navigate(['either the url of profile or the url of school']);
    Login or Signup to reply.
  2. 0

    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;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search