angular.js templates problem-custom components are converted to self-closing tags

[capaj]

So I guess my question is-is this intentional? Prettier doesn't support angular.js?
Because only way to write a custom component in an Angular.js template is to use both opening and closing tag.

[j-f1]

From #1882 (comment):

I just updated to prettier 1.15.2 and I get this when I format our angular.js templates:

this totally breaks our angular.js app.
Guess it's back to the old 1.14.x version for us.
Can't you make the conversion to self-closing tags configurable?

[capaj]

BTW I don't mind if prettier says-hey let's not support that archaic framework. I can't wait until we can refactor it all to react in our app.
If this is the case for prettier-it would be nice to document this incompatibility in the readme or somewhere. Especially given the fact that angular.js doesn't give you any errors or warnings when it's compiling your templates. It's just chugging along ignoring the rest of your html happily. So it's really easy to miss the breakage when developing.

[emilio-martinez]

This isn't a framework issue. Custom elements cannot be self-closing, otherwise known as void elements in the spec: https://html.spec.whatwg.org/multipage/syntax.html#void-elements.

[ikatyang]

It seems you're using --parser babylon, which treats it as JSX:

Prettier 1.15.2
Playground link

--parser babylon

Input:

<analytics-top-resources
  ng-if="analytics.isTabSelected( 'resources' )"
></analytics-top-resources>

Output:

<analytics-top-resources ng-if="analytics.isTabSelected( 'resources' )" />;

Though we did not support angular.js (e.g., format ng-if), but at least it won't break your code with --parser html:

Prettier 1.15.2
Playground link

--parser html

Input:

<analytics-top-resources
  ng-if="analytics.isTabSelected( 'resources' )"
></analytics-top-resources>

Output:

<analytics-top-resources
  ng-if="analytics.isTabSelected( 'resources' )"
></analytics-top-resources>

(Please provide text example next time.)

[capaj]

@ikatyang oh my I am so sorry! I ran the command using my global installation of prettier and didn't notice it until today. 1.15.x works beautifully and it even uncovered cases where we currently have templates with a bad syntax:

Accept my humble apologies. I am gonna go and uninstall it now. Global installs are a pain.

Maybe come tho think of it-wouldn't it be nice to show a warning(with a current version printed out) when running prettier from a global install instead of a local one?