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.

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

Angular falsely claims SVG support when it clearly doesn't. #33693

Joebeazelman opened this issue Nov 8, 2019 · 2 comments


Copy link

@Joebeazelman Joebeazelman commented Nov 8, 2019

I spent hours trying to find out why the compiler gave me this error message:

ncaught Error: Template parse errors:
'text' is not a known element:
1. If 'text' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("[ERROR ->]<text x="domPoint.x" y="domPoint.y" class="Rrrrr">{{textBlock}}</text>"): ng:///PresentationModule/TextElementComponent.html@0:0

I conducted numerous google searches and asked around on Gitter which led me to a series of red herrings. I eventually stumbled into the solution in a non-official Angular article by Tero Parviainen (@teropa) SVG AND CANVAS GRAPHICS IN ANGULAR 2. I had seen the article in other Google search results, but I ignored it because I'm using Angular 8 and I was told a lot had changed in Angular since version 2.

The answer turns out to be: <svg:text>. I assumed Angular 8 supports SVG and HTML equally, since this was heavily advertised. While you can have .SVG files as templates, they won’t work unless the markup is either enclosed within an <svg> tag or they are explicitly decorated with the svg: namespace. Why can’t the compiler infer the schema from the “.svg” suffix? Another gotcha is that you can’t bind to SVG parameters because they're not universally supported by all browsers. Consequently, you will need to add the “attr:” to hint the compiler that it’s an attribute, not a parameter.

Angular is supposed to be a framework to abstract these nasty details from the developer to increase productivity by reducing complexity. If you have to spend hours figuring out a leaky abstraction as in the aforementioned svg issue, then what’s the point of Angular? It’s just another layer of fecal matter upon layers of fecal matter that eventually petrifies under its own weight into matter too hard to comprehend.

Shame upon the Angular development team!


This comment has been minimized.

Copy link

@the-frontend-guy the-frontend-guy commented Nov 8, 2019

@Joebeazelman are you sure that the current version of angular you are working on is 8 ?? I didnt find any issues as such mentioned above. You can find the working here

@kara kara added the comp: core label Nov 8, 2019
@ngbot ngbot bot added this to the needsTriage milestone Nov 8, 2019

This comment has been minimized.

Copy link

@IgorMinar IgorMinar commented Nov 8, 2019

@Joebeazelman I'm sorry that you wasted a lot of time debugging the issue.

Angular's templates are expected to be html files and we never claimed that svg files are supported. SVG support as works as designed for SVG embedded into html.

The data binding in Angular always binds to properties unless you use the attr. syntax or some-attr="{{}}"-style interpolation in which case we bind to attributes. SVG doesn't support properties for some elements, and Angular magically pretending that it does would make matters only more confusing.

Lastly, I want to point out that I see a lot of frustration in your post, but I have to remind you that the language you are using is in violation of our code of conduct. The issue tracker is a place where we want to have a constructive discussion without unnecessary emotions, shaming, or worse.

I'm going to close this issue. If you have constructive suggestions on how to make the svg support more intuitive please open a new issue, use the issue template and adhere to our code of conduct.

Thank you for understanding.

@IgorMinar IgorMinar closed this Nov 8, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
4 participants
You can’t perform that action at this time.