jQuery UI Widgets Forums Angular Error when creating jqxSlider dynamically inside a grid in production version

This topic contains 4 replies, has 3 voices, and was last updated by  andrea 6 years ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author

  • andrea
    Participant

    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);
      }
    
    • This topic was modified 6 years ago by  andrea.

    Stanislav
    Participant

    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/


    andrea
    Participant

    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 Zhulev
    Participant

    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/


    andrea
    Participant

    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

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.