Angular2 component in ExtJs6

AngularExt6.js

Ext.define('MyApp.modules.Angular', {
    singleton: true,

    dependeciesLoaded: false,

    showComponent: function() {
        var count = 5;

        if (!this.dependeciesLoaded) {
            var onLoad = function () {
                count--;

                if (count === 0) {
                    console.log('bootstrap ready');
                    this.dependeciesLoaded = true;

                    System.config({
                        defaultJSExtensions: true,
                          map: {
                            '@angular/core': 'libs/@angular/core/core.umd.js',
                            '@angular/compiler': 'libs/@angular/compiler/compiler.umd.js',
                            '@angular/common': 'libs/@angular/common/common.umd.js',
                            '@angular/platform-browser-dynamic': 'libs/@angular/platform-browser-dynamic/platform-browser-dynamic.umd.js',
                            '@angular/platform-browser': 'libs/@angular/platform-browser/platform-browser.umd.js',
                            rxjs: 'libs/rxjs',
                            'ngcomponents': 'ngcomponents'
                          }
                        });

                    Promise.all([
                        '@angular/platform-browser-dynamic', 
                        '@angular/core'].map(function (url) { 
                        return System['import'](url);
                    })).then(function (modules) {
                        var m1 = modules[0];
                        var m2 = modules[1];

                        var HelloComponent = function () {};

                        HelloComponent.annotations = [
                          new m2.Component({
                            selector: 'hello-cmp',
                            template: 'Hello World!'
                          })
                        ];

                        m1.bootstrap(HelloComponent);

                    });
                }
            };


            Ext.Loader.loadScript({
                url: 'libs/systemjs/dist/system-polyfills.js',
                onLoad: onLoad
            });
            Ext.Loader.loadScript({
                url: 'libs/systemjs/dist/system.src.js',
                onLoad: onLoad
            });
            Ext.Loader.loadScript({
                url: 'libs/es6-shim/es6-shim.js',
                onLoad: onLoad
            });
            Ext.Loader.loadScript({
                url: 'libs/reflect-metadata/Reflect.js',
                onLoad: onLoad
            });
            Ext.Loader.loadScript({
                url: 'libs/zone.js/dist/zone.js',
                onLoad: onLoad
            });
        }
    }
});

 Ext.define('MyApp.view.main.Main', {
    extend: 'Ext.panel.Panel',
    xtype: 'app-main',
    title: 'test',
    requires: [
        'Ext.plugin.Viewport',
        'MyApp.modules.Angular'
    ],

    items: [{
        xtype: 'button',
        text: 'click me',
        handler: function() {
            MyApp.modules.Angular.showComponent();
        }
    },{
        xtype: 'component',
        html: '<hello-cmp></hello-cmp>'
    }]
 });