Проблема с использованием компонентов PrimeNG (аннотация директивы не найдена)

У меня проблемы с использованием компонентов PrimeNG (beta5) с angular2 (rc.1). При попытке использовать любой компонент, например. меню, я всегда получаю ошибку

Аннотации директив не найдены в строке меню

Я только начал изучать angular и PrimeNG, поэтому, вероятно, я делаю что-то не так. Но после долгих гуглений я не смог найти никакой помощи.

В чем причина того, что в компоненте Menubar нет аннотаций? Что я делаю не так?

Обратите внимание, что я пытаюсь использовать обычный javascript, то есть не TypeScript. (Ну, на самом деле я использую Python [через Brython], но это совсем другое дело.)

Мой index.html начинается так:

<script src="node_modules/es6-shim/es6-shim.min.js"></script>

<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>

<script src="node_modules/rxjs/bundles/Rx.umd.js"></script>
<script src="node_modules/@angular/core/core.umd.js"></script>
<script src="node_modules/@angular/common/common.umd.js"></script>
<script src="node_modules/@angular/compiler/compiler.umd.js"></script>
<script src="node_modules/@angular/platform-browser/platform-browser.umd.js"></script>
<script src="node_modules/@angular/platform-browser-dynamic/platform-browser-dynamic.umd.js"></script>

<!-- SystemJS -->
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="app/systemjs.config.js"></script>

<!-- PRIME NG-->
<link rel="stylesheet" type="text/css" href="node_modules/primeui/themes/omega/theme.css" />
<link rel="stylesheet" type="text/css" href="assets/font-awesome-4.6.2/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="node_modules/primeui/primeui-ng-all.min.css" />

 <script src='app/main.js'></script>

Мой app/main.js прост:

(function(app) {
  document.addEventListener('DOMContentLoaded', function() {
    System.import("primeng/primeng").then(function(primeng) {
        app.AppComponent =
            ng.core.Component({
                selector: 'my-app',
                template: '<h1>My First Angular 2 App</h1>',
                directives: [primeng.Menubar]
            })
            .Class({
                constructor: function() {}
            });
        ng.platformBrowserDynamic.bootstrap(app.AppComponent);
    });
  });
})(window.app || (window.app = {}));

Сценарий app/system.config.js содержит:

(function(global) {

   // map tells the System loader where to look for things
var map = {
    'app':                        'app', // 'dist',
    'rxjs':                       'node_modules/rxjs',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    '@angular':                   'node_modules/@angular',
    'primeng':                    'node_modules/primeng'
};

// packages tells the System loader how to load when no filename and/or no extension
var packages = {
//         'app':                        { main: 'boot.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { defaultExtension: 'js' },
    'primeng':                    { defaultExtension: 'js' }
};

var packageNames = [
    '@angular/common',
    '@angular/compiler',
    '@angular/core',
    '@angular/http',
    '@angular/platform-browser',
    '@angular/platform-browser-dynamic',
    '@angular/router',
    '@angular/router-deprecated',
    '@angular/testing',
    '@angular/upgrade',
];

// add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
packageNames.forEach(function(pkgName) {
    packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});

var config = {
    map: map,
    packages: packages
}

// filterSystemConfig - index.html's chance to modify config before we register it.
if (global.filterSystemConfig) { global.filterSystemConfig(config); }

System.config(config);

})(this);