Recently, I’ve been using Aurelia in conjunction with Cesium to develop a 3-D visualization app. I’m using Aurelia for navigation, custom components for various forms of selection and the main navigational view component contains Cesium:
One simple, but potentially frustrating issue I’ve run into is when my custom elements don’t appear in the app. This frequently leads me into the following train of thought:
- Why aren’t my custom elements showing up in Aurelia?
- Are there any warnings / errors in the browser console?
- Is there a bug in my View (HTML)?
- Why aren’t there any warnings / errors in the browser console?
- Is there a bug in my ViewModel (js)?
- Where are the darn warnings / errors in the browser console?
- Is Gulp watch working?
- What the heck is wrong with this thing — why aren’t there any warnings or errors!
- Why didn’t I become a Doctor like my mother always suggested!?!
After struggling with this train of thought for a while I finally realized I’d missed the following little snippet in my containing element’s HTML:
As you may have guessed from the above rant, this does not generate any warnings or errors. Instead, you may just end up with an empty component like this:
So, next time you start asking yourself “Why aren’t my custom elements showing up in Aurelia?” make sure you haven’t forgotten a <require> tag in the containing element. Either that or choose a less frustrating, time-consuming career and go back to medical school.