Requirejs optimizer with angularjs

Question

I am trying to make a sample application using angularjs, ui-router and requirejs to lazyload my controllers. It works good locally but I want to write requirejs optimizer for production environment, Tried using grunt:requirejs tool for this but it didnt work for me. It doesnt even give any script loading error or something..

<--index.html--!>
<!DOCTYPE html>
<html style="overflow-x:hidden">
  <head>
  </head>

  <body class="no-padding">
    <div data-ui-view="header"></div>
    <div data-ui-view="module"></div>
    <script data-main="app/main" src="bower_components/requirejs/require.js"></script>
  </body>

</html>


//main.js
require.config({
    baseUrl: "",
    // Paths for just the core application and its controllers/factories/services
    paths: {
            "jquery": "bower_components/jquery/dist/jquery",
        "angular":                    "bower_components/angular/angular.min",
        "angular-ui-router":          "bower_components/angular-ui-router/release/angular-ui-router.min",
          "app":                        "app/app",
        "underscore":                 "node_modules/underscore/underscore-min",
    },


  shim: {
        //Tell requirejs to pipe in angular"s return variable as "angular"
    "angular": {
      exports: "angular"
    },
  },
    // Say we have a dep on App, so it gets loaded
  deps: ["app", 'lib']
});

//lib.js
define([
  'jquery',
  'underscore',
], function($){
});


//app.js
define([
  'angular',
  'angular-ui-router'
], function(){
  var app = angular.module('app', ['ui.router']);


  //lazy loading
  var loadController = function(path){
    return ['$q', function($q){
      var defered = $q.defer();
      require([path], function(){
        defered.resolve();
      });
      return defered.promise;
    }]
  };


  app.config(['$controllerProvider',  function($controllerProvider){
    app.registerController = $controllerProvider.register;
  }]);


  app.config(['$stateProvider',  function($stateProvider){
    //registering controller
    // defining states
    $stateProvider.state('app', {
      url: '/',
      views: {
        'header':{
          templateUrl:"<div>{{title}}</div>",
          controller:"appCtrl"
        },
        'module':{
          template:"<div>{{title}}</div>",
          controller:"homeCtrl"
        }
      },
      resolve: {
         loadApp: loadController('../app/controllers/header'),
         loadHome: loadController('../app/controllers/home')
      }
    });
  }]);
  angular.bootstrap(document, ['app']);
  return app;
});

//home.js

define(function(){
  angular.module('app').registerController('homeCtrl', ['$scope', '$state', function($scope,$state){
    $scope.title = 'CONTENT';
  }]);
});

//header.js
define(function(){
   angular.module('app').registerController('appCtrl', ['$scope', '$state', function($scope,$state){
     $scope.title = 'HEADER';
   }]);
});

I was using grunt:requirejs task to compile an optimized dist file "main.js" and grunt copy for modified index.html inside dist directory:

grunt:requirejs and modified index.html -->

grunt.initConfig({
  //...
  requirejs: {
  compile: {
    options: {
      name: 'node_modules/almond/almond',
      mainConfigFile: 'app/main.js',
      out: 'dist/main_opt.js',
      baseUrl: './'
    }
  }
},
  //...
})

<--dist/index.html--!>
<!DOCTYPE html>
<html style="overflow-x:hidden">
  <head>
  </head>

  <body class="no-padding">
    <div data-ui-view="header"></div>
    <div data-ui-view="module"></div>
    <script src='bower_components/requirejs/require.js'></script>
<script>
        require.config({
            paths: {
                //Comment out this line to go back to loading
                //the non-optimized main.js source file.
                "main_opt": "dist/main_opt"
            }
        });
        require(["main_opt"]);
    </script>
  </body>

</html>

When loading dist/index.html it gives me nothing, no error in browser, just doesnt work, if it was giving me script loading error for controllers it might have made any sense but its not. Completely clueless here..

score 0 · Answer 1 · answered Jan 04 '16 at 20:22

0

There is nothing required in main.js file. You must require at least one of files declared in paths. Do it as follow:

require(['app'], function () {
    console.log('app required successfully');
});

Put this lines of code in your main.js file. I hope it may help to find errors:

requirejs.onError = function (err) {
    console.error('[require error] type: ', err.requireType, ' ,modules: ' + err.requireModules);
    throw err;
};

answered Jan 04 '16 at 20:22

Majid Yaghouti

907
12
25

Thank you very much for your response, @Majid Yaghouti, the main.js file is working fine without any optimization, I am writing `deps: ['app', 'lib']` which is loading the app and lib file and then the rest of the application for me. – smishr4 Jan 04 '16 at 23:09

Requirejs optimizer with angularjs

1 Answers1