Angular: использование ComponentFactoryResolver для динамического создания компонентов, рендеринга внутри SVG

У меня есть компонент, который отображает DOM, который должен находиться внутри тега svg:

import { Component, Input } from '@angular/core';

@Component({
  selector: 'g[hello]',
  template: `<svg:text x = "50%" y = "50%" text-anchor = "middle">Hello, {{name}}</svg:text>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent  {
  @Input() name: string;
}

Когда я создаю его статически, все работает нормально (текст виден на странице):

<svg>
  <svg:g hello name = "Static component"></svg:g>
</svg>

Генерируется следующий DOM:

<svg _ngcontent-iej-c129 = "">
  <g _ngcontent-iej-c129 = "" hello = "" name = "Static component" _nghost-iej-c130 = "" ng-reflect-name = "Static component">
    <text _ngcontent-iej-c130 = "" text-anchor = "middle" x = "50%" y = "50%">
      Hello, Static component
    </text>
  </g>
</svg>

Проблема начинается, когда я пытаюсь создать экземпляр компонента динамически, используя ComponentFactoryResolver:

<svg>
  <ng-container #container></ng-container>
</svg>

import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver, OnInit } from '@angular/core';
import { HelloComponent } from './hello.component'

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  @ViewChild('container', {read: ViewContainerRef, static: true}) container: ViewContainerRef;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {

  }

  ngOnInit() {
    // Instantiating HelloComponent dynamically
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(HelloComponent)
    const componentRef = this.container.createComponent(componentFactory);
    componentRef.instance.name = 'Dynamic component'
  }
}

Созданный DOM выглядит нормально, но по какой-то причине текст не виден на странице:

<svg _ngcontent-iej-c129 = "">
  <!---->
  <g hello = "" _nghost-iej-c130 = "">
    <text _ngcontent-iej-c130 = "" text-anchor = "middle" x = "50%" y = "50%">
      Hello, Dynamic component
    </text>
  </g>
</svg>

См. Воспроизведение на stackblitz