Ionic Mobile First Integration

2019-07-08 20:55发布

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.

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>

2条回答
一夜七次
2楼-- · 2019-07-08 21:22

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

查看更多
Evening l夕情丶
3楼-- · 2019-07-08 21:35

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

查看更多
登录 后发表回答