javascript - 使用 PrimeNG 组件时出现问题(未找到指令注释)

Question

我在使用 PrimeNG 组件 (beta5) 和 angular2 (rc.1) 时遇到问题。当尝试使用任何组件时，例如菜单栏，我总是收到错误

No Directive annotation found on Menubar

我刚刚开始学习 Angular 和 PrimeNG，所以我可能做错了什么。但经过多次谷歌搜索后我找不到任何帮助。

上面好像没有注释是什么原因 菜单栏组件？我做错了什么？

请注意，我正在尝试使用纯 JavaScript，即不是 TypeScript。 (嗯，事实上，我正在使用 Python [via 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);

Answer 1

您应该查看 PrimeNG 的安装。这是一个测试版，使您能够使用 Angular2 中的组件。它与 PrimeUI 类似。

有关安装说明，请查看此链接 http://www.primefaces.org/primeng/#/setup

有一个快速入门和关于如何启动和运行它的很好的解释。不幸的是，AppComponent 是用 TypeScript 编写的，但它应该为您提供有关如何继续的很好的指导。

除此之外，没有必要在 index.html 中添加 @angular js 文件。它们通过 SystemJS 加载