diff --git a/changelog_unreleased/angular/14170.md b/changelog_unreleased/angular/14170.md
new file mode 100644
index 000000000000..471169c7dbfe
--- /dev/null
+++ b/changelog_unreleased/angular/14170.md
@@ -0,0 +1,18 @@
+#### Allow self-closing tags on custom elements (#14170 by @fisker)
+
+See [Angular v15.1.0 release note](https://github.com/angular/angular/releases/tag/15.1.0) for details.
+
+
+```html
+// Input
+
+
+// Prettier stable
+SyntaxError: Only void and foreign elements can be self closed "app-test" (1:1)
+> 1 |
+ | ^^^^^^^^^
+ 2 |
+
+// Prettier main
+
+```
diff --git a/src/language-html/parser-html.js b/src/language-html/parser-html.js
index 5763fe7c72b9..a959d6e11cd2 100644
--- a/src/language-html/parser-html.js
+++ b/src/language-html/parser-html.js
@@ -24,7 +24,7 @@ const { locStart, locEnd } = require("./loc.js");
* @typedef {import('angular-html-parser/lib/compiler/src/ml_parser/parser').ParseTreeResult} ParserTreeResult
* @typedef {Omit & {
* name?: 'html' | 'angular' | 'vue' | 'lwc';
- * recognizeSelfClosing?: boolean;
+ * canSelfClose?: boolean;
* normalizeTagName?: boolean;
* normalizeAttributeName?: boolean;
* }} ParserOptions
@@ -42,7 +42,7 @@ const { locStart, locEnd } = require("./loc.js");
function ngHtmlParser(
input,
{
- recognizeSelfClosing,
+ canSelfClose,
normalizeTagName,
normalizeAttributeName,
allowHtmComponentClosingTags,
@@ -64,7 +64,7 @@ function ngHtmlParser(
} = require("angular-html-parser/lib/compiler/src/ml_parser/html_tags");
let { rootNodes, errors } = parser.parse(input, {
- canSelfClose: recognizeSelfClosing,
+ canSelfClose,
allowHtmComponentClosingTags,
isTagNameCaseSensitive,
getTagContentType,
@@ -97,7 +97,7 @@ function ngHtmlParser(
let secondParseResult;
const doSecondParse = () =>
parser.parse(input, {
- canSelfClose: recognizeSelfClosing,
+ canSelfClose,
allowHtmComponentClosingTags,
isTagNameCaseSensitive,
});
@@ -135,13 +135,13 @@ function ngHtmlParser(
}
} else {
// If not Vue SFC, treat as html
- recognizeSelfClosing = true;
+ canSelfClose = true;
normalizeTagName = true;
normalizeAttributeName = true;
allowHtmComponentClosingTags = true;
isTagNameCaseSensitive = false;
const htmlParseResult = parser.parse(input, {
- canSelfClose: recognizeSelfClosing,
+ canSelfClose,
allowHtmComponentClosingTags,
isTagNameCaseSensitive,
});
@@ -373,7 +373,7 @@ function _parse(text, options, parserOptions, shouldParseFrontMatter = true) {
*/
function createParser({
name,
- recognizeSelfClosing = false,
+ canSelfClose = false,
normalizeTagName = false,
normalizeAttributeName = false,
allowHtmComponentClosingTags = false,
@@ -386,7 +386,7 @@ function createParser({
text,
{ parser: name, ...options },
{
- recognizeSelfClosing,
+ canSelfClose,
normalizeTagName,
normalizeAttributeName,
allowHtmComponentClosingTags,
@@ -405,15 +405,15 @@ module.exports = {
parsers: {
html: createParser({
name: "html",
- recognizeSelfClosing: true,
+ canSelfClose: true,
normalizeTagName: true,
normalizeAttributeName: true,
allowHtmComponentClosingTags: true,
}),
- angular: createParser({ name: "angular" }),
+ angular: createParser({ name: "angular", canSelfClose: true }),
vue: createParser({
name: "vue",
- recognizeSelfClosing: true,
+ canSelfClose: true,
isTagNameCaseSensitive: true,
getTagContentType: (tagName, prefix, hasParent, attrs) => {
if (
diff --git a/tests/format/angular/self-closing/__snapshots__/jsfmt.spec.js.snap b/tests/format/angular/self-closing/__snapshots__/jsfmt.spec.js.snap
new file mode 100644
index 000000000000..f4a624bed741
--- /dev/null
+++ b/tests/format/angular/self-closing/__snapshots__/jsfmt.spec.js.snap
@@ -0,0 +1,36 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`self-closing.component.html format 1`] = `
+====================================options=====================================
+parsers: ["angular"]
+printWidth: 80
+ | printWidth
+=====================================input======================================
+
+
+
+
+
+
+
+
+
+
+
+=====================================output=====================================
+
+
+
+
+
+
+
+
+
+
+
+================================================================================
+`;
diff --git a/tests/format/angular/self-closing/jsfmt.spec.js b/tests/format/angular/self-closing/jsfmt.spec.js
new file mode 100644
index 000000000000..b802ad8670c5
--- /dev/null
+++ b/tests/format/angular/self-closing/jsfmt.spec.js
@@ -0,0 +1 @@
+run_spec(__dirname, ["angular"]);
diff --git a/tests/format/angular/self-closing/self-closing.component.html b/tests/format/angular/self-closing/self-closing.component.html
new file mode 100644
index 000000000000..06e1d53f7657
--- /dev/null
+++ b/tests/format/angular/self-closing/self-closing.component.html
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+
+