EOF error when using svg:title tag in component template

[julianess]

🐞 Bug report

Command

- [ ] new
- [X] build
- [X] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Is this a regression?

Yes, the previous version in which this bug was not present was: 7.x.x

Description

Using the svg title tag in a different component (using the namespace like svg:title) than the svg root tag component will cause a template parse error. (using title inside a component with svg root tag works fine)
This is working fine:

<!-- demo.component.ts -->
<svg>
    <g>
        <rect x="10" y="10" width="50" height="50">
            <title>I'm a title tag</title>
        </rect>
    </g>
</svg>

While this isn't working:

<!-- demo.component.ts -->
<svg>
    <g svg-title-test></g>
</svg>

<!-- svg-title-test.component.ts -->
<svg:rect x="10" y="10" width="50" height="50">
    <!-- Commenting this line out will show the rect -->
    <svg:title>I'm a title tag</svg:title>
</svg:rect>

🔬 Minimal Reproduction

1. Creating a new angular app (ng new)
2. Creating a component with a svg root tag inside
3. Creating a component with a rect and a title inside the rect (using namespace prefix svg:rect and svg:title)

I've prepared a working example of this issue on stackblitz:
https://stackblitz.com/edit/angular-rqi6k5

🔥 Exception or Error

Error in
node_modules/@angular/compiler@8.0.0/bundles/compiler.umd.js (2479:21)
Template parse errors:
Unexpected character "EOF" ("ommenting this line out will show the rect -->
I'm a title tag
[ERROR ->]"): ng:///AppModule/SvgTitleTestComponent.html@3:11

🌍 Your Environment

Angular CLI: 8.0.1
Node: 10.15.3
OS: win32 x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.800.1
@angular-devkit/core         8.0.1
@angular-devkit/schematics   8.0.1
@schematics/angular          8.0.1
@schematics/update           0.800.1
rxjs                         6.4.0

Anything else relevant?

[mgechev]

Seems like this issue belongs to the angular/angular monorepo // cc @alan-agius4

[alexzuza]

Angular tokenizer takes into account only tagName when trying to get the type of a token.

angular/packages/compiler/src/ml_parser/lexer.ts

Line 511 in 304a12f

const contentTokenType = this._getTagDefinition(tagName).contentType;

The title tag has predefined mapping

angular/packages/compiler/src/ml_parser/html_tags.ts

Line 104 in 018477e

'title': new HtmlTagDefinition({contentType: TagContentType.ESCAPABLE_RAW_TEXT}),

So for svg:title we get TagContentType.ESCAPABLE_RAW_TEXT while it should be TagContentType.PARSABLE_DATA

[PostImpatica]

Is there any workaround?

[julianess]

I've searched a lot to get a workaround, but it simply seems to be not possible currently. I've had to comment out those elements in our product to get the compiler work again

[epelaic]

Hello,
I just find a workaround.
My svg graphics use svg:*** namespace and svg:title
ex:
<svg:g> <svg:title>My Title</svg:title> </svg:g>
And after upgraded to Angular 8 (from Angular 7.x), il breaks with the same template parse error as above.
After reading this post, I try to remove the svg namespace of the title tag as it will be now parsed like an HTML element and not a SVG element. And it's works (ng serve --aot for now, don't try yet in prod build).

<svg:g> <title>My Title</title> </svg:g>

Thanks alexzuza for the help of finding the code change.

[angular-automatic-lock-bot]

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.}