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

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.

Answer 2

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' });
    }]);

Answer 3

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.

Answer 4

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!

Answer 5

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

Answer 6

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.