How to use IBM MFP 8.0 functions(WL, WLResourceRequest) in ionic 2 development

Question

I am a fresher in IBM MobileFirst 8.0. How to use IBM MFP functions(WL, WLResourceRequest) in ionic 2 projects?

I have created an Ionic Project and added MFP plugin and I added the below lines into Home Component TS file.

WL.Client.setSharedToken({key: "name", value: "Karhik"});
    let str: String = WL.Client.getSharedToken({key: "name"});
    console.log(str);

But I am getting the below error. How to solve the issue. Or given any reference documents for Ionic 2 + IBM MFP 8.0

And I tried to like this below. But same error is returned,

Home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Device } from '@ionic-native/device';

declare var wlCommonInit: () => {

};

declare var WL;

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  providers: [ Device ]
})
export class HomePage {

  constructor(public navCtrl: NavController, private device: Device) {
    console.log("device platform " + device.platform);

    WL.Client.setSharedToken({key: "name", value: "Karhik"});
    let str: String = WL.Client.getSharedToken({key: "name"});
    console.log(str);
  }

  wlCommonInit() {
    console.log("wlCommonInit TRIGGERED");

  }

}

But it not working. I need to know how to use IBM MFP 8.0 in IONIC 2

After adding the code into Main.ts Below error is returned in console.

This error happens if you invoke WL objects before MFP plugin initialization is complete. You should wait until MFP bootstrapping is complete , to add any code that initializes MFP objects - "WL" and others. — Vivin K, Jul 18 '17 at 12:35
Hi, Any event will trigger after MFP bootstrapping is completed? or Any other sample you have please post for my reference. — Karthik Sridharan, Jul 18 '17 at 12:53
Hi, I am using Ionic 2, I don't know where to add wlcommoninit() method. There doesn't have any main.js. There have main.ts. If i add the wlcommoninit() function in HomeComponent. I getting 'wlcommoninit() is declared but not used' — Karthik Sridharan, Jul 19 '17 at 07:57
Possible duplicate of [Cannot find referecnce to WLResourceRequest in Ionic 2 App](https://stackoverflow.com/questions/38356571/cannot-find-referecnce-to-wlresourcerequest-in-ionic-2-app) — Prerak Tiwari, Aug 17 '17 at 19:35

score 2 · Answer 1 · answered Jul 19 '17 at 06:13

2

WL has to be loaded before other javascript files for WL functions to be available in these files. The initialization of WL happens in wlcommoninit() (it's usage can be found here). The recommended approach is to ensure that the other js files are loaded in this function.

An alternative to overcome this issue is to ensure that the below 3 scripts are included before the other js scripts in the html.

<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/platform.js"></script>
<script type="text/javascript" src="js/main.js"></script>

answered Jul 19 '17 at 06:13

Keerthi

423
3
9

Hi, Keerthi. I am using Ionic 2, There have only main.ts – Karthik Sridharan Jul 19 '17 at 07:59
1

In your ts file, move the WL.Client.setSharedKey() to within wlCommonInit. Another document you can use: https://mobilefirstplatform.ibmcloud.com/blog/2016/08/11/best-practices-for-building-angularjs-apps-with-mobilefirst-foundation-8.0/ – Vivin K Jul 19 '17 at 08:37
wlCommonInit() function is not triggered. @Vivin K – Karthik Sridharan Jul 19 '17 at 09:06
I added the wlcommoninit in this file temporary. But it not triggered. If I paste the code into wlcommonint. This line not run. – Karthik Sridharan Jul 19 '17 at 09:17
1

Can you try the solution @Keerthi has suggested? If not provide your sample that recreates the issue – Vivin K Jul 19 '17 at 10:10
Ya @VivinK I tried. But it not working. I don't have any platform.js file. – Karthik Sridharan Jul 19 '17 at 11:32
Please share if you have any sample with MFP and Ionic 2 – Karthik Sridharan Jul 19 '17 at 11:35
1

platform.js is an illustration. Put the file where you have your wlCommonInit() – Vivin K Jul 19 '17 at 12:54
Please understand. I don't know where to add the wlCommonInit() in Ionic 2 project. In ionic v1, I tried and its working fine. please help me how to use MFP in ionic 2. – Karthik Sridharan Jul 19 '17 at 13:11
Hi Keerthi, I tried. I am getting, 'wlCommonInit' is declared but never used. L7: declare var WL; L8: function wlCommonInit() { L9: console.log("wlCommonInit TRIGGERED"); I attached the screenshot in my question. – Karthik Sridharan Jul 20 '17 at 06:05
wlCommonInit is not triggered – Karthik Sridharan Jul 20 '17 at 06:33
wlCommonInit is not triggered.I wrote in app.component.ts.please share solution – Pranita Patil Jan 09 '18 at 17:04

score 1 · Answer 2 · answered Aug 09 '17 at 17:08

1

Add the following line before the import statements instead of declaring WL and wlCommonInit.

/// <reference path="../../../plugins/cordova-plugin-mfp/typings/worklight.d.ts" />

This should resolve the issue which you are facing.

answered Aug 09 '17 at 17:08

Vittal Pai

3,317
25
36

How to use IBM MFP 8.0 functions(WL, WLResourceRequest) in ionic 2 development

2 Answers2