I developed Ionic Side Menu app and integrated IBM MobileFirst Platform Foundation 7.1 using the below link.
https://www.raymondcamden.com/2015/03/23/working-with-ibm-mobilefirst-and-the-ionic-framework/
When I tried to build & run its throwing an error
worklight.js:5383 Uncaught Exception: Uncaught Error: [$injector:modulerr] Failed to instantiate module ng due to: TypeError: Cannot set property 'aHrefSanitizationWhitelist' of null at $$SanitizeUriProvider
I googled and found the below Stack overflow link, but tried with using latest angular version still same issue.
- AngularJS 1.5 error bootstrap IBM Mobilefirst
- Failed to instantiate module error in Angular js
- https://github.com/angular/angular.js/issues/9692
IBM MobileFirst Platform Foundation 7.1
Java SDK 1.8
IONIC version 1.7.14
app.js
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'starter.controllers'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
/* if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}*/
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
})
.state('app.search', {
url: '/search',
views: {
'menuContent': {
templateUrl: 'templates/search.html'
}
}
})
.state('app.browse', {
url: '/browse',
views: {
'menuContent': {
templateUrl: 'templates/browse.html'
}
}
})
.state('app.playlists', {
url: '/playlists',
views: {
'menuContent': {
templateUrl: 'templates/playlists.html',
controller: 'PlaylistsCtrl'
}
}
})
.state('app.single', {
url: '/playlists/:playlistId',
views: {
'menuContent': {
templateUrl: 'templates/playlist.html',
controller: 'PlaylistCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/playlists');
});
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<!-- <script src="cordova.js"></script> -->
<script>window.$ = window.jQuery = WLJQ;</script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/wlinit.js"></script>
</head>
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
</html>
Since Angular seems to be the only variable that changes, this could potentially be an Angular issue instead.
I'd suggest trying the updated version of this
https://github.com/csantanapr/mfp-ionic-templates
Update: MobileFirst Platform Foundation 7.1 now supports Angular 1.5; upgrade to the latest available iFix from IBM Fix Central.
there is an incompatibility between Angular 1.5 and MFP 7.1.
To successfully make an Ionic app with MFP 7.1, an ionic version below 1.3 must be used (1.2.4 Copenhagen is the latest).
Ionic 1.3 introduced Angular 1.5