How to build a plugin/extensible application architecture in Angular 5+

Paul Ionescu
Reshape Digital
Published in
5 min readAug 25, 2018

--

Photo by rawpixel on Unsplash

Have you ever wondered how to make your Angular application extensible?

Let’s say you have a base Angular application and in the future you plan to develop different features that have almost the same structure, but you don’t really want to deploy the whole application each time a new feature is ready for production, or, moreover you plan the allow 3rd party users to implement features and upload it into your app.

That kind of system can be achieve in Angular by dynamic loading of external Angular modules into a main application. I’ve read many good articles which explained more deeper this mechanism, but I couldn’t find a whole straight forward solution example that worked out for me.

Gathering all the pieces together from different informational sources I managed to obtain a solution that does the job and in which the plugin applications can use all the angular features. Also, for importing the external modules we just need to know two things about them: their bundle file path and their module name.

What is a Plugin/Pluggable Architecture?

Plugin Architecture or Extensible Application Architecture is mainly based on the Open-Closed Principle [ref…

--

--