Avoiding Visual Studio validation errors with Angular UI Bootstrap

Question

Angular UI Bootstrap introduces several new HTML tags, such as accordion and accordion-group. Angular does a good job of teaching the browser new tricks to use these.

But how do I teach Visual Studio to not complain about unknown elements? Perhaps there is a way to tell Visual Studio about the tags or a way to write the HTML that doesn't use the non-standard tags.

Answer 1

All of ui-bootstrap's directives use A as a restrict value alongside of E.

So you can just do <div accordion-group></div>

Answer 2

Visual Studio 2013 Update 4 removes the validation, however it does not include IntelliSense for AngularJS.

Support for custom elements, polymer-elements and attributes

We no longer validate unknown attributers for custom elements as there will be many custom made tags in different frameworks. So there will no longer be squiggles under the unknown elements.

— Announcing new Web Features in Visual Studio 2013 Update 4 RC

Download Visual Studio 2013 Update 4.

Validation is only removed in the HTML editor, not the HTML (Web Forms) editor. This means that, by default, .html files will not have custom element validation, but .aspx pages will. If, like me, you don't think this makes sense, show your support by voting for custom elements in .aspx files.

Answer 3

An alternative workaround (if you don't want to change the way you write Angular.js code) is to disable Visual Studio's HTML validation entirely:

Open Tools → Options → HTML (Web Forms) → Validation. Uncheck Show errors. Click Ok.

Answer 4

I unchecked show errors for HTML validation. This may not work for everyone because this is not angularjs specific but it does remove the validation errors.