> For the complete documentation index, see [llms.txt](https://docs.gapvelocity.ai/webmap/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.gapvelocity.ai/webmap/general/frontend/documentation/winforms-angular-components/migrated-structure.md).

# 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:

```markup
<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: &#x20;

![](/files/-MG5p5OMK-ZOqCOtO3Hj)

## Files Samples

### app.module.ts

On this side is where all namespaces, that becomes modules, are imported. &#x20;

<div align="left"><img src="/files/-MG5pBruPrcgH0HNtbbE" alt=""></div>

### 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.

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

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

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