0

angular2 (rc.1) で PrimeNG コンポーネント (beta5) を使用すると問題が発生します。メニューバーなどのコンポーネントを使用しようとすると、常にエラーが発生します

メニューバーにディレクティブの注釈が見つかりません

angular と PrimeNG の学習を始めたばかりなので、おそらく何か間違ったことをしているのでしょう。しかし、何度もグーグルで調べた後、私は何の助けも見つけることができませんでした。

Menubar コンポーネントに注釈がないように見える理由は何ですか? 私は何を間違っていますか？

TypeScript ではなく、プレーンな JavaScript を使用しようとしていることに注意してください。(実際、私は [Brython 経由で] Python を使用していますが、それはまったく別の問題です。)

私の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いますが、続行する方法についての優れた指針となるはずです。

@angularそれに加えて、 .js ファイルを .xml 内に追加する必要はありませんindex.html。彼らはロードされますSystemJS

于 2016-05-10T10:08:34.210 に答える