$injector:modulerr Failed to instantiate module

Question

I'm new to AngularJS and I face this exception

angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module MovieRama due to: Error: [$injector:modulerr] Failed to instantiate module MovieRama.services due to: Error: [$injector:nomod] Module 'MovieRama.services' 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.

My code is:

var app = angular.module('MovieRama.services', []);
app.factory('rtAPIservice', function($http) {

    var rtAPI = {};

    rtAPI.getMovies = function() {
        return $http({
            method: 'JSONP',
               url: 'http://api.rottentomatoes.com/api/public/v1.0/lists/movies/in_theaters.json?     page_limit=10&page=1&country=us&apikey=XXXXX&callback=JSON_CALLBACK'
        });
    }

    return rtAPI;
});

app.factory('rtAPIserviceall', function($http) {
    var rtAPIall = {};

    rtAPIall.getMoviesall = function () {
        return $http({
            method: 'JSONP',
               url: 'http://api.rottentomatoes.com/api/public/v1.0/movies.json',{
            params: {
                page_limit: '10',
               page:'1',
               q: $scope.search,
               apikey: 'XXXX',
               callback: 'JSON_CALLBACK'
            }
        }
        })
    }
return rtAPIall;
});

HTML

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<link rel="stylesheet" href="/node_modules/angular-material/angular-material.css">
<title>MovieRama</title>
</head>

<body ng-app="MovieRama">

        <table>
            <thead>
                <tr><th colspan="4">MovieRama</th></tr>
            </thead>


            <tbody ng-if= "search != null" ng-controller="moviesController"> 
            <ul ng-repeat="movie in moviesList">

                 <td>

                    <img src={{movie.posters.thumbnail}} />

                    <ul> {{movie.title}}</ul>
                    <ul> Release: {{movie.year}}- Runime: {{movie.runtime}}-Audience rating: {{movie. ratings.audience_score}}</ul>
                    <ul>{{movie.synopsis}}</ul>

               </td>
</tr>

            </tbody>

            <tbody ng-if="search == null">
            <ul ng-repeat="movie in moviesListall" ng-controller="moviesallController">

                <td>
                    <img src={{movie.posters.thumbnail}}/>
                    <ul> {{movie.title}}</ul>
                    <ul> Release: {{movie.year}} - Runtime: {{movie.runtime}} - Audience rating:      {{movie.ratings.audience_score}} </ul>
                    <ul> {{movie.synopsis}} </ul>
                </td>
            </tr>   
            </tbody>

        </table>
        <script src="bower_components/angular/angular.js"></script>
        <script src="bower_components/angular-route/angular-route.js"></script>
        <script src="js/app.js"></script>
        <script src="js/services.js"></script>
        <script src="js/controllers.js"></script>
        <script src="/node_modules/angular/angular.js"></script>
        <script src="/node_modules/angular-aria/angular-aria.js"></script>
        <script src="/node_modules/angular-animate/angular-animate.js"></script>
        <script src="/node_modules/angular-material/angular-material.js"></script>

        </body>
        </html>

app.js

angular.module('MovieRama', [
        'MovieRama.controllers',
        'MovieRama.services'
        ]);

It works just fine with one factory. What is the problem?

Just a guess, but you may want to try changing the order you are loading your js files. app.js is loaded first and trying to inject the dependency on MovieRama.services, before it is loaded. Or try to put all the module code in one file to test if that is the issue. — Alex Chance
I tried and nothing changed. The weird thing is that the exception appears when I add the second app.factory. — Ελένη Μάρκου
Also, Why have the two methods as different services. You could have One service with two methods as follows: — Evans Dianga

Evans Dianga Evans Dianga · Accepted Answer · 2016-04-14T18:44:17

Add the dependency MovieRama.services to the main module that bootstraps the app (probably index.js or app.js, based on your file structure) .

Also remove the reference to <script src="/node_modules/angular/angular.js"></script> as you have two files for angular. Move angular files to the top before your js files.

Also, Why have the two methods as different services. You could have One service with two methods as follows:

var app = angular.module('MovieRama.services', []);
app.factory('rtAPIservice', function($http) {

var rtAPI = {};

rtAPI.getMovies = function() {
    return $http({
        method: 'JSONP',
           url: 'http://api.rottentomatoes.com/api/public/v1.0/lists/movies/in_theaters.json?     page_limit=10&page=1&country=us&apikey=XXXXX&callback=JSON_CALLBACK'
    });
}
rtAPI.getMoviesall = function () {
    return $http({
        method: 'JSONP',
           url: 'http://api.rottentomatoes.com/api/public/v1.0/movies.json',{
        params: {
            page_limit: '10',
           page:'1',
           q: $scope.search,
           apikey: 'XXXX',
           callback: 'JSON_CALLBACK'
        }
    }
    })
}
return rtAPI;
});

$injector:modulerr Failed to instantiate module

1 Answers