CODEWITHSUNDEEP
javascriptangularjsgruntjs
Vishal Sakaria
Vishal Sakaria

Reputation: 1397

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

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:

WARNING: Tried to load angular more than once.

I have read this occurs because the TemplateURL: may be wrong after concatenation. As in this post: Tried to Load Angular More Than Once

But how do I fix this? Here is my app.js

/* global libjsapp:true */


'use strict';

var libjsapp = angular.module('libjsApp', [
  'ngCookies',
  'ngResource',
  'ngSanitize',
  'ngRoute'
]);

libjsapp.config(['$routeProvider', function ($routeProvider, $locationProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/posts.html',
        controller: 'PostsCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  }]);

Upvotes: 49

Views: 80231

Answers (23)

Dustin Kane
Dustin Kane

Reputation: 1235

The issue/fix we had might be a little unique because we're using webpack + AngularJS.

We are using html-webpack-plugin. However, our index.html file also had 

<script type="text/javascript" src="./bundle.js"></script>

The html-webpack-plugin automatically adds that line, so it was in our resultant HTML twice.

Upvotes: 0

justcant
justcant

Reputation: 109

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.

Upvotes: 0

Ady Rosen
Ady Rosen

Reputation: 33

Last time this happened to me, it was a leading '/' in a route's templateUrl, which wasn't suppose to be there.

This time though, it was a bunch of views not getting rendered into the template cache after build because I've placed those views in a sub folder of a sub folder under the views folder. Gruntfile.js wasn't tuned to pick up 3rd level folders from '/views'.

To find out what was rendered in a yo-grunt build, you can look at .tmp/templateCache.js after the build finishes.

I do wish AngularJS LTS's team will find a way to better handle this kind of error, with some better clue as to where the problem is.

Hope this helps!

Upvotes: 0

Cory
Cory

Reputation: 24260

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

Upvotes: 0

Ulterior
Ulterior

Reputation: 2892

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

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

Upvotes: -1

Umpa
Umpa

Reputation: 332

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.

Upvotes: 0

Westy92
Westy92

Reputation: 21295

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.

Upvotes: 0

DDelgro
DDelgro

Reputation: 463

I recently got this error and the way I solved it was to go into the Web.config and change <compilation debug="false" targetFramework="4.5.2"/> to <compilation debug="true" ... /> I hope this helps someone! Cheers!

Upvotes: 1

Gegham Khachatryan
Gegham Khachatryan

Reputation: 41

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.

Upvotes: 0

Kurkula
Kurkula

Reputation: 6762

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.

Upvotes: 0

Aniruddha Das
Aniruddha Das

Reputation: 21688

In my case, angular library and my angular module code is dynamically loaded inside another application which I dont have any control. And these are loaded on click of of a button. For the first time its working fine but when user clicks 2nd time the library and other files loads again and it gives me the warning.

WARNING: Tried to load angular more than once.

var isInitialized = element.injector();
if (!isInitialized) {
  angular.bootstrap(angular.element(document.getElementById('#mainDiv')), ['defaultApp']);
}

Upvotes: 0

fernando
fernando

Reputation: 717

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

Upvotes: 7

Halis S.
Halis S.

Reputation: 446

In my case, the cause of the warning was a redundant script inclusion of "angular-scenario.js" after "angular.js".

When I removed "angular-scenario.js" warning disappeared.

Upvotes: 2

Borivojević
Borivojević

Reputation: 368

In my case the problem was related to AngularJS Batarang Chrome Extension (version 0.7.1). Once I disabled the extension the error disappeared.

Upvotes: 0

newman
newman

Reputation: 6911

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.

Upvotes: -1

Galactic Ranger
Galactic Ranger

Reputation: 882

Your solution might work locally for example if your running grunt serve, but when you run a grunt build your view might not be included in the dist directory. For example if you have a view and that view is in views>templates>modules anything more than two levels wont be added when you run grunt build by default. At least that was the case for me. Check if your html file is being included into the dist directory in views. If its not add your files manually to verify that it works, then update your grunt file acordingly.

Upvotes: 0

Salih KARAHAN
Salih KARAHAN

Reputation: 329

You must change angular route '/'! It is a problem because '/' base url request. If you change '/' => '/home' or '/hede' angular will good work. Sample:

Module.Js:

var application = angular.module('flow', ['ngRoute', 'ngResource']);

RouteConfig.Js:

angular.module('flow')
    .config(['$routeProvider', function ($routeProvider) {
        $routeProvider
            .when('/home', { templateUrl: '/home/index', controller: 'HomeController' })
            .when('/error', { templateUrl: '/Error/Index', controller: 'ErrorController' })
            .when('/login', { templateUrl: '/Account/Login', controller: 'AccountController' });
    }]);

Upvotes: 2

Kevin Beal
Kevin Beal

Reputation: 10849

This problem also is caused by using the current page as the templateUrl. This is especially problematic as it results in an infinite loop referencing itself over and over.

If you are getting an infinite loop that crashes your page, it's probably this. If you are getting CORS errors, it's probably due to including a script tag from another domain in your template.

$routeProvider.when('/', {
   templateUrl: 'an/absolute/url/to/the/current/page.html'
});

Upvotes: 31

Lattanzio
Lattanzio

Reputation: 103

I confirm all above (usually routing errors or some error on resources paths or ng-app error).

I would like to add only a point to help to find the error (not in case of wrong ng-app).

If we suppose the server for angular is setted as follow:

  • /static/* for all static resources (js, css, png...)
  • /api/* rest api
  • /* all others call will be redirect to index.html

In this way all wrong path will return index.html instead of png, css, js and tpl files, even if is missing /static/ path or miss to return 404 for missing static resources.

in short: check the log on server witch paths are you calling opening the page, the error evidence could be found there.

Upvotes: 2

Jakob Hohlfeld
Jakob Hohlfeld

Reputation: 1564

In my case this was due to the following html code:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Testapp</title>
</head>

<body ng-app="testApp">

  <main ui-view>

  <script src="bower_components/jquery/jquery.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="scripts/main.js"></script>
</body>

</html>

As you can see, the <main> is not closed. This led to my variant of 'WARNING: Tried to load angular more than once.' issue.

Upvotes: 39

Vishal Sakaria
Vishal Sakaria

Reputation: 1397

Yeah I sorted it out by moving the post.html into partials and changing the templateUrl to partials/posts.html. I think this might be due to the Yo scaffold I used which was angular fullstack, because it work fine of the see project. Thanks anyway

Upvotes: 3

Blake Bowen
Blake Bowen

Reputation: 1049

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.

Upvotes: 13

Francesco
Francesco

Reputation: 61

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

Upvotes: 2

Related Questions