Angular 2+: how to remove all angular attributes and comments (and other angular artifacts) from the HTML code?

Question

I want to utilise Angular in a not really usual way. I use it to generate the HTML that is later on used for various needs.

Why? I want this HTML to be static and in

Answer 1

As far as I am aware, you need to set the ViewEncapsulation to None. Understanding how this works is key, as these dynamically generated classes you do not want are there for the reason of specificity.

According to the Angular 4 documentation:

• Emulated: Provides a surrogate attribute, to allow each component to be absolutely independent, as if it were a Web Component (which is why the dynamic class is being added...again to allow it to be independent due to specificity.
• Native: Will utilise (excuse my British spelling) the Shadow DOM and as far as I am aware, will therefore not generate classes, because it can live independently. However using this may fail in certain browsers which do not support the Shadow DOM.
• None: I believe this is what you need, as it will not "provide any template or style encapsulation" as stated. In other words, you won't see the generated classes. However this could cause encapsulation issues, which is why you may want to avoid it.

To do this, use the following code in your component file (in the component decorator function:

encapsulation: ViewEncapsulation.None

Answer 2

You'll have to post-process the HTML using a library such as Tidy.

Tidy has options to strip attributes that aren't on a white-list and also remove comments, but it's a library and has to be run on a string or text file.

Tidy can be run via different platforms like PHP, NodeJS or .NET. Here's a NodeJS library:

https://github.com/vavere/htmltidy

Another option would be to use jQuery to update the DOM using a broad $('*').each() and just mutate the DOM elements before saving the HTML to where you need it.