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

Question

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:

Answer 1

In my case the template file (not string) was empty. when I filled the template file with simple html, the problem has been solved. Fill views/posts.html with some code.

Answer 2

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).

Answer 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.

Answer 4

Just to add one more possible scenario to this issue...

Behavior: everything works fine when loaded from the root URL, but you run into this issue whenever loading your page from any other route (or entering another route).

Likely reason: one of your nested components or pages is loading something from a relative path instead of an absolute path.

In my case it had to do with a referenced component loading its template with a relative path.

So, for example changing from this:

angular.
  module('app').
  component('profileSelect', {
    // this line was the problem
    templateUrl: 'static/angular/profiles/profile-select.html',
    bindings: {}
  });

to this:

angular.
  module('app').
  component('profileSelect', {
    // making this an absolute path fixes it
    templateUrl: '/static/angular/profiles/profile-select.html',
    bindings: {}
  });

Resolved it. Basically because you now have sub-paths those relative references no longer work, and angular decides to fail in this incredibly hard-to-decipher way.

Hopefully someone is helped by this answer. I just lost an hour+ of my life to it...

Answer 5

This case is when the code takes to infinite loop somehow. Make sure you verify if there are any redirections in your code which are called multiple time.

Answer 6

I ran into the same problem and that's why I'm landed here. However, none of the answers worked for me. It turns out that nothing is wrong in code, and the browser url is the culprit: it should be localhost:3000/#/, but somehow, I got something like localhost:3000/xxx/public/index.html/#/ in my browser. By the way, I'm using ui-router with node.js in WebStorm if it matters.