Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Inheritance issue w/ Typescript (JavaScript) and MVC Bundling Ordering

DZone's Guide to

Inheritance issue w/ Typescript (JavaScript) and MVC Bundling Ordering

· Web Dev Zone ·
Free Resource

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Today I extended one of our classes to use inheritance via Typescript (love that).  When I refreshed the page I received an error here

http://s3.amazonaws.com/Devlicious/CommunityServer.Blogs.Components.WeblogFiles/derik_whittaker/image_4DA86122.png?AWSAccessKeyId=0KMA35HT86EVXB99Z302&Expires=1367361468&Signature=YEkmeVSKrxZF%2fBEcYS0ZwQjGWQY%3d

When I dropped to the Chrome debugger and outputted both the values for both ‘d’ and ‘b’ I was a bit shocked.  ‘d’ was valid, but ‘b’ was undefined.  I tried a whole slew of things but nothing came to mind.  Of course I thought maybe I was using inheritance wrong, but my syntax was right.

After some digging online I found this link which talks about how a parent class has to be loaded prior to it child for everything to work.  This makes perfect sense given the way JavaScript parses code.  I had this brilliant idea that I would simply add a _ prefix to my base class name and that would have the file loaded first.  WRONG…

If you look at the image below you can see that _BaseViewModel.js is way at the bottom of the list and my error was being thrown in the AthleteListingViewModel…

http://s3.amazonaws.com/Devlicious/CommunityServer.Blogs.Components.WeblogFiles/derik_whittaker/image_680AE4EA.png?AWSAccessKeyId=0KMA35HT86EVXB99Z302&Expires=1367361483&Signature=dnEJJvmKRArVOMr1MBw2WdtgiOs%3d

Somehow I needed to force the bundler to load the files in the order I wanted.  In our case I am NOT including each file into the bundle manually, rather I am using the ‘IncludeDirectory’ feature. 

After a bit more searching I found this link which solved the same basic problem but in a much more complex way than I needed.  However it showed me how I could solve the problem in a few lines of code.  What I needed to do was create a new instance of IBundleOrderer and use it.

This code is my AlphaSortedBundleOrderer which solved my issues.

    public class AlphaSortedBundleOrderer : IBundleOrderer  
    {  
        public IEnumerable OrderFiles(BundleContext context, IEnumerable files)  
        {  
            var sortedFiles = files.OrderBy(x => x.Name).ToList();  
      
            return sortedFiles;  
        }  
    }  

After I created my new AlphaSortedBundleOrdered I just needed to use it in my bundler.  I did this as you see below.

http://s3.amazonaws.com/Devlicious/CommunityServer.Blogs.Components.WeblogFiles/derik_whittaker/image_708E4434.png?AWSAccessKeyId=0KMA35HT86EVXB99Z302&Expires=1367361496&Signature=0LhlIBR4seWxJ0xzDaimEbOCFMU%3d

Once I had my bundler setup correctly I re-ran the page and my .js files were ordered as expected.

http://s3.amazonaws.com/Devlicious/CommunityServer.Blogs.Components.WeblogFiles/derik_whittaker/image_725E99FB.png?AWSAccessKeyId=0KMA35HT86EVXB99Z302&Expires=1367361509&Signature=SfIx7dLT90ZBrT9jOO%2fyMNxpADk%3d

Now I am sure there is a 100 ways to solve this problem, but this worked for me.

Till next time,




Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Topics:

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}