NgFate - A tool for deciding the fate of an Angular app

When our Angular app grows it brings a lot of modules and components to manage and keep track of. One of the problems which I personally face when I start working on any new Angular app is getting the hold on the structure of the application. It is challenging to understand a project who's who quickly and it takes a good amount of time. To address this problem once it for all, I thought why not we just create a tool that shows a hierarchy and relation between the modules and components. This tool will tell whether the component is routed or not, where it's been referred and used, how many components are there in a module etc.

For this I have taken an oath to create a tool that will put a full stop to this suffering and help me and other fellow developers to get a relief. Introducing NgFate tool, built using .NET 6 and C#, providing you bunch of options to view your project structure and hierarchy (JSON, HTML, CLI, etc.).

In this article we will go through below points to explore NgFate:

1. Download and dotnet Run
2. Run Application
3. Limitations
4. Algorithm and Data Structure
5. Future Scope

1. Download and dotnet Run

The tool is published to GitHub repository NgFate. Below shows the download and dotnet run steps:

• Download the app from the latest Releases section.
• Unzip the project in the directory of your choice.
• Open terminal.
• Go to "publish" folder in the terminal.

  • C:\Users\zshaikh>cd C:\Users\zshaikh\Downloads\publish

    Copy
• Run the app by using the executable:
  • Enter ng-fate.exe and press Enter.

  • C:\Users\zshaikh>ng-fate.exe

    Copy
• Run the app by using the dotnet command:
  • Enter dotnet ng-fate.dll and press Enter.

  • C:\Users\zshaikh>dotnet ng-fate.dll

    Copy

2. Run Application

The tool requires bunch of input from you in order to generate the report of your app.

Example:

An example of such input values are shown below:

• Project Path: C:\Zaki\Study\Angular\service-desk\service-desk-app
• Project Prefix (comma separated): app,jam,van
• Select Output Type (1 - JSON, 2 - HTML, 3 - CLI, 4 - ALL): 4
• Output Folder Path: C:\Zaki\Study\Angular\service-desk\des

Input Details:

Below gives detailing to these inputs:

• Project Path: Path to your Angular project.
• Project Prefix (comma separated): Multiple comma separated values can be provided as app prefix (e.g app,jam,van).
• Select Output Type (1 - JSON, 2 - HTML, 3 - CLI, 4 - ALL):
  • If you want a .json file as an output select first option.
  • If you want a .html file as an output select second option.
  • If you want output in the terminal it self select third option.
  • If you want all of the above select fourth option.
• Output Folder Path: Path to your directory where you want all the output files to be generated.

Below shows recording of the above performed steps:

3. Limitations

Currently the NgFate is rookie and have to evolve a lot. For starter the tool is looking for some ideal structuring of the Angular project as per the Angular official document.

Check and verify if your app is adhering to these limitations:

• NgFate doesn't support standalone components yet.
• The module and component naming must follow Angular guide.
• Each module and component files must ends with the convention *.module.ts and *.component.ts.
• Properly formatted declarations of components within @NgModule decorator (either in single line or new line).
• Properly formatted routes configurations (path and component properties).
• Prefix must be provided while providing the input to NgFate (it is case sensitive).

4. Algorithm and Data Structure

The NgFate is working on below base algorithm right now:

• get all '.module.ts' files
• get all 'declarations' array data from NgModules
• decompose fileName based on camelCasing of name
• get file path by search fileName in the directory
• read '*-routing.module.ts' file and search name of component if existed
• get the path name while searching for component in routing file
• search for 'header.component.html' file in entire project and get the .html parent files
• decompose fileName from name

To support the above algorithm below data structure is at core of the tool:

[
  // 1. get all '.module.ts' files
  {
    name: 'AppModule',
    fileName: 'app.module.ts',
    components: [
      // 2. get all 'declarations' array data from NgModules
      {
        name: 'LoginComponent',
        fileName: 'login.component.ts', // 3. decompose fileName based on camelCasing of name
        filePath: 'src/app/pages/login.component.ts', // 4. get file path by search fileName in the directory
        routed: true, // 5. read '*-routing.module.ts' file and search name of component if existed
        routePath: 'login', // 6. get the path name while searching for component in routing file
        parents: [],
      },
      {
        name: 'HeaderComponent',
        fileName: 'header.component.ts',
        filePath: 'src/app/components/header.component.ts',
        routed: false, // 5. read '*-routing.module.ts' file and search name of component if existed
        routePath: null,
        parents: [
          // 7. search for 'header.component.html' file in entire project and get the .html parent files
          {
            name: 'MainComponent',
            fileName: 'main.component.ts', // 8. decompose fileName from name
            filePath: 'src/app/components/main.component.ts', // 4. get file path by search fileName in the directory
          },
        ],
      },
    ],
  },
];

5. Future Scope

For the interstellar travel of NgFate below are some key features considered as a future scope for the tool:

• Diagrams:
  • Dependency graph in .html report.
  • Routing graph in .html report.
• Pipes and directives considerations.
• Version Support: Adhering to the latest releases of Angular.
• AI support for speeding up performance.
• Fault tolerance and better logging.