SVGs in <object> are not shown in Angular 2 component in IE

An embedded SVG in an <object> tag is not shown in IE 11 and Edge. They only display its innerHTML ("SVG no supported") as if they would not support the tag at all.

However, both do show embedded SVGs when not used in conjunction with Angular components. I suppose this has do with Angular's shadowRoot emulation. (IE doesn't support Shadow DOM yet)

Funnily enough, if I activate IE 10 emulation within IE 11, the SVG is shown properly.

Source code: http://plnkr.co/edit/ZKRIMans0qgXVyRkjKcP?p=preview

app.component.ts

import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: '<object data="https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg" type="image/svg+xml">SVG not supported</object>'
})
export class AppComponent { }

main.ts:

import {bootstrap}    from 'angular2/platform/browser';
import {AppComponent} from './app.component';

bootstrap(AppComponent);

index.html:

<!DOCTYPE html>
<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">    
    <link rel="stylesheet" href="styles.css">

    <!-- 1. Load libraries -->
    <!-- IE required polyfills, in this exact order -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
    <script src="https://npmcdn.com/angular2@2.0.0-beta.9/es6/dev/src/testing/shims_for_IE.js"></script>   

    <script src="https://code.angularjs.org/2.0.0-beta.9/angular2-polyfills.js"></script>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://npmcdn.com/typescript@1.8.2/lib/typescript.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.9/Rx.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.9/angular2.dev.js"></script>

    <!-- 2. Configure SystemJS -->
    <script>
      System.config({
        transpiler: 'typescript', 
        typescriptOptions: { emitDecoratorMetadata: true }, 
        packages: {'app': {defaultExtension: 'ts'}} 
      });
      System.import('app/main')
            .then(null, console.error.bind(console));
    </script>
  </head>

  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>


<!-- 
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->

SVGs in <object> are not shown in Angular 2 component in IE

1 Answers