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

Question

First I've to say that I've looked every existing question relating to my problem, but I've found nothing dealing with my problem.

Uncaught Error: [$injector:modulerr] Failed to instantiate module Arrows due to:
Error: [$injector:nomod] Module 'Arrows' is not available! You either misspelled the         
module     name or forgot to load it. If registering a module ensure that you specify ...    
<omitted>...2)

my index.html:

<html ng-app='Arrows'>
    <head>
        <title>Arrows</title>
        <script data-main="app" src="modules/require.js"></script>
        <link rel="stylesheet" type="text/css" href="styles/style.css">
        <script src="modules/angular-1.2.21/angular.js"></script>
        <script src="modules/angular-1.2.21/angular-route.js"></script>
    </head>
    <body ng-controller='menuController'>       
        <div ng-view>
            {{ message }}
        </div>  
    </body>
</html>

my app.js:

define([
    './controller/menu',
    './controller/game'
], function( 
    menu,
    game
) {

    var Arrows = angular.module('Arrows', ['ngRoute']);

    Arrows.config(function($routeProvider) {
        $routeProvider
            .when('/', {
                templateUrl : 'pages/menu.html',
                controller  : 'menuController'
            })
            .when('/game', {
                templateUrl : 'pages/game.html',
                controller  : 'gameController'
            })
            .otherwise( {
                redirectTo: '/', 
                controller: 'menuController'
            }); 
    });

    Arrows.controller('gameController', function($scope) {
        $scope.message = 'hello! Its working!';
    });

    Arrows.controller('menuController', function($scope) {
        $scope.message = 'hello! Its working!';
    });
});

No clue what to do there. I mean, I loaded angular-route.js, what is the answer to most questions concerning this error. And I made sure to write ng-app='Arrows' inside the html-tag.

Guess it is your lazyloading that might be causing this issue... Instead of ng-app="Arrows" on the html, try using manual bootstrapping.. angular.bootstrap(document, ['Arrows']); — PSL
I already asked my 'mentor' about this. But he said i can load it in head and don't need to bootstrap angularjs. — Reijo
I did so and this is the reaction: Error: [ng:areq] Argument 'menuController' is not a function, got undefined — Reijo
"You should list angular as dependency as well right?" Sorry, but I dont know how to do... — Reijo

Egor Smirnov Egor Smirnov · Accepted Answer · 2014-08-10T16:40:06

As you are using require.js you have to bootstrap your AngularJS application in a special way. Read this article - https://www.startersquad.com/blog/angularjs-requirejs/ - and try to incorporate what is described there for your specific case.

In the end you will use something like

define([
   'require',
   'angular'
], function (require, ng) {
    'use strict';

    require(['domReady!'], function (document) {
       ng.bootstrap(document, ['Arrows']);
   });
});

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

1 Answers