Skip to content

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

Closed
@cattermo

Description

@cattermo

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

When fixing this issue #27702 it seems like the 'animate' tag was forgotten.
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animate
So when using an svg with an animate tag inside index.hml there is an error in the build.

Minimal Reproduction

<!doctype html>
<html lang="en">

<head>
	<base href="/">

	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

	<link rel="icon" type="image/x-icon" href="favicon.ico">
	
	<style type="text/css">
	
	</style>
	
</head>

<body>


		<svg image-rendering="auto" baseProfile="basic" version="1.1" x="0px" y="0px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
			<g transform="scale(0.2 0.2)">
				<g >
					<g>
						<g>
							<g>
								<g>
									<path fill="#000" stroke="none" d="M331.75 315.75Q331.75 316.65 332.4 317.3 333.05 318 334 318 334.9 318 335.55 317.3 336.25 316.65 336.25 315.75 336.25 314.85 335.55 314.15 334.9 313.45 334 313.45 333.05 313.45 332.4 314.15 331.75 314.85 331.75 315.75Z"/>
								</g>
							</g>
						</g>
					</g>
					<animate attributeName="display" repeatCount="indefinite" dur="1.92s" keyTimes="0;.896;.917;1" values="none;inline;none;none"/>
				</g>
			</g>
		</svg>

	<app></app>

</body>

</html>

Exception or Error

Invalid self-closing element in index HTML file: '<animate attributeName="display" repeatCount="indefinite" dur="1.92s" keyTimes="0;.896;.917;1" values="none;inline;none;none"/>'

Your Environment

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

Angular CLI: 18.2.6
Node: 20.12.2
Package Manager: npm 10.5.0
OS: darwin arm64

Angular: 18.2.6
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, language-service, material, material-moment-adapter
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1802.6
@angular-devkit/build-angular   18.2.6
@angular-devkit/core            18.2.6
@angular-devkit/schematics      18.2.6
@angular/flex-layout            15.0.0-beta.42
@schematics/angular             18.2.6
rxjs                            7.4.0
typescript                      5.4.5
zone.js                         0.14.10

Anything else relevant?

No

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions