Is there a way to prevent Angular from creating "helper" HTML ments? For example,

<div ng-include="myTemplate"></div>

Will transform into something like

<!-- ngInclude: 'hurr-durr.html' -->
<div ng-include="myTemplate"></div>

How do I stop this? I've looked into the Angular source, and I've seen these "helpers" are generated by an unconditional document.createComment inside almost every directive, so I guess there's no way to stop them all at once by using a config setting on a provider or something. But maybe there is some custom Angular build without "helpers"? I suppose I could write some Yeoman/Grunt task to remove/ment the .createComment-s from Angular's source whenever I scaffold a new project. Or maybe you guys know of a fiddle that already does that? And also, this raises my last question: Are those ments somehow crucial to the Angular's normal functioning? And if I remove them, will it cause some kind of instability in my app? Should a just rewrite the CSS and "deal with it"?

Is there a way to prevent Angular from creating "helper" HTML ments? For example,

<div ng-include="myTemplate"></div>

Will transform into something like

<!-- ngInclude: 'hurr-durr.html' -->
<div ng-include="myTemplate"></div>

How do I stop this? I've looked into the Angular source, and I've seen these "helpers" are generated by an unconditional document.createComment inside almost every directive, so I guess there's no way to stop them all at once by using a config setting on a provider or something. But maybe there is some custom Angular build without "helpers"? I suppose I could write some Yeoman/Grunt task to remove/ment the .createComment-s from Angular's source whenever I scaffold a new project. Or maybe you guys know of a fiddle that already does that? And also, this raises my last question: Are those ments somehow crucial to the Angular's normal functioning? And if I remove them, will it cause some kind of instability in my app? Should a just rewrite the CSS and "deal with it"?

• javascript
• angularjs

• 1 possible duplicate of angularjs leaves ments in HTML is it possible to remove them? – AncientSwordRage Commented Mar 3, 2015 at 9:46

3 Answers 3

The ments are crucial to how Angular handles certain elements. Removing them is not currently an option. What issues are you having with it?

You are able to remove the contents of these angular ments, as well as some of the classes angular attaches to elements (e.g ng-scope) by adding this config to your angular module:

myApp.config(['$pileProvider', function ($pileProvider)
{
    $pileProvider.debugInfoEnabled(false);
}]);

According to the angular.js docs, it is actually good to do this in production and should result in a performance boost.

From Angular Doc:

Disabling Debug Data

By default AngularJS attaches information about binding and scopes to DOM nodes, and adds CSS classes to data-bound elements:

As a result of ngBind, ngBindHtml or {{...}} interpolations, binding data and CSS class ng-binding are attached to the corresponding element.

Where the piler has created a new scope, the scope and either ng-scope or ng-isolated-scope CSS class are attached to the corresponding element. These scope references can then be accessed via element.scope() and element.isolateScope().

Tools like Protractor and Batarang need this information to run, but you can disable this in production for a significant performance boost with:

myApp.config(['$pileProvider', function ($pileProvider) {
  $pileProvider.debugInfoEnabled(false);
}]);

If you wish to debug an application with this information then you should open up a debug console in the browser then call this method directly in this console:

angular.reloadWithDebugInfo();

The page should reload and the debug information should now be available.

For more see the docs pages on $pileProvider and angular.reloadWithDebugInfo.