Proposal for a framework.json file in Angular applications

Arboricum — Sun, 14 May 2023 18:06:25 +0000

It is really hard sometime to figure out all the relationships between angular components, expecially when they become many.
You'd want to know with a first glance who's child of who, or parent of who, or where a component is being used.
Maybe you'd wish to know which service or directive is being shared.
I found nothing on the web helping with this problem.
So I figured out a framework file where the app framework is actually displayed.
This will be a JSON file, with the following features:

Component: camel case string -> components' class name -> it's an object where the properties are:
- @string (see below), in the following order: services (@Ser), directives (@Dir), models (@Model), modules (@/Mod), @router-outlet;
- other components;
- the object will be an empty one if there are no children or @string.
@string properties key-value ->
- @Ser is an array of services, elements are the services' class names (camel case);
- @Dir is an array of directives, elements are the directives' class names (camel case);
- @Model is an array of models, elements are the models' class names (camel case);
- @/Mod is an array of modules, elements are the modules' selector names (exact match);
- @router-outlet, is an object where the properties are components
same indentation -> siblings
different indentation -> lower is child of higher parent (or is displayed in router-outlet)

This is an instance of an example app:

{
    "AppComponent": {
        "HeaderComponent": {},
        "@router-outlet": {
            "RecipeComponent": {
                "@Ser": ["RecipeService"],
                "RecipeListComponent": {
                    "@Ser": ["RecipeService"],
                    "@Model": ["Recipe"],
                    "RecipeItemComponent": {
                        "@Model": ["Recipe"]
                    }
                },
                "@router-outlet": {
                    "RecipeStartComponent": {},
                    "RecipeEditComponent": {
                        "@Ser": ["RecipeService"]
                    },
                    "RecipeDetailComponent": {
                        "@Ser": ["RecipeService"],
                        "@Dir": ["DropdownDirective"],
                        "@Model": ["Recipe"]
                    }
                }
            },
            "ShoppingListComponent": {
                "@Ser": ["ShoppingListService"],
                "@Model": ["Ingredient"],
                "ShoppingEditComponent": {
                    "@Ser": ["ShoppingListService"],
                    "@Model": ["Ingredient"]
                }
            }
        }
    }
}

It could be a best practice to provide the app with such a file, which I would nest inside the app folder.
Suggestions and comments are welcome.
GitHub: [https://github.com/Arboricum/Improvements-for-Angular]

DEV Community: Arboricum

Proposal for a framework.json file in Angular applications