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

mina-skunk · 2016-12-29T17:53:46Z

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

The text was updated successfully, but these errors were encountered:

hansl · 2016-12-30T01:17:39Z

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

filipesilva · 2016-12-30T10:19:37Z

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

filipesilva · 2016-12-31T21:58:16Z

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.

mina-skunk · 2017-01-06T20:09:04Z

My mistake.
Thank you that was very informative.

jppellerin · 2017-01-11T15:30:10Z

I had the same problem with moment.js and it's plugin moment-timezone.js where I had this :

"scripts": [
    "../node_modules/jquery/dist/jquery.js",
    ...
    "../node_modules/moment/moment.js",
    "../node_modules/moment-timezone/moment-timezone.js"
],
...

This was working on angular-cli 1.0.0-beta.17, but when I upgraded to beta.24, this stopped working. Error it was giving me was that moment is not a function.

My workaround was to import moment from within typescript as I didn't require it to be global (maybe for the best in the end).

I'm posting here as general information that there is a change in the cli/webpack that doesn't behave as it used to with 3rd party libraries.

filipesilva · 2017-01-11T15:33:34Z

@jppellerin your issue is #2141 I think, fixed by #3814 (not merged yet).

bmcbarron · 2017-05-23T01:52:55Z

I feel like an idiot bringing this up again, since this has been verified fixed twice, but I'm seeing this behavior in @angular/cli 1.0.4.

 "scripts": [
    "../node_modules/hammerjs/hammer.js",
    "../node_modules/moonshine/vm/moonshine.js",
    "../node_modules/moonshine/distillery/distillery.moonshine.js",
    "../node_modules/moonshine/extensions/luac/luac.moonshine.js"
  ],

The three moonshine packages need to be included in that order, but most of the time they aren't. The order seems variable, each time I run ng build or ng serve.

I've tried adding a console.log(); to the start of each file, to observe the order changing. I've looked at scripts.bundle.js directly on disk, and in the browser. I've purged my browser cache and done a hard reset.

If I am being an idiot, I apologize. I'm pretty sure I've eliminated all the explanations mentioned above.

filipesilva · 2017-05-23T10:26:22Z

@bmcbarron trying to repro with your example and latest CLI.

I installed hammerjs and moonshine, added them to the scripts array in the order you showed, added console.log('filename'); to each at the very top (outside any function), and ran ng serve -o 10 times.

I always got the same results every run:

VM311:1 hammer.js
VM313:1 moonshine.js
VM314:1 distillery.moonshine.js
VM315:1 luac.moonshine.js
core.es5.js:3046 Angular is running in the development mode. Call enableProdMode() to enable the production mode.

bmcbarron · 2017-05-24T09:49:27Z

@filipesilva yep, you're right.

For posterity, I was tripped up by this combo:
'use strict'; var shine = shine || {};
When used in two consecutively included files, shine refers to different local variables, since the files are not executed in the same local variable scope. However, adding console.log() prior to 'use strict' negates its effect, causing both local 'shine' variables to instead refer to window.shine. Tricky.

Thanks for the sanity check!

filipesilva · 2017-05-24T21:20:37Z

@bmcbarron glad you got it sorted 👍

bhparijat · 2017-10-10T04:55:57Z

Hey Guys I just have a question . I was including boostrap 4 modal and had included script files in my angular cli script array but the modal was not working . It just was not getting opened. But as soon as I did ng bulild miraculously everything started working . Could any one explain why?
Thanks in advance .
This is my script array
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",

            "../node_modules/tether/dist/js/tether.min.js",
    
            "../node_modules/bootstrap/dist/js/bootstrap.min.js"
  ],

mina-skunk · 2017-10-10T15:06:25Z

@parijat129 I think .angular-cli.json isn't "watched". So if you are running ng serve and edit .angular-cli.json you need to stop and start ng serve again.

julienmarantes · 2017-11-16T14:23:22Z

Using vis.js and materialize

I get this error :

Uncaught TypeError: Hammer.assign is not a function
    at propagating (vis.js:37731)
    at Object.<anonymous> (vis.js:1915)
    at __webpack_require__ (vis.js:57)
    at Object.<anonymous> (vis.js:34498)
    at __webpack_require__ (vis.js:57)
    at Object.<anonymous> (vis.js:28975)
    at __webpack_require__ (vis.js:57)
    at exports.__esModule (vis.js:100)
    at vis.js:103
    at webpackUniversalModuleDefinition (vis.js:30)

In package.json :

"vis": "4.21.0",
"jquery": "^2.2.4",
"hammerjs": "^2.0.8",
"materialize-css": "^0.100.2",
"angular2-materialize": "^15.1.10",

In angular-cli.json

      "styles": [
        "../node_modules/materialize-css/dist/css/materialize.css",
        "../node_modules/vis/dist/vis.min.css",
        "assets/scss/main.scss"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.js",
        "../node_modules/hammerjs/hammer.js",
        "../node_modules/materialize-css/dist/js/materialize.js",
        "../node_modules/vis/dist/vis.min.js"
        ],

I checked that hammerjs, jquery, vis.js and materialize were correctly installed and present in /node_modules directory

hammerjs, jquery and materialize were already installed and working in the project. Which is a simple web site.

I don't see any issue appart from the fact that the scripts order could be messed up at some point ?

mina-skunk · 2017-11-16T17:08:33Z

@yume117 have you tried putting vis before materialize? almende/vis#2000

julienmarantes · 2017-11-16T19:39:37Z

Yes I tried, I also tried to download vis.js and vis.css, put it in assets folder and load it in index.html (like cdnjs) I get the same result

angular-automatic-lock-bot · 2019-09-07T16:40:54Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

hansl assigned filipesilva Dec 30, 2016

hansl added the needs: investigation Requires some digging to determine if action is needed label Dec 30, 2016

This was referenced Dec 30, 2016

global variable in js files called in script array in angular-cli.json #3742

Closed

In Angular-Cli WebPack scripts, i want to reordered the bundled scripts #3745

Closed

filipesilva closed this as completed Dec 31, 2016

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 7, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

mina-skunk commented Dec 29, 2016

hansl commented Dec 30, 2016

filipesilva commented Dec 30, 2016

filipesilva commented Dec 31, 2016

mina-skunk commented Jan 6, 2017

jppellerin commented Jan 11, 2017

filipesilva commented Jan 11, 2017

bmcbarron commented May 23, 2017

filipesilva commented May 23, 2017

bmcbarron commented May 24, 2017

filipesilva commented May 24, 2017

bhparijat commented Oct 10, 2017

mina-skunk commented Oct 10, 2017

julienmarantes commented Nov 16, 2017 •

edited

Loading

mina-skunk commented Nov 16, 2017

julienmarantes commented Nov 16, 2017

angular-automatic-lock-bot bot commented Sep 7, 2019

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

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

Comments

mina-skunk commented Dec 29, 2016

OS?

Versions.

Repro steps.

The log given by the failure.

Mention any other details that might be useful.

hansl commented Dec 30, 2016

filipesilva commented Dec 30, 2016

filipesilva commented Dec 31, 2016

mina-skunk commented Jan 6, 2017

jppellerin commented Jan 11, 2017

filipesilva commented Jan 11, 2017

bmcbarron commented May 23, 2017

filipesilva commented May 23, 2017

bmcbarron commented May 24, 2017

filipesilva commented May 24, 2017

bhparijat commented Oct 10, 2017

mina-skunk commented Oct 10, 2017

julienmarantes commented Nov 16, 2017 • edited Loading

mina-skunk commented Nov 16, 2017

julienmarantes commented Nov 16, 2017

angular-automatic-lock-bot bot commented Sep 7, 2019

julienmarantes commented Nov 16, 2017 •

edited

Loading