Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
1 task done
cattermo opened this issue Sep 26, 2024 · 5 comments · Fixed by #28504
Closed
1 task done

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

cattermo opened this issue Sep 26, 2024 · 5 comments · Fixed by #28504
Labels
angular/build:application area: @angular/build freq1: low Only reported by a handful of users who observe it rarely severity5: regression type: bug/fix

Comments

@cattermo
Copy link

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
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Sep 26, 2024
@alan-agius4
fix(@angular/build): add animate to valid self-closing elements
c363cdc 
The `<animate>` tag, used for SVG animations, was incorrectly treated as a non-self-closing tag by the Angular build process. This resulted in errors during the build, as the parser expected a closing `</animate>` tag even when unnecessary.

Closes angular#28502
@alan-agius4 alan-agius4 mentioned this issue Sep 26, 2024
Merged
alan-agius4 added a commit that referenced this issue Sep 26, 2024
@alan-agius4
fix(@angular/build): add animate to valid self-closing elements
dd49949 
The `<animate>` tag, used for SVG animations, was incorrectly treated as a non-self-closing tag by the Angular build process. This resulted in errors during the build, as the parser expected a closing `</animate>` tag even when unnecessary.

Closes #28502
alan-agius4 added a commit that referenced this issue Sep 26, 2024
@alan-agius4
fix(@angular/build): add animate to valid self-closing elements
8274184 
The `<animate>` tag, used for SVG animations, was incorrectly treated as a non-self-closing tag by the Angular build process. This resulted in errors during the build, as the parser expected a closing `</animate>` tag even when unnecessary.

Closes #28502

(cherry picked from commit dd49949)
@nosaku
Copy link
Contributor

nosaku commented Sep 26, 2024

It's still giving error for below tags used in index.html. Should I open a new issue for this?

feFlood
feOffset
feGaussianBlur
feColorMatrix
feBlend

@nosaku
Copy link
Contributor

nosaku commented Sep 26, 2024

Seems there are many other SVG tags as per, https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feFlood

I guess we need to add all these? Shall I take it up and add?

@nosaku
Copy link
Contributor

nosaku commented Sep 26, 2024

@alan-agius4 Please check if this is ok...

https://github.com/nosaku/angular-cli/blob/svg-self-closing/packages/angular/build/src/utils/index-file/valid-self-closing-tags.ts

@nosaku
Copy link
Contributor

nosaku commented Sep 27, 2024

@alan-agius4 Please check if this is ok...

https://github.com/nosaku/angular-cli/blob/svg-self-closing/packages/angular/build/src/utils/index-file/valid-self-closing-tags.ts

@alan-agius4 Added new tags and created a PR, #28510

@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Oct 28, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
angular/build:application area: @angular/build freq1: low Only reported by a handful of users who observe it rarely severity5: regression type: bug/fix
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(@angular/build): add animate to valid self-closing elements alan-agius4/angular-cli
3 participants
@cattermo @nosaku @alan-agius4