After optimizing project with r.js, and building concatinated-minified main.js, browser still loads js files from their respective dist/folder

Question

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.

Please add to your question your RequireJS configuration, and the `script` elements that load the RequireJS configuration and start your app in the same order they appear in the HTML. — Louis, Aug 19 '16 at 14:50
@Louis, I've edited the question with script tag and require config. All other scripts are loaded through require only — Shabin Muhammed, Aug 19 '16 at 15:56
It there any `require` call outside your `main.js` *after* the build? — Louis, Aug 19 '16 at 16:01
No, none at all. You see, I have mainController inside dist/ngControllers folder as well as in dist/main.js. If I delete the one in dist/ngControllers, the app breaks. — Shabin Muhammed, Aug 19 '16 at 16:38
Well, then I'm just not seeing it. I thought maybe you ran into an issue similar to [this one](http://stackoverflow.com/questions/39005682/requirejs-optimization-into-multiple-modules). The OP there uses multiple modules, which makes the problem more likely. But if you do have a single module and you to have a `require(['X'])` call somewhere *outside* the bundle and `X` is a module *inside* the bundle, then you need to use the `bundles` configuration to make it work reliably. But you say you don't have `require` calls outside the built `main.js`, so... this is not it. — Louis, Aug 19 '16 at 16:44

After optimizing project with r.js, and building concatinated-minified main.js, browser still loads js files from their respective dist/folder

0 Answers0