How to Stop Aurelia 2 From Stripping Your Aurelia Attributes From the Compiled HTML

In Aurelia 1, you could debug and identify Aurelia applications based on specific attributes in the dom. In Aurelia 2, the default setting for compiled HTML is to strip away Aurelia framework attributes.

What this means is if you need to debug your HTML, see what custom attributes are being passed to a custom element, and so on, you won’t see anything.

Like everything in Aurelia, you can customise this. Inside your main.ts file, you can set debug mode to true to bring back the Aurelia specific HTML attributes and markup.

import Aurelia, { ITemplateCompiler } from 'aurelia';

Aurelia
  .register(
    AppTask.beforeCreate(ITemplateCompiler, compiler => compiler.debug = true),
  )

This will make it, so your dom is noisy again. Just remember to turn it off once you’re done. It will prevent the dom from bloating and introduce potential performance issues due to an excessive size page.