maintain the scripts order as per the angular-cli.json configuration

[mina-skunk]

OS?

Windows 10

Versions.

angular-cli: 1.0.0-beta.24
node: 6.9.2
os: win32 x64

Repro steps.

My angular-cli.json has the following:

...
"scripts": [
    ... 
    "../node_modules/jquery-ui/ui/widget.js",
    "../node_modules/jquery-ui/ui/widgets/datepicker.js",
    "../node_modules/jquery-ui-timepicker-addon/dist/jquery-ui-timepicker-addon.js",
    ...
],
...

The log given by the failure.

At https://github.com/trentrichardson/jQuery-Timepicker-Addon/blob/master/dist/jquery-ui-timepicker-addon.js#L15 I get Uncaught TypeError: Cannot read property 'timepicker' of undefined. I found this is because webpack is loading the scripts in the following order:

-jquery-ui-timepicker-addon.js
-widget.js
-datepicker.js

widget.js needs to load before jquery-ui-timepicker-addon.js. Why dose webpack not load in the same order as the configuration and how do you determine the order the files load?

Mention any other details that might be useful.

http://stackoverflow.com/questions/39964281/how-to-order-angular-cli-scripts

[hansl]

@filipesilva could you look into this? I was under the impression we did respect the order already.

[filipesilva]

Ok this is a really bad bug. Will look into it.

[filipesilva]

Heya, I was looking into this and as far as I can tell, we do respect the order.

This is what I did:

• npm install jquery jquery-ui jquery-ui-timepicker-addon
• added scripts to angular-cli.json:

      "scripts": [
        "../node_modules/jquery/dist/jquery.js",
        "../node_modules/jquery-ui/ui/widget.js",
        "../node_modules/jquery-ui/ui/widgets/datepicker.js",
        "../node_modules/jquery-ui-timepicker-addon/dist/jquery-ui-timepicker-addon.js"
      ],

• went into each of these files, and added console.log('name'); at the start to know the order in which they loaded.
• ng build
• ng serve

This is what I saw in my console:

I also checked the built scripts.bundle.js, and while it does look like they are loaded in the wrong order because of the numbers, they are loaded in the right order:

__webpack_require__(343); // jquery
__webpack_require__(341); // widget
__webpack_require__(342); // datepicker
module.exports = __webpack_require__(340); // timepicker

I looked a bit more, and it's actually failing on this line:

$.ui.timepicker = $.ui.timepicker || {};

Turns out that $.ui is undefined. I did some more looking around and apparently node_modules/jquery-ui/ui/version.js is being called at the start of the official dist, and that sets $.ui.

I added it to the scripts array and it seems to get rid of the error:

      "scripts": [
        "../node_modules/jquery/dist/jquery.js",
        "../node_modules/jquery-ui/ui/version.js",
        "../node_modules/jquery-ui/ui/widget.js",
        "../node_modules/jquery-ui/ui/widgets/datepicker.js",
        "../node_modules/jquery-ui-timepicker-addon/dist/jquery-ui-timepicker-addon.js"
      ],

I don't know if this is enough to make the plugin work though. I couldn't fine instructions to load it correctly from npm, but this should be enough to get you going on the right direction.