Error when creating jqxSlider dynamically inside a grid in production version

[andreaParticipant]

jQuery version: none
jQWidgets version: 5.6.0
Angular version: 5.2.9
Device type: PC ubuntu 16.04 LTS , Chrome Version 65.0.3325.181 (Official Build) (64-bit)

Slider is not created when we build the application for production with: ng build –prod –env=prod
It works fine with the development build: ng build –target=development –environment=dev
Why is it working in development and not working in the production version ?
Thanks
Andrea

Error message on the Browser console:

ERROR TypeError: e(...)[i] is not a function
    at Object.createInstance (main.263f82535efe6e8d6707.bundle.js:1)
    at e.createDeviceSliderWidget (main.263f82535efe6e8d6707.bundle.js:1)
    at t.createwidget (main.263f82535efe6e8d6707.bundle.js:1)
    at e.(anonymous function)._renderwidgetcell (http://10.5.1.199:8085/main.263f82535efe6e8d6707.bundle.js:1:883948)
    at _rendercell (main.263f82535efe6e8d6707.bundle.js:1)
    at e.(anonymous function)._rendervisualcell (http://10.5.1.199:8085/main.263f82535efe6e8d6707.bundle.js:1:875520)
    at e.(anonymous function)._rendervisualrows (http://10.5.1.199:8085/main.263f82535efe6e8d6707.bundle.js:1:866037)
    at o (main.263f82535efe6e8d6707.bundle.js:1)
    at e.(anonymous function)._renderrows (http://10.5.1.199:8085/main.263f82535efe6e8d6707.bundle.js:1:856382)
    at e.(anonymous function).rendergridcontent (http://10.5.1.199:8085/main.263f82535efe6e8d6707.bundle.js:1:827489)

Code sample:

  this.columnsDevices = [
	   { text: 'Radio Path',        datafield: 'radioPath',    columntype: 'textbox', editable: false,
	       createwidget: (row, column: any, value: string, htmlElement: HTMLElement): void => {
		   this.createDeviceSliderWidget(row, column, value, htmlElement, 0, 1);
	       },
	       initwidget: (row: number, column: any, value: any, htmlElement: HTMLElement): void => { }                        
	   },
	 ];

  counter = 1;
  createDeviceSliderWidget(row, column: any, value: string, htmlElement: HTMLElement, minValue, maxValue) {
      let data = row.bounddata;
      let container = document.createElement('div');
      let id = column+(this.counter++);
      container.id = id;
      container.style.border = 'none';
      htmlElement.appendChild(container);
      var options= {
          width: '100px', tooltip: true, showRange: false, showButtons: false, mode: 'fixed', template: 'primary', 
          step:1, ticksFrequency: 1, min: minValue, max : maxValue, value: value
      };
      let mySlider : jqwidgets.jqxSlider = jqwidgets.createInstance('#'+id, 'jqxSlider', options);
  }

[StanislavParticipant]

Hello andrea.p,

Can you please give us some more information?
What properties are you setting to the grid and columns?

Best Regards,
Stanislav

jQWidgets Team
http://www.jqwidgets.com/

[andreaParticipant]

Actually the problem is the same also without the grid, see the small example below.
Is it possible that some part of the code is missing from the production build or it’s something related to the minifier/compiler ?
Thanks
Andrea

<div id="sliderContainer">
   <div id="slider"></div>
</div>

ngAfterViewInit() {
      var options= {
              width: '100px', tooltip: true, showRange: false, showButtons: false, mode: 'fixed', template: 'primary', 
              step:1, ticksFrequency: 1, min: 0, max : 1, value: 0
      };
      let mySlider : jqwidgets.jqxSlider = jqwidgets.createInstance('#slider', 'jqxSlider', options);
}

Error from the browser:

ERROR TypeError: e(...)[i] is not a function
    at Object.createInstance (main.4e21ea489ac1b9131871.bundle.js:1)
    at e.ngAfterViewInit (main.4e21ea489ac1b9131871.bundle.js:1)
    at Rr (main.4e21ea489ac1b9131871.bundle.js:1)
    at zr (main.4e21ea489ac1b9131871.bundle.js:1)
    at Hr (main.4e21ea489ac1b9131871.bundle.js:1)
    at cn (main.4e21ea489ac1b9131871.bundle.js:1)
    at wn (main.4e21ea489ac1b9131871.bundle.js:1)
    at xn (main.4e21ea489ac1b9131871.bundle.js:1)
    at cn (main.4e21ea489ac1b9131871.bundle.js:1)
    at wn (main.4e21ea489ac1b9131871.bundle.js:1)
Z @ main.4e21ea489ac1b9131871.bundle.js:1
e.handleError @ main.4e21ea489ac1b9131871.bundle.js:1
(anonymous) @ main.4e21ea489ac1b9131871.bundle.js:1
e.invoke @ polyfills.abdf53ca655716e505e0.bundle.js:1
t.run @ polyfills.abdf53ca655716e505e0.bundle.js:1
e.runOutsideAngular @ main.4e21ea489ac1b9131871.bundle.js:1
e.tick @ main.4e21ea489ac1b9131871.bundle.js:1
(anonymous) @ main.4e21ea489ac1b9131871.bundle.js:1
e.invoke @ polyfills.abdf53ca655716e505e0.bundle.js:1
onInvoke @ main.4e21ea489ac1b9131871.bundle.js:1
e.invoke @ polyfills.abdf53ca655716e505e0.bundle.js:1
t.run @ polyfills.abdf53ca655716e505e0.bundle.js:1
e.run @ main.4e21ea489ac1b9131871.bundle.js:1
next @ main.4e21ea489ac1b9131871.bundle.js:1
t.object.n @ main.4e21ea489ac1b9131871.bundle.js:1
t.__tryOrUnsub @ main.4e21ea489ac1b9131871.bundle.js:1
t.next @ main.4e21ea489ac1b9131871.bundle.js:1
t._next @ main.4e21ea489ac1b9131871.bundle.js:1
t.next @ main.4e21ea489ac1b9131871.bundle.js:1
t.next @ main.4e21ea489ac1b9131871.bundle.js:1
t.emit @ main.4e21ea489ac1b9131871.bundle.js:1
Ae @ main.4e21ea489ac1b9131871.bundle.js:1
onHasTask @ main.4e21ea489ac1b9131871.bundle.js:1
e.hasTask @ polyfills.abdf53ca655716e505e0.bundle.js:1
e._updateTaskCount @ polyfills.abdf53ca655716e505e0.bundle.js:1
t._updateTaskCount @ polyfills.abdf53ca655716e505e0.bundle.js:1
t.runTask @ polyfills.abdf53ca655716e505e0.bundle.js:1
v @ polyfills.abdf53ca655716e505e0.bundle.js:1
t.invokeTask @ polyfills.abdf53ca655716e505e0.bundle.js:1
_ @ polyfills.abdf53ca655716e505e0.bundle.js:1
k @ polyfills.abdf53ca655716e505e0.bundle.js:1

[Ivo ZhulevParticipant]

Hi, andrea,

This has something to do with the AOT compilation.
For now, use the command ng build –prod –env=prod --aot=false.

We will investigate further.

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

[andreaParticipant]

Thank you very much Ivo, it works now with –aot=false
Also I didn’t notice much difference in page loading time or code size with this option.
it looks the same and the problem is gone.

Thanks
Andrea

[Author]

Posts