Error encountered with MobileFirst version 8 and Angular JS v1.5.3 integration using Bootstrap

I am encountering an issue with my Cordova application that integrates with MobileFirst Platform version 8, Ionic version 1.3.1, and AngularJS version 1.5.3. Upon bootstrapping AngularJS to connect the app to MobileFirst Platform, I encounter the following error:

Error in Success callbackId: WLAuthorizationManagerPlugin561212842 : Error: [$injector:modulerr] Failed to instantiate module ng due to:
TypeError: Cannot set property 'aHrefSanitizationWhitelist' of null
    at $$SanitizeUriProvider (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:30845:35)
    at new <anonymous> (file:///android_asset/www/plugins/cordova-plugin-mfp/worklight/worklight.js:1079:23)
    at Object.instantiate (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:18010:14)
    at provider (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:17824:36)
    at file:///android_asset/www/lib/ionic/js/ionic.bundle.js:13735:32
    at forEach (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:13705:20)
    at Object.provider (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:17814:9)
    at ngModule (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:15863:16)
    at Object.invoke (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:17995:19)
    at runInvokeQueue (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:17888:35)
http://errors.angularjs.org/1.5.3/$injector/modulerr?p0=ng&p1=TypeError%3A%…2F%2Fandroid_asset%2Fwww%2Flib%2Fionic%2Fjs%2Fionic.bundle.js%3A17888%3A35)

Is there anyone who can assist me in resolving this issue?

I have come across a similar question that was posed in the past regarding MobileFirst Platform version 7, but it appears to remain unsolved.

Thank you for any assistance provided!

javascriptangularjsionic-frameworkibm-mobilefirstangular-ui-bootstrap

Answer №1

Keep an eye out for the upcoming release of cordova-plugin-mfp, which will include the necessary fixes to resolve the issue mentioned above.

In the meantime, you can implement the following workaround to address the issue:

  1. Find and replace the code snippet below in the worklight.js file located at various paths depending on the operating system:

Android - Project/plugins/cordova-plugin-mfp/src/android/assets/www/worklight/worklight.js

iOS - Project/plugins/cordova-plugin-mfp/src/ios/www/worklight/worklight.js

Windows - Project/plugins/cordova-plugin-mfp/src/windows/www/worklight/worklight.js

function bind(context) {
if (arguments.length < 2 && WLJSX.Object.isUndefined(arguments[0])) {
return this;
}
var __method = this,
args = slice.call(arguments, 1);
return function() {
var a = merge(args, arguments);
return __method.apply(context, a);
};
}

Please update it with the following: 

function bind(obj) {
var args = Array.prototype.slice.call(arguments, 1),
self = this,
Nop = function() {
},
bound = function() {
return self.apply(
this instanceof Nop ? this : (obj || {}), args.concat(
Array.prototype.slice.call(arguments)
)
);
};
Nop.prototype = this.prototype || {};
bound.prototype = new Nop();
return bound;
}
  1. Remove the current platform and then add it again.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Why is the AJAX request not functioning properly after using jQuery's hide method?

It seems that the first AJAX call works fine when I hide the div, but subsequent requests are not going through. a) Clicking on the signup button triggers an AJAX request to display the details. b) Pressing the hide button hides everything within that di ...

javascriptjqueryhtmlajax

Ways to create a shorter upper line compared to the lower line (inside a div)

I'm dealing with an unordered list that has 3 list items, each represented by a green box containing an image and 3 divs (title, location, price). My main focus is on the title div of each box. If the title is long enough to span 2 lines, I need the ...

javascriptjqueryhtmlstring-length

Is Cognito redirect causing issues with Angular router responsiveness?

When employing social login via AWS Cognito, Cognito sends a redirect to the browser directing it to the signin redirect URL after signing in. In this case, the specified URL is http://localhost:4200/home/. Upon receiving this redirect, the application in ...

javascriptangularangular-routingangular-routeraws-amplify

Why is the lifecycle callback not being triggered?

I am currently learning how to develop with Vue.js. I have been trying to use the lifecycle callbacks in my code. In my App.vue file, I have implemented the onMounted callback. However, when I run the code, I do not see the message appearing in the consol ...

javascripttypescriptvue.js

Troubleshooting Display Issue with Nested Div Selection in jQuery Tooltips

I have a long list of data consisting of 30-50 rows, each row needing its own distinct tooltip. Creating unique IDs for each row would require unnecessary JavaScript code. My goal is to utilize jQuery to retrieve the tooltip from the nested <DIV> wit ...

javascriptjqueryhtmljquery-selectors

Tips for transferring the id from a delete button to a delete button in a popup dialog box

In my frontend application, there is a table where each row corresponds to an item. For every row, there is a "Remove" button that triggers a warning popup upon being clicked. The intention is to pass the item's ID in this popup so that if the user co ...

javascriptreactjsnext.jspopuptailwind-css

Swap out the variables in your function with the values selected from the dropdown menu

I've recently started delving into writing JS functions and I'm facing a challenge with the following scenario: On an HTML page, I want to change a variable within a lodash function based on the value of a dropdown and display the result in a HT ...

javascripthtmlarraysjsonlodash

javascript guide on converting an array into the correct JSON format

I'm working with an array that has the following structure: var arr = [ [{a:1}], [{b:1}], [{c:1}], [{d:1}], [{e:1}] ] My goal is to format it into the proper format as shown below: [{a:1},{b:1},{ ...

javascriptnode.js

Creating numerous Facebook posts using jQuery technology

I am currently facing a challenge when attempting to publish multiple facebook posts on a webpage using jQuery. Although I have managed to successfully post the first facebook post, I am encountering difficulties when trying to post another one. What coul ...

javascriptphpjqueryangularjsfacebook

How can I identify duplicate values within two distinct javascript objects?

Consider two sets of JavaScript arrays containing objects: var allUsers=[{name:"John",age:25},{name:"Emily", age:30},{name:"Michael",age:22}] and var activeUsers=[{name:"John",status:"active"},{name:"Sarah", status:"active"}] I am attempting to iterat ...

javascriptjqueryjson

Reducing the slide margins in impress.js?

When using Impress.js, I noticed that the default slides have a large left margin (or padding - it's hard to determine with Firefox's Inspector). I have a slide with a wide <pre> block that would fit if it were aligned to the left, but it d ...

javascriptcssimpress.js

Encountering the error message "Unknown provider: $uibModalInstanceProvider" in Angular 1.5 with angular

I am currently working on an Angular 1.2 project and I have a controller that I would like to replace with a Component. This new component is launched from uibModal and it also includes another directive. Everything was running smoothly before the change, ...

angularjsangularjs-directive

Using Webpack to directly embed image paths in your code

I am working on a project that uses webpack and vue.js. I encountered an issue when trying to add an image to the vue template using src '/images/imageName.png', which resulted in a 404 error. How can I adjust the configuration to recognize absol ...

javascriptvue.jswebpack

Node is currently posing a challenge for the installation of packages

I am currently facing an issue while setting up my raspberry pi 3. I am attempting to install and execute a node code, but I encountered a problem during the installation of packages using npm. After trying multiple times with different versions of node ( ...

javascriptnode.jsnpmraspberry-piraspbian

An issue arises even with the proper configuration in place: "SessionNotCreatedError: session cannot be established as Chrome version needs to fall within the range of 70 to 73."

During my automated testing with selenium-webdriver, I encountered an issue while building a driver using chromedriver. Everything was functioning perfectly until one day, when I ran a test and received the following error message: SessionNotCreatedErro ...

javascriptselenium-webdrivernpmwebdriverselenium-chromedriver

Utilize Firestore's limit feature with variables

Is it possible to utilize a variable (page) in the limit parameter within Firebase Firestore while using Vue? export default { data() { return { page: 1, } }, methods: { }, firestore: { Words: db.collection("Words").w ...

javascriptfirebasevue.jsgoogle-cloud-firestore

What is the best way to retrieve the input value from post.ejs?

app.js var express = require('express'); var bodyParser = require('body-parser'); var app = express(); var passport = require('passport'); var localStrategy = require('passport-local'); var axios = require("axi ...

javascripthtmlnode.js

Checkbox paired with a read-only text column

I have a simple HTML input field with JavaScript functionality, which includes a checkbox. I am trying to write text in the input field when the checkbox is checked, and make the input field read-only when it is not checked. Can anyone provide an example ...

javascripthtmlcheckbox

The compilation of the module has encountered an error with the PostCSS loader. There is a SyntaxError at line 2, character 14 indicating an unknown

I am developing an Angular 8 application. Currently, I am incorporating AlertifyJs into my project. In the styles.css file of Angular, I have imported these libraries: @import '../node_modules/alertifyjs/build/alertify.min.js'; @import '. ...

javascriptangulartypescriptnode-modules

Vue.js tutorial: Disabling button dynamically based on empty data array

My project involves creating a shopping cart application using Vue.js: var app = new Vue({ el: "#app", data: { items: [ { id: 1, name: "Item 00", spec: "spec 00", price: 400, quantity: 1, unit: &quo ...

javascriptvue.js