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

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

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,




Take a look at an Indigo.Design sample application to learn more about how apps are created with design to code software.

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