Rails and AngularJS: WARNING: Tried to load angular more than once

Question

Firstly, I am fairly sure that I must be missing something very obvious... but I just can't get rid of the message "WARNING: Tried to load angular more than once.". This happens when my Rails / AngularJS application first loads.

Here is my application.js;

//= require jquery
//= require jquery_ujs
//= require turbo links
//= require angular/angular
//= require angular-route/angular-route
//= require angular-rails-templates
//= require_tree ./templates
//= require_tree .

Pretty vanilla (I assume - I'm a bit new to this).

And here are my (Angular) routes (CoffeeScript);

txtracker.config([ '$routeProvider',
  ($routeProvider)->
    $routeProvider
.when('/',
  templateUrl: "home.html"
  controller: 'HomeController'
).when('/history',
  templateUrl: "history.html"
  controller: 'HistoryController'
).when('/chart',
  templateUrl: "chart.html"
  controller: 'ChartController'
)])

I am using Devise - I mention this because I thought that perhaps the Devise redirects where causing the issue. However, I eliminated Devise and the problem persists (to put that another way, a straight navigation to / still causes the problem to occur).

I have the following tag in application.html.erb

<html ng-app="tx-tracker">

And that's the only ng-app directive that I have.

Lastly, here is the actual page loaded that causes the error;

<html ng-app="tx-tracker">
<head>
<link rel="stylesheet" media="all" href="/assets/application-dd01b437cf7d1d465bed21959f6da7e0.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/accounts-1c6f37b8b4905fe9cc7fb25b04ef9760.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/active_admin-0f21e6c9e6044051c0c52dcd4262ea20.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/beneficiaries-1c6f37b8b4905fe9cc7fb25b04ef9760.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/home-1c6f37b8b4905fe9cc7fb25b04ef9760.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/running_totals-1c6f37b8b4905fe9cc7fb25b04ef9760.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/transactions-1c6f37b8b4905fe9cc7fb25b04ef9760.css?body=1" data-turbolinks-track="true" />
<script src="/assets/jquery-15a176808a3cff130a9453a832beb72a.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/jquery_ujs-b5c5d930a7c1ead542e5769af6929f4e.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/turbolinks-16cc8f0b473ddbbe2f574bcd5b36af20.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/angular/angular-84e98c67b704a328d9f18b8f7b7661fb.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/angular-route/angular-route-b3b281e56802996aed73ba3d4d2c8fa7.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/angular-rails-templates-13d0d9d089a44dcf7114cdf6d3d7c154.js?body=1" data-turbolinks-track="true">    </script>
<script src="/assets/templates/chart-90cc3f0884c76a8890fb5f7f87ba0195.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/templates/history-68b7d2e9f02c12c4de62851bfd77877d.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/templates/home-4241b1ea204afbf804e70661ceb3e993.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/accounts-bd6118eecbbff92ee3c28882e7c3af98.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/jquery-ui/core-94d877a3ac2b04bb678b04b41af7a78c.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/jquery-ui/datepicker-dea2d7f6d6afc09e4c39b73397bea382.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/jquery-ui/widget-aa2cecb4924af012301fa1dededed6f4.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/jquery-ui/button-bd22b7d0421cfc87742584740ffa7922.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/jquery-ui/mouse-b7964d05e33520b9bae27562cdb559e2.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/jquery-ui/draggable-a21503ec345ff7643c544c1b5bfdd383.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/jquery-ui/position-28a9b47cd6c435d2f4fdf62fcfd37e51.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/jquery-ui/resizable-f324f713372ef7174ac6c3cd5200e9db.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/jquery-ui/dialog-95cf2bb43069f0094512dc23f4a33941.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/jquery-ui/sortable-1da535e8604c471e49010c49acda6d86.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/jquery-ui/tabs-45615c90b96d98ccb5b8385944c7e12d.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/active_admin/base-9795b05f2f85cf802a504fbd5046c0e4.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/active_admin/lib/batch_actions-a27bc0be5a50a362ed3d3346aacf9efe.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/active_admin/lib/checkbox-toggler-a8d02b095470a79ec037a63ee1115a4e.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/active_admin/lib/dropdown-menu-ea5de074030407bc75426cb59df227e5.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/active_admin/lib/flash-7b4f2f51803f90ea0cbf02eb16c0a37c.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/active_admin/lib/has_many-5463cd0d3067aa378d6d0ee2e7fde267.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/active_admin/lib/modal_dialog-fc28f8f585a15bebba06c6069463376d.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/active_admin/lib/per_page-2e250a4a0b706f8c48e8f95cedb16658.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/active_admin/lib/popover-109fde370c4c3fa7c3563965b5529e10.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/active_admin/lib/table-checkbox-toggler-103e993857c740c166fe4fb9de55657e.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/active_admin/ext/jquery-ui-e5421766760505602b508810530ad531.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/active_admin/ext/jquery-7c055e1683a328e236b4d82df390ae5d.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/active_admin/application-67769c0b651b00b4b5218ca2d5f2608f.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/active_admin-493d49ba2e596c67a01a1ab5476a9088.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/beneficiaries-bd6118eecbbff92ee3c28882e7c3af98.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/home-665aaf5d49df8c7c9b742b7c9ad5f915.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/running_totals-bd6118eecbbff92ee3c28882e7c3af98.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/transactions-bd6118eecbbff92ee3c28882e7c3af98.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/application-43401e24b0a6c37137c6b21cc29d7929.js?body=1" data-turbolinks-track="true"></script>

<div>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
      <span class="sr-only">Toggle Navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">
      <i class="fa fa-home"></i>
      <span>Tx Tracker</span>
    </a>
  </div>

  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
      <li><a href="#/">Home</a></li>
      <li><a href="#/history">History</a></li>
      <li><a href="#/chart">Chart</a></li>
    </ul>
  </div>
</nav>

<div ng-view class="view-frame animate-view" style="padding-top: 70px;">
</div>
</div>

</body>
</html>

And finally, I am doing this in my home.js to configure the tx-tracker module;

txtracker = angular.module('tx-tracker', [
'ngRoute',
'home',
'history',
'chart',
#  'highcharts-ng',
'templates'
])

Any help on this would be greatly appreciated! Thanks! Ben

Thanks @RiccardoDegan. However (and I should have mentioned this), I've already tried that with no luck. I should also mention that I have a (Rails) HomeController that renders index.html.erb as well as a Angular template called home.html (in app/javascripts/templates) - I don't suppose that these could be interfering with each other somehow? — benjimix
– benjimix, Commented May 10, 2015 at 4:43
Where is your folder named as angular. Is it under /app/assets/JavaScripts. If yes pls remove require .tree — Hemali
– Hemali, Commented May 10, 2015 at 4:57
It is under assets, @Hemali. I will try that and report back. Thanks! I also detect a theme here - that I need to be careful with my JS asset loading. — benjimix
– benjimix, Commented May 10, 2015 at 5:51
Hi @Hemali - sorry, that didn't work.. but I think I get the gist of it. If it's something to do with my JS asset loading I'll play around a bit! — benjimix
– benjimix, Commented May 10, 2015 at 11:51

benjimix · Accepted Answer · 2015-05-10 12:29:46Z

2

Apologies everyone and thanks for the help. It appears that I was not managing my assets pipeline well. I am not sure exactly what the issue was, but this;

rake assets:clobber

fixed the issue. I must have had something cached within the assets pipeline.

But perhaps this will help someone else - sometimes

rake assets:clean

is not enough!

Thanks everyone for the help!

(Oh and my application remained untouched - 'turbolinks' and 'require .' are still present. I have heard that these items can cause issues, but not for me yet, so I have kept them in place for know).

answered May 10, 2015 at 12:29

benjimix

6197 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Rails and AngularJS: WARNING: Tried to load angular more than once

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related