An Angular project I'm involved in uses RequireJS. Now I'm trying to optimize the project using r.js.

The following is my Angular Project Structure

 .
 |_ js            // all the libaries are in here
 |_ css           // all style sheets
 |_ ngApp         // app.js and some config files
 |_ ngControllers 
 |_ ngServices
 |_ ngFilters
 |_ ngTemplates
 |_ ngViews
 |_ ng_modules
 |
 |_ build.js
 |_ index.html
 |_ main.js    // RequireJS paths and shims
 |_ r.js

Following is my r.js build script

({
   dir: 'dist',// the output directory
   optimizeCss: 'standard',
   removeCombined: true,
   mainConfigFile: 'main.js',
   name : 'main',
   fileExclusionRegExp: /^((r|build|gulpfile)\.js|(node_modules))$/
})

Script tag used to add RequireJS is below.

<script data-main="main" src="js/require.js"></script>

My require.js config in main.js

'use strict';
require.config({
    waitSeconds: 0,
  paths: {
    jquery: 'js/jquery-1.11.3.min',
    angular: 'js/angular.min',
    angularAnimate: 'js/angular-animate.min',
    app: 'ngApp/app',

    /*Directives - Start*/
    masterHeaderDirective: 'ngDirectives/master-header-directive',
    .
    .
    .
    /*Directives - End*/

    /*Services - Start*/
    interceptor: 'ngServices/Common/app-service-interceptor',
    .
    .
    .
    /*Services - Start*/

    /*register Filters - Start*/
    currencySymbolFilter: 'ngFilters/currenySymbolFilter',
    /*register Filters - End*/

    /*Controllers - Start*/
    mainController: 'ngControllers/mainController.js',
    .
    .
    .
    /*Controllers - Ends*/

    /*textAngular*/
    textAngular: 'js/textAngular/textAngular.min',
    textAngularRangy: 'js/textAngular/textAngular-rangy.min',
    textAngularSanitize: 'js/textAngular/textAngular-sanitize.min',

    modernizr: 'js/modernizr.custom',
    detectizr: 'js/detectizr',

    /*i18n custom*/
    i18nCustom : 'ngDirectives/i18n-custom-directive',
    i18nCustomService : 'ngServices/Common/i18n-helper-service',
    i18nCustomController : 'ngControllers/Common/i18n-helper-controller',
    /*i18n custom ends*/

  },
  shim: {
    'angular': { deps: ['jquery'], exports: 'angular' },
    'angularAnimate': { deps: ['angular'] },
    'angularRoute': { deps: ['angular'] },
    'dirPagination': { deps: ['angular'] },
    .
    .
    .
  },
   deps: ['app']
});

At the end of build, I get dist folder with all my .js and .css files minified in their respective folders. Also, main.js inside dist folder contains the minified concatenation of all files mentioned in main.js.

But when I open my dist folder in browser, instead of using controllers, services etc from the minified-concatenated main.js, they are being loaded from their respective dist/folder.

If I remove a folder, for eg. dist/ngController, the app breaks, which means that the presence of files in dist/ngController inside dist/main.js is not respected. Could some one explain this behaviour.

0

There are 0 best solutions below