Radzen & JQuery

1

Hi, I’m evaluating RADZEN and I think that your product is very interesting.
I’m trying to insert in page jquery custom code and I need to use the $ notation to use jquery resource.
The project compilation on RADZEN side have success, but when open the page in web browser I obtain this
error:

ERROR TypeError: “jquery_1.$ is undefined”
execute webpack-internal:///./E:/radzen/client/src/app/swm.ts:439:9
executeRequest webpack-internal:///./E:/radzen/client/src/app/swm.ts:510:9
SWMTagReaderObject webpack-internal:///./E:/radzen/client/src/app/swm.ts:344:5
SWMTagReader webpack-internal:///./E:/radzen/client/src/app/swm.ts:329:5
ngOnInit webpack-internal:///./E:/radzen/client/src/app/test/test.component.ts:29:9
node_modules angular/core/esm5/core.js:12576:9
node_modules angular/core/esm5/core.js:14100:20
node_modules angular/core/esm5/core.js:14043:16
node_modules angular/core/esm5/core.js:14936:55
node_modules angular/core/esm5/core.js:14877:13
View_TestComponent_Host_0 webpack-internal:///./E:/radzen/client/src/app/test/test.component.ngfactory.js:21:281
node_modules angular/core/esm5/core.js:14862:12
node_modules angular/core/esm5/core.js:14009:5
node_modules angular/core/esm5/core.js:14360:21
node_modules angular/core/esm5/core.js:14318:17
node_modules angular/core/esm5/core.js:14010:5
node_modules angular/core/esm5/core.js:14360:21
node_modules angular/core/esm5/core.js:14292:13
node_modules angular/core/esm5/core.js:14015:5
node_modules angular/core/esm5/core.js:14360:21
node_modules angular/core/esm5/core.js:14318:17
node_modules angular/core/esm5/core.js:14010:5
node_modules angular/core/esm5/core.js:14360:21
node_modules angular/core/esm5/core.js:14292:13
node_modules angular/core/esm5/core.js:14015:5
node_modules angular/core/esm5/core.js:15263:39
node_modules angular/core/esm5/core.js:14800:12
node_modules angular/core/esm5/core.js:11784:13
node_modules angular/core/esm5/core.js:6115:58
node_modules angular/core/esm5/core.js:6115:13
node_modules angular/core/esm5/core.js:5948:99
invoke webpack-internal:///./E:/radzen/client/node_modules/zone.js/dist/zone.js:388:17
node_modules angular/core/esm5/core.js:4947:24
invoke webpack-internal:///./E:/radzen/client/node_modules/zone.js/dist/zone.js:387:17
run webpack-internal:///./E:/radzen/client/node_modules/zone.js/dist/zone.js:138:24
node_modules angular/core/esm5/core.js:4764:54
node_modules angular/core/esm5/core.js:5948:69
node_modules angular/core/esm5/core.js:4533:36
__tryOrUnsub webpack-internal:///…/…/…/…/rxjs/_esm5/Subscriber.js:245:13
next webpack-internal:///…/…/…/…/rxjs/_esm5/Subscriber.js:192:17
_next webpack-internal:///…/…/…/…/rxjs/_esm5/Subscriber.js:133:9
next webpack-internal:///…/…/…/…/rxjs/_esm5/Subscriber.js:97:13
next webpack-internal:///…/…/…/…/rxjs/_esm5/Subject.js:66:25
node_modules angular/core/esm5/core.js:4513:24
node_modules angular/core/esm5/core.js:4912:13
node_modules angular/core/esm5/core.js:4960:21
hasTask webpack-internal:///./E:/radzen/client/node_modules/zone.js/dist/zone.js:441:21
_updateTaskCount webpack-internal:///./E:/radzen/client/node_modules/zone.js/dist/zone.js:461:17
_updateTaskCount webpack-internal:///./E:/radzen/client/node_modules/zone.js/dist/zone.js:285:34
runTask webpack-internal:///./E:/radzen/client/node_modules/zone.js/dist/zone.js:205:25
drainMicroTaskQueue webpack-internal:///./E:/radzen/client/node_modules/zone.js/dist/zone.js:595:25
invokeTask webpack-internal:///./E:/radzen/client/node_modules/zone.js/dist/zone.js:500:21
invokeTask webpack-internal:///./E:/radzen/client/node_modules/zone.js/dist/zone.js:1517:9
globalZoneAwareCallback webpack-internal:///./E:/radzen/client/node_modules/zone.js/dist/zone.js:1543:17

In . component.ts I insert my jquery custom code with this import:

import {$} from ‘jquery’;

Must I do other settings in my RADZEN application to use jquery?

Thanks

2

According to this SO answer one should import jQuery like this:

import $ from "jquery";
// or
import $ = require("jquery");

I would try the first approach.

3

Hi,

I try: import $ from “jquery”; but the error in web browser is the same.
With import $ = require(“jquery”); I obtain RADZEN compiling error.

4

We are successfully using jQuery like this:

import * as $ from 'jquery';

Does that work for you?

5

Hi, yes confirm you that work correctly.

Thanks.

6

Hi Radzen Senior Dev Team
Is there any way to make jquery be available globally on all the components?

Thanks

7

You can include jQuery as a script file in index.html. You have to add it to the code generation ignore list though.