Wijmo Issues Migrating from AngularJS to Angular 7

Wijmo Issues Migrating from AngularJS to Angular 7

Posted by: shaishav on 30 October 2019, 11:59 am EST

• 

  shaishav

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 30 October 2019, 11:59 am EST

  Hi, I have a hybrid Angular application up and running. We are using Wijmo FlexGridFilters and FlexGrids in a lot of the pages in the AngularJS side of the application. At the same time, we’re trying to add a new FlexGrid to a downgraded Angular component. We have both Wijmo library versions (angularjs and angular) imported or included. I suspect this might be a problem. We’re getting an error saying the following:

  "Uncaught Error: Template parse errors:
  
  ‘wj-flex-grid’ is not a known element:

  1. If ‘wj-flex-grid’ is an Angular component, then verify that it is part of this module.
  2. If ‘wj-flex-grid’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.
• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 31 October 2019, 2:07 am EST

  Hi Shaishav,

  From looking at the exception, it seems that you have not imported the WjGridModule in the main module files. Please try adding the following code snippet in the app.module.ts file:

  import { WjGridModule } from '@grapecity/wijmo.angular2.grid';
  @NgModule({
    imports:      [ ..., WjGridModule ],
    declarations: [ ... ],
    bootstrap:    [ ... ]
  })
  

  Let me know if this solves your issue. In case the error still occurs, could you please provide us with a demo sample so that we can assist you further.

  Regards,
  
  Ashwin

• 

  shaishav

  • Post Options:
  • Link
    Copy

  Posted 31 October 2019, 12:58 pm EST

  Hi Ashwin,

  I did as you said and now I’m able to see my grid in the angularjs component and the one in the angular 7 component, which is great. However, what I’m running into now is an undefined error for initializing things like the flexgrid filter and a column picker in the angularjs component. The “wijmo.input” object is undefined for something like “$ctrl.columnPicker = new wijmo.input.ListBox(‘#columnPicker’, {…})”. I believe the angular 7 wijmo library is loaded last and it doesn’t contain that object as it does in angularjs. I’m attaching a sample project. sample-problem.zip

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 1 November 2019, 4:37 am EST

  Hi Shaishav,

  The issue in the sample is arising because wijmo is added by two different methods:
  
  1). By loading script files
  
  2). As a module from @grapecity/wijmo module
  
  When wijmo is added as a module, it attaches its instance on the window object, in this case, it is replacing the wijmo instance attached when wijmo is added is using script files.
  
  To fix the issue you may opt for one of two options:
  
  1). add angularJS as modules too. Related wijmo modules for angularJS can be can be found in @grapecity/wijmo.angular.xx npm packages where xx is the module name like input, grid etc.
  
  2). rename the wijmo object added as a script to _wijmo and then use the _wijmo object whenever you to need to reference the wijmo object added as a result of loading script files.
  
  Please refer to the attached updated sample, sample demonstrates the second approach. Look for the comments starting with "update: " in app.js and dashboard.component.js files.

  Regards
  
  sample-problem_updated.zip

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 5 November 2019, 3:19 am EST

  Hi Shaishav,

  Please refer to the attached sample which demonstrates option1 i.e. loading angular and wijmo as modules rather than as scripts and let us know if you face any issues
  
  sample-problem_updated_modular.zip

• 

  shaishav

  • Post Options:
  • Link
    Copy

  Posted 6 November 2019, 12:20 pm EST

  Option 1 works now as well. Thank you!