How to Setup for Angular 4 and Webpack

[ppatelParticipant]

I have set up an app to use jqwidgets for a form but cannot get all the files that are needed set up. In Angular 4, the files are usually not set up in the index.html. So how do we set up to use jqwidgets in an Angular 4 app – especially the jqwidgets.d.ts? Can we see a small demo project to show the setup?

[Ivo ZhulevParticipant]

Hi ppatel,

I suggest you to consider working with Angular CLI. But if you still want to be pure webpack, i’ll get you that example.
Awaiting your response what example to show you(cli or pure webpack)

Best Regards,
Ivo

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

[ppatelParticipant]

Hello Ivo,

I have used the Angular CLI to set up the app. So I can use the CLI example if you have one for that. Thanks.

[Ivo ZhulevParticipant]

Hi ppatel,

Here is a link to download the sample:
https://my.pcloud.com/publink/show?code=XZiDd3ZUVcXngNcc2uVrfhF3L7v2uATpfDV

P.S.
Add the needed jqwidgets files in order to run it.(i’ve shown where to)

Best Regards,
Ivo

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

[damianpParticipant]

Hello ppatel,

My Angular 4 CLI setup.
package.json
dependencies on "jqwidgets-framework": "^4.6.2",

.angular-cli.json

"styles": [
        "assets/css/bootstrap.min.css",
        "assets/css/bootstrap-theme.min.css",
        "../node_modules/jqwidgets-framework/jqwidgets/styles/jqx.base.css",
        "../node_modules/jqwidgets-framework/jqwidgets/styles/jqx.metro.css",
        "styles.css"
      ],
"scripts": [
        "assets/js/jquery-3.2.1.min.js",
        "assets/js/bootstrap.min.js",
        "../node_modules/jqwidgets-framework/jqwidgets/jqxangular.js",
        "../node_modules/jqwidgets-framework/jqwidgets/jqxcore.js",
        "../node_modules/jqwidgets-framework/jqwidgets/jqxdata.js",
        ...

Additionaly index.ts:

/// <reference path="../../node_modules/jqwidgets-framework/jqwidgets-ts/jqwidgets.d.ts" />
export * from './app.component';
export * from './app.module';

Then import in app.module.ts looks that:
import {jqxGridComponent} from '../../node_modules/jqwidgets-framework/jqwidgets-ts/angular_jqxgrid';

@NgModule({
  declarations: [
    AppComponent,
    jqxGridComponent,

Regards

[ppatelParticipant]

Hello Ivo,

Thank you for the link and info.

Paresh

[ppatelParticipant]

Hey @damianp,

Thank you for the detailed setup info. It has been of great help and now I am all set up

Paresh

[Author]

Posts