Angularjs + route - Failed to execute 'replaceState' on 'History': A history state Object with URL '...' cannot be created in a Document

Question

Good Morning Everyone,

Someone has already had the problem of the XDK / Cordova application getting looped when booting. This error only occurs on the device.

It stays "rebooting" until error occurs below

Answer 1

I found the solution to the problem

Initially seeing this post I realized where was the error https://stackoverflow.com/questions/25790349/angularjs-infinite-loop-with-ng-view

The problem is that my system was in an infinite loop because the conditions of the wheel were not supplied, so to solve my problem it took two actions.

1. When configure wheel not use $locationProvider.html5Mode(true);
2. When create navigation use # <a href="#/home">Home</a>

Reinforcement that this solved my problem, it may not be usual for everyone.

Follows the complete routing

var app = angular.module('app',['ngRoute']);

app.config(function($routeProvider, $locationProvider)
{
   // remove o # da url
   //$locationProvider.html5Mode(true);

   $routeProvider

   // para a rota '/', carregaremos o template home.html e o controller 'HomeCtrl'
   .when('/', {
       templateUrl : 'views/home.html',
       controller : 'HomeCtrl',
       controllerAs : 'ctrl'
   })

   // para a rota '/sobre', carregaremos o template sobre.html e o controller 'SobreCtrl'
   .when('/sobre', {
      templateUrl : 'views/sobre.html',
      controller  : 'SobreCtrl',
      controllerAs : 'ctrl'
   })

   // para a rota '/contato', carregaremos o template contato.html e o controller 'ContatoCtrl'
   .when('/contato', {
      templateUrl : 'views/contato.html',
      controller  : 'ContatoCtrl',
      controllerAs : 'ctrl'
   })

   // caso não seja nenhum desses, redirecione para a rota '/'
   .otherwise ({ redirectTo: '/' });
});

This is my index.

<ul class="nav nav-tabs">
         <li ng-class="{active: activetab == '/'}"><a href="#/home">Home</a></li>
         <li ng-class="{active: activetab == '/sobre'}"><a href="#/sobre">Sobre</a></li>
         <li ng-class="{active: activetab == '/contato'}"><a href="#/contato">Contato</a></li>
      </ul>


    <div ng-view></div>

At last my controllers

app.controller('HomeCtrl', function($rootScope, $location)
{
    $rootScope.activetab = $location.path();
    var ctrl = this;

    ctrl.init = function()
    {
        console.log(Date());

        $location.replace();
    }


});

app.controller('testeCtrl', function($rootScope, $location, $scope)
{
    $rootScope.activetab = $location.path();
    $scope.titulo = "Titulo 1";

});


app.controller('SobreCtrl', function($rootScope, $location)
{   
   $rootScope.activetab = $location.path();
   var ctrl = this;

   ctrl.init = function()
   {
        console.log("Sobre init");
   }
});



app.controller('ContatoCtrl', function($rootScope, $location)
{

   $rootScope.activetab = $location.path();

   var ctrl = this;


   ctrl.init = function()
   {
        console.log("Contato init");

        if($rootScope.contatoCount ==null)
            $rootScope.contatoCount = 0;

        $rootScope.contatoCount++;
   }
});