Automatic Angular Updates with Renovate

We utilize Renovate in the majority of our projects to automatically update dependencies. This is to mitigate security issues found in older versions and to keep the codebase current. Some dependencies, particularly in the Angular ecosystem, are not simple to update. Angular, during its update process, uses schematics for your code base's automatic migration with changes from the new version. The self-hosted Renovate version offers a solution. By listing postUpgradeTasks in the packageRules option. An example ofupdating angular packages is available in the docs

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

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

In the renovate.json file, describe the commands and files to include in the final commit.

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

1{
2  "packageRules": [
3    {
4      "matchPackageNames": ["@angular/core"],
5      "postUpgradeTasks": {
6        "commands": [
7          "npm ci --ignore-scripts",
8          "npx ng update {{{depName}}} --from={{{currentVersion}}} --to={{{newVersion}}} --migrate-only --allow-dirty --force"
9        ],
10        "fileFilters": ["**/**"]
11      }
12    }
13  ]
14}

With this configuration, the executable command for @angular/core would appear thus:

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

Stay current, stay updated!