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.

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>

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.

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();
}

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.

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.

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.

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.

Answer 8

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

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


</section>`