angular Failed to instantiate module

Question

I am attempting to use require with angular

I currently get the error

Failed to instantiate module

The exception url begins

http://errors.angularjs.org/undefined/$injector/modulerr?

When I look at my source using chrome dev tools and i expand my scripts folder the only file present at time of the error is app/main.js. None of the content from folders: controllers, modules, or routes are present. This would lead me to believe that this is a case of premature injection (not a real term).

I have tried to ways to slow down the injection until the correct time, none have had an effect.

first try

require(['jquery', 'angular', 'app/modules/app'], function ($, angular, app) {
     $(function () { // using jQuery because it will run this even if DOM load already happened
           angular.bootstrap(document, ['app']);
     });
});

second attempt

 require(['angular', 'app/modules/app'], function (angular, app) {
    var $html = angular.element(document.getElementsByTagName('html')[0]);
    angular.element().ready(function () {
        $html.addClass('ng-app');
        angular.bootstrap($html, [app.name]);
    });
 });

third try

  require(['angular', 'app/modules/app'], function (angular, app) {
     require(['Scripts/app/modules/app.js', 'Scripts/app/controller/controllers.js'],    function (app) {
          angular.bootstrap(document.body, [app]);
     })

  });

UDPATE

main.js

  require.config({
    baseUrl: '/Scripts/',
    urlArgs: "bust=" + (new Date()).getTime(),
    paths: {
            'jquery': 'lib/require-jquery',
            'angular': 'lib/angular/angular.min',
            'angular-resource': 'lib/angular/angular-resource.min',
    },

    shim: {
            'angular': { 'exports': 'angular' },
            'angular-resource': { deps: ['angular'] },
            'jQuery': { 'exports': 'jQuery' },
    }
 });

 require(['jquery', 'angular', 'app/modules/app'], function ($, angular, app) {
    //the above methods go here
 });

Update 2

app.js

define([
        'angular',
        'app/controllers/controller',
        'lib/angular/angular-route'
], function (angular, controllers) {
    'use strict';

    var app = angular.module('app', [
            'app.controllers'
    ]);
    app.config(['$routeProvider', function ($routeProvider) {
        $routeProvider.
          when('/phones', {
            templateUrl: 'Templates/phone-list.html',
            controller: 'PhoneListCtrl'
          }).
          when('/phones/:phoneId', {
            templateUrl: 'Templates/phone-detail.html',
            controller: 'PhoneDetailCtrl'
          }).
          otherwise({
            redirectTo: '/phones'
          });
    }]);
    return app;
});

main.js

require.config({
    baseUrl: '/Scripts/',
    urlArgs: "bust=" + (new Date()).getTime(),
    paths: {
        'jquery': 'lib/require-jquery',
        'angular': 'lib/angular/angular.min',
        'angular-resource': 'lib/angular/angular-resource.min'
    },
    shim: {
        'angular': { 'exports': 'angular' },
        'angular-resource': { deps: ['angular'] },
        'jQuery': { 'exports': 'jQuery' },
        'app/modules/app': 'angular'
    },
    dep: ['app']
});

require(['jquery', 'angular', 'app/modules/app'], function ($, angular, app) {
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['app']);
    });
});

Can you post your main.js? Also, take a look at marcoslin.github.io/angularAMD I created to help me integrate AngularJS and RequireJS. — marcoseu
– marcoseu, Commented Nov 21, 2013 at 20:22
Are you using ng-app to auto-bootstrap your app? Angular will try to start up before all your require scripts are loaded. — Sean Kent
– Sean Kent, Commented Dec 15, 2013 at 1:42

marcoseu · Accepted Answer · 2013-11-21 21:23:33Z

Base on your Update 2, the main.js and app.js should be:

main.js

require.config({
    baseUrl: '/Scripts/',
    urlArgs: "bust=" + (new Date()).getTime(),
    paths: {
        'app': 'app/modules/app',
        'jquery': 'lib/require-jquery',
        'angular': 'lib/angular/angular.min',
        'angular-resource': 'lib/angular/angular-resource.min'
    },
    shim: {
        'app': ['angular','angular-resource'],
        'angular-resource': ['angular']
    },
    dep: ['app']
});

app.js

define(['app/controllers/controller'], function (controllers) {
    'use strict';

    var app = angular.module('app', [
            'app.controllers'
    ]);
    app.config(['$routeProvider', function ($routeProvider) {
        $routeProvider.
          when('/phones', {
            templateUrl: 'Templates/phone-list.html',
            controller: 'PhoneListCtrl'
          }).
          when('/phones/:phoneId', {
            templateUrl: 'Templates/phone-detail.html',
            controller: 'PhoneDetailCtrl'
          }).
          otherwise({
            redirectTo: '/phones'
          });
    }]);

    angular.element(document).ready(function () {
        angular.bootstrap(document, ['app']);
    });

    return app;
});

As I cannot see all your code, I created a simple plunker to illustrate what should be done:
http://plnkr.co/edit/Mk2qHB8zUB28PDViNjv4?p=preview

Give angularAMD a try. It should make your life a lot easier.

Collectives™ on Stack Overflow

angular Failed to instantiate module

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related