"Invalid self-closing element in index HTML file" error when using SVG in said index.html file since Angular 18 #27702

wartab · 2024-05-23T15:13:26Z

Command

build, serve

Is this a regression?

Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

17.x.x

Description

We're getting an issue when including an SVG tag (which expects valid XML) directly in our index.html file.

Minimal Reproduction

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <base href="/">
    <meta
            name="viewport"
            content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <style type="text/css">
        .main-loading-screen img {
            width: 100px;
            height: auto;
        }

        .main-loading-screen svg {
            animation-name: spin-loader;
            font-size: 6em;
            animation-iteration-count: infinite;
            animation-duration: 1s;
            animation-timing-function: steps(8);
        }

        @keyframes spin-loader {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
<app>
    <div class="loading-screen main-loading-screen">
        <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512">
            <defs>
                <style>.fa-secondary {
                    fill: currentColor;
                    opacity: 0.4;
                }
                .fa-primary {
                    fill: currentColor;
                }
                </style>
            </defs>
            <path class="fa-primary"
                  d="M256 0c-17.7 0-32 14.3-32 32V96c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32zM0 256c0 17.7 14.3 32 32 32H96c17.7 0 32-14.3 32-32s-14.3-32-32-32H32c-17.7 0-32 14.3-32 32zM120.2 75C107.7 62.5 87.5 62.5 75 75s-12.5 32.8 0 45.3l45.3 45.3c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L120.2 75z"/>
            <path class="fa-secondary"
                  d="M346.5 120.2c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L437 120.2c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-45.3 45.3zM384 256c0 17.7 14.3 32 32 32h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H416c-17.7 0-32 14.3-32 32zM256 384c-17.7 0-32 14.3-32 32v64c0 17.7 14.3 32 32 32s32-14.3 32-32V416c0-17.7-14.3-32-32-32zm135.8-37.5c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L391.8 437c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-45.3-45.3zM75 437c12.5 12.5 32.8 12.5 45.3 0l45.3-45.3c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L75 391.8c-12.5 12.5-12.5 32.8 0 45.3z"/>
        </svg>
    </div>
</app>
</body>
</html>

Exception or Error

X [ERROR] Invalid self-closing element in index HTML file: '<path class="fa-primary"
                  d="M256 0c-17.7 0-32 14.3-32 32V96c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32zM0 256c0 17.7 14.3 32 32 32H96c17.7 0 32-14.3 32-32s-14.3-32-32-32H32c-17.7 0-32 14.3-32 32zM120.2 75C107.7 62.5 87.5 62.5 75 75s-12.5 32.8 0 45.3l45.3 45.3c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L120.2 75z"/>'.


X [ERROR] Invalid self-closing element in index HTML file: '<path class="fa-secondary"
                  d="M346.5 120.2c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L437 120.2c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-45.3 45.3zM384 256c0 17.7 14.3 32 32 32h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H416c-17.7 0-32 14.3-32 32zM256 384c-17.7 0-32 14.3-32 32v64c0 17.7 14.3 32 32 32s32-14.3 32-32V416c0-17.7-14.3-32-32-32zm135.8-37.5c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L391.8 437c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-45.3-45.3zM75 437c12.5 12.5 32.8 12.5 45.3 0l45.3-45.3c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L75 391.8c-12.5 12.5-12.5 32.8 0 45.3z"/>'.

Your Environment

_                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 18.0.1
Node: 20.10.0
Package Manager: npm 9.6.4
OS: win32 x64

Angular: 18.0.0
... animations, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1800.1
@angular-devkit/core         18.0.1
@angular-devkit/schematics   18.0.1
@angular/build               18.0.1
@angular/cdk                 17.3.7
@angular/cli                 18.0.1
@angular/material            17.3.7
@schematics/angular          18.0.1
rxjs                         7.8.1
typescript                   5.4.5
zone.js                      0.14.5

Anything else relevant?

No response

The text was updated successfully, but these errors were encountered:

…x file Prior to this change, the Angular build process incorrectly flagged self-closing SVG tags (e.g., `<path />`) as invalid HTML. This commit rectifies this issue by explicitly allowing self-closing syntax for SVG elements embedded within the HTML index file. Closes: angular#27702

…x file Prior to this change, the Angular build process incorrectly flagged self-closing SVG tags (e.g., `<path />`) as invalid HTML. This commit rectifies this issue by explicitly allowing self-closing syntax for SVG elements embedded within the HTML index file. Closes: #27702

…x file Prior to this change, the Angular build process incorrectly flagged self-closing SVG tags (e.g., `<path />`) as invalid HTML. This commit rectifies this issue by explicitly allowing self-closing syntax for SVG elements embedded within the HTML index file. Closes: #27702 (cherry picked from commit 5f9053a)

angular-automatic-lock-bot · 2024-06-23T00:10:57Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

clydin added type: bug/fix severity5: regression area: @angular/build labels May 23, 2024

alan-agius4 mentioned this issue May 23, 2024

fix(@angular/build): support valid self-closing SVG tags in HTML index file #27703

Merged

alan-agius4 self-assigned this May 23, 2024

alan-agius4 closed this as completed in #27703 May 23, 2024

angular-automatic-lock-bot bot locked and limited conversation to collaborators Jun 23, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

"Invalid self-closing element in index HTML file" error when using SVG in said index.html file since Angular 18 #27702

"Invalid self-closing element in index HTML file" error when using SVG in said index.html file since Angular 18 #27702

wartab commented May 23, 2024 •

edited

Loading

angular-automatic-lock-bot bot commented Jun 23, 2024

"Invalid self-closing element in index HTML file" error when using SVG in said index.html file since Angular 18 #27702

"Invalid self-closing element in index HTML file" error when using SVG in said index.html file since Angular 18 #27702

Comments

wartab commented May 23, 2024 • edited Loading

Command

Is this a regression?

The previous version in which this bug was not present was

Description

Minimal Reproduction

Exception or Error

Your Environment

Anything else relevant?

angular-automatic-lock-bot bot commented Jun 23, 2024

wartab commented May 23, 2024 •

edited

Loading