Migrated Structure

Coming from a C# Winforms project, WebMAP5 adjust its structure to be implemented with all Angular needs and its proper organization of files. Setting up the front-end environment begins from understanding how the back-end is structured. A solution in a Winforms Application has a structure as the following sample:

<img src="./images/winforms.png" width="250">

On the other hand, we have Angular structure that needs modules, indexes and their files for each component. To apply this transformation WebMAP5 took Winforms namespaces as a whole module. Each level of the namespace has its own index.ts and a group of essential files for angular: html, css and the typescript file. The diagram below explains it, in this case the app.module.ts corresponds to the startup application project and the other namespaces are modules imported to it:

Files Samples

app.module.ts

On this side is where all namespaces, that becomes modules, are imported.

sks.module.ts

This sample of a module imports indexes from sks and sksfake directory. Those indexes comes with other calls until they get to the component.

<img src="./images/sksModuleTS.png">

Namespace files, usage of import/export between levels and conventions

<img src="./images/files.png">