Angularjs cordova base href

Question

trying to set the correct base href value for angularjs html5 web application to work in cordova

originally using $locationProvider.html5Mode(true) with <base href="/"> :

• The application works fine in a normal browser.
• Cordoba gives resource errors for css / js / templates, etc.
  (I believe that he is looking for resources in the root directory of the cordova, and not in the root of the platform?)

Tried a few alternatives that are posted here on SO and ui-router Frequently Asked Questions :

<base href="."> with html5 mode according to this answer:

• assets found in cordova (no resource errors)
• ui-router goes into tail rotation with an infinite loop and the following error message
  Error: Failed to execute 'pushState' on 'History': A history state object with URL 'https://page/' cannot be created in a document with origin https://example.com

<base href="./"> with html5 mode:

• assets found in cordova (no resource errors)
• gives me a scary message Error: 10 $digest() iterations reached. Aborting! Error: 10 $digest() iterations reached. Aborting! tried using frankwallis solution mentioned here but that didn't help (same error)

no base href with $locationProvider.html5Mode({enabled: true, requireBase: false});

• assets found in cordova (no resource errors)
• pages start loading inside themselves? ... for example, angular bootstraps twice in some states?

my application configuration definition is as follows:

 myApp.config(['$locationProvider', '$urlRouterProvider', '$stateProvider', '$stickyStateProvider', function($locationProvider, $urlRouterProvider, $stateProvider, $stickyStateProvider) { $locationProvider.html5Mode(true); $stateProvider .state('root', { // we define a 'root' state so that we can load some essential data prior to any template being loaded url: '', abstract: true, sticky: true, views: { 'root': { template: '<ui-view/>', } } }) .state('root.worldmap', { url : '/worldmap', templateUrl : 'templates/worldmap.tmpl.html' }) .state('root.faq', { url : '/faq', templateUrl : 'templates/faq.tmpl.html' }) .state("otherwise", { url: "*path", views: { 'root': { template: "", controller: ['$injector', function($injector) { var $state = $injector.get("$state"); $state.go('root.worldmap'); }] } }, }); $stickyStateProvider.enableDebug(true); }]); 

For reference: using this method of the alternative deviceready vs angular. Element bootstrap for cordova / browser respectively

Answer 1

OK, so the way to get this working is to remove the base href AND by disabling html5 mode:

• [optional] create and test a new branch named dev-cordova or similar
  • This allows you to quickly switch between the browser and device code.
• delete / comment <base href="/"> in the main index.html

• make sure html5 mode is disabled in app.js either

   $locationProvider.html5Mode({ enabled: false, requireBase: false }); 

  or

   $locationProvider.html5Mode(false); 

Do not forget to run cordova build ios (after you grunt / gulp etc. to compile js files)
... this ensures that files are updated in the cordova /platforms/ios/www directory.