{"id":19448169,"url":"https://github.com/gioragutt/ngx-plugin-modules","last_synced_at":"2025-04-25T02:30:51.976Z","repository":{"id":101294694,"uuid":"394063517","full_name":"gioragutt/ngx-plugin-modules","owner":"gioragutt","description":"An angular library for creating the perfect plugin-based architectures 🚀","archived":false,"fork":false,"pushed_at":"2021-11-13T16:03:13.000Z","size":1848,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-03T15:04:25.355Z","etag":null,"topics":["angular","angular-lazy-loading","angular-library","architecture","plugin-architecture","plugins"],"latest_commit_sha":null,"homepage":"https://ngx-plugin-modules-demo.netlify.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gioragutt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-08-08T20:25:13.000Z","updated_at":"2023-08-22T20:41:01.000Z","dependencies_parsed_at":null,"dependency_job_id":"d5d96f5e-bee0-4ee3-8af9-017e87953244","html_url":"https://github.com/gioragutt/ngx-plugin-modules","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gioragutt%2Fngx-plugin-modules","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gioragutt%2Fngx-plugin-modules/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gioragutt%2Fngx-plugin-modules/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gioragutt%2Fngx-plugin-modules/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gioragutt","download_url":"https://codeload.github.com/gioragutt/ngx-plugin-modules/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250741890,"owners_count":21479688,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-lazy-loading","angular-library","architecture","plugin-architecture","plugins"],"created_at":"2024-11-10T16:24:44.504Z","updated_at":"2025-04-25T02:30:51.969Z","avatar_url":"https://github.com/gioragutt.png","language":"TypeScript","readme":"# ngx-plugin-modules\n\n[![Netlify Status](https://api.netlify.com/api/v1/badges/5ae923cb-3ac2-4c31-9c63-9e5274135f10/deploy-status)](https://app.netlify.com/sites/ngx-plugin-modules/deploys)\n\nDocs: https://ngx-plugin-modules.netlify.app/\n\n## TODO - REWRITE README\n\n## Purpose\n\nThe purpose of this repository is to present a POC of a plugin system, and provide a way for these modules to expose API in a unified way.\nPluginModules should be lazy-loadable. When lazy-loaded, they should be conditionally loaded (like `canLoad` with lazy loaded routes).\n\n## Why not use the routing mechanism?\n\nThis is a POC which will hopefully, after refactoring and improving, be used in a certain app.  \nThis app does not rely on routing, and basically has two routes: /login and /app.  \nThe /app contains a big application, with a map, and a lot of map elements and floating forms.  \nUnder certain circumstances, we don't want to load all feature modules -\n\n- Different environments\n- A/B Testing\n- Etc\n\nAnd so, I want to provide a way for modules to expose some api, that will be available to the app, if and once loaded.\n\n## Structure\n\nThe main library is in `/projects/plugin-modules`.  \nIt contains the entire plugin modules API, and exposes services which are needed to interact with, an plug into, the plugin module system.\n\nThe example plugin system is in `/projects/forms-registry`.  \nThe purpose of the library is to save and expose a registry of components with certain attributes (e.g: each component has a category, code, etc.).\n\nEach feature module can expose such components by using the `forms-registry` library.\n\n## The Example Application\n\nThe app component shows a simple menu with all the components from the registry.\nClicking on a component name loads the component below the menu.\n\n## Plugin System\n\nEach plugin system can expose instances of the [PluginProcessor](projects/plugin-modules/src/lib/interfaces.ts#18) interface.\n\n```typescript\n// From library\nexport interface PluginProcessor {\n  process(moduleRef: NgModuleRef\u003cany\u003e): void | Promise\u003cvoid\u003e | Observable\u003cvoid\u003e;\n}\n\n// Userland\nexport class MyProcessor implements PluginProcessor { ... }\n\nNgModule({\n  providers: [\n    providePluginProcessor(MyProcessor),\n  ],\n})\nclass MyPluginSystemModule { ... }\n```\n\nPlugin systems can save whatever data they want on modules via providers.\n\nWhen a feature module is loaded and boostrapped, it is ran through the `PluginProcessorsService` which saves all `PluginProcessors` and activates them.\n\nWhen the plugin system processor is activated, this is where you can collect the data saved on the module, and act accordingly.\n\n## The Example Plugin System: [Forms Registry](/projects/forms-registry)\n\nThe library exposes the `FormsRegistryService` which is the main public API for the plugin system:\n\n```typescript\n@Injectable()\nexport class FormsRegistry {\n  formEntries$(): Observable\u003cFormEntry[]\u003e;\n\n  add\u003cT = any\u003e(formEntry: FormEntry\u003cT\u003e, componentFactory: ComponentFactory\u003cT\u003e): void;\n\n  resolveComponentFactory\u003cT\u003e(component: Type\u003cT\u003e): ComponentFactory\u003cT\u003e | null;\n}\n```\n\nThe plugin system registers the `PluginProcessor` via a `forRoot` import:\n\n```typescript\n@NgModule({\n  imports: [\n    PluginsModule.forRoot([\n      {\n        loadChildren: () =\u003e import('./feature1/feature1.module').then(m =\u003e m.Feature1Module),\n        name: 'feature1', // name provided for diagnostics\n      },\n    ]),\n    FormsRegistryModule.forRoot(),\n  ],\n})\nexport class AppModule {}\n```\n\nFeature Modules expose forms to the registry via a `forFeature` import:\n\n```typescript\n@NgModule({\n  declarations: [Feature1FormComponent],\n  imports: [\n    CommonModule,\n    FormsRegistryModule.forFeature([\n      {\n        category: 'Category 1',\n        component: Feature1FormComponent,\n        name: 'Feature1FormComponent',\n      },\n    ]), // expose api\n    PluginsModule.forFeature(), // register as module that exposes api via plugins\n  ],\n})\nexport class Feature1Module {}\n```\n\nWhen the module is loaded, the [FormsRegistryProcessor](projects/forms-registry/src/lib/forms-registry-processor.service.ts) collects the forms provided in the feature module, and loads them into the registry with `FormRegistryService#add`.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgioragutt%2Fngx-plugin-modules","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgioragutt%2Fngx-plugin-modules","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgioragutt%2Fngx-plugin-modules/lists"}