0

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

在菜单栏上找不到指令注释

我刚刚开始学习 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);
4

1 回答 1

1

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

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

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

除此之外，不需要在 .js 文件中添加@angularjs 文件index.html。他们通过加载SystemJS

于 2016-05-10T10:08:34.210 回答