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]

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

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

Okay