Upgrading to Angular 22 produces many errors with npm start

[kahanu]

Which @angular/* package(s) are the source of the bug?

Don't known / other

Is this a regression?

No

Description

I upgraded the app to Angular 22.0.2 and Kendo to 21.3.0 and ever since then I have not been able to run the application. Hundreds of errors are returned mostly with the same error.

---

Cannot create property 'message' on string 'C:...\ClientApp\node_modules@angular\material\fesm2022\progress-bar.mjs: NumericLiterals must be non-negative finite numbers.

---

This error seems to occur on every Kendo component, so what I'm showing here, is just the intial snippet of the errors.

Any ideas what's going on here?

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

npm start
npm warn Unknown user config "email". This will stop working in the next major version of npm. See `npm help npmrc` for supported config options.

> client-app@0.0.0 start
> ng serve --ssl

The "@angular-devkit/build-angular:dev-server" builder is deprecated as part of Angular's Webpack support deprecation. Use "@angular/build:dev-server" instead. For more information, see https://angular.dev/tools/cli/build-system-migration.                                                                                                                                                                                                                         
Initial chunk files                | Names                  |  Raw size
styles.css                         | styles                 |   1.33 MB | 
chunk-25BVRZNK.js                  | -                      | 118.68 kB | 
polyfills.js                       | polyfills              |  94.51 kB | 
main.js                            | main                   |  93.61 kB | 
chunk-PFNKQEHO.js                  | -                      |   7.93 kB | 

                                   | Initial total          |   1.64 MB

Lazy chunk files                   | Names                  |  Raw size
admin.module-CBEE7UEY.js           | admin-module           | 332.60 kB | 
email-templates.module-DOFO2MJU.js | email-templates-module |  69.14 kB | 
chunk-2W5LMI22.js                  | -                      |  15.88 kB | 
chunk-P3RNTMTN.js                  | -                      |   5.59 kB | 
content.module-HZDQ6W53.js         | content-module         | 165 bytes | 

Application bundle generation complete. [8.398 seconds] - 2026-06-25T18:13:28.513Z

▲ [WARNING] Deprecation [plugin angular-sass]

    node_modules/@progress/kendo-theme-default/scss/imageeditor/_variables.scss:45:39:
      45 │ ...image-editor-action-pane-width: if( $kendo-image-editor-content...
         ╵                                    ^


  The Sass if() syntax is deprecated in favor of the modern CSS syntax.
  
  Suggestion: if(sass($kendo-image-editor-content-border-width == null): 240px; else: calc(240px + #{$kendo-image-editor-content-border-width}))
  
  More info: https://sass-lang.com/d/if-function

  The plugin "angular-sass" was triggered by this import

    angular:styles/global:styles:1:8:
      1 │ @import 'node_modules/@progress/kendo-theme-default/dist/default-oc...
        ╵         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~                                                                                                                                                       


Watch mode enabled. Watching for file changes...
NOTE: Raw file sizes do not reflect development server per-request transformations.
  ➜  Local:   https://localhost:4200/
  ➜  press h + enter to show help
X [ERROR] Cannot create property 'message' on string 'C:\...\ClientApp\node_modules\@angular\material\fesm2022\progress-bar.mjs: NumericLiterals must be non-negative finite numbers. You can use t.valueToNode(-1) instead.                                                                                                                                                                     
  107 |     target: i0.ɵɵFactoryTarget.Component                                                                                                                                                                                    
  108 |   });                                                                                                                                                                                                                       
> 109 |   static ɵcmp = i0.ɵɵngDeclareComponent({                                                                                                                                                                                   
      |                 ^                                                                                                                                                                                                           
  110 |     minVersion: "17.0.0",                                                                                                                                                                                                   
  111 |     version: "22.0.2",                                                                                                                                                                                                      
  112 |     type: MatProgressBar,' [plugin angular-vite-optimize-deps]                                                                                                                                                              

  This error came from the "onLoad" callback registered here:

    node_modules/@angular-devkit/build-angular/node_modules/@angular/build/src/tools/vite/utils.js:39:22:
      39 │                 build.onLoad({ filter: /\.[cm]?js$/ }, async (args) => {
         ╵                       ~~~~~~

    at setup (C:\...\ClientApp\node_modules\@angular-devkit\build-angular\node_modules\@angular\build\src\tools\vite\utils.js:39:23)
    at handlePlugins (C:\...\ClientApp\node_modules\@angular-devkit\build-angular\node_modules\@angular\build\node_modules\vite\node_modules\esbuild\lib\main.js:1422:21)
    at buildOrContextImpl (C:\...\ClientApp\node_modules\@angular-devkit\build-angular\node_modules\@angular\build\node_modules\vite\node_modules\esbuild\lib\main.js:1135:5)
    at Object.buildOrContext (C:\...\ClientApp\node_modules\@angular-devkit\build-angular\node_modules\@angular\build\node_modules\vite\node_modules\esbuild\lib\main.js:961:5)
    at C:\...\ClientApp\node_modules\@angular-devkit\build-angular\node_modules\@angular\build\node_modules\vite\node_modules\esbuild\lib\main.js:2325:68
    at new Promise (<anonymous>)
    at Object.context (C:\...\ClientApp\node_modules\@angular-devkit\build-angular\node_modules\@angular\build\node_modules\vite\node_modules\esbuild\lib\main.js:2325:27)
    at Object.context (C:\...\ClientApp\node_modules\@angular-devkit\build-angular\node_modules\@angular\build\node_modules\vite\node_modules\esbuild\lib\main.js:2167:58)
    at prepareEsbuildOptimizerRun (file:///C:/.../ClientApp/node_modules/@angular-devkit/build-angular/node_modules/@angular/build/node_modules/vite/dist/node/chunks/config.js:32101:26)

X [ERROR] Cannot create property 'message' on string 'C:\...\ClientApp\node_modules\@angular\material\fesm2022\menu.mjs: NumericLiterals must be non-negative finite numbers. You can use t.valueToNode(-1) instead.                                                                                                                                                                             
  104 |     target: i0.ɵɵFactoryTarget.Component                                                                                                                                                                                    
  105 |   });                                                                                                                                                                                                                       
> 106 |   static ɵcmp = i0.ɵɵngDeclareComponent({                                                                                                                                                                                   
      |                 ^                                                                                                                                                                                                           
  107 |     minVersion: "17.0.0",                                                                                                                                                                                                   
  108 |     version: "22.0.2",                                                                                                                                                                                                      
  109 |     type: MatMenuItem,' [plugin angular-vite-optimize-deps]                                                                                                                                                                 

  This error came from the "onLoad" callback registered here:

    node_modules/@angular-devkit/build-angular/node_modules/@angular/build/src/tools/vite/utils.js:39:22:
      39 │                 build.onLoad({ filter: /\.[cm]?js$/ }, async (args) => {
         ╵                       ~~~~~~

    at setup (C:\...\ClientApp\node_modules\@angular-devkit\build-angular\node_modules\@angular\build\src\tools\vite\utils.js:39:23)
    at handlePlugins (C:\...\ClientApp\node_modules\@angular-devkit\build-angular\node_modules\@angular\build\node_modules\vite\node_modules\esbuild\lib\main.js:1422:21)
    at buildOrContextImpl (C:\...\ClientApp\node_modules\@angular-devkit\build-angular\node_modules\@angular\build\node_modules\vite\node_modules\esbuild\lib\main.js:1135:5)
    at Object.buildOrContext (C:\...\ClientApp\node_modules\@angular-devkit\build-angular\node_modules\@angular\build\node_modules\vite\node_modules\esbuild\lib\main.js:961:5)
    at C:\...\ClientApp\node_modules\@angular-devkit\build-angular\node_modules\@angular\build\node_modules\vite\node_modules\esbuild\lib\main.js:2325:68
    at new Promise (<anonymous>)
    at Object.context (C:\...\ClientApp\node_modules\@angular-devkit\build-angular\node_modules\@angular\build\node_modules\vite\node_modules\esbuild\lib\main.js:2325:27)
    at Object.context (C:\...\ClientApp\node_modules\@angular-devkit\build-angular\node_modules\@angular\build\node_modules\vite\node_modules\esbuild\lib\main.js:2167:58)
    at prepareEsbuildOptimizerRun (file:///C:/.../ClientApp/node_modules/@angular-devkit/build-angular/node_modules/@angular/build/node_modules/vite/dist/node/chunks/config.js:32101:26)

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 21.2.14
Node: 24.15.0
Package Manager: 11.12.1
OS: Windows 11

Angular: 22.0.2
@angular-devkit/build-angular: 22.0.2
rxjs: 7.8.2
typescript: 6.0.3

Anything else?

No response

[SkyZeroZx]

Since Angular Material appears in the errors, it seems more likely to be a version compatibility issue between Angular Material and Angular itself. You also mentioned Kendo UI, but the latest version compatible with Angular 22 is Kendo UI 24.1.0

See https://www.telerik.com/kendo-angular-ui/components/changelogs/kendo-angular-ui

PD : Angular does not support third-party UI libraries like KendoUI. The only officially supported UI library is Angular Material

[kahanu]

@SkyZeroZx - thank you for your response. I've been using the KendoUI components with 5 applications here at work for 6 years without an issue. It's currently working successfully in Production with this application (that is returning the errors), but with version 21 of Angular. This is the first version of Angular that I've had a problem with any components.

The version of Angular Material is in line with what is current for Angular 22, all of the packages are updated to correct latest compatible versions.

It just seems like there's some breaking change in Ng 22 that wasn't there in 21, and so far I can't discover what that is.

[SkyZeroZx]

There may be internal changes to the Angular Compiler/Compiler-CLI that make Angular versions incompatible with each other, which is likely the case.

See
https://next.angular.dev/tools/libraries/creating-libraries#publishing-libraries
angular/angular#68623

[alan-agius4]

This issue is unrelated to Angular version incompatibility.

The error originates from Babel, Unfortunately, without a minimal reproducible example, we are unable to investigate this further.