AngularJS + route - Failed to execute 'replaceState' on 'History': A history state object with URL '...' can not be created in a document

0

Good Morning,

Has anyone had the problem of applying XDK / CORD to looping when initializing. This error only occurs on the device.

It will "reboot" until the error below occurs

    
asked by anonymous 30.08.2016 / 16:06

1 answer

1

I found the solution to the problem

Initially seeing this post I realized where the error was link

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

  • When setting the wheel do not use $locationProvider.html5Mode(true);
  • When creating the navigation use # <a href="#/home">Home</a>
  • I stress that this solved my problem, it may not be usual for everyone.

    Follow 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>
    

    Finally 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++;
       }
    });
    
        
    30.08.2016 / 19:29