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:

Answer 1

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

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

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


</section>`

Answer 4

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 5

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 6

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>