Upgrading Angular 9 to 16

Question

I want to update my angular project to latest version previous packages:

   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

    Angular CLI: 9.1.15
    Node: 16.14.2
    OS: linux x64       
    Angular: 9.1.13
    ... animations, common, compiler, compiler-cli, core, forms
    ... language-service, platform-browser, platform-browser-dynamic
    ... router
    Ivy Workspace: Yes
    
    Package                           Version
    -----------------------------------------------------------
    @angular-devkit/architect         0.901.15
    @angular-devkit/build-angular     0.901.15
    @angular-devkit/build-optimizer   0.901.15
    @angular-devkit/build-webpack     0.901.15
    @angular-devkit/core              9.1.15
    @angular-devkit/schematics        9.1.15
    @angular/cdk                      9.2.4
    @angular/cli                      9.1.15
    @angular/flex-layout              9.0.0-beta.31
    @angular/material                 9.2.4
    @ngtools/webpack                  9.1.15
    @schematics/angular               9.1.15
    @schematics/update                0.901.15
    rxjs                              6.5.5
    typescript                        3.8.3
    webpack                           4.46.0

And current after updating if I run ng version:

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

    Angular CLI: 16.2.0
    Node: 16.14.2
    Package Manager: npm 9.8.1
    OS: linux x64
    
    Angular: 16.2.2
    ... animations, common, compiler, compiler-cli, core, forms
    ... language-service, platform-browser, platform-browser-dynamic
    ... router
    
    Package                         Version
    ---------------------------------------------------------
    @angular-devkit/architect       0.1602.0
    @angular-devkit/build-angular   16.2.0
    @angular-devkit/core            16.2.0
    @angular-devkit/schematics      16.2.0
    @angular/cdk                    16.2.1
    @angular/cli                    16.2.0
    @angular/flex-layout            15.0.0-beta.42
    @angular/material               16.2.1
    @schematics/angular             16.2.0
    rxjs                            7.8.1
    typescript                      5.2.2
    webpack                         5.88.2
    zone.js                         0.13.1

I am getting error as:

    Initial Chunk Files | Names         |  Raw Size | Estimated Transfer Size
    styles.js           | styles        | 135.03 kB |                31.17 kB
    main.js             | main          | 126.03 kB |                30.64 kB
    polyfills.js        | polyfills     | 126.03 kB |                30.65 kB
    runtime.js          | runtime       |   1.23 kB |               677 bytes
    
                        | Initial Total | 388.32 kB |                93.12 kB

Build at: 2023-08-29T09:14:46.839Z - Hash: 4e606b2f55c028db - Time: 585ms

./src/main.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Emit attempted before Angular Webpack plugin initialization.

./src/polyfills.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Emit attempted before Angular Webpack plugin initialization.

./src/styles.css - Error: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
Error: Can't resolve '~ng-pick-datetime-ex/assets/style/picker.min.css' in '/ngularsrv/src'

./src/styles.css?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
Error: Can't resolve '~ng-pick-datetime-ex/assets/style/picker.min.css' in 'angularsrv/src'

Error: Failed to initialize Angular compilation - The Angular Compiler requires TypeScript >=4.9.3 and <5.2.0 but 5.2.2 was found instead.

Answer 1

How did you go about the upgrade? Did you go straight from 9 to 16 by manually updating packages or did you follow the Angular update guide and go one version at a time using the ng update commands?

If you did it by the first method, revert your changes (assuming you use version control) and then follow through with the second, and update one major version at a time using their upgrade guide.

If you updated properly, then I'd like to think you won't have gotten the error you are currently experiencing, which is an over-update of the typescript version.

The error message is quite clear. You are currently attempting to use TypeScript 5.2.2, whilst that is outside of Angular's currently accepted version range.

Angular will only go up to 5.2.0 - in fact, it says <5.2.0, so presumably 5.1.6 which looks to be the latest 5.1.x version on npm.

If it's the case you did it manually, good luck. It could be worse; it could be a v8 upgrade. However, 9 is when they switched to the Ivy engine so you avoid that complexity at least...