/angular8-modular-app

A proposal for a modular app in Angular 8

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.