Im trying to include ng-material and at first I was getting the 'Failed to instantiate module' error, then I also npm installed angular-aria as thats apperently a dependency of ngmaterial and loaded it BEFORE loading ngmaterial. Now I m not getting the same error, not for ngmaterial anymore but for angular-aria:
ailed to instantiate module angular-aria due to:
Error: [$injector:nomod] Module 'angular-aria' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
I feel like Ive read every similar post but nothing really helps. Any ideas would be really appreciated! Ps. if its important for anything, Im using gulp. Also could someone explain to me if there is a difference between npm installing and bower install? Thanks!
<!DOCTYPE html>
<html lang="en">
<head>
<base href="/" />
<title>Candles Shop</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Josefin+Slab:700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Pacifico" />
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Rammetto+One" />
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Gloria+Hallelujah" />
<link rel="stylesheet" type="text/css" href="/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="/materialize-css/bin/materialize.css">
<link rel="stylesheet" type="text/css" href="/angular-input-stars-directive/angular-input-stars.css">
<link rel="stylesheet" type="text/css" href="/style.css" />
<script type="text/javascript" src="/jquery/dist/jquery.min.js"></script>
<script src="/lodash/index.js"></script>
<script src="/angular/angular.js"></script>
<script src="/angular-animate/angular-animate.js"></script>
<script src="/angular-ui-router/release/angular-ui-router.js"></script>
<script src="/angular-ui-router-styles/ui-router-styles.js"></script>
<script src="/angular-ui-bootstrap/ui-bootstrap.js"></script>
<script src="/angular-ui-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="/angulike/angulike.js"></script>
<script src="/angular-password/angular-password.js"></script>
<script type="text/javascript" src="/materialize-css/bin/materialize.js"></script>
<script type="text/javascript" src="/angular-materialize/src/angular-materialize.min.js"></script>
<script type="text/javascript" src="/angular-input-stars-directive/angular-input-stars.js"></script>
<script src="https://js.stripe.com/v2/"></script>
<script type="text/javascript" src="/angular-stripe/release/angular-stripe.js"></script>
<script src="/angular-aria/angular-aria.js"></script>
<script src="/angular-material/angular-material.min.js"></script>
<script type="text/javascript" src="/angular-sidebar/angular-sidebar.css"></script>
<script src="/socket.io-client/socket.io.js"></script>
<script src="/main.js"></script>
</head>
<body ng-app="candleShop" ng-class="{'home-page': $state.includes('home'), 'store-page' : $state.includes('store')}">
<navbar></navbar>
<div id="main" class="container" ui-view autoscroll='true'></div>
</body>
</html>
app.js:
'use strict';
window.app = angular.module('candlesApp', ['ng', 'angulike', 'fsaPreBuilt', 'ngPassword', 'ui.router', 'ui.bootstrap', 'ui.materialize', 'angular-input-stars','angular-stripe', 'ngAnimate', 'angular-aria', 'ngMaterial', 'angular-sidebar']);
If you look at the documentation for angular-aria here: https://docs.angularjs.org/api/ngAria
You will see this:
Finally, load the module in your application by adding it as a dependent module:
angular.module('app', ['ngAria']);
It's often the case that the name of the file and the name of the module are not the same. Always check the documentation