Making angular configuration easier to maintain

[bgotink]

The company I work at uses angular extensively. Angular projects are configured in a JSON file, which can become quite unwieldy for monorepositories. One of our repos contains > 100 projects, and while we have tried to limit the configuration per project by replacing many of the tools Angular provides with our own variants that require less config, we still end up with 4,000 lines of JSON configuration.

We've been experimenting for a while with how to make this file more maintainable, and KDL is allowing us to finally make some progress. An alternative implementation of the @angular/cli package can consume KDL configuration directly, but it also supports syncing configuration from KDL to JSON and back so we can continue using Angular unmodified.

Example KDL file:

version 0 // experimental

project "test" root="packages/test" {
  target "build" builder="@angular-devkit/build-angular:browser" {
    options {
      index "packages/test/src/index.html"
      main "packages/test/src/main.ts"
      // ...
    }
  }
}

in JSON:

{
  "version": 1,
  "projects": {
    "test": {
      "root": "test",
      "targets": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "index": "packages/test/src/index.html",
            "main": "packages/test/src/main.ts",
            // ...
          }
        }
      }
    }
  }
}

One of the big improvements that KDL gives us is the type/tag, which allows us to convey metadata as well as regular data. Angular expects all paths to be passed relative to the configuration file, so suppose we have two packages "actions" and "assets" we have to configure

project "actions" root="packages/actions" {
  target "build" builder="@internal/angular:build" {
    options {
      entryPoint "packages/actions/package.json"
      tsConfig "tsconfig.compile.json"
    }
  }
}

project "assets" root="packages/assets" {
  target "build" builder="@internal/angular:build" {
    options {
      entryPoint "packages/assets/package.json"
      tsConfig "tsconfig.compile.json"
    }
  }
}

By introducing a (project-relative) tag we can align these configurations:

project "actions" root="packages/actions" {
  target "build" builder="@internal/angular:build" {
    options {
      entryPoint (project-relative)"package.json"
      tsConfig "tsconfig.compile.json"
    }
  }
}

project "assets" root="packages/assets" {
  target "build" builder="@internal/angular:build" {
    options {
      entryPoint (project-relative)"package.json"
      tsConfig "tsconfig.compile.json"
    }
  }
}

And that quickly lead to adding support for inheritance

(abstract)project "parent" {
  target "build" builder="@internal/angular:build" {
    options {
      entryPoint (project-relative)"package.json"
      tsConfig "tsconfig.compile.json"
    }
  }
}

project "actions" extends="parent" root="packages/actions"

project "assets" extends="parent" root="packages/assets"

// This project defines a different tsConfig
project "avatars" extends="parent" root="packages/avatars" {
  target "build" {
    options {
      tsConfig "packages/avatars/tsconfig.compile.json"
    }
  }
}

Using KDL we are able to improve the configurations in ways that simply were not possible with JSON:

• You can see at a glance that projects are configured identically, and can easily spot deviations
• The configuration has become a lot shorter, reducing from 4,000 lines without any empty lines to only 800 lines, 200 of which are empty
• The configuration is nested a lot less deeply, reducing the amount of configuration mistakes due to adding properties at the wrong level

We gain these improvements without losing any functionality, including the ability of the Angular CLI to modify the configuration programmatically via so-called "schematics".

[zkat]

This is so cool! Have you published your Angular CLI fork anywhere?

Thanks so much for sharing!

[bgotink]

Yeah, I have! It's a personal side project I've enjoyed building for the past year and a half

https://github.com/snuggery/snuggery/tree/HEAD/packages/snuggery#snuggery