Angular Modular Application
A proposal for creating an Angular 8 application that can be made extensible.
Scope
This Markdown document is concerned with a technical proposal of creating an Angular 8 modular application. Modular, in this sense, means an application that can be extended with new modules past its compilation and deployment time in Angular
Requirements
The business requirement is to develop an Angular 8 web application that does not have to be changed/recompiled/rebuilt whenever a new module (e.g. new device sub-page) is developed.
Proposal
The proposal can be summarized in the following bullet-points:
-
Use localStorage to hold the JWT token using a common interceptor/service that will be used website-wide. Specifically the modules that will extend the TNG website.
-
To access any 'modular' resource, use a .json file that will generate menu points, or other access points to the modular parts. This .json file is the only file that must be changed/appended to when a new module is installed. This json file contains the following data:
[ {displayName: 'Trima', contentPath: 'module_trima' }, {displayName: 'Atreus', contentPath: 'module_atreus' }, {displayName: 'TSCD-III', contentPath: 'module_tscd3' } ]
Member Description displayName The name which is going to be displayed on the menu contentPath The path, relative to the base website path -
Each module will be a seperate Angular 8 website, using shared libraries. As stated in previous points, the JWT interceptors must be exactly the same and must use localStorage. This way, the main website and the sub modules can reuse JWT credentials.
-
Each module is loaded as an iframe inside the main content container of the TNG app. This will be a seamless experience for the user.
-
Routing must be disabled on menu elements that are generated through the special modules .json file.