CODEWITHSUNDEEP
javascriptangularjs
Bryce Johnson
Bryce Johnson

Reputation: 6901

Why are all my Angular modules failing to load?

I'm getting some variation of the following, for every single Angular module (animate, resource, route, touch etc):

Module 'ngResource' 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'm relatively new to Angular. I read the docs on the error but I'm not sure how to apply them. Thoughts?

Here is the code where I declare the modules: 

angular
    .module('juddfeudApp', [
        'ngAnimate',
        'ngCookies',
        'ngResource',
        'ngRoute',
        'ngSanitize',
        'ngTouch'
    ])
    .config(function ($routeProvider) {
        $routeProvider
            .when('/', {
                templateUrl: 'views/main.html'
            })
            .when('/about', {
                templateUrl: 'views/about.html'
            })
            .when('/admin', {
                templateUrl: 'views/admin.html',
                controller: 'AdminCtrl'
            })
            .otherwise({
                redirectTo: '/'
            });
    });

HTML: 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

</head>
<body ng-app="juddfeudApp">


<!-- all angular resources are concatenated by Gulp in lib.js-->

<script src="build/lib/lib.js" type="text/javascript"></script>
<script src="build/main.js" type="text/javascript"></script>
</body>
</html>

Upvotes: 1

Views: 491

Answers (3)

Bryce Johnson
Bryce Johnson

Reputation: 6901

When you get an error like this, it's likely that you aren't successfully loading the Angular module scripts in your HTML file.

Some answers here suggest making sure you've referenced the scripts somewhere in your HTML file.

That is, if you're trying to add multiple Angular modules, you should have several scripts being loaded before your own JS, like this: 

<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/angular-resource/angular-resource.js"></script>
<script src="../bower_components/angular-cookies/angular-cookies.js"></script>
<script src="../bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="../bower_components/angular-animate/angular-animate.js"></script>
<script src="../bower_components/angular-touch/angular-touch.js"></script>
<script src="../bower_components/angular-route/angular-route.js"></script>

<script src="myMainJsFile.js"></script>

That may fix the problem.

You might also consider checking to make sure your scripts actually exist in the place you are referencing them -- for me, bower had not properly installed them all on the first time around, so they weren't being picked up by gulp-concat -- or ensuring that your task-runner of choice (Gulp/Grunt) is configured properly.

Upvotes: 0

t0mpl
t0mpl

Reputation: 5025

did you add this <script src="angular-resource.js"> ?

Upvotes: 1

Matsemann
Matsemann

Reputation: 21784

You need to reference them in your html file.

So add <script src="filename.js"></script> for each module/file you want to load.

Upvotes: 1

Related Questions