JQuery Is Not Defined

[Yunier]

Hello, 

I recently upgrade my Angular project to Angular 15.

My project uses Kendo-UI for Angular, version 2022.3.1109. I can build the Angular project successfully, however, at runtime I get the following error.

Uncaught ReferenceError: jQuery is not defined
    at Object.<anonymous> (main.js:1:289462)
    at 56426 (main.js:1:4601988)
    at r (runtime.js:1:143)
    at 51403 (main.js:1:207525)
    at r (runtime.js:1:143)
    at Ln (main.js:1:6260043)
    at main.js:1:6260064
    at n (runtime.js:1:2659)
    at main.js:1:69

I have no direct reference to JQuery in my Angular project. 

I was able to trace the problem to the following lines of code.

Which comes from kendo.router.js. 

Could someone help me understand the problem, it seems like there is an issue with Kendo-UI for Angular, version 2022.3.1109, JQuery is not being properly defined.

By the way, I also attempted to follow the guide Kendo UI for jQuery Integration. Same result.

Any help/tips are appreciated.

Thank you.

 

[Yunier]

Upgrading to the latest version, 2023.1.117, did not help, same error. 

 

[Yanmario]

Hi Yunier,

I will need some time to consult our Kendo UI for jQuery developer team and will update you on this matter.

Regards,
Yanmario
Progress Telerik     

[Yanmario]

Hi Yunier,

Thank you for the provided details.

The issue is related to a specific version of jQuery that had problems with Webpack 4:

https://github.com/telerik/kendo-ui-core/issues/7012

This was fixed and will be ready for release in R1 2023. Feel free to update your jQuery version when it releases.

I hope this helps.

Regards,
Yanmario
Progress Telerik

[Yunier]

Thank you. 

I'm not familiar with Telerik's release schedule, when you say R1 2023, what does that mean?

 

[Yanmario]

Hi Yunier,

Release 1 is expected on the 18th of January 2023 and more detailed information can be found in the following blog post:

https://www.telerik.com/blogs/just-announced-telerik-kendo-ui-r1-2023-release-webinars

Kendo UI for jQuery release history:

https://www.telerik.com/support/whats-new/kendo-ui/release-history

Also can be tracked in our public GitHub repository for jQuery - https://github.com/telerik/kendo-ui-core/milestone/103

I hope this information is helpful.

Regards,
Yanmario
Progress Telerik     

[Yunier]

This information was helpful.

Thank you.

[Yanmario]

Hi Yunier,

After dining into the error, I found out that the jquery.min.js has to be included inside angular.json scripts collection:

"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/a15-jq",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": [
              "zone.js"
            ],
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": ["node_modules/jquery/dist/jquery.min.js"]
          },

I will also attach a runnable Angular 15 application with Kendo UI for jQuery DatePicker widget.

I hope this resolves the issue on your side.

Regards,
Yanmario
Progress Telerik

[Yunier]

This was the solution, thank you so much.