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

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

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…

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.

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

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

Till next time,