Jquery and wijribbon is not defined

Jquery and wijribbon is not defined

Posted by: pooja.bansal on 3 July 2019, 12:31 am EST

• 

  pooja.bansal

  • Post Options:
  • Link
    Copy

  Posted 3 July 2019, 12:31 am EST

  We have migrated our Angular 5 app to Angular 7 with JIT compiler.

  We are not able to use wijribbon in our application after migration.

  We have added required scripts and styles. Also we have added src ->app → assets → wijmo → jquery.d.ts, GC.Spread.Sheets.d and wijmo.d
  
  Our application is not picking up typed files defined in assets folder. Although we have added below line in angular.json -
  
  “assets”: [

            "projects/fpm/src/assets"
  

  ]

  Jquery and WijRibbon is not defined :
  
  jQuery(this.ribbon.nativeElement).wijribbon(“setButtonDisabled”, buttonName, isDisable);

• 

  pooja.bansal

  • Post Options:
  • Link
    Copy

  Posted 4 July 2019, 6:35 am EST

  Please reply asap.

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 4 July 2019, 10:20 am EST

  Hello Pooja,
  
  We are sorry, we are unable to replicate the issue at our end. Please find the attached sample.
  
  Please let us know if there is any specific steps missing or provide the stripped sample depicting your issue.

  Regards,
  
  Manish Gupta

  https://www.dropbox.com/s/pzoigkz9o1iezto/wijribbon-angular.zip?dl=0

• 

  pooja.bansal

  • Post Options:
  • Link
    Copy

  Posted 5 July 2019, 7:47 am EST

  The sample which you have provided above is working fine. But when we tried the same sample code in our project it’s not working(Jquery and Wijribbon is undefined). It might be because we are using typed files jquery.d.ts, wijmo.d.ts and GC.Spread.Sheets.d ( added in assets ->wijmo).

  Jquery variable is exported in jquery.d.ts. But that comes out to be undefined when we run the application.So, basically typed files are not including properly.

  Angular.json setting -
  
  “styles”: [
  
  “projects/fpm/src/styles.scss”,
  
  “projects/lib-proton/src/styles/main.scss”,
  
  “projects/fpm/src/styles/jquery-wijmo.css”,
  
  “projects/fpm/src/styles/jquery.wijmo-pro.all.3.20151.69.min.css”,
  
  “projects/fpm/src/styles/gc.spread.sheets.12.1.1.css”,
  
  “projects/fpm/src/styles/select2.min.css”
  
  ],
  
  “scripts”: [
  
  “projects/fpm/src/scripts/gc.spread.sheets.all.12.1.1.min.js”,
  
  “projects/fpm/src/scripts/gc.spread.excelio.12.1.1.min.js”,
  
  “projects/fpm/src/scripts/jquery/jquery.min.js”,
  
  “projects/fpm/src/scripts/jquery-ui/jquery-ui.min.js”,
  
  “projects/fpm/src/scripts/jquery.wijmo-open.all.3.20151.69.js”,
  
  “projects/fpm/src/scripts/jquery.wijmo-pro.all.3.20151.69.js”,
  
  “projects/fpm/src/scripts/licensekey.js”,
  
  “projects/fpm/src/scripts/jquery/select2.full.min.js”
  
  ],

  Is there any particular setting we need to do or we are missing anything?
  
  Please reply asap.

• 

  pooja.bansal

  • Post Options:
  • Link
    Copy

  Posted 8 July 2019, 5:22 am EST

  Please reply asap.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 8 July 2019, 7:22 am EST

  Hi,

  Could you please try using the declare keyword in your TS component file:

  In app.component.ts:

  declare var jQuery;
  

  If the issue still persists, could you please provide us with a sample that replicates the issue?

• 

  pooja.bansal

  • Post Options:
  • Link
    Copy

  Posted 10 July 2019, 3:57 am EST

  Hi,
  
  The solution which you have provided we have already tried this thing, but it’s not working.
  
  The sample code which you have provided is working fine independently. However, when we tried to run the same code into our application it’s giving the same error(jquery and wijmo is undefined).

  We are looking into that issue and whenever we are able to replicate the issue into your provided sample code, we will post the code.

  Regards
  
  Pooja Bansal

• 

  pooja.bansal

  • Post Options:
  • Link
    Copy

  Posted 11 July 2019, 2:31 am EST

  Hi,

  The sample code you have provided is working fine when we run the application through ng serve. However, when we host the application on IIS and give the path of the dist folder it’s not working (Jquery is undefined). Same is the case when we tried your sample code into our app.

  IIS Path - C:\Angular7\Test App\WijmoTestApplication\dist

  Regards
  
  Pooja Bansal

• 

  pooja.bansal

  • Post Options:
  • Link
    Copy

  Posted 11 July 2019, 2:33 am EST

  PFA dist folder.

  dist.zip

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 11 July 2019, 6:37 am EST - Updated 3 October 2022, 7:53 pm EST

  Hi Pooja,

  Thank you for providing us with a sample. We deployed the dist folder on IIS and it works without any issues. We also ran the build on the sample that we provided you earlier and also tried to replicate the issue but we were not able to do it. Please refer to the attached screenshot.
  
  

  

  1280×923 81.9 KB