DEV Community

Arboricum
Arboricum

Posted on

Proposal for a framework.json file in Angular applications

Proposal for a framework.json file in Angular applications

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"]
                }
            }
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

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]

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay