My ionic application works well in Chrome, but after generating the .apk file, it encounters issues. In Chrome's developer mode, there is a warning:
SVG's SMIL animations (<animate>, <set>, etc.) are deprecated and will be removed. Please use CSS animations or Web animations instead.Some important details:
- I am only using ng-cordova plugin and Google Maps.
- I use TypeScript for development.
- I followed the steps at http://ionicframework.com/docs/guide/publishing.html to generate the .apk file.
After installing the application on an Android device, it runs but only displays my parent view:
The index.html file serves as my parent view:
<!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>
<!-- Ionic/AngularJS dependencies -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>
<script src="http://maps.google.com/maps/api/js?key=My_Api_Kei"></script>
<script src="my_apps_js"></script>
</head>
<body dir="rtl" ng-app="appName">
<ion-nav-view animation="slide-right-left"></ion-nav-view>
</body>
</html>This section contains my run and config functions:
export var ehmcoModule = angular.module('ModuleName', ['ionic', 'ngCordova']);
ehmcoModule.run(function($ionicPlatform: ionic.platform.IonicPlatformService) {
$ionicPlatform.ready(function() {
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();
}
});
});
ehmcoModule.config(function($stateProvider: ng.ui.IStateProvider, $urlRouterProvider: ng.ui.IUrlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: Controllers.EhmcoController.controllerName
})
.state('app.home', {
url: '/home',
views: {
'menuContent': {
templateUrl: 'templates/home.html',
controller:Controllers.HomeController.controllerName
}
}
})
.state('app.category', {
url: '/category',
views: {
'menuContent': {
templateUrl: 'templates/category.html',
controller:Controllers.CategoryController.controllerName
}
}
});
$urlRouterProvider.otherwise('/app/home');
});
I suspect this issue is not related to routing since I've added a menu item in the parent view that navigates to the first page (app/home). The navigation occurs, but Angular library fails to load, resulting in the bound values not being displayed.