CODEWITHSUNDEEP
angularjsrequirejsangular-ui-router
imsheth
imsheth

Reputation: 61

$injector:modulerr even after defining module

With reference to this link : http://www.syntaxsuccess.com/viewarticle/angular-with-requirejs-amd-and-oclazyload

and source code shared at : https://github.com/thelgevold/angular-lazy-load

I am creating a simple angular app, which has one abstract state too.

and getting the following error : Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.16/$injector/modulerr?p0=parentConnect&p1=E…8000%2Fparentconn%2Fbower_components%2Fangular%2Fangular.min.js%3A17%3A381)

Folder Structure is : enter image description here

index.html

<!DOCTYPE html>
<html lang="en" id="ng-app" ng-app="parentz">

<head>
  <meta charset="UTF-8">
  <title></title>

  <script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
  <script type="text/javascript" src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
  <script type="text/javascript" src="bower_components/oclazyload/dist/ocLazyLoad.min.js"></script>
  <script data-main="app/main" src="bower_components/requirejs/require.js"></script>
</head>

<body>
  <h1>Hello !</h1>
  <a ui-sref="parent.dashboard">Go to Parent Module</a>
  <div ui-view></div>
</body>

</html>

main.js 

// #1 Define requirejs requirement - application.js file which returns app object
require(['application'], function (app) {

	// #4 app object is returned here, call it's user defined bootstrap function
    app.bootstrap();

});

application.js

define([], function() {

  // #2 Defining the angular module name and it's dependeny array
  var app = angular.module('parentz', ['ui.router', 'oc.lazyLoad']);

  // #5 Enter the config phase and do the specified configurations
  app.config(['$ocLazyLoadProvider', '$stateProvider', '$urlRouterProvider',
    function($ocLazyLoadProvider, $stateProvider, $urlRouterProvider) {

      // #6 ocLL config, uses requirejs as asyncLoader and loads parentz module by default
      $ocLazyLoadProvider.config({
        loadedModules: ['parentz'],
        asyncLoader: require
      });

      // #7 All unmatched urls end up here
      $urlRouterProvider.otherwise('/index');

      // #8 Configuration of application wide states of all modules
      $stateProvider

        .state('index', {
        url: '/',
        templateUrl: 'index.html'
      })

      .state('parent', {

        // This is the abstract base layout/template state
        abstract: true,
        templateUrl: "app/parent/base.tpl.html",
        resolve: {
          load: function($ocLazyLoad) {

            return $ocLazyLoad.load({
              name: 'parent',
              files: ['app/parent/base.ctrl.js']

            });
          }
        }
      })

      .state('parent.dashboard', {
        url: '/parent/dashboard',
        templateUrl: 'app/parent/dashboard.tpl.html',
        resolve: {
          load: function($ocLazyLoad) {

            return $ocLazyLoad.load({
              name: 'parent',
              files: ['app/parent/dashboard.ctrl.js']
            });
          }
        }
      });

    }
  ]);

  // #9 User defined function that bootstraps the entire app
  app.bootstrap = function() {

    // Angular's bootstrap function
    // Use this function to manually start up angular application
    // Syntax = angular.bootstrap(element, [modules], [config]);
    // Here, we have the config block above
    angular.bootstrap(document, ['parentz']);

  };

  // #3 Return the app object
  return app;
});

parent/base.ctrl.js

angular.module('parent', []);

angular.module('parent').controller('module1Controller', ['service1',
  function(service1) {
    $scope.message = service1.getMessage();
  }
]);

angular.module('parent').factory('service1', function() {
  return {
    getMessage: function() {
      return 'Hello from lazy loaded service';
    }
  };
});

parent/base.tpl.html

<!--Base template for module-->
<h1>Parent Module</h1>
<hr />
<div ui-view></div>

parent/dashboard.ctrl.js

(function() {

  // Declaring angular module
  var app = angular.module('parent');

  // Defining angular controller
  app.controller('DashboardController', function($scope) {

    $scope.text = "Hello from the Ctrl";

  });

})();

parent/dashboard.tpl.html

<div>{{ $scope.text }}</div>

What am I doing wrong here?

Upvotes: 0

Views: 784

Answers (1)

imsheth
imsheth

Reputation: 61

A very small fix which my friend pointed out, whenever bootstrapping never to mention ng-app in the <html> tag.

In, index.html : ng-app="parentz" needed to be removed.

<html lang="en" id="ng-app">

Above line works fine, without any errors.

Because of require.js the module was not loading along with the page, it was loading after the page. Page doesn't know this so it tries looking for the 'parentz' module before application.js is executed.

Upvotes: 1

Related Questions