Update all outdated Angular packages at once

Question

I've previously used ng update --all, cause I want to update every package to the latest version, including those dependencies which do not have schematics attached to it.

The --all option is now deprecated and will not function any more. The only option is to specify each package to update and I find that tedious. Is there a way to grep the outdated package output from ng update into a single line space separated variable which can then be input to a new ng update ${packageList}?

The output from ng update is as follows:

The installed local Angular CLI version is older than the latest stable version.
Installing a temporary version to perform the update.
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Using package manager: 'npm'
Collecting installed dependencies...
Found 67 dependencies.
    We analyzed your package.json, there are some packages to update:

      Name                                     Version                  Command to update
     --------------------------------------------------------------------------------------
      @angular/cdk                             10.2.5 -> 11.0.0         ng update @angular/cdk
      @angular/cli                             10.1.7 -> 11.0.0         ng update @angular/cli
      @angular/core                            10.2.0 -> 11.0.0         ng update @angular/core
      @angular/material                        10.2.5 -> 11.0.0         ng update @angular/material
      @nrwl/angular                            10.3.1 -> 10.3.3         ng update @nrwl/angular
      @nrwl/cypress                            10.3.1 -> 10.3.3         ng update @nrwl/cypress
      @nrwl/jest                               10.3.1 -> 10.3.3         ng update @nrwl/jest
      @nrwl/storybook                          10.3.1 -> 10.3.3         ng update @nrwl/storybook
      @nrwl/workspace                          10.3.1 -> 10.3.3         ng update @nrwl/workspace

    There might be additional packages which don't provide 'ng update' capabilities that are outdated.
    You can update the addition packages by running the update command of your package manager.

I want to run a bash script which collects only the package names from the first column of this output, and feeds it back into a variable. The end result being:

> ng update ${packageList}

ng update @angular/cdk @angular/cli @angular/core @angular/material @nrwl/angular @nrwl/cypress @nrwl/jest @nrwl/storybook @nrwl/workspace --force=true

Help? Is this possible?

Answer 1

Think I got it with this one-liner:

ng update | awk -v re='@[[:alnum:]]' '$0 ~ re {printf $1 " "}' | xargs ng update --force=true && npm update

By piping the output of the first ng update run into awk, I can search for text which resembles package names and output a space-separated list of arguments which I then pipe as xargs into a second ng update command.

By running this first and npm update after, I get every single dependency with migration schematics updated firstly, then all the rest afterwards. Happy! 🙂