0

I have angular application divided into various modules on the basis of user type. Like AdminModule, CustomerModule, VendorMoudle etc. For each modules I've a separate respective shared module, having all the reusable items (components, pipes, directive etc). Like AdminSharedModule, CustomerSharedModule and VendorSharedModule.

Along with each shared modules I've various featured modules inside each user level module which imports the respective user's shared module. For example, all featured modules of AdminModule will import AdminShared module. Similarly, all featured modules of Customer will import CustomerSharedModule.

Now, I've a situation that there are some featured modules that belong to more than one user's module. Suppose, I've a featured module called CommonFeatureModule. Now, I can create this module anywhere in the application & can call it lazily through routing in any of the module.

Now, here is the problem. As I explained, inside each featured module, I've imported the related User's Shared module. But for CommonFeatureModule I've to conditionally import shared modules. Like if the CommonFeatureModule is loaded through AdminModule then the CommonFeatureModule should import AdminSharedModule. But if the CommonFeatureModule is loaded in CustomerModule then the CommonFeatureModule should import CustomerSharedModule.

I've tried creating a module called SharedModule & inside this module I've used the static method forRoot to conditionally load the respective user's shared module. But this solution didn't work. Her is the code for my SharedModule:

@NgModule({
    declarations: [SharedComponent],
    imports: [],
    exports: []
})
export class SharedComponent{
    static forRoot(user: UserService): ModuleWithProviders<SharedModule> {
        const data = {
            ngModule: SharedModule,
            imports: [
                user.isAdminUser() ? AdminSharedModule : CustomerSharedModule
            ],
            exports: [
                user.isAdminUser ? AdminSharedModule : CustomerSharedModule
            ]
        };

        return data;
    }
}

Khurram Ilyas
  • 117
  • 3
  • 19
  • forRoot is not made for this purpose. https://angular.io/guide/singleton-services could you share more infos about your application structure? How do you use this modules? – Mehyar Sawas Oct 31 '22 at 08:11
  • I don't know what exactly you want to know. I've already explained the whole application structure. You can consider it the way as I've a module and instead of a static object, I want to pass a dynamic object to the NgModule decorator of that module. In other words, instead of a predefined object, I want to build object on the basis of certain conditions. So, I want to know, is there anyway we can create the input object of NgModule decorator on the basis of certain conditions. – Khurram Ilyas Oct 31 '22 at 11:57
  • As far as I know dynamic rendering is the most fit option for your application structure. Even with your detailed exmplaination, I am still missing the full picture of your code. It would be best if you could share the code of all that involved parts of your application to get a better answer. The best is to make a tiny stackblitz example of your app. – Mehyar Sawas Oct 31 '22 at 13:33

0 Answers0