jQuery UI Widgets Forums Layouts Panel and Responsive Panel Strange thing when jqxPanel import script in angular-cli.json

This topic contains 11 replies, has 2 voices, and was last updated by  Opsidium 2 years, 8 months ago.

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

  • Opsidium
    Participant

    Hi,

    When we include “../node_modules/jqwidgets-framework/jqwidgets/jqxpanel.js”, strange things are producted in our application.
    For exemple, calling fonctions in a service is not pushed and event seems run but not. We have’nt error but a lot of anormal behaviors.
    In our application we haven’t call jqxPanel. Just include jqxpanel.js in angular-cli.json file.
    When we delete this entry, the application work fine.
    We are in @angular/cli 1.4.7

    Best Regards
    Sébastien


    Hristo
    Participant

    Hello Sébastien,

    Could you clarify it?
    Because it is possible if you just delete this reference (“jqxpanel.js”) without stop and start again the ‘build’ process it saves something as a buffer.
    I tested this scenario and when you try to delete this reference it throws an error in the console.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com


    Opsidium
    Participant

    Hello Hristo
    In fact when we put jqxpanel.js in the build the application does not cause an error but for example the other components no longer works as Tree or combobox.
    We have the same problem with version 5.4.0.
    When we do the build now the trees and combobox does not select anymore and so our application fails.
    As soon as we go to 5.3.2 or remove jqxpanels everything comes back in order.
    We tried to remove all npm caches.

    Sebastian


    Opsidium
    Participant

    Hi,

    For adding, with have restart the build for any modification in angular-cli.json modification.

    Thank’s

    Sébastien


    Hristo
    Participant

    Hello Sébastien,

    Actually, I mean “npm start” after the reference is deleted and the project cannot be started normally.
    Yes, it is a necessity to restart when you have any modification in angular-cli.json.
    If you still have an issue, I would ask you provide me a simple example that demonstrates this.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com


    Opsidium
    Participant

    Hi Hristo,

    I’am sorry but we restart npm when we change any thing in angular-cli but insert script jqxpanels make failed the application.

    for exemple this work fine :

    scripts”: [
    “../node_modules/jqwidgets-framework/jqwidgets/globalization/globalize.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/globalization/globalize.culture.fr-FR.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxcore.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxwindow.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxlayout.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxtooltip.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxpopover.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxribbon.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxsplitter.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxdata.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxdatatable.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxtabs.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxbuttons.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxswitchbutton.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxscrollbar.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxscrollview.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxmenu.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxnavbar.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxinput.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxmaskedinput.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxnumberinput.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxtextarea.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxpasswordinput.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxcombobox.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxcheckbox.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxradiobutton.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxlistbox.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxdropdownlist.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxtree.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxdropdownbutton.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxgrid.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxgrid.sort.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxgrid.pager.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxgrid.selection.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxgrid.edit.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxdate.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxdatetimeinput.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxcalendar.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxscheduler.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxvalidator.js”
    ],

    but this failed :

    “scripts”: [
    “../node_modules/jqwidgets-framework/jqwidgets/globalization/globalize.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/globalization/globalize.culture.fr-FR.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxcore.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxwindow.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxlayout.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxtooltip.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxpopover.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxribbon.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxsplitter.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxdata.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxdatatable.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxtabs.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxbuttons.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxswitchbutton.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxscrollbar.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxscrollview.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxmenu.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxnavbar.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxinput.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxmaskedinput.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxnumberinput.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxtextarea.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxpasswordinput.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxcombobox.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxcheckbox.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxradiobutton.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxlistbox.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxdropdownlist.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxtree.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxdropdownbutton.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxgrid.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxgrid.sort.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxgrid.pager.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxgrid.selection.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxgrid.edit.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxdate.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxdatetimeinput.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxcalendar.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxscheduler.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxvalidator.js”,
    “../node_modules/jqwidgets-framework/jqwidgets/jqxpanel.js”

    ],

    With the new version 5.4.0, the application crash so with or without jqxpanel.
    so jqx-all.js failed with the same problem (jqxpanel is in jqx-all :))

    The crash of application is caused by problem with combobox and tree with jqxpanel include.
    When delete this line and restart npm (complete build).
    Best Regards
    Sébastien


    Hristo
    Participant

    Hello Sébastien,

    I use this tutorial:
    https://github.com/jqwidgets/create-jqwidgets-angular-app/blob/master/README.md#getting-started
    Also, I use your references to the “scripts” array and it seems to work fine.
    Please, take a look at this example:
    .angular-cli.json:

    {
      "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
      "project": {
        "name": "my-test-app"
      },
      "apps": [
        {
          "root": "src",
          "outDir": "dist",
          "assets": [
            "assets",
            "favicon.ico"
          ],
          "index": "index.html",
          "main": "main.ts",
          "polyfills": "polyfills.ts",
          "test": "test.ts",
          "tsconfig": "tsconfig.app.json",
          "testTsconfig": "tsconfig.spec.json",
          "prefix": "app",
          "styles": [
            "styles.css",
            "../node_modules/jqwidgets-framework/jqwidgets/styles/jqx.base.css"
          ],
          "scripts": [
    		"../node_modules/jqwidgets-framework/jqwidgets/globalization/globalize.js",
    		"../node_modules/jqwidgets-framework/jqwidgets/globalization/globalize.culture.fr-FR.js",
    		"../node_modules/jqwidgets-framework/jqwidgets/jqxcore.js",
    		"../node_modules/jqwidgets-framework/jqwidgets/jqxwindow.js",
    		"../node_modules/jqwidgets-framework/jqwidgets/jqxlayout.js",
    		"../node_modules/jqwidgets-framework/jqwidgets/jqxtooltip.js",
    		"../node_modules/jqwidgets-framework/jqwidgets/jqxpopover.js",
    		"../node_modules/jqwidgets-framework/jqwidgets/jqxribbon.js",
    		"../node_modules/jqwidgets-framework/jqwidgets/jqxsplitter.js",
    		"../node_modules/jqwidgets-framework/jqwidgets/jqxdata.js",
    		"../node_modules/jqwidgets-framework/jqwidgets/jqxdatatable.js",
    		"../node_modules/jqwidgets-framework/jqwidgets/jqxtabs.js",
    		"../node_modules/jqwidgets-framework/jqwidgets/jqxbuttons.js",
    		"../node_modules/jqwidgets-framework/jqwidgets/jqxswitchbutton.js",
    		"../node_modules/jqwidgets-framework/jqwidgets/jqxscrollbar.js",
    		"../node_modules/jqwidgets-framework/jqwidgets/jqxscrollview.js",
    		"../node_modules/jqwidgets-framework/jqwidgets/jqxmenu.js",
    		"../node_modules/jqwidgets-framework/jqwidgets/jqxnavbar.js",
    		"../node_modules/jqwidgets-framework/jqwidgets/jqxinput.js",
    		"../node_modules/jqwidgets-framework/jqwidgets/jqxmaskedinput.js",
    		"../node_modules/jqwidgets-framework/jqwidgets/jqxnumberinput.js",
    		"../node_modules/jqwidgets-framework/jqwidgets/jqxtextarea.js",
    		"../node_modules/jqwidgets-framework/jqwidgets/jqxpasswordinput.js",
    		"../node_modules/jqwidgets-framework/jqwidgets/jqxcombobox.js",
    		"../node_modules/jqwidgets-framework/jqwidgets/jqxcheckbox.js",
    		"../node_modules/jqwidgets-framework/jqwidgets/jqxradiobutton.js",
    		"../node_modules/jqwidgets-framework/jqwidgets/jqxlistbox.js",
    		"../node_modules/jqwidgets-framework/jqwidgets/jqxdropdownlist.js",
    		"../node_modules/jqwidgets-framework/jqwidgets/jqxtree.js",
    		"../node_modules/jqwidgets-framework/jqwidgets/jqxdropdownbutton.js",
    		"../node_modules/jqwidgets-framework/jqwidgets/jqxgrid.js",
    		"../node_modules/jqwidgets-framework/jqwidgets/jqxgrid.sort.js",
    		"../node_modules/jqwidgets-framework/jqwidgets/jqxgrid.pager.js",
    		"../node_modules/jqwidgets-framework/jqwidgets/jqxgrid.selection.js",
    		"../node_modules/jqwidgets-framework/jqwidgets/jqxgrid.edit.js",
    		"../node_modules/jqwidgets-framework/jqwidgets/jqxdate.js",
    		"../node_modules/jqwidgets-framework/jqwidgets/jqxdatetimeinput.js",
    		"../node_modules/jqwidgets-framework/jqwidgets/jqxcalendar.js",
    		"../node_modules/jqwidgets-framework/jqwidgets/jqxscheduler.js",
    		"../node_modules/jqwidgets-framework/jqwidgets/jqxvalidator.js",
    		"../node_modules/jqwidgets-framework/jqwidgets/jqxpanel.js"
          ],
          "environmentSource": "environments/environment.ts",
          "environments": {
            "dev": "environments/environment.ts",
            "prod": "environments/environment.prod.ts"
          }
        }
      ],
      "e2e": {
        "protractor": {
          "config": "./protractor.conf.js"
        }
      },
      "lint": [
        {
          "project": "src/tsconfig.app.json"
        },
        {
          "project": "src/tsconfig.spec.json"
        },
        {
          "project": "e2e/tsconfig.e2e.json"
        }
      ],
      "test": {
        "karma": {
          "config": "./karma.conf.js"
        }
      },
      "defaults": {
        "styleExt": "css",
        "component": {}
      }
    }
    

    app.component.html:

    <jqxPanel [width]="350" [height]="350">
      <div style="margin: 10px;">
        <h3>Early History of the Internet</h3>
      </div>
      <!--Content-->
      <div style="white-space: nowrap;">
        <ul>
          <li>1961 First packet-switching papers</li>
          <li>1966 Merit Network founded</li>
          <li>1966 ARPANET planning starts</li>
          <li>1969 ARPANET carries its first packets</li>
          <li>1970 Mark I network at NPL (UK)</li>
          <li>1970 Network Information Center (NIC)</li>
          <li>1971 Merit Network"s packet-switched network operational</li>
          <li>1971 Tymnet packet-switched network</li>
          <li>1972 Internet Assigned Numbers Authority (IANA) established</li>
          <li>1973 CYCLADES network demonstrated</li>
          <li>1974 Telenet packet-switched network</li>
          <li>1976 X.25 protocol approved</li>
          <li>1979 Internet Activities Board (IAB)</li>
          <li>1980 USENET news using UUCP</li>
          <li>1980 Ethernet standard introduced</li>
          <li>1981 BITNET established</li>
        </ul>
      </div>
    </jqxPanel>
    <br/>
    <jqxComboBox 
        [width]='250' [height]='25' 
        [source]='[1, 2, 3, 4]' [selectedIndex]='0'>
    </jqxComboBox>
    <br/>
    <jqxTree #myTree style="margin-left: 20px; float: left"
        [width]="300" [height]="250" [hasThreeStates]="true" [checkboxes]="true">
      <ul>
        <li id='home'>Home</li>
        <li id='solutions'>
          Solutions
          <ul>
            <li>Education</li>
            <li>Financial services</li>
            <li>Government</li>
            <li id='manufacturing'>Manufacturing</li>
            <li>
              Solutions
              <ul>
                <li>Consumer photo and video</li>
                <li>Mobile</li>
                <li>Rich Internet applications</li>
                <li>Technical communication</li>
                <li>Training and eLearning</li>
                <li>Web conferencing</li>
              </ul>
            </li>
            <li>All industries and solutions</li>
          </ul>
        </li>
        
      </ul>
    </jqxTree>

    app.component.ts:

    import { Component } from '@angular/core';
    
    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html'
    })
    
    export class AppComponent {
    }
    

    app.module.ts:

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    
    import { jqxPanelComponent } from 'jqwidgets-framework/jqwidgets-ts/angular_jqxpanel';
    import { jqxComboBoxComponent } from 'jqwidgets-framework/jqwidgets-ts/angular_jqxcombobox';
    import { jqxTreeComponent } from 'jqwidgets-framework/jqwidgets-ts/angular_jqxtree';
    
    import { AppComponent } from './app.component';
    
    @NgModule({
      declarations: [
          AppComponent, jqxPanelComponent, jqxComboBoxComponent, jqxTreeComponent
      ],
      imports: [
        BrowserModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }
    

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com


    Opsidium
    Participant

    Hi Hristo,

    Thank’s for your tests et your response.
    Is it possible that the probleme is caused by latest version of somes modules ?
    We use now :
    +– @angular/animations@4.4.5
    +– @angular/cli@1.4.7
    +– @angular/common@4.4.5
    +– @angular/compiler@4.4.5
    +– @angular/compiler-cli@4.4.5
    +– @angular/core@4.4.5
    +– @angular/forms@4.4.5
    +– @angular/http@4.4.5
    +– @angular/language-service@4.4.5
    +– @angular/platform-browser@4.4.5
    +– @angular/platform-browser-dynamic@4.4.5
    +– @angular/platform-server@4.4.5
    +– @angular/router@4.4.5
    +– @types/jasmine@2.6.0
    +– @types/jasminewd2@2.0.3
    +– @types/node@8.0.41
    +– codelyzer@3.2.1
    +– core-js@2.5.1
    +– enhanced-resolve@3.4.1
    +– jasmine-core@2.8.0
    +– jasmine-spec-reporter@4.2.1
    +– jqwidgets-framework@5.2.0
    +– karma@1.7.1
    +– karma-chrome-launcher@2.2.0
    +– karma-cli@1.0.1
    +– karma-coverage-istanbul-reporter@1.3.0
    +– karma-jasmine@1.1.0
    +– karma-jasmine-html-reporter@0.2.2
    +– protractor@5.1.2
    +– rxjs@5.4.3
    +– ts-node@3.3.0
    +– tslint@5.7.0
    +– typescript@2.5.3
    `– zone.js@0.8.18

    I specify that when the problem occurs, the application runs without error but it is the combobox and the trees that do not want to be selected.
    The rest seems to work.

    Great thank’s.
    Sébastien


    Hristo
    Participant

    Hello Sébastien,

    Could you clarify what you mean with “the combobox and the trees that do not want to be selected”?
    I tested again this example and it seems they functionalities work fine (select different items of the ComboBox and check one or many items of the TreeGrid).
    Also, I update to the latest versions and it seems to work fine.
    package.json:

    ...
    "dependencies": {
        "@angular/animations": "^4.2.6",
        "@angular/common": "^4.2.6",
        "@angular/compiler": "^4.2.6",
        "@angular/core": "^4.2.6",
        "@angular/forms": "^4.2.6",
        "@angular/http": "^4.2.6",
        "@angular/platform-browser": "^4.2.6",
        "@angular/platform-browser-dynamic": "^4.2.6",
        "@angular/router": "^4.2.6",
        "core-js": "^2.4.1",
        "jqwidgets-framework": "5.4.0",
        "rxjs": "^5.4.2",
        "zone.js": "^0.8.12"
      },
    ...
    "devDependencies": {
        "@angular/cli": "1.4.9",
        "@angular/compiler-cli": "^4.2.6",
        "@angular/language-service": "^4.2.6",
        "@types/jasmine": "~2.6.0",
        "@types/jasminewd2": "~2.0.2",
        "@types/node": "~8.0.10",
        "codelyzer": "~3.2.1",
        "jasmine-core": "~2.8.0",
        "jasmine-spec-reporter": "~4.2.1",
        "karma": "~1.7.0",
        "karma-chrome-launcher": "~2.2.0",
        "karma-cli": "~1.0.1",
        "karma-coverage-istanbul-reporter": "^1.3.0",
        "karma-jasmine": "~1.1.0",
        "karma-jasmine-html-reporter": "^0.2.2",
        "protractor": "~5.2.0",
        "ts-node": "~3.3.0",
        "tslint": "~5.7.0",
        "typescript": "~2.5.3"
      },

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com


    Opsidium
    Participant

    I Hristov,

    The problems are on combobox and tree :
    Here this is without jqxpanel in angular-cli.json
    Without Panel
    And this is with jqxpanel in angular-cli.json and a complete build (with cache clear and restart nodejs)
    Without Panel

    Greats thank’s.
    Séb


    Opsidium
    Participant

    Hi, in complement :
    The error is :
    ERROR TypeError: Cannot read property ‘getItems’ of undefined
    at AccueilComponent.webpackJsonp…/../../../../src/app/accueil/accueil.component.ts.AccueilComponent.myTreeOnInitialized (accueil.component.ts:280)
    at Object.eval [as handleEvent] (AccueilComponent.html:31)
    at handleEvent (core.es5.js:11998)
    at callWithDebugContext (core.es5.js:13467)
    at Object.debugHandleEvent [as handleEvent] (core.es5.js:13055)
    at dispatchEvent (core.es5.js:8614)
    at core.es5.js:10770
    at SafeSubscriber.schedulerFn [as _next] (core.es5.js:3647)
    at SafeSubscriber.webpackJsonp…/../../../rxjs/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:238)
    at SafeSubscriber.webpackJsonp…/../../../rxjs/Subscriber.js.SafeSubscriber.next (Subscriber.js:185)
    Thank’s
    Séb


    Opsidium
    Participant

    Hi Hristo,
    Good news,

    We solved the problem. In fact the application begins to become heavy.
    During loading, with the jqwPanel in addition, the life cycle of angular poses a problem on some components (in 2-way mode).
    We used ChangeDetectorRef to do a detectChanges () at the right time to put a logic back in the time of the application.
    Since it works perfectly.
    Thanks again for everything
    Best Regards
    Séb

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

You must be logged in to reply to this topic.