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

I ran into this issue and found that the problem occurred in my karma.conf.js file.

When specifying which file patterns to load into the browser, I used a wild card identifier to load AngularJS like so:

'path_to_angular/angular/*.js

If there's more than one file loading AngularJS within that directory, like angular.js and angular.min.js for example, then this error will be thrown.

To avoid this error, simply specify a single path with no wildcards.

'path_to_angular/angular/angular.js'

or

'path_to_angular/angular/angular.min.js'

should do the trick.

Answer 2

In my case it was an invalid resource link in index.html

<link rel="import" href="/somethingmissing.html">

Answer 3

We were accidentally trying to load a non-existent route in a ui-view. The route, however, did correspond to a valid URL that contained an Angular app. It instead loaded that Angular app into the ui-view, hence the multiple copies of Angular.

Answer 4

In my case app-view-segment="1" was missing and there was two references pointing to the same folder of angular in the index.cshtml file, in the @Scripts.Render lines. Thanks for pointing to the angular routing.

Answer 5

The problem is in fact related to angular library being loaded too many times.

My reply can sound too obvious, but the code itself is fine and there's not much information on what the problem can be. If you can post your folder tree, maybe it can be useful.

In the meantime, please ensure these two things are ok before investigating further:

• views/posts.html does not include a script tag with the call to angular.js library.
• views/posts.html file is available in that position (maybe use a complete URI).