Angular2: Lazy Loading without Routing and Dynamic Loading

Question

I am using mgechev's angular2 seed for my project. I am working on Angular2 for last 6 months (following the world with all the RCs to Final release). I am stuck with a requirement my client has. I wish you guys could help.

Here is the problem. Base on user role:

ROLE_ADMIN

ROLE_REVIEWER

Web app should be able to load specific modules and display. Say,

• if user role is ROLE_ADMIN then load angular2 modules Module1 & Module2
• if user role is ROLE_REVIEWER then load angular2 modules Module1 only.

When I say load, it means it must fetch the module files (everything that is bundled with the module) from the server, inject into Angular2 app and display that module.

So, if the user role is ROLE_REVIEWER I shall be able to see only Module1 that means Module2 should not be even fetched from the server.

EDIT Here is difficult part, url is not changed while doing it. Consider this module as widgets which loads on your dashboard /dashboard. Thus no url change is expected while loading these modules.

Hope my question is explanatory enough. Please suggestion what all I should do or research or study to achieve this.

My best guess, I have to do the following:

• Conditional lazy loading (without routing) & then,
• Dynamic Loading

But I do not know how.

Answer 1

You need to use routing and lazy loading. The strategy I use is to configure dynamically the Router based on the role. I hope this helps

AFTER READING YOUR EDIT

After reading your edit, my understanding is that with the word 'module' you identify a series of widgets that are displyed or not depending on the role. In such case you do not need routing and lazy loading. It is just some conditional logic that you can code in the template of you 'dashboard' Component using *ngIf.

I suggest though not to use the word 'module' in this sense. Module is either used in the EC6 sense or in the Angular2 sense. In the first case it is related to the 'import'/'export' concept. In the second case it is related to lazy loading and routing.

I hope this helps

Answer 2

1. Have ROLE as global variable
2. in lazy loading have conditional resolve

{ path: "dashboard", loadChildren: () => new Promise(function (resolve) { (require as any).ensure([], function (require: any) { if (ROLE === 'admin') resolve(require('./admin.module')['AdminModule']); if (ROLE === 'reviewer') resolve(require('./reviewer.module')['ReviewerModule']); resolve(require('./user.module')['UserModule']); //default module }); }) }

3. Import module1 and module2 to ADMIN module and Import module1 to ReviewerModule

Answer 3

In this scenario where routing has not to take part in lazy loading module you should go with dynamic component to achieve this make your components as entry components and based on role resolve and display those components. https://angular.io/guide/dynamic-component-loader