Uncaught ReferenceError: jqxBaseFramework is not defined

[kvsreddy5Participant]

Hi,

Need help…
We are getting the ‘jqxBaseFramework is not defined’ issue while using the jqWidgets in Angular2 Application.

we imported all the required modules like below in

vendor.ts
import “jquery”;
import “bootstrap/dist/js/bootstrap”;
import “bootstrap/dist/css/bootstrap.min.css”;

import ‘jqwidgets-framework/jqwidgets/styles/jqx.base.css’;
import ‘jqwidgets-framework/jqwidgets/jqxcore’;
import ‘jqwidgets-framework/jqwidgets/jqxdata’;

webpack
new webpack.ProvidePlugin({
jQuery: ‘jquery’,
$: ‘jquery’,
jquery: ‘jquery’
}),

App.Component.ts
/// <reference path=”../../node_modules/jqwidgets-framework/jqwidgets-ts/jqwidgets.d.ts” />
import { Component, ViewChild, AfterViewInit } from ‘@angular/core’;
import { jqxGridComponent } from ‘jqwidgets-framework/jqwidgets-ts/angular_jqxgrid’;
import { jqxDataAdapterComponent } from ‘jqwidgets-framework/jqwidgets-ts/angular_jqxdataadapter’;

Used the remaining App.Component code to bind grid in my example as in below link
http://www.jqwidgets.com/angular2/angular2-grid/index.htm#http://www.jqwidgets.com/angular2/angular2-grid/angular-grid-defaultfunctionality.htm

[Peter StoevKeymaster]

Hi kvsreddy5,

Try with the current version of the angular grid. jqxBaseFramework is not defined occurs when jQuery is not referred before the jQWidgets files. However, jQuery reference is no longer required in the newest version of jQWidgets so such error should not occur.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[kvsreddy5Participant]

Hi Peter Stoev,

we have done in the same way in which you are describing,but still getting some issues.
now we are getting error as ‘Unexpected directive ‘jqxGridComponent’ imported by the module ‘AppModule’ ‘.

can you please send the steps required to use JqxWidgets in Visual Studio Angular2 Application with webpack.

Best Regards,
Venkat.

[Peter StoevKeymaster]

Hi Venkat,

This means that jqxGridComponent is not imported so probably you have a wrong path to the typescript files.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[jfabianParticipant]

I’m getting the same error, jqxBaseFramework is not defined. Is there a sample on how to configure webpack vendor.ts without using AOT or including the scripts on the page?

Here is vendor.ts, Is this correct?

// Angular
import '@angular/platform-browser';
import '@angular/platform-browser-dynamic';
import '@angular/core';
import '@angular/common';
import '@angular/http';
import '@angular/router';

// RxJS
import 'rxjs';

//scripts
import 'jquery';
import 'bootstrap/dist/js/bootstrap';
import 'jqwidgets-framework/jqwidgets/jqxcore';
import 'jqwidgets-framework/jqwidgets/jqxdropdownlist';

//css
import 'bootstrap/dist/css/bootstrap.css';
import 'font-awesome/css/font-awesome.css';
import 'jqwidgets-framework/jqwidgets/styles/jqx.base.css';
import 'jqwidgets-framework/jqwidgets/styles/jqx.black.css';

If I include import ‘jqwidgets-framework/jqwidgets/jqx-all’; then there are not errors but I have issues with the dropdownlist firing events as well as the dataAdapter throws errors.

[Ivo ZhulevParticipant]

Hi jfabian,

This looks okey, but if when you include jqx-all and there are no errors, then you are missing some import or have a wrong path. This is the problem for sure. Check again.

Best Regards,
Ivo

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

[Author]

Posts