"Tried to load angular more than once" warning - Only on initial page load

Question

I'm getting the Tried to load angular more than once warning only when I load the page initially.

Due to this warning, my bindings don't seem to work. But when I reload the page, I don't get the warning and everything seems to bind and work correctly.

I'm not using any routes or ui-view! (I've seen the other SO posts and I don't think they apply to my case).

I double checked and made sure that I only have Angular JS referenced once. My usage of Angular JS is really simple at this point.

I have Angular JS referenced in the layout / the master page in this order -

jquery
jquery-ujs   // Rails Unobtrusive jQuery Adapter
jquery-ui
angular
foundation  // ZURB Foundation 6
turbolinks  // Rails Turbolinks

Here is how my Angular template looks like -

<body ng-app="test">
   <div ng-controller="TestController">
      <div ng-init="items = <%= items.to_json %>">
         <div ng-repeat="item in items">
           <p ng-bind="item"></p>
         </div>
      </div>
   </div>
</body>

items is a Rails object and I basically hand it off to Angular for the initial load.

Here is what I have in the Javascript in my Layout page -

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

Here is what I have in the Javascript for the View / Content page -

app.controller('TestController', ['$scope', '$http', '$compile',    function($scope, $http, $compile){ 
   // Some Functions
}]);

Any help would be greatly appreciated!

Note: The Tried to load angular more than once warning shows up for every page I visit unless I reload the page and I don't get the warning and the bindings seem to work correctly.

Here is a screenshot, after visiting 4 pages without reloading any of them -

Once I reload a page, I don't get the warning and the bindings work correctly.

Apologies! I have a `ng-init` above that line. Edited the code. — Aswin Ramakrishnan, Jan 11 '16 at 09:16
Try to avoid using `ng-init` inside controllers (https://docs.angularjs.org/api/ng/directive/ngInit) when it's possible to assign values within controller itself (via $scope) — oleh.meleshko, Jan 11 '16 at 09:50
@OlegMeleshko - Still getting the warning and having the same behavior — Aswin Ramakrishnan, Jan 11 '16 at 10:04

oleh.meleshko · Answer 1 · 2016-01-11T10:09:29.793

Try this html code:

<body ng-app="test">
   <div ng-controller="TestController" ng-init="init(<%= items.to_json %>)">
      <div ng-repeat="item in items">
         <p ng-bind="item"></p>
      </div>
   </div>
</body>

And in controller:

var app = angular.module('test', []);
app.controller('TestController', ['$scope', function($scope) {        
   $scope.items = [];
   // ...
   $scope.init = function(items) {
     $scope.items = items;
   }; 
}]);

After that please check for missing template files (not loaded correctly). There is a chance that routerProvider decided to load default root document after failed attempt to load specified template (templateUrl is wrong or not loaded).

score 1 · Answer 2 · answered Jan 11 '16 at 10:12

Check

1) Does your browser network tab show more than one angular.js reference?

2) Lets see if the issue is due to the code inside. For that comment the whole code inside ng-controller div.

<body ng-app="test">
<div ng-controller="TestController">
  <!--<div ng-init="items = <%= items.to_json %>">
          <div ng-repeat="item in items">
            <p ng-bind="item"></p>
          </div>
  </div>-->
</div>
</body>

score 1 · Accepted Answer · edited May 23 '17 at 12:31

I finally got this issue resolved. This is NOT an issue with Angular JS (or just Angular JS).

I removed all the Angular JS code and I was still getting the warning. The issue was with Turbolinks.

I believe there are 2 solutions.

Solution 1 - Remove Turbolinks

I removed Turbolinks from my Layout's page's JS reference and restarted the server and everything seemed to work fine.

Here is how my javascript references looks like -

jquery
jquery-ujs
jquery-ui
angular
foundation

If you're not really using Turbolinks, you might as remove it.

Solution 2 - Add `data-no-turbolink` attribute

I came across this thread - Using angularjs with turbolinks

But apparently, the marked answer did't seem to work for me.

As one of the comments pointed out, it works for angular-1.0.6 and less.

Although, one of the answers suggested to add data-no-turbolink attribute to tag where you specify ng-app. This worked like a charm.

My version of Angular is 1.4.8

So, here is how my Angular template looks like now -

<body ng-app="test" data-no-turbolink>
  <div ng-controller="TestController">
     <div ng-init="items = <%= items.to_json %>">
        <div ng-repeat="item in items">
          <p ng-bind="item"></p>
        </div>
     </div>
  </div>
</body>

Hopefully this helps someone.

"Tried to load angular more than once" warning - Only on initial page load

3 Answers3

Solution 1 - Remove Turbolinks

Solution 2 - Add data-no-turbolink attribute

Solution 2 - Add `data-no-turbolink` attribute