Implementing a plugin architecture / plugin system / pluggable framework in Angular 2, 4, 5, 6

by

Update

For Angular 11 I strongly recommend you to take a look at implementation with Webpack 5 Module Federation

🎉 https://github.com/alexzuza/angular-plugin-architecture-with-module-federation

Previos version

🛠️ Github demo angular-plugin-architecture

Maybe Ivy can change something but for the time being I use the solution that uses Angular CLI Custom Builder and meets the following requirements:

  • AOT
  • avoid duplicate code(packages like @angular/core{common,forms,router},rxjs,tslib)
  • use shared library in all plugins but DO NOT SHIP generated factories from that shared library in each plugin but rather reuse library code and factories
  • the same level of optimization that Angular CLI gives us
  • for importing the external modules we just need to know only one thing: their bundle file path
  • our code should recognize module and place plugin into the page
  • support server-side rendering
  • load module only when needed

The usage is simple as:

ng build --project plugins --prod --modulePath=./plugin1/plugin1.module#Plugin1Module 
         --pluginName=plugin1 --sharedLibs=shared --outputPath=./src/assets/plugins

More on this in my article:

More Related Contents:

  1. angular-cli server – how to proxy API requests to another server?
  2. How to upgrade Angular CLI to the latest version
  3. How to bundle an Angular app for production
  4. Angular CLI Error: The serve command requires to be run in an Angular project, but a project definition could not be found
  5. Angular CLI SASS options
  6. PowerShell script add ‘–prod’ argument to build Angular CLI project
  7. How do I support Internet Explorer in an Angular 8 application?
  8. how to format date in Component of angular 5
  9. Angular-CLI proxy to backend doesn’t work
  10. How to decrease prod bundle size?
  11. angular-cli where is webpack.config.js file – new angular6 does not support ng eject
  12. What’s the difference between –base-href and –deploy-url parameters of angular-cli tool
  13. Dynamically load HTML template in angular2
  14. ctorParameters.map is not a function in angular2-mdl
  15. How to set environment via `ng serve` in Angular 6
  16. How to undo Angular 2 Cli ng-eject?
  17. Angular 6 – Could not find module “@angular-devkit/build-angular”
  18. Cannot find name ‘require’ after upgrading to Angular4
  19. Include assets when building angular library
  20. When to use ‘npm start’ and when to use ‘ng serve’?
  21. How to uninstall/upgrade Angular CLI?
  22. How to get rid of the warning .ts file is part of the TypeScript compilation but it’s unused
  23. Avoiding relative paths in Angular CLI
  24. How to execute only one test spec with angular-cli
  25. Angular 8 ng-build throwing MIME error with cordova
  26. Angular4 APP_INITIALIZER won’t delay initialization
  27. Using Angular CLI and unable to use relative image paths in CSS files
  28. Need BrowserAnimationsModule in Angular but gives error in Universal
  29. Angular5: Deploying Angular application to multiple clients
  30. How to generate components in a specific folder with Angular CLI?

Leave a Comment