primengコンポーネントを使用する際のトラブル

Question

angle2（rc.1）でprimengコンポーネント（beta5）を使用する際に問題があります。しようとすると コンポーネントを使用します。メニューバーには、私は常にエラー

メニューバー

に見つかりません指令注釈は、私はちょうどので、私はおそらく何か間違ったことをやっている角度とprimeng学び始めています。しかし、多くのグーグルの後、私は助けを見つけることができませんでした。

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

私はプレーンなJavaScriptを使用しようとしています。つまり、TypeScriptではありません。 （まあ、実際には、私は[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

あなたは、ルックaを取る必要がありますPrimeNGのインストール。これはAngular2でコンポーネントを使用できるベータ版です。これはPrimeUIに似ています。インストール手順については

は、クイックスタートし、起動して実行、それを取得する方法について良い説明があり、このリンクhttp://www.primefaces.org/primeng/#/setup

に確認してください。残念ながら、AppComponentはTypeScriptで書かれていますが、続行方法については十分な説明があります。

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