Automatic Angular Updates with Renovate

We use renovate in most of our projects to automatically update dependencies to mitigate security issues in old versions and for staying up-to-date. However, some dependencies are not that easy to update, in particular in the Angular world. Angular uses schematics in its update process to automatically migrate your code base with changes from the new version. The self-hosted Renovate version has a solution for that though. In the packageRules option you can list postUpgradeTasks. An example for updating angular packages can be found in the docs

Add two properties to config.js: allowPostUpgradeCommandTemplating and allowedPostUpgradeCommands:

module.exports = {
  allowPostUpgradeCommandTemplating: true,
  allowedPostUpgradeCommands: ['^npm ci --ignore-scripts$', '^npx ng update'],
};

In the renovate.json file, define the commands and files to be included in the final commit.

The command to install dependencies (npm ci --ignore-scripts) is necessary because, by default, the installation of dependencies is skipped (see the skipInstalls global option).

{
  "packageRules": [
    {
      "matchPackageNames": ["@angular/core"],
      "postUpgradeTasks": {
        "commands": [
          "npm ci --ignore-scripts",
          "npx ng update {{{depName}}} --from={{{currentVersion}}} --to={{{newVersion}}} --migrate-only --allow-dirty --force"
        ],
        "fileFilters": ["**/**"]
      }
    }
  ]
}

With this configuration, the executable command for @angular/core looks like this:

npm ci --ignore-scripts
npx ng update @angular/core --from=10.0.0 --to=11.0.0 --migrate-only --allow-dirty --force