I am building an Angular parent project app that defines a configurable layout and imports components from other applications to use that layout. The layout has a left side panel, center content area, right side panel, and a footer.
In addition, each app will be able to stand alone.
Each imported app will have its own customized components for those four sections. I was thinking that the components would be imported into the parent apps and be swapped out in the main layout's router outlets.
Four router outlets seems like a lot to have on one page. However, I would like to define a shared layout as most of these pages will be structured the same and I don't want to update each app if a small global change comes down. Is having four router outlets bad practice and would there be a best practice way to handle these?
Edit
I know how to create multiple router outlets. My question is about best practices when trying to merge 5 Angular apps into one with configurable layout. Also I want to keep the source code separate.