WARNING: Tried to load angular more than once. Angular JS

javascript angularjs gruntjs

77,278

Solution 1

In my case this was due to the following html code:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Testapp</title>
</head>

<body ng-app="testApp">

  <main ui-view>

  <script src="bower_components/jquery/jquery.js"></script>
  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>

  <script src="scripts/main.js"></script>
</body>

</html>

As you can see, the <main> is not closed. This led to my variant of 'WARNING: Tried to load angular more than once.' issue.

Solution 2

This problem also is caused by using the current page as the templateUrl. This is especially problematic as it results in an infinite loop referencing itself over and over.

If you are getting an infinite loop that crashes your page, it's probably this. If you are getting CORS errors, it's probably due to including a script tag from another domain in your template.

$routeProvider.when('/', {
   templateUrl: 'an/absolute/url/to/the/current/page.html'
});

Solution 3

I had this problem because my templateUrl path was wrong due to my index.html being in a different root structure. Try testing the URL path just using template instead of templateUrl.

Place an image in your views folder, and try this.

$routeProvider.when('/', {
   template: 'Test Template <img src="views/pic.jpg"/>',
   controller: 'PostsCtrl'
});

$routeProvider.otherwise({ redirectTo: '/' });

You should see "Test Template" and the image show up on your index page. If the image doesn't show up, your path is wrong.

Solution 4

I came across the same issue. But in my case, with webpack build two different Angular versions got packaged (Angular 1.5.5 and Angular 1.5.0).

Solution 5

Yeah I sorted it out by moving the post.html into partials and changing the templateUrl to partials/posts.html. I think this might be due to the Yo scaffold I used which was angular fullstack, because it work fine of the see project. Thanks anyway

View more solutions

77,278

Author by

Vishal Sakaria

Front and Back end engineer, coding in Ruby, Rails, HTML, CSS, Javascript, JQuery, Java. Passionate about OOD, OOP and TDD! Available for work.

Updated on September 07, 2020

Comments

Vishal Sakaria over 3 years

I am trying to view my app after running Grunt Build. I use grunt serve:dist to see all production ready build but in the browser I get an infinite loop saying:

WARNING: Tried to load angular more than once.

I have read this occurs because the TemplateURL: may be wrong after concatenation. As in this post: Tried to Load Angular More Than Once

But how do I fix this? Here is my app.js

/* global libjsapp:true */


'use strict';

var libjsapp = angular.module('libjsApp', [
  'ngCookies',
  'ngResource',
  'ngSanitize',
  'ngRoute'
]);

libjsapp.config(['$routeProvider', function ($routeProvider, $locationProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/posts.html',
        controller: 'PostsCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  }]);

Alan Illing over 9 years

I had this same problem with ng-include - thanks for pointing it out!
newman about 9 years

Ah, I ran into this same error again, but this time, as it turns out after long struggle, it is due to a typo in the templateUrl path. More interestingly, for the same typo, you get this error if replace: false. Otherwise, if replace:true, you'll get the error like this: Error: [$compile:tplrt] Template for directive 'xxChart' must have exactly one root element. /app/directive/xxChart.html. Silly.
Naveen almost 9 years

Oh! this saved my day.. I was actually seeing the console logs. When the application loaded it loads localhost:9000/app/main/main.html and when go to another route it used to load as localhost:9000/other.html which it doesnt get, and keeps looping.
Carntel almost 9 years

Thank you, you saved me a lot of time looking in the wrong place. I was concatenating a bunch of files together to make 1 HTML page. One page had malformed HTML in it and caused the problem.
Manatax over 8 years

your response had me check my url, to realize I had a typo!
Alessandro over 8 years

I had failed to add a route to my routes.conf file that mapped requests for ng-table templates to path="/public/ng-table" and since it did not find the route it was sending index.scala.html back for each template requested. All I did was add the line GET /ng-table/*file controllers.Assets.at(path="/public/ng-table", file) and it fixed it
Garry Polley over 8 years

This was basically the same issue I had. The problem was that I misspelled my template name in the templateURL.
Ruslan Zhomir over 8 years

ng-bind and ng-bind-html may lead to the same error
Ruslan Zhomir over 8 years

and check if your template exist where it must be, especially if you are using automated build system. If your server is responding with index page for every missing resource, then you'll get infinite angular loading loop. I strongly recommend to configure server not to respond with index page for missing templates!
PsyGik about 8 years

You sir, are a life saver! bows down with respect
Nathan Osman about 8 years

I was getting this error as well with <ng-view /> on a page with an HTML5 doctype and switching to <ng-view></ng-view> removed the warnings.
Hack-R over 7 years

You should mark this as the solution. Having said that it's not the solution for me, but it seems to be for most people.
Alberto Rechy over 7 years

This was my problem as well, it only happened after I updated to AngularJS 1.5.8
Tiago about 7 years

I had the exact same problem, and what an insidious one. I had to strip down my angular app to almost nothing trying to debug it before I saw your answer.
Ben Anderson about 7 years

I had the same issue with webpack but the versions of angular where the same, one was in my main chunk and the other in my vendor chunk
Fernando Fradegrada almost 7 years

I was facing same warning having the ui-view in the body tag. So, removing from it and putting in a <div></div> solved the warning too.
Omar over 6 years

My image (template) did exist in the same path as I am using to call templateUrl so the error still exists... I think it has something to do with this though. any other advice?
Ibrahim.H over 5 years

I got this error when using <div ng-view /> on html5 doctype, so I had just to close the tag <div ng-view></div>.