Angular. Build step to remove attribute from html markup

Question

We use "data-test" attribute in markup to query element in tests. For example:

<div data-test='myDiv'></div>

We don't want this attribute to be present in the production build. So far I found a workaround to create a directive that in runtime removes attribute for a production build. It's for sure will cost some CPU and seems doubtful. Looking for an approach to remove the attribute in build time. Any ideas are welcome.

Answer 1

Check this article on how to remove data-cy attributes during compilation (using webpack loader) or runtime (using directive). You can do exact the same steps for any data-* attribute (and ignore the Cypress stuff). Just replace the data-cy expression with data-test and you are done.

https://medium.com/agilix/angular-and-cypress-data-cy-attributes-d698c01df062

This works at least for Angular6+.