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

mina-skunk commented 7 years ago

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 commented 7 years ago

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

filipesilva commented 7 years ago

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

filipesilva commented 7 years ago

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 commented 7 years ago

My mistake. Thank you that was very informative.

jppellerin commented 7 years ago

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 commented 7 years ago

@jppellerin your issue is https://github.com/angular/angular-cli/issues/2141 I think, fixed by https://github.com/angular/angular-cli/pull/3814 (not merged yet).

bmcbarron commented 7 years ago

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 commented 7 years ago

@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 commented 7 years ago

@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 commented 7 years ago

@bmcbarron glad you got it sorted 👍

bhparijat commented 7 years ago

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 commented 7 years ago

@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 commented 6 years ago

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 commented 6 years ago

@yume117 have you tried putting vis before materialize? https://github.com/almende/vis/issues/2000

julienmarantes commented 6 years ago

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[bot] commented 5 years ago

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.}

angular / angular-cli