Social sign-in buttons not rendered inside component, Angular 2

I'm pretty new to Angular 2 and am trying to get some simple sign-in buttons to work inside one of my child-components.

This is the order of the scripts rendered:

 <html>
  <head>
    <title>Title</title>
    <meta name="google-signin-client_id" content="xxxxxxx.apps.googleusercontent.com">

    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
    <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>

    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>

    <script src="https://apis.google.com/js/platform.js" async defer></script>

    <script>
      System.config({
        packages: {
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/main')
            .then(null, console.error.bind(console));
    </script>
  </head>
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

If I place it inside my main-component like so, it is not rendering at all:

import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: '<div class="g-signin2" data-onsuccess="onSignIn"></div>'
})
export class AppComponent { }

If I instead place the button directly in the body of index.html, the button rendered from the js-library is displayed correctly.

The div is there when I inspect the element, but it seems that the button is trying to render before the script is loaded, since it is not displaying.

Any idea as to why this is happening and how I can fix it?

Thanks for any input!