Tried to Load Angular More Than Once

Question

I have a yeoman scaffolded app (the angular fullstack generator).

grunt serve works fine, but grunt build produces a distribution that locks up memory, most probably because of circular references in angular.

I upgraded angular to 1.2.15. The error I get is:

WARNING: Tried to Load Angular More Than Once

Prior to upgrading, the error was:

Error: 10 $digest() iterations reached. Aborting!

It's pretty difficult to debug as it only happens after build / minification. All my modules are in angular's array format, so the minification DI shouldn't be a problem but it is.

There's no single script that causes this. The only way it goes away is if I don't initialize with my app.js file. My app.js file is below.

Any thing come to mind?

'use strict';

angular.module('myApp', [
  'ngCookies',
  'ngResource',
  'ngSanitize',
  'ngRoute',
  'ngTagsInput',
  'ui.bootstrap',
  'google-maps',
  'firebase'
]);

angular.module('myApp').config(['$routeProvider', function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/listing.html',
        controller: 'ListingCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  }]).constant('FIREBASE_URL', 'something');

Answer 1

This happened to me too with .NET and MVC 5 and after a while I realized that within the label on Index.cshtml file:

<div data-ng-view=""></div>

again included as section scripts happens to you. To solve the problem on the server side what I do is return the partial view. Something like:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult Login()
    {
        return PartialView();
    }

    public ActionResult About()
    {
        return PartialView();
    }
}

Answer 2

Another case is with Webpack which concating angular into the bundle.js, beside the angular that is loaded from index.html <script> tag.

this was because we used explicit importing of angular in many files:

define(['angular', ...], function(angular, ...){

so, webpack decided to bundle it too. cleaning all of those into:

define([...], function(...){

was fixing Tried to Load Angular More Than Once for once and all.

Answer 3

I was having the exact same error. After some hours, I noticed that there was an extra comma in my .JSON file, on the very last key-value pair.

//doesn't work
{
    "key":"value",
    "key":"value",
    "key":"value",
}

Then I just took it off (the last ',') and that solved the problem.

//works
{
    "key":"value",
    "key":"value",
    "key":"value"
}

Answer 4

I had a similar issue, and for me the issue was due to some missing semicolons in the controller. The minification of the app was probably causing the code to execute incorrectly (most likely the resulting code was causing state mutations, which causes the view to render, and then the controller executes the code again, and so on recursively).

Answer 5

The problem could occur when $templateCacheProvider is trying to resolve a template in the templateCache or through your project directory that does not exist

Example:

templateUrl: 'views/wrongPathToTemplate'

Should be:

templateUrl: 'views/home.html'

Answer 6

Capitalization matters as well! Inside my directive, I tried specifying:

templateUrl: 'Views/mytemplate'

and got the "more than once" warning. The warning disappeared when I changed it to:

templateUrl: 'views/mytemplate'

Correct me, but I think this happened because page that I placed the directive on was under "views" and not "Views" in the route config function.