ngMaterial fails to load on heroku but works on local machine

462
March 15, 2017, at 11:54 PM

Heroku builds and deploys successfully. However, when I try to open the app using the url provided, it shows this error in the browser

Error: [$injector:modulerr] Failed to instantiate module myApp due to:

and

" Module 'ngMaterial' is not available!

What is confusing to me, is that locally everything runs well without any error. I did load the Angular Material module using --save and included the necessary script in

{ 
  "name": "MyApp", 
  "version": "0.0.0", 
  "dependencies": { 
    "angular-animate": "~1.5.3", 
    "angular-ui-router": "~0.2.15", 
    "bootstrap-sass": "~3.3.5", 
    "angular-bootstrap": "~1.3.3", 
    "malarkey": "yuanqing/malarkey#~1.3.1", 
    "angular-toastr": "~1.5.0", 
    "moment": "~2.10.6", 
    "animate.css": "~3.4.0", 
    "angular": "~1.5.3", 
    "angular-material": "^1.1.3", 
    "angular-spinners": "^3.1.2", 
    "ang-accordion": "*", 
    "angular-material-data-table": "^0.10.10", 
    "jquery": "^3.1.1", 
    "angular-cookies": "v1.5.11", 
    "angular-aria": "1.5.10", 
    "angular-messages": "^1.6.3" 
  }, 
  "devDependencies": { 
    "angular-mocks": "~1.5.3" 
  }, 
  "overrides": { 
    "bootstrap-sass": { 
      "main": [ 
        "assets/stylesheets/_bootstrap.scss", 
        "assets/fonts/bootstrap/glyphicons-halflings-regular.eot", 
        "assets/fonts/bootstrap/glyphicons-halflings-regular.svg", 
        "assets/fonts/bootstrap/glyphicons-halflings-regular.ttf", 
        "assets/fonts/bootstrap/glyphicons-halflings-regular.woff", 
        "assets/fonts/bootstrap/glyphicons-halflings-regular.woff2" 
      ] 
    } 
  }, 
  "resolutions": { 
    "angular": "~1.5.3" 
  } 
}

I have been looking for the solution for the past 2 days, but nothing seem to work for me. I have attached a snippet of my bower.json, myApp module and index.html.

angular.module('MyApp', ['ngAnimate','ui.router', 'ui.bootstrap', 'toastr','ngMaterial','ngAria']) 
  .constant('malarkey', malarkey) 
  .constant('moment', moment) 
  .config(config) 
  .config(routerConfig);
<!doctype html> 
<html ng-app="myApp" ng-strict-di> 
 
<head> 
  <meta charset="utf-8"> 
  <title>My</title> 
  <meta name="description" content=""> 
  <meta name="viewport" content="width=device-width"> 
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/> 
  <link rel="stylesheet" href="./bower_components/animate.css/animations.css" /> 
  <link rel="stylesheet" href="./bower_components/angular-material/angular-material.css" /> 
   
 
  <!-- Place favicon.ico and apple-touch-icon.png in the root directory --> 
 
  <!-- build:css({.tmp/serve,src}) styles/vendor.css --> 
  <!-- bower:css --> 
  <!-- run `gulp inject` to automatically populate bower styles dependencies --> 
  <!-- endbower --> 
  <!-- endbuild --> 
 
  <!-- build:css({.tmp/serve,src}) styles/app.css --> 
  <!-- inject:css --> 
  <!-- css files will be automatically insert here --> 
  <!-- endinject --> 
  <!-- endbuild --> 
 
</head> 
 
<body> 
  <!--[if lt IE 10]> 
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> 
    <![endif]--> 
 
  <acme-navbar></acme-navbar> 
 
  <div ui-view> 
  </div> 
 
  <!-- build:js(src) scripts/vendor.js --> 
  <!-- bower:js --> 
  <!-- run `gulp inject` to automatically populate bower script dependencies --> 
  <!-- endbower --> 
  <!-- endbuild --> 
 
  <!-- build:js({.tmp/serve,.tmp/partials}) scripts/app.js --> 
  <!-- inject:js --> 
  <!-- js files will be automatically insert here --> 
  <!-- endinject --> 
 
  <!-- inject:partials --> 
  <!-- angular templates will be automatically converted in js and inserted here --> 
  <!-- endinject --> 
  <!-- endbuild --> 
 
 
</body> 
<acme-footer></acme-footer> 
<script type="text/javascript" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script> 
<!-- Used for JavaScript animations (include this before angular.js) --> 
<script src="./bower_components/jquery/dist/jquery.js"></script> 
<!-- Adds animation support in AngularJS --> 
<script src="./bower_components/angular-animate/angular-animate.js"></script> 
<!-- AngularJS Material Javascript now available via Google CDN; version 1.0.7 used here --> 
 
 
<script src="./bower_components/angular-material/angular-material.js"></script> 
<script src="./bower_components/angular-cookies/angular-cookies.js"></script> 
</html>

Any suggestions on how to solve my issue?

READ ALSO
Realtime data-streaming from server with nodejs + RxJs

Realtime data-streaming from server with nodejs + RxJs

I've just created an API(in NodeJs) to create user and calling that API from a mobile appNow I want to display that user to user list table in Web(Without refreshing or AJAX call)

498
MySQL Insert Where query

MySQL Insert Where query

What's wrong with this query:

446
setup fast websocket for arduino uno

setup fast websocket for arduino uno

I am trying to make my Arduino Uno and an Apache server to talk to each other; however, it seems like this is not working out

611