Strange thing when jqxPanel import script in angular-cli.json

[OpsidiumParticipant]

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

[HristoParticipant]

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

[OpsidiumParticipant]

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

[OpsidiumParticipant]

Hi,

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

Thank’s

Sébastien

[HristoParticipant]

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

[OpsidiumParticipant]

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

[HristoParticipant]

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

[OpsidiumParticipant]

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

[HristoParticipant]

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

[OpsidiumParticipant]

I Hristov,

The problems are on combobox and tree :
Here this is without jqxpanel in angular-cli.json

And this is with jqxpanel in angular-cli.json and a complete build (with cache clear and restart nodejs)

Greats thank’s.
Séb

[OpsidiumParticipant]

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

[OpsidiumParticipant]

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

[Author]

Posts