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

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

@filipesilva

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

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

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.

My mistake.
Thank you that was very informative.

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.

@jppellerin

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

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.

@bmcbarron

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

@filipesilva

@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!

@bmcbarron

@bmcbarron glad you got it sorted 👍

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"
  ],

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

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 ?

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

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

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

Navigation Menu

Repository navigation

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

OS?

Versions.

Repro steps.

The log given by the failure.

Mention any other details that might be useful.

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

OS?

Versions.

Repro steps.

The log given by the failure.

Mention any other details that might be useful.

Activity

hansl commented on Dec 30, 2016

filipesilva commented on Dec 30, 2016

filipesilva commented on Dec 31, 2016

mina-skunk commented on Jan 6, 2017

jppellerin commented on Jan 11, 2017

filipesilva commented on Jan 11, 2017

bmcbarron commented on May 23, 2017

filipesilva commented on May 23, 2017

bmcbarron commented on May 24, 2017

filipesilva commented on May 24, 2017

noobcoder267 commented on Oct 10, 2017

mina-skunk commented on Oct 10, 2017

julienmarantes commented on Nov 16, 2017

mina-skunk commented on Nov 16, 2017

julienmarantes commented on Nov 16, 2017

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

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions