Angularjs 社交登录按钮未在组件内部呈现,角度2

Angularjs 社交登录按钮未在组件内部呈现,角度2,angularjs,button,Angularjs,Button,我是Angular 2的新手,正在尝试在我的一个子组件中使用一些简单的登录按钮 这是呈现的脚本的顺序: <html> <head> <title>Title</title> <meta name="google-signin-client_id" content="xxxxxxx.apps.googleusercontent.com"> <script src="node_modules/es6-s

我是Angular 2的新手,正在尝试在我的一个子组件中使用一些简单的登录按钮

这是呈现的脚本的顺序:

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

标题
System.config({
套餐:{
应用程序:{
格式:'寄存器',
defaultExtension:'js'
}
}
});
System.import('app/main')
.then(null,console.error.bind(console));
加载。。。
如果我像这样将其放置在主组件中,则它根本不会渲染:

import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: '<div class="g-signin2" data-onsuccess="onSignIn"></div>'
})
export class AppComponent { }
从'angular2/core'导入{Component};
@组成部分({
选择器:“我的应用程序”,
模板:“”
})
导出类AppComponent{}
如果我将按钮直接放在index.html的主体中,则从js库呈现的按钮将正确显示

当我检查元素时,div就在那里,但似乎按钮在加载脚本之前试图渲染,因为它没有显示

你知道为什么会发生这种情况,以及我如何解决它吗

谢谢你的意见