Ionic 2 & Wijmo 5?

Ionic Framework ionic-v3
1

I remember I read an article at the Wijmo site saying that it was going to be totally compatible with Ionic 2, I don’t think I’m wrong, but even trying hard to find it today I couldn’t. Seems like it vanished. These controls seem to add lot of value to tablet and electron apps developed with Ionic 2. I downloaded the trial package and have tried to use the components at no avail. I know this is a subject that probably the support guys at C1 should help with, but if someone has any idea or has had experience integrating these controls into their Ionic 2 app, it would be fantastic if he/she could share it with the community. I would appreciate it a lot too :slight_smile:

2

Did you ever find a solution for this? I am trying to install and use the wijmo libraries into ionic 2-rc0, but do not see enough info in their documentation to do it.

3

I received this from the Wijmo team. I am trying to use the information to integrate the libraries:

4

@mdlallemont There is a new version (ending with 211) that you can download from their site’s main page (wijmo 5), it has some examples using angular with system js, now, it uses Typescript 1.8 and the typings are stored within the scripts/definitions folder within the demo project, I think with the new Typescript 2.0 the definitions would be somehow stored within the node_modules/@typings folder, this is something I am exploring right now myself.

let’s do this, I will be checking this thread the whole evening and will be posting all my findings here on how to make wijmo work. In fact, the project I am trying to upgrade from beta 11 to rc0 has Wijmo 5, Firebase, Google Maps and custom value accessors for my components that work with ngModel, so it sounds like a major challenge to get all working nice and smoothly. At least everything related with Wijmo I will be posting it here. Please do the same, perhaps working together we can make our projects work today.

Remember also that you need to upgrade to Typescript 2 (is this right?), for what I can see the definitions in the new boilerplate generated by the new Ionic CLI are now located at node_modules/@typings, so I think one important step in upgrading to rc0 is also upgrading to TS 2 (not in the migration guide :frowning: )

5

Absolutely I’ll be glad to help. This is the email I just sent to them:

Hello,

I am trying to get the Wijmo5 grid integrated with Ionic 2.0.rc0, which uses Rollup.js as the module bundler. I downloaded the latest beta code from Wijmo which lets me install an npm package. I do not know which module types Ionic is using but so far I’ve had the best luck installing the AMD package. I tried CommonJS and SystemJS with build errors.

After the npm install, I then rename all of the *.min.js files in my node_modules/wijmo folder and do a npm run build —dev which works without errors.

Inside my app.module.js file I have the following:

import { NgModule } from ‘@angular/core’;
import { IonicApp, IonicModule } from ‘ionic-angular’;
import { ClientApp } from ‘./app.component’;

import wjcGrid from ‘wijmo/wijmo.grid’;

@NgModule({
declarations: [
ClientApp,
wjcGrid.FlexGrid
],
imports: [
IonicModule.forRoot(ClientApp)
],
bootstrap: [IonicApp],
entryComponents: [
ClientApp,
wjcGrid.FlexGrid
],
providers: [
UtilProvider
]
})
export class AppModule { }

Then I reference the grid in my template:

<wj-flex-grid [itemsSource]=“data” style=“height:300px”>

I am getting an error when I run the app in the browser:

Uncaught ReferenceError: define is not defined wijmo.grid.js:13

Can you please help? Point me in the right direction at least?

Thanks,
Mike

—

I’ll let you know what they say. I had to rename

6

Alex from the Wijmo team is going to create a sample Ionic 2 app tomorrow and integrate the Flexgrid. I told him there are too many issues related to npm, modules and rollup to find a solution without them trying it from our perspective. So we’ll see what happens. Hopefully they can get it working.

7

@mdlallemont, Great! I think I can wait one day after all, I am having all sorts of issues trying to compile the project and integrating the value accessors, so I guess I have enough work to keep me busy until very late. I would really appreciate if you could post the solution provided by the wijmo guys here, I think it may help others in the community as well. Changing to rollup is going to require a good read :slight_smile: Also if it may help you to have some comments on my experience implementing it I will be glad to share my experience with Wijmo5/Rollup.

8

Any updates on your end?

I heard from Alex at Wijmo on Friday that he had success creating the Ionic sample, but no further details. I will contact him again today and see where we’re at, especially considering the update to Ionic RC1.

I’m assuming you are writing apps supporting a form factor larger than a mobile device since you’re incorporating a grid. I’d love to hear any tips about doing that, as I am targeting tablets and desktops as well.

Thanks,
Mike

9

The last I heard the Wijmo team was taking a look at the beta web pack build config for ionic and going to try and get the FlexGrid installed. I have not heard back. Any news on your end?

10

hi, I am sorry for the delay in replying to your email, I have very busy
these days working in another project, I promise you that I will be taking
another shot at this tomorrow and will let you know my findings.

11

I’m going to try it also. Maybe tomorrow depending on my workload.

On another note, I’d really like to get any tips you have on developing for larger form factors. I’ve written several ionic apps but not for browser, desktop or tablet.

12

Ok I only have a couple of hours left in the day but I am going to start in a few minutes. Did you make any progress?

13

Ok I got it to work. The latest webpack build scripts (0.0.37-2) did the trick. Bear in mind I had to use the AMD version of the NPM package for wijmo, then rename the exentions from *.min.js to *.js. Then I imported the files:

import { WjCoreModule } from ‘wijmo/wijmo.angular2.core’;
import { WjFlexGrid, WjGridModule } from ‘wijmo/wijmo.angular2.grid’;

I then added the files to the imports property of the @NgModule decorator:

WjCoreModule,
WjGridModule

Then just referenced the grid:

<wj-flex-grid [itemsSource]="data" style="height:500px"></wj-flex-grid>

That’s it. Any more questions, please let me know.

14

I want to apologize, I am back to this project, the last month I was traveling with another project and had to leave things suspended for the wijmo issue.

I tried your solution and it worked!.. at least partially :confused:. When adding a WjItemTemplate attribute to the ListBox for adding an html template got an error. Is there any specific way to declare the WjItemTemplate and other directives in Ionic? I have created a thread within the Wijmo forum, but until now the support has not been able to pinpoint the problem.

http://wijmo.com/topic/wjitemtemplate-not-working-on-angular-2-webpack-ionic-2-rc4/

I would enormously appreciate if you found a solution to this and could share it.

Thanks and happy new year!