WARNING: Tried to load angular more than once. Angular JS
Solution 1:
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.
Solution 2:
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'
});
Solution 3:
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.
Solution 4:
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).
Solution 5:
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