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: '/' }); }]);
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.
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' });
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With