Heroku builds and deploys successfully but 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!" . whats confusing is that locally everything runs well without any error and 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"
}
}
index.html. if been looking for the solution for the past 2 days but nothing seem to work for me .i've attached a snippet of my bower.json , myApp module and index.html . if anyone could help me out i'll be very greatful.
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>
via Kgadi mphela
No comments:
Post a Comment