Load scripts in a synchronous order in Require JS

Question

   <head>
   <script language="javascript" src="require.js" data-main="scripts/main" >    
    </script>
    <script type="text/javascript" src="scripts/app.js"> </script> 
  </head>

The main.js has all the necessary libraries required by app.js(angular module) and hence I want to ensure app.js gets loaded only after all the libraries in the main.js are resolved through require call. But since require js behaves asynchronous way, app.js file gets loaded before the libraries in main.js file is loaded and hence error resolving app.js.

Kindly pour in your suggestions to restrict app.js from loading before main.js is loaded completely.

Thanks Santhosh

see stackoverflow.com/questions/13225245/require-js-synchronous — Shohel
– Shohel, Commented Nov 2, 2015 at 12:53
Am loading it for the first time and hence I cannot use the suggestion in the link shared — Santhosh
– Santhosh, Commented Nov 2, 2015 at 12:58
You should have data-main="scripts/app" and app.js should be written as a require.js module. — Quentin
– Quentin, Commented Nov 2, 2015 at 13:12
@Santhosh If you write script like this in header, its not loaded synchronously in browser. main.js took long time to load as compare to app.js in browser. Hence you getting this error. Try to load app.js via main.js file. — gaurav bhavsar
– gaurav bhavsar, Commented Nov 2, 2015 at 13:19

gaurav bhavsar · Accepted Answer · 2015-11-02 14:22:05Z

0

If you write script like this in head tag, its not loaded synchronously in browser. main.js took long time to load as compare to app.js in browser. Hence you getting this error. Try to load app.js via main.js file

Your have to use shim : {} to define dependencies in requireJS config file.

main.js

require.config({

paths: {
    'angular': '../lib/angular/angular',
    'angular-route': '../lib/angular-route/angular-route',
    'domReady': '../lib/requirejs-domready/domReady'
},

/**
 * for libs that either do not support AMD out of the box, or
 * require some fine tuning to dependency mgt'
 */
shim: {
    'angular': {
        exports: 'angular'
    },
    'angular-route': {
        deps: ['angular']
    }
},

deps: [
    // kick start application... see bootstrap.js
    './bootstrap'
]
});

In main.js you have to bootstrap your angular App and then have to call app.js from bootstrap.js

bootstrap.js

define([
    'require',
    'angular',
    'app',
    'routes'
], function (require, ng) {
'use strict';

/*
 * place operations that need to initialize prior to app start here
 * using the `run` function on the top-level module
 */

require(['domReady!'], function (document) {
    ng.bootstrap(document, ['app']);
    });

});

here in bootstrap file your app.js is called so always you app.js is called after main.js

For more information about angular with requireJS please refer startersquad example.

Read this documentation for more information.

edited Nov 2, 2015 at 14:22

answered Nov 2, 2015 at 12:54

gaurav bhavsar

2,0512 gold badges26 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Santhosh Over a year ago

Hello gaurav !! Here my problem is app.js is a angular module and the angular dependency is defined in main.js. But app.js is getting loaded before main.js loads completely. Also app.js doesnt have define functionality since as per requirement this is independent of require framework

Santhosh Over a year ago

along with modules mentioned above I want to pass on array of modules dynamically to bootstrap.js .Is this possible, being a newbie in js i'm little struck here. Can we pass a dependency array to main.js file while declaring it in html, thereby I can pass it down to bootstrap.

gaurav bhavsar Over a year ago

In main.js you are only define path of your JS file and also define dependencies ( to other JS if present). But your application is actually start from bootstrap.js

gaurav bhavsar Over a year ago

In bootstrap.js for are defining requireJS, angularJS and then appJS. After this its bootstrap DOM and insert app in document. Hope this will help you.

Collectives™ on Stack Overflow

Load scripts in a synchronous order in Require JS

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related