Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[RC5 IVY] Nested SVG doesn't work anymore

See original GitHub issue

🐞 bug report

Affected Package

I think it’s in IVY …

Is this a regression?

YES. It is working when you disable IVY with Angular 9, and it’s working with Angular 8 (without Ivy)

Description

I have a project that generate a SVG to reflect the state of an hydraulic powerplant. There is a root <SVG> tag then Angular dynamically adds component into it, that are SVG as well.

The structure of the HTML is something like

<body>
<my-app>
  <svg>
    <g>
      <svg>
        <svg>
          <rect></rect>
        </svg>
      </svg>
    </g>
  </svg>
</my-app>
</body>

With IVY enabled, you can see the svg in the inspector but it is not rendered by the browser. If you disable IVY it works.

🔬 Minimal Reproduction

Since IVY is not supported by Stackblitz, here’s a repo : https://github.com/Yohandah/Nested-SVG-Angular-9-IVY

Steps :

Clone the repo
Install dependencies (npm install)
run ng serve
You can see a blank page, but if you inspect, you will see the SVG
Cancel ng serve
add the following to tsconfig.json

"compilerOptions": {.....},
"angularCompilerOptions": {
  "enableIvy": false
}

run ng serve
You can see the SVG produced (with your eyes, and in the inspector)

🔥 Exception or Error

there is no error

🌍 Your Environment

Angular Version:


Angular CLI: 9.0.0-rc.5
Node: 12.13.1
OS: win32 x64

Angular: 9.0.0-rc.5
... cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.0-rc.5
@angular-devkit/build-angular     0.900.0-rc.5
@angular-devkit/build-optimizer   0.900.0-rc.5
@angular-devkit/build-webpack     0.900.0-rc.5
@angular-devkit/core              9.0.0-rc.5
@angular-devkit/schematics        9.0.0-rc.5
@ngtools/webpack                  9.0.0-rc.5
@schematics/angular               9.0.0-rc.5
@schematics/update                0.900.0-rc.5
rxjs                              6.5.3
typescript                        3.6.4
webpack                           4.41.2

Issue Analytics

State:
Created 4 years ago
Comments:10 (5 by maintainers)

Top GitHub Comments

3reactions

Yohandahcommented, Feb 4, 2020

@AndrewKushnir The problem is resolved ! Thank you ! Looking forward to the final release of Angular 9

3reactions

karacommented, Dec 5, 2019

Looks like we aren’t adding the base-rectangle attribute in the Ivy case, which is what’s breaking the rendering. We should be adding attributes based on the selector when components are created dynamically

Top Results From Across the Web

Angular Ivy: a detailed introduction - DEV Community ‍ ‍

The post contains the thoughts of a preliminary investigation on how Angular works reading some parts of the source code, debugging a simple ......

Viewport of nested svg doesn't work properly - Stack Overflow

I want to position nested SVG without margin. In this situation, I can find out that there's too much margin, and if I...

ng-packagr/CHANGELOG.md - UNPKG

246, * add link to Angular guide when showing ivy publish warning ... 656, * analyses of secondary entrypoints doesn't work with deep...

Untitled

U23 world championships 2015, Hbbt2, Vagabunden der berge, Torta biscotto oreo, Headphones not working on windows 7, Pool cartridge, Grunion gazette contact ...

Untitled

Svg group class, Indicator kriging definition, Tangerudbakken olav sykdom, ... Hackintosh laptop keyboard not working, Sterktes en zwaktes persoon, ...