Angular 6 using JQXGrid in the component of sub module

[mohanaraoParticipant]

Hi,

All the examples given with Angular 6 are given with jqwidgets getting used in the app component. But when I tried to use it in the real application in the submodule so I have following questions

1)In the such where should i declare the jqxGridComponent in the AppModule or sub module. Only declaring the sub module then only it’s working. It seems like an overhead. Please provide us an example
2)Also If I declare the jqxGridComponent in last entry of the declarations then i am running into issues during the build.
3)My unit test cases are failing with Can’t bind to ‘width’ since it isn’t a known property of ‘jqxGrid’. I got the similar error during the build declared the jqxGridComponent in the last of the declaration section. How to resolve unit test cases
4) Also, the ERROR in No NgModule metadata found for ‘AppModule’ is so weird. Is there any plan to fix it?
5)After adding jqwidgets I feel like the overall build increased do you think I am doing something wrong here? I followed the exact documentation

[MartinParticipant]

Hello mohanarao,

You can declare the jqwidgets components either in the AppModule or in the sub module where they are used, depending on which is more convenient for you. You can refer to our showcase demos to see examples with larger apps. You will find them in the demos/interactivedemos folder.

I can not tell you what could be issue with the ‘width’ property of the grid without seeing your app. As a workaround, you can try to set the width of the grid’s parent instead.

The ERROR in No NgModule metadata found for ‘AppModule’ is actually coming from the new ng verison. It can be fixed by adding “src/app/app.module.ts” to top of the “files” array in tsconfig.json file.

And finally, it is normal for the build to increase when you add external frameworks. If you have followed the documentation, this is the correct way.

Best Regards,
Martin

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

[mohanaraoParticipant]

Hi,

I found the way to resolve the unit test error. By doing below it is resolving the unit test case failure. Do I need to add like this on each every component spec?

beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [jqxGridComponent, MyResultsComponent]
})
.compileComponents();
}));

It can be fixed by adding “src/app/app.module.ts” to top of the “files” array in tsconfig.json file.

Do I need to remove the “src/app/**/*” and just keep the “src/app/app.module.ts” in the tsconfig.json ?

[caseybelcher543Participant]

Hello mohanarao, I have a question posted related to jqx testing as well. Could you post your entire .spec file? Also your karma.conf.js file? What kind of unit test error were you getting?

[MartinParticipant]

Hello mohanarao,

Thank you for this note! Yes, you should add this to every component that has jqx components in it.

In the tsconfig.json you should keep both “src/app/**/*” and “src/app/app.module.ts” like this:

,
    "include": [
      "src/**/*"
    ],
  "files": [
    "src/app/app.module.ts",
    "node_modules/jqwidgets-scripts/jqwidgets-ts/angular_jqxbargauge.ts"
  ]

Best Regards,
Martin

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

[caseybelcher543Participant]

Martin, for unit testing should the karma.conf.js also fill the “include” and “files” fields in the same way? I have another question posted in this forum with a simple starter Angular 6 project where I can “ng serve” but not “ng test”.

[Ivo ZhulevParticipant]

Hi All,

Please check my post here:
https://www.jqwidgets.com/community/topic/angular-karma-jasmine-unit-tests/#post-100795

Best Regards,
Ivo

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

[Author]

Posts