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

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. SOLID software design principles] which states that Software entities (classes, modules, functions, etc) should be open for extensions and closed for modification, that means that a plugin is considered a piece of software that extends the functionality of the main application.

Using this approach the core application is assembled by multiple pieces that can extend and enhance it even after it has been compiled and released.

How can we achieve this in Angular?

Goal: Develop an Angular application that loads external independent modules on the fly whenever they are requested and allowing the application to be extended after the code has been compile and released without any modifications to the core application code.

Setup: At this point I assume you have NodeJS installed on your local computer. For building the core application we will use @angular/cli and the…