Implement Connectable Plugins with Angular 12

Question

I want to implement a feature for my app: I want to store some modules of the app on the backend and load them dynamically on the user's demand just before the page is loaded. For example, the user wants to use one tool package and does not want to use the second one, so load and connect the first one only. I am quite struggling with the way of implementing this. The example of Lazy Loading in Angular 2 Docs uses the routes to lazy load modules that is quite inconvenient and I do not know how to evolve it to load modules from the database. Other examples involve entry components, but they seem to be deprecated and naturally, not all my modules have components. Could anyone suggest a proper way to be able to manually load and connect modules from the backend?

For more information, I have a service that represents the tool, and this service has a property that holds the class of the component of the tool, like this:

export class CtSelectionTool implements ConnectableTool {
  .....
  plotterComponent: any = CtSelectionToolComponent;
  .....
}

after loading a page I iterates over the loaded services and dynamically creates the components of the tools in the allocated place via factories. The components are declared in the appropriate module. So I wonder whether I can load this module only when the user demands the usage of the corresponding tool.

I have 2 questions: Why do you think, that Angulars built-in lazy loading via routes is "inconvenient"? Did you consider using web components already? — Tino
I cannot understand how to use routes lazy loading in my case. I would like to have an expandable library of connectable elements, so I can load some modules by making a request to my backend server for retrieving the necessary module.ts file. — Alex Teexone
What about the 2. question. Did you consider using web-components? This seems rather approriate for your use case. — Tino
I tried to look through the web elements. They seem to be a way to use Angular Components outside the Angular as independent entities, which is not what I want. I would like to stick to the regular Angular components since I use the loaded modules in this ecosystem. — Alex Teexone

Kinglish Kinglish · Accepted Answer · 2021-06-07T07:43:55

Unless I am misunderstanding, Angular's built-in mechanism for lazy loading is quite easy to use. It's just a slight adjustment to your routing module using loadChildren.

 const routes: Routes = [
    { path: '', redirectTo: 'home', pathMatch: 'full' },
    {path: 'home',
        loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)
    //...

https://angular.io/guide/lazy-loading-ngmodules

I would suggest making different routes for different modules you want lazy loaded

Implement Connectable Plugins with Angular 12

1 Answers