Micro Frontends using Angular — Part 1
As on Nov 07, 2016 Thoughtworks Technology Radar Micro Frontend technology is in Adopt stage. This makes organisations to have more confidence in adopting as an enterprise architecture pattern, So I wold like to share an idea of implementing micro frontends using angular framework.
If you are new to Micro frontend concepts I recommend to read a good article Micro Frontends written by Cam Jackson
Micro Frontend Architecture:
Angular Wrapper Application
Base wrapper application can be a basic angular application with skeleton structure (Header + Sidebar + Footer) or any CMS application
Content of the application can be a micro frontend application, which will be loaded dynamically on demand.
Create an angular route with a page for every micro front end application in the wrapper application, and include the corresponding web component in the page, when ever wrapper application receives request to load this route (/app1_ref) then this page will initialise to load the micro frontend.
Micro frontends as angular web components
Angular web applications can be built separately as normal angular applications, and finally build as angular web component deploy as a single javascript file which can be consumed by any web application either it is angular wrapper application or any other CMS applications.
Base href for the web components will be the app reference url in the wrapper application (app1_ref), It will require few more config changes to the application bootstrap and route changes to fix some edge cases.
Angular framework will proved major required scripts to build the web components, but it requires to write few more scripts to combine and deploy them as a static script files.
I will be publishing the above architecture implementation samples in the upcoming blogs.
