paucls / Angular Pluggable Architecture
Licence: mit
This is an example of an Angular application that allows to dynamically plug functionality
Stars: ✭ 24
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Angular Pluggable Architecture
Codestar Framework
A Simple and Lightweight WordPress Option Framework for Themes and Plugins
Stars: ✭ 147 (+512.5%)
Mutual labels: plugins, widgets
mightyscape-1.X
A maintained extension collection for Inkscape 1.0+, working on Windows and Linux
Stars: ✭ 23 (-4.17%)
Mutual labels: extensions, plugins
Browser Base
Modern and feature-rich web browser base based on Electron
Stars: ✭ 2,417 (+9970.83%)
Mutual labels: plugins, extensions
Flutter Ui Nice
More than 130+ pages in this beautiful app and more than 45 developers has contributed to it.
Stars: ✭ 3,092 (+12783.33%)
Mutual labels: plugins, widgets
Angular Cli Ghpages
🚀 Deploy your 🅰️Angular app to GitHub pages directly from the Angular CLI! Available on NPM.
Stars: ✭ 713 (+2870.83%)
Mutual labels: angular-cli
Useful Softwares Tools List
List of useful Softwares, Tools, Plugins, Utilities (Online/Offline)
Stars: ✭ 7 (-70.83%)
Mutual labels: plugins
Rxjavaextensions
RxJava 2.x & 3.x extra sources, operators and components and ports of many 1.x companion libraries.
Stars: ✭ 662 (+2658.33%)
Mutual labels: extensions
Cep Resources
Tools and documentation for building Creative Cloud app extensions with CEP
Stars: ✭ 916 (+3716.67%)
Mutual labels: extensions
Angular Cli Lazy
Example of use SystemJsNgModuleLoader.load in angular-cli project
Stars: ✭ 18 (-25%)
Mutual labels: angular-cli
Play Authenticate
An authentication plugin for Play Framework 2.x (Java)
Stars: ✭ 813 (+3287.5%)
Mutual labels: plugins
Vscode Create Tests
A vscode extension to quickly create test files.
Stars: ✭ 16 (-33.33%)
Mutual labels: extensions
Vim Quickui
The missing UI extensions for Vim 8.2 (and NeoVim 0.4) !! 😎
Stars: ✭ 714 (+2875%)
Mutual labels: widgets
Universal
Seed project for Angular Universal apps featuring Server-Side Rendering (SSR), Webpack, CLI scaffolding, dev/prod modes, AoT compilation, HMR, SCSS compilation, lazy loading, config, cache, i18n, SEO, and TSLint/codelyzer
Stars: ✭ 669 (+2687.5%)
Mutual labels: angular-cli
Scala Steward
🤖 A bot that helps you keep your Scala projects up-to-date
Stars: ✭ 812 (+3283.33%)
Mutual labels: plugins
angular-pluggable-architecture
This is the code example for my article Angular pluggable architecture?, an Angular application that allows to dynamically plug functionality.
The application is a simple Dashboard with Widgets that are loaded at runtime from external sources.
This repo contains:
- dahboard - An Angular CLI project that provides a widgets dashboard. To keep it simple all the logic in charge of dinamically fetching and compilings widgets is in the
dashboard.component.ts
. - widgets-repo - External repository from where the widgets configuration and bundles are served. (for this demo it is only static content served via http-server).
- wiget-hello - An example of widget component containing nested sub-components.
- wiget-quotes - An example of widget component that uses a service to retrieve quotes from an API.
- widget-todays-date - Another widget component.
Running the demo
- Build all widgets
./build_widgets.sh
- Start the widgets-repo
cd widgets-repo && yarn start
- Start dashboard app
cd dashboard && yarn start
To do
- Support production build with AOT.
- Widgets with separated template and css files should be compiled and inlined during the bundle build. Configure rollup to do that or use ng-packagr.
References
- Developing with Angular, Denys Vuika. https://github.com/DenisVuyka/developing-with-angular/tree/master/angular/plugins
- As busy as a bee — lazy loading in the Angular CLI, David Herges https://blog.angularindepth.com/as-busy-as-a-bee-lazy-loading-in-the-angular-cli-d2812141637f ... how does lazy loading in the Angular CLI work under the hood?
- How to load dynamic external components into Angular application? https://stackoverflow.com/questions/45503497/how-to-load-dynamic-external-components-into-angular-application/45506470#45506470
- Here is what you need to know about dynamic components in Angular, Maxim Koretskyi https://blog.angularindepth.com/here-is-what-you-need-to-know-about-dynamic-components-in-angular-ac1e96167f9e
- Modules are not what you think they are, Maxim Koretskyi https://youtu.be/pERhnBBae2k
- Extension mechanism demo https://github.com/maximusk/extension-mechanism-demo
- JIT Complier needed with AOT Build for Dynamic Component. https://github.com/angular/angular/issues/20875
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].