Tried to load angular more than once + included the Google Maps API multiple times on this page

Question

Whenever I press the "Get started" button on my website , the screen goes black and I get the following errors in the console log. I do not see this issue locally, prior to grunt build being run and me deploying to Heroku:

WARNING: Tried to load angular more than once.

You have included the Google Maps API multiple times on this page. This may cause unexpected errors.

The code for my index.html is as follows, full code here :

  <script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyBHuxIv-E8l4YRp_vWjW7X22gRNwI1xN30"></script>
  <!-- build:js(.) scripts/vendor.js -->
  <!-- bower:js -->
  <script src="bower_components/jquery/dist/jquery.js"></script>
  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap.js"></script>
  <script src="bower_components/angular-animate/angular-animate.js"></script>
  <script src="bower_components/angular-cookies/angular-cookies.js"></script>
  <script src="bower_components/angular-resource/angular-resource.js"></script>
  <script src="bower_components/angular-route/angular-route.js"></script>
  <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
  <script src="bower_components/angular-touch/angular-touch.js"></script>
  <script src="bower_components/ngstorage/ngStorage.js"></script>
  <script src="bower_components/moment/moment.js"></script>
  <script src="bower_components/angular-moment/angular-moment.js"></script>
  <script src="bower_components/angular-strap/dist/angular-strap.js"></script>
  <script src="bower_components/angular-strap/dist/angular-strap.tpl.js"></script>
  <script src="bower_components/angular-modal-service/dst/angular-modal-service.js"></script>
  <script src="bower_components/vsGoogleAutocomplete/dist/vs-google-autocomplete.js"></script>
  <script src="bower_components/vsGoogleAutocomplete/dist/vs-autocomplete-validator.js"></script>
  <!-- endbower -->
  <!-- endbuild -->

Not sure what else could be causing the issue? Can somebody please help?

Update

I've included my Grunt task as well: https://pastebin.com/3JiaQwXU .

Answer 1

Upon analysing your page in the dev console, it seems that you are indeed loading the script twice. I shall explain.

Follow the image below

On clicking Get started you are basically loading the entire page again. Check html of getstarted.html . If you intend to use templates then the template should have only a portion of the view not the entire site from the very top.