WARNING: Tried to load angular more than once. when I include JQuery

Question

I am building an yeoman app with an angular-generator.

The js libraries included in my index.html file are:

<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/modernizr/modernizr.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="bower_components/d3/d3.js"></script>
<script src="bower_components/select2/select2.js"></script>
<script src="bower_components/angular-ui-select2/src/select2.js"></script>

The problem only occurs if jquery is included before angular and it does not happen if it is after it.

The problem as the title states is that I get "WARNING: Tried to load angular more than once" in the console and the app cannot initialize.

Does anyone have any clues why this can happen?

I have a single ng-app, I am including angular just once... and everything. It does not look like it is something related to the configuration because changing the position of the script fixes it.

Do you guys have any clue?

Does anyone know if I am able to configure to include order of the scripts? As I am using angular-generator I have set this up with usemin to include the bower scripts. I wonder if there is any way to be able to specify in which order to include the scripts.

This is the bower.json file for my project:

{
  "name": "<name>",
  "version": "0.0.0",
  "dependencies": {
    "angular": "1.2.15",
    "json3": "~3.2.6",
    "es5-shim": "~2.1.0",
    "angular-ui-router": "~0.2.10",
    "modernizr": "~2.8.1",
    "d3": "~3.4.6",
    "angular-ui-select2": "~0.0.5"
  },
  "devDependencies": {
    "angular-mocks": "1.2.15",
    "angular-scenario": "1.2.15"
  }
}

I have tried to search in google with no luck. Thanks in advance!

Update 1:

I just found out that if I include the scripts this way, angular won't be included twice and it is always loaded first.

  <!-- build:js scripts/vendor.js -->
  <script src="bower_components/angular/angular.js"></script>
  <!-- bower:js -->
  <script src="bower_components/jquery/dist/jquery.js"></script>
  <script src="bower_components/modernizr/modernizr.js"></script>
  <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
  <script src="bower_components/d3/d3.js"></script>
  <script src="bower_components/select2/select2.js"></script>
  <script src="bower_components/angular-ui-select2/src/select2.js"></script>
  <!-- endbower -->

Not the best solution but at least for now... Anyways, I would like to have everything inside bower:js tags.

Docent

I had the same problem once, it happened when a route path became corrupt on minification after a build, using grunt build. It meant that the app keep calling the root path over and over again, so AJS was being loaded over and over. Is anything being appended to the DOM with JQuery that might be causing this? – Adversative

Saved my day a year later ;) the ordering solution works for-me – Sunshine

Answer 1

After long hours of testing... it ended up being that on my index.html file I had a

<ui-view />

to be used by angular ui router and replacing it to this, did the trick.

<ui-view></ui-view>

Docent

This just fixed an issue that had been bugging me for hours. Thank you! I was seeing extraneous calls from jQuery trying to reload the files that had already been loaded. It seems to be caused by a combination of using a self-closing ui-view tag, angular-ui-router, and jquery. – Cnidus

those are not identical... check this https://mcmap.net/q/37066/-are-non-void-self-closing-tags-valid-in-html5 "In HTML 5, <foo /> means <foo>, the start tag. It is not a "self-closing tag"." – Docent

In my case I was using the ui-view attribute inside the body tag. I solved the warning by removing the ui-view from the body and creating an isolated <ui-view>...</ui-view> (as suggested by op) – Tuinenga

Answer 2

For me, this happened when I referenced my view incorrectly in my routes.

I had:

.when('/route', {
      templateUrl: 'views/myPage.html',
      controller : 'myCtrl'
})

but my view was named views/mypage.html

The error message is not what I would expect. I would have expected a missing view error.

Tighe

Wow, this took me hours of debugging for such a stupid mistake. When you have an .otherwise("/") statement referencing the index page (default route if the url is not found) this happens. Thanks Jim – Shit

The same issue was with me. – Sillimanite

But locally it was working fine when I was using node server.Thanks. – Sillimanite

Similar thing - no such template caused this error. – Dilks

Answer 3

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

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 ActionResult Index()
{
    return View();
}

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

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

Esmond

This helped me removing the error. I am using ASP.NET views for my templateURL, instead of actual static .html files, in order to continue to use razor. – Narcosis

Answer 4

I was getting the same warning and it was because of the order of the files included, as well as the version used.

To resolve the above warning , I re-included the files in the following order:

jquery.js
jqueryui.js
angular.js

Note: You have to add jquery script tag before angularjs so that angularjs can replace jqLite by jQuery.

Moreover, my code was working with AngularJS v1.2.0, but not with a higher angular version. So check for your jquery and angularjs version compatibility as well.

Accession

Answer 5

Yes, I solved my problems by sorting the JS script order in html page.

When put the angular js script in the first order, this won't happen any more.

That's very strange.

Thanks.

Estrada

Answer 6

I was facing the similar issue while working with electron app. I had included angular.min.js in the index.html page and every time I come to that page, the number of times the warning used to appear used to get double..like 1,2,4,8,16 etc. So after 4/5 refresh, app used to get super slow. The solution I found is.. Instead of including angular.min.js with script tag, use require('./path/angular.min.js');

this will load the file only once.

According to node documentation

Caching #

Modules are cached after the first time they are loaded. This means (among other things) that every call to require('foo') will get exactly the same object returned, if it would resolve to the same file.

Multiple calls to require('foo') may not cause the module code to be executed multiple times. This is an important feature. With it, "partially done" objects can be returned, thus allowing transitive dependencies to be loaded even when they would cause cycles.

Elisabethelisabethville

Answer 7

Here's another scenario that wasn't covered by anyone but it's causing the same problem and it might be not be obvious at first:

If you are using Gulp or any other similar tool with the angular-template-cache plugin and merge all your code into a single file you need to make sure that the templatecache generation is executed before the actual concatenation takes place otherwise your app.min.js won't have the templatecache part.

The Gulpfile looks like this:

var paths = {
  styles: 'assets/less/style.less',
  scripts: 'assets/js/**/*.js',
  templates: 'views/**/*.html'
}

function styles() {
  return gulp.src(paths.styles)
    .pipe(less())
    .pipe(cleanCSS())
    .pipe(gulp.dest('./assets/css/'));
}

function scripts() {
  return gulp.src(paths.scripts, { sourcemaps: true })
    .pipe(babel())
    .pipe(uglify())
    .pipe(concat('app.min.js'))
    .pipe(gulp.dest('./assets/js'));
}

function templatecache() {
  return gulp.src(paths.templates)
    .pipe(templateCache({ module: 'ams', root: '/views/'}))
    .pipe(gulp.dest('./assets/js'));
}

function clean() {
  return del(['assets/js/app.min.js', 'assets/js/templates.js', 'assets/css/style.css']);
};

var build = gulp.series(clean, templatecache, gulp.parallel(styles, scripts));

Key part is the last line, clean and templatecache are executed first then the scripts and styles in parallel. I was executing templatecache in parallel as well and got into the duplicate angularjs warnings. Hope it helps someone.

Churchman

Answer 8

tools visual studio----just comment the angularjs file like this`

    <script src="~/Scripts/angular.min.js"></script>


</section>`

Friesen

Any explanation for this? – Inane

this type warning occurs when you tried to load it from more than one source so just try to call it from one source..so i suggested to comment it ..i had a same problem in vs2013 project now it solved ....... – Friesen