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

[marzoukali]

I working on Angular2 project. I used Angular-CLI to scaffold my angular app.

Angular-CLI by default use WebPack to handle a lot of things and one of this things is bundling the scripts.

I installed this package using npm: codrops-animated-header which required from me to include one script above the other, so in angular-cli.json i ordered them as needed (check the last 2 lines: I want to load classie.js before cbpAnimatedHeader.min.js):

  "scripts": [
      "../node_modules/jquery/dist/jquery.js",
      "../node_modules/tether/dist/js/tether.js",
      "../node_modules/bootstrap/dist/js/bootstrap.js",
      "../node_modules/codrops-animated-header/js/classie.js",
      "../node_modules/codrops-animated-header/js/cbpAnimatedHeader.min.js"
  ],

but in the console i found this error:

Uncaught TypeError: Cannot read property 'classList' of null
at Object.addClass (eval at module.exports (http://localhost:4200/scripts.bundle.js:1:1), <anonymous>:33:9)
at d (eval at module.exports (http://localhost:4200/scripts.bundle.js:1:1), <anonymous>:11:262)
at ZoneDelegate.invokeTask (http://localhost:4200/vendor.bundle.js:100298:35)
at Zone.runTask (http://localhost:4200/vendor.bundle.js:100174:47)
at ZoneTask.invoke (http://localhost:4200/vendor.bundle.js:100368:33)
at data.args.(anonymous function) (http://localhost:4200/vendor.bundle.js:101247:25)

and when i checked the bundle script i found that cbpAnimatedHeader.min.js comes before classie.js as shown below:

    /***/ 782:
/***/ function(module, exports) {

module.exports = "/**\n * cbpAnimatedHeader.min.js v1.0.0\n * http://www.codrops.com\n *\n * Licensed under the MIT license.\n * http://www.opensource.org/licenses/mit-license.php\n * \n * Copyright 2013, Codrops\n * http://www.codrops.com\n */\nvar cbpAnimatedHeader=(function(){var b=document.documentElement,g=document.querySelector(\".cbp-af-header\"),e=false,a=300;function f(){window.addEventListener(\"scroll\",function(h){if(!e){e=true;setTimeout(d,250)}},false)}function d(){var h=c();if(h>=a){classie.add(g,\"cbp-af-header-shrink\")}else{classie.remove(g,\"cbp-af-header-shrink\")}e=false}function c(){return window.pageYOffset||b.scrollTop}f()})();"

/***/ },

/***/ 783:
/***/ function(module, exports) {

module.exports = "/*!\n * classie - class helper functions\n * from bonzo https://github.com/ded/bonzo\n * \n * classie.has( elem, 'my-class' ) -> true/false\n * classie.add( elem, 'my-new-class' )\n * classie.remove( elem, 'my-unwanted-class' )\n * classie.toggle( elem, 'my-class' )\n */\n\n/*jshint browser: true, strict: true, undef: true */\n/*global define: false */\n\n( function( window ) {\n\n'use strict';\n\n// class helper functions from bonzo https://github.com/ded/bonzo\n\nfunction classReg( className ) {\n  return new RegExp(\"(^|\\\\s+)\" + className + \"(\\\\s+|$)\");\n}\n\n// classList support for class management\n// altho to be fair, the api sucks because it won't accept multiple classes at once\nvar hasClass, addClass, removeClass;\n\nif ( 'classList' in document.documentElement ) {\n  hasClass = function( elem, c ) {\n    return elem.classList.contains( c );\n  };\n  addClass = function( elem, c ) {\n    elem.classList.add( c );\n  };\n  removeClass = function( elem, c ) {\n    elem.classList.remove( c );\n  };\n}\nelse {\n  hasClass = function( elem, c ) {\n    return classReg( c ).test( elem.className );\n  };\n  addClass = function( elem, c ) {\n    if ( !hasClass( elem, c ) ) {\n      elem.className = elem.className + ' ' + c;\n    }\n  };\n  removeClass = function( elem, c ) {\n    elem.className = elem.className.replace( classReg( c ), ' ' );\n  };\n}\n\nfunction toggleClass( elem, c ) {\n  var fn = hasClass( elem, c ) ? removeClass : addClass;\n  fn( elem, c );\n}\n\nvar classie = {\n  // full names\n  hasClass: hasClass,\n  addClass: addClass,\n  removeClass: removeClass,\n  toggleClass: toggleClass,\n  // short names\n  has: hasClass,\n  add: addClass,\n  remove: removeClass,\n  toggle: toggleClass\n};\n\n// transport\nif ( typeof define === 'function' && define.amd ) {\n  // AMD\n  define( classie );\n} else {\n  // browser global\n  window.classie = classie;\n}\n\n})( window );\n"

/***/ },

So, is it any way to reordered the bundled scripts in WebPack using Angular-cli or without it

[clydin]

classList is accessed by the classie script which indicates that ordering is not the problem. It looks like you may need a classList polyfill.
Also, depending on the browsers your looking to support, you may want to check out the following documentation on angular related polyfills: https://angular.io/docs/ts/latest/guide/browser-support.html

[filipesilva]

Dupe of #3782

[filipesilva]

See my answer in #3782 (comment). It might look like they aren't being loaded in the right order, but they actually are.

I think @clydin's answer addresses the real issue. Also see #3309, if classList is being loaded via core-js or something in polyfills.ts then it won't be available in scripts. Simply remove add core-js to scripts instead.

[filipesilva]

Oh, here's some info on a classList polyfill: https://angular.io/docs/ts/latest/guide/browser-support.html#!#classlist

[angular-automatic-lock-bot]

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