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

Confirm that two Angular form fields contain different content

My angular form has two fields labeled Location A and Location B. I am looking to create a directive that can compare these two fields and validate them accordingly, while also styling the valid or invalid field based on whether both locations are the same ...

angularjsangularjs-directiveangular-validation

Enhancing your scheduling capabilities with Kendo UI Web Scheduler - Dynamically managing resources dataSource

I've been attempting to dynamically change the resources dataSource in my Scheduler, but unfortunately, the changes I am making are not reflecting in the Scheduler interface. Here is how I have set up the scheduler: $("#scheduler").kendoScheduler ({ ...

javascriptkendo-uischedulerkendo-schedulerkendo-datasource

Retrieve the radio button value without using a key when submitting a form in JSON

Looking to extract the value upon form submission in Angular, here is the code: In my Typescript: constructor(public navCtrl: NavController, public navParams: NavParams, public modalCtrl: ModalController, public formBuilder: FormBuilder, public alertCtrl ...

javascriptangularjsjsonformstypescript

Displaying a collection of items using Rails, implementing form_for and integrating Ajax functionality

Looking to display a list of "Interests" for users to "follow" by clicking on a button linked to the Interest's image. Once the follow button is clicked, the Interest and its image should be removed from the list. Attempting to use a hide function in ...

javascriptruby-on-railsajaxformsruby-on-rails-4

Does minifying Angular JS code enhance overall performance, or is it specifically focused on loading speeds?

I currently have 40-60 scripts in my index, with most of them being Angular. I am interested in combining them into a single script for production purposes. Is this possible? Will all the logic still work correctly? And which library is recommended for th ...

angularjsminify

Newbie to Angular encounters issue with Yeoman: failure to define 'app'

I created a task list that you can view here: https://github.com/EdmundMai/angular_todolist Within my controller, I am able to globally access the toDoListApp anywhere I like. Now, as I embark on a new project using Yeoman, I find myself in a similar set ...

angularjs

I am facing difficulties in showing the data in my Ionic view when attempting to connect to my php API

Attempting to utilize a PHP API for data display is posing a challenge. The PHP side appears to be functioning correctly, as the data is being displayed through echo. However, encountering an error when trying to fetch the data in the Ionic view using http ...

phpangularjsionic-frameworkionic2ionic3

Concealing numerous tables depending on the visibility conditions of subordinate tables

I have the following HTML code which includes multiple parent tables, each with a specific class assigned to it: <table class="customFormTable block"> Within these parent tables, there are child tables structured like this: <table id="elementTa ...

javascriptjquery

Can saving data within a mongoose pre-save hook initiate a continuous loop?

Currently, I am developing an API for a forum system which includes functionalities for users, forums, and posts. In my MongoDB Database, there is a 'categories' collection where each category acts as a container for a group of forums. Each categ ...

javascriptnode.jsmongodbmongoose

The file "tfjs_binding.node" could not be located in the directory where @tensorflow is installed

After attempting to utilize certain functionalities of TensorFlow, I encountered an error indicating that "tfjs_binding.node" was not found in the @tensorflow installation folder. I made sure to install Python 2.7 as a prerequisite for TensorFlow and veri ...

javascriptpythonnode.jstensorflownpm

Which specific page initiates the post request?

Seeking help with my post request that originates from a specific page on my website: reqdata = 'text=' + mytext; $.ajax({ type: "POST", url: "/request.php", data: reqdata, cache: false, success: function(html) { alert(html) } ...

javascriptphpajaxhttp-post

Creating a custom date selection component in Angular 2 RC1

Can anyone recommend a datepicker that is compatible with Angular 2 RC1? I noticed that ng2-datepicker seems to be using angular2 RC1, but when trying to install it, it's asking for Angular 2 Beta. Would appreciate any assistance. Thank you in advan ...

javascriptdatepickerangularnpm

Turn off error notifications from eslint parsing

Within my code, there is a conditional export that looks like this: if (process.env.NODE_ENV === 'testing') export myFunc; While in es6, this type of statement is typically not allowed due to the requirement for imports and exports to be top- ...

javascriptnode.jsecmascript-6babeljseslint

"Upload a video file and use JavaScript to extract and save the first frame as an image

I have a webpage where users can upload a video file, and the page will generate a thumbnail based on a timestamp provided by the user. Currently, I am focusing on generating the thumbnail from the FIRST frame of the video. Here is an example of my progr ...

javascripthtmltypescript

Encountering difficulties accessing Node.JS Sessions

Hey there, I am currently working on integrating an angular application with Node.js as the backend. I have set up sessions in Angular JS and created my own factory for managing this. Additionally, I am utilizing socket.io in my Node.js server and handling ...

javascriptangularjsnode.jssession

What is the process for including a JavaScript file in an HTML document?

Greetings to all and thank you for taking the time! I have a straightforward query for you.. I have designed an html page featuring only a basemap (open street map). Moreover, I possess a javascript file which utilizes your coordinates to calculate a perce ...

javascripthtmlfunctionpopupjsfiddle

Fetching deeply nested data from JSON within Angular Material tables - ANGULAR

Having trouble retrieving data from localhost, especially when it's in a different structure. Any suggestions on how to properly extract and display this data for the user? This is my attempted approach, but I'm encountering an error message: ER ...

javascriptjsonangularangular-materialnested

How can a JQuery slideshow be programmed to only iterate once?

Looking to create a slideshow that transitions between images every two seconds? Check out the code snippet below: HTML: <div class="fadeIn"> <img src="img/city.png" class="remimg" id="city"> <img src="img/shop.png" class="remimg" ...

javascriptjqueryhtml

What are the steps to incorporate @svgr/webpack into turbopack within a next.js project?

I'm encountering an issue with turbopack and @svgr/webpack in my project. According to the documentation, they should work together but it's not cooperating. When I run the project without using --turbo (turbopack), everything functions as expec ...

javascriptnext.jsturbopack

How to dynamically update the maximum y-axis value in Vue-Chart.js without having to completely re-render the entire

Currently, I am involved in a project that requires the implementation of various charts from the Vue-Chartjs library. One specific requirement is to dynamically change the maximum value on the Y-axis whenever users apply different filters. To achieve this ...

javascriptdjangovue.jsvue-chartjs